/* ══════════════════════════════════════════════════
   SkolarhHive — Public CSS
   Brand: Light sky blue #0ea5d9 + White
   Mobile-first, responsive LMS frontend
══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* ── Reset & Root ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --skh-primary:      #0ea5d9;
  --skh-primary-dark: #0369a1;
  --skh-primary-light:#e0f2fe;
  --skh-primary-mid:  #bae6fd;
  --skh-white:        #ffffff;
  --skh-bg:           #f0f9ff;
  --skh-border:       #bae6fd;
  --skh-text:         #0c4a6e;
  --skh-muted:        #5a8099;
  --skh-green:        #10b981;
  --skh-yellow:       #f59e0b;
  --skh-red:          #ef4444;
  --skh-navy:         #0c4a6e;
  --skh-radius:       14px;
  --skh-shadow:       0 2px 16px rgba(14,165,217,0.10);
  --skh-shadow-md:    0 6px 24px rgba(14,165,217,0.16);
  font-size: 16px;
}

body.skh-page {
  font-family: 'Poppins', sans-serif;
  background: var(--skh-bg);
  color: var(--skh-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ────────────────────────────────── */
.skh-app {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 80px;
  min-height: 100vh;
  background: var(--skh-white);
  position: relative;
}

/* ── Top Bar ──────────────────────────────────── */
.skh-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--skh-white);
  border-bottom: 2px solid var(--skh-primary-light);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(14,165,217,0.08);
}

.skh-top-logo {
  font-size: 17px;
  font-weight: 800;
  color: var(--skh-primary);
  letter-spacing: -0.5px;
}

.skh-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.skh-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--skh-primary-light);
  border-radius: 99px;
  padding: 4px 12px 4px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--skh-primary-dark);
}

.skh-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--skh-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.skh-logout-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--skh-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--skh-border);
  transition: all 0.2s;
}
.skh-logout-btn:hover { color: var(--skh-red); border-color: var(--skh-red); }

/* ── Notifications ────────────────────────────── */
.skh-notif-wrap { position: relative; }

.skh-notif-btn {
  background: var(--skh-primary-light);
  border: none;
  border-radius: 99px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.skh-notif-badge {
  background: var(--skh-red);
  color: white;
  font-size: 10px;
  font-weight: 800;
  border-radius: 99px;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  font-family: 'Space Mono', monospace;
}

.skh-notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--skh-white);
  border: 2px solid var(--skh-border);
  border-radius: 16px;
  box-shadow: var(--skh-shadow-md);
  z-index: 200;
  max-height: 380px;
  overflow-y: auto;
}

.skh-nd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--skh-border);
  font-size: 13px;
}

.skh-link-btn {
  background: none;
  border: none;
  color: var(--skh-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.skh-notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 13px;
}
.skh-notif-item:hover { background: var(--skh-bg); }
.skh-notif-item.skh-unread { background: #f0f9ff; border-left: 3px solid var(--skh-primary); }
.skh-ni-msg  { font-size: 12px; color: var(--skh-muted); margin-top: 2px; }
.skh-ni-time { font-size: 11px; color: #94a3b8; margin-top: 3px; font-family: 'Space Mono', monospace; }

/* ── Page Head ────────────────────────────────── */
.skh-page-head {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.skh-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--skh-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--skh-primary-light);
  border-radius: 99px;
  transition: all 0.2s;
}
.skh-back:hover { background: var(--skh-primary-mid); }

.skh-page-head h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--skh-navy);
  flex: 1;
}

/* ── Greeting Banner ──────────────────────────── */
.skh-greeting-banner {
  margin: 0 16px 16px;
  background: linear-gradient(135deg, var(--skh-primary), var(--skh-primary-dark));
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  box-shadow: 0 4px 20px rgba(14,165,217,0.25);
}

.skh-greeting-name {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.skh-greeting-sub {
  font-size: 13px;
  opacity: 0.85;
  font-weight: 400;
}

/* ── Stat Row ─────────────────────────────────── */
.skh-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.skh-stat-card {
  background: var(--skh-white);
  border: 2px solid var(--skh-border);
  border-radius: 16px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--skh-shadow);
  transition: all 0.2s;
}
.skh-stat-card:hover { border-color: var(--skh-primary); transform: translateY(-2px); }

.skh-sc-icon { font-size: 22px; margin-bottom: 4px; }
.skh-sc-val  { font-size: 22px; font-weight: 900; color: var(--skh-primary); line-height: 1; margin-bottom: 3px; }
.skh-sc-lbl  { font-size: 10px; font-weight: 600; color: var(--skh-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Section Title ────────────────────────────── */
.skh-section-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--skh-navy);
  padding: 8px 16px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Subject Pills ────────────────────────────── */
.skh-quick-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.skh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: white;
  border: 2px solid var(--pc, var(--skh-primary));
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc, var(--skh-primary));
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.skh-pill:hover {
  background: var(--pc, var(--skh-primary));
  color: white;
  transform: translateY(-1px);
}

/* ── List Items ───────────────────────────────── */
.skh-list { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }

.skh-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--skh-white);
  border: 2px solid var(--skh-border);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: var(--skh-text);
  transition: all 0.2s;
  cursor: pointer;
}
.skh-list-item:hover { border-color: var(--skh-primary); box-shadow: var(--skh-shadow); }
.skh-list-item.skh-urgent  { border-color: var(--skh-red);    background: #fff5f5; }
.skh-list-item.skh-soon    { border-color: var(--skh-yellow);  background: #fffbeb; }
.skh-list-item.skh-graded  { border-color: var(--skh-green);  background: #f0fdf4; }
.skh-list-item.skh-submitted{ border-color: var(--skh-primary); background: #f0f9ff; }

.skh-li-icon { font-size: 26px; flex-shrink: 0; }
.skh-li-info { flex: 1; min-width: 0; }
.skh-li-title { font-size: 14px; font-weight: 700; color: var(--skh-navy); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skh-li-sub   { font-size: 12px; color: var(--skh-muted); font-weight: 400; }
.skh-li-arrow { font-size: 18px; color: var(--skh-primary); flex-shrink: 0; }

/* ── Test Card ────────────────────────────────── */
.skh-test-card {
  margin: 0 16px 10px;
  background: var(--skh-white);
  border: 2px solid var(--skh-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--skh-shadow);
  transition: all 0.2s;
}
.skh-test-card:hover { border-color: var(--skh-primary); }
.skh-tc-info { flex: 1; }
.skh-tc-title { font-size: 14px; font-weight: 700; color: var(--skh-navy); margin-bottom: 4px; }
.skh-tc-meta  { font-size: 12px; color: var(--skh-muted); }
.skh-tc-score { font-size: 13px; font-weight: 700; margin-top: 4px; }

/* ── Quiz UI ──────────────────────────────────── */
.skh-quiz-tabs {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
}

.skh-qtab {
  padding: 7px 16px;
  border-radius: 99px;
  border: 2px solid var(--skh-border);
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--skh-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: 'Poppins', sans-serif;
}
.skh-qtab:hover { border-color: var(--skh-primary); color: var(--skh-primary); }
.skh-qtab.active { background: var(--skh-primary); border-color: var(--skh-primary); color: white; }

#skh-quiz-area { padding: 0 16px 8px; }

.skh-quiz-card {
  background: white;
  border: 2px solid var(--skh-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--skh-shadow);
}

.skh-qbadge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: 'Space Mono', monospace;
}
.skh-qbadge-math { background: #dbeafe; color: #1e40af; }
.skh-qbadge-gk   { background: #dcfce7; color: #166534; }
.skh-qbadge-ai   { background: #ede9fe; color: #5b21b6; }

.skh-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--skh-navy);
  margin-bottom: 16px;
  line-height: 1.5;
}

.skh-options { display: flex; flex-direction: column; gap: 8px; }

.skh-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--skh-bg);
  border: 2px solid var(--skh-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--skh-text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.2s;
  font-family: 'Poppins', sans-serif;
}
.skh-opt:hover:not(:disabled) { border-color: var(--skh-primary); background: var(--skh-primary-light); }
.skh-opt:disabled { cursor: default; }
.skh-opt.skh-correct { background: #dcfce7; border-color: #16a34a; color: #166534; }
.skh-opt.skh-wrong   { background: #fee2e2; border-color: #dc2626; color: #991b1b; }

.skh-opt-letter {
  width: 28px; height: 28px;
  background: var(--skh-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.skh-explanation {
  margin-top: 14px;
  padding: 12px;
  background: #fef9c3;
  border: 1.5px solid #fbbf24;
  border-radius: 10px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
  font-weight: 500;
}

.skh-quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.skh-quiz-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--skh-muted);
  font-family: 'Space Mono', monospace;
}

.skh-score-card {
  background: linear-gradient(135deg, var(--skh-primary), var(--skh-primary-dark));
  border-radius: 20px;
  padding: 32px 20px;
  text-align: center;
  color: white;
}
.skh-score-emoji { font-size: 52px; margin-bottom: 12px; }
.skh-score-val   { font-size: 42px; font-weight: 900; margin-bottom: 6px; }
.skh-score-msg   { font-size: 15px; font-weight: 600; opacity: 0.9; margin-bottom: 16px; }

/* ── Join Card ────────────────────────────────── */
.skh-join-card {
  margin: 0 16px 16px;
  background: white;
  border: 2px solid var(--skh-border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--skh-shadow);
}
.skh-join-card h3 { font-size: 16px; font-weight: 700; color: var(--skh-navy); margin-bottom: 8px; }
.skh-join-card p  { font-size: 13px; color: var(--skh-muted); margin-bottom: 12px; }

.skh-join-row {
  display: flex;
  gap: 10px;
}

.skh-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--skh-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  color: var(--skh-text);
  outline: none;
  transition: border-color 0.2s;
  background: var(--skh-white);
}
.skh-input:focus { border-color: var(--skh-primary); box-shadow: 0 0 0 3px rgba(14,165,217,0.1); }

.skh-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--skh-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  color: var(--skh-text);
  outline: none;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.2s;
}
.skh-textarea:focus { border-color: var(--skh-primary); box-shadow: 0 0 0 3px rgba(14,165,217,0.1); }

.skh-fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.skh-fg label { font-size: 12px; font-weight: 700; color: var(--skh-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Frontend Buttons ─────────────────────────── */
.skh-frontend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--skh-primary), var(--skh-primary-dark));
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(14,165,217,0.25);
  white-space: nowrap;
}
.skh-frontend-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14,165,217,0.35); color: white; }
.skh-frontend-btn:active { transform: translateY(0); }
.skh-frontend-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.skh-btn-sm-green {
  background: linear-gradient(135deg, var(--skh-green), #059669);
  box-shadow: 0 2px 8px rgba(16,185,129,0.25);
  padding: 8px 14px;
  font-size: 13px;
}

.skh-btn-sm-outline {
  background: white;
  color: var(--skh-primary);
  border: 2px solid var(--skh-primary);
  box-shadow: none;
  padding: 8px 14px;
  font-size: 13px;
}
.skh-btn-sm-outline:hover { background: var(--skh-primary-light); color: var(--skh-primary-dark); }

.skh-btn-outline {
  background: white;
  color: var(--skh-primary);
  border: 2px solid var(--skh-primary);
  box-shadow: none;
}
.skh-btn-outline:hover { background: var(--skh-primary-light); }

.skh-btn-green {
  background: linear-gradient(135deg, var(--skh-green), #059669);
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}

.skh-btn-complete {
  background: linear-gradient(135deg, var(--skh-green), #059669);
  width: 100%;
  padding: 14px;
  font-size: 15px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(16,185,129,0.25);
}

/* ── Chapter UI ───────────────────────────────── */
.skh-ch-hero {
  margin: 0 16px 16px;
  border-radius: 20px;
  padding: 24px 20px;
  color: white;
  position: relative;
  overflow: hidden;
}
.skh-ch-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}
.skh-ch-hero-num   { font-size: 12px; font-weight: 700; opacity: 0.8; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; font-family: 'Space Mono', monospace; }
.skh-ch-hero-title { font-size: 22px; font-weight: 900; margin-bottom: 8px; line-height: 1.2; }
.skh-ch-hero-desc  { font-size: 14px; opacity: 0.85; font-weight: 300; margin-bottom: 10px; }
.skh-ch-hero-meta  { font-size: 12px; opacity: 0.75; font-family: 'Space Mono', monospace; }

.skh-ch-prog-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
}
.skh-pb-done     { background: rgba(16,185,129,0.4); }
.skh-pb-progress { background: rgba(245,158,11,0.4); }

.skh-ch-card {
  margin: 0 16px 14px;
  background: white;
  border: 2px solid var(--skh-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--skh-shadow);
}
.skh-ch-card h3 { font-size: 15px; font-weight: 800; color: var(--skh-navy); margin-bottom: 12px; }
.skh-ch-card h4 { font-size: 14px; font-weight: 700; color: var(--skh-navy); margin-bottom: 10px; }

.skh-topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skh-topic-chip {
  padding: 4px 12px;
  background: var(--skh-primary-light);
  color: var(--skh-primary-dark);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}

.skh-subject-tag {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
}

.skh-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: 12px;
  overflow: hidden;
}
.skh-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.skh-content-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--skh-text);
}
.skh-content-body h1,.skh-content-body h2,.skh-content-body h3 { color: var(--skh-navy); margin: 12px 0 6px; }
.skh-content-body p  { margin-bottom: 10px; }
.skh-content-body ul,.skh-content-body ol { padding-left: 20px; margin-bottom: 10px; }
.skh-content-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.skh-content-body td,.skh-content-body th { border: 1px solid var(--skh-border); padding: 8px 10px; }
.skh-content-body th { background: var(--skh-primary-light); font-weight: 700; }

.skh-pdf-embed { width: 100%; height: 500px; border-radius: 10px; border: 1px solid var(--skh-border); }

/* ── Accordion ────────────────────────────────── */
.skh-accordion { display: flex; flex-direction: column; gap: 8px; }

.skh-acc-item { border: 2px solid var(--skh-border); border-radius: 12px; overflow: hidden; }

.skh-acc-hdr {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--skh-bg);
  border: none;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--skh-navy);
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  line-height: 1.4;
}
.skh-acc-hdr:hover { background: var(--skh-primary-light); }
.skh-acc-arr { color: var(--skh-primary); flex-shrink: 0; font-size: 11px; margin-top: 2px; }

.skh-acc-body { padding: 14px; background: white; display: flex; flex-direction: column; gap: 10px; }

.skh-answer-reveal {}
.skh-show-ans-btn {
  background: var(--skh-primary-light);
  border: 2px solid var(--skh-primary);
  border-radius: 8px;
  color: var(--skh-primary-dark);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s;
}
.skh-show-ans-btn:hover { background: var(--skh-primary); color: white; }

.skh-answer-box {
  margin-top: 8px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  font-size: 13px;
  color: #166534;
  font-weight: 600;
}

.skh-practice-row { display: flex; gap: 8px; }
.skh-practice-row .skh-input { flex: 1; }

.skh-check-result { font-size: 13px; font-weight: 600; min-height: 18px; }
.skh-pr-ok   { color: var(--skh-green); }
.skh-pr-err  { color: var(--skh-red); }
.skh-pr-warn { color: var(--skh-yellow); }

/* ── Complete Wrap ────────────────────────────── */
.skh-complete-wrap { padding: 8px 16px 16px; }

/* ── Assignment ───────────────────────────────── */
.skh-meta-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--skh-primary-light);
  color: var(--skh-primary-dark);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}

.skh-questions-block { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.skh-q-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--skh-bg);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.skh-q-num {
  min-width: 24px; height: 24px;
  background: var(--skh-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.skh-graded-card { border-color: var(--skh-green) !important; background: #f0fdf4 !important; }
.skh-grade-score { font-size: 36px; font-weight: 900; color: var(--skh-green); margin: 8px 0; }
.skh-remarks { font-size: 13px; color: #166534; margin-top: 8px; padding: 10px; background: white; border-radius: 8px; border: 1px solid #86efac; }

/* ── Test UI ──────────────────────────────────── */
.skh-test-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 16px 8px;
  gap: 12px;
}
.skh-test-title { font-size: 17px; font-weight: 800; color: var(--skh-navy); margin-bottom: 4px; }
.skh-test-meta  { font-size: 12px; color: var(--skh-muted); }

.skh-timer {
  background: var(--skh-navy);
  color: white;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.skh-test-progress-bar {
  height: 4px;
  background: var(--skh-border);
  margin: 0 16px 12px;
  border-radius: 99px;
  overflow: hidden;
}
.skh-tpb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--skh-primary), var(--skh-green));
  border-radius: 99px;
  transition: width 0.3s ease;
}

.skh-question-card {
  margin: 0 16px 16px;
  background: white;
  border: 2px solid var(--skh-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--skh-shadow);
}

.skh-qc-counter {
  font-size: 12px;
  font-weight: 700;
  color: var(--skh-muted);
  margin-bottom: 10px;
  font-family: 'Space Mono', monospace;
}
.skh-qc-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--skh-navy);
  line-height: 1.5;
  margin-bottom: 16px;
}

.skh-options-list { display: flex; flex-direction: column; gap: 8px; }

.skh-opt-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--skh-bg);
  border: 2px solid var(--skh-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.skh-opt-label:hover { border-color: var(--skh-primary); background: var(--skh-primary-light); }
.skh-opt-label.selected { border-color: var(--skh-primary); background: var(--skh-primary-light); }
.skh-opt-radio { display: none; }
.skh-opt-l {
  width: 28px; height: 28px;
  background: var(--skh-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.skh-opt-t { font-size: 14px; font-weight: 500; color: var(--skh-text); flex: 1; }

/* ── Test Result ──────────────────────────────── */
.skh-result-hero {
  margin: 0 16px 16px;
  border-radius: 22px;
  padding: 32px 20px;
  text-align: center;
  color: white;
}
.skh-rh-emoji { font-size: 52px; margin-bottom: 10px; }
.skh-rh-score { font-size: 36px; font-weight: 900; margin-bottom: 4px; }
.skh-rh-pct   { font-size: 20px; font-weight: 700; opacity: 0.9; margin-bottom: 8px; }
.skh-rh-msg   { font-size: 15px; font-weight: 600; opacity: 0.85; margin-bottom: 6px; }
.skh-rh-rank  { font-size: 14px; font-weight: 700; background: rgba(255,255,255,0.2); display: inline-block; padding: 4px 14px; border-radius: 99px; margin-top: 6px; }

.skh-result-summary {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 16px 16px;
  padding: 14px;
  background: white;
  border: 2px solid var(--skh-border);
  border-radius: 14px;
  box-shadow: var(--skh-shadow);
}
.skh-rs-item { font-size: 14px; font-weight: 700; }

/* ── Progress UI ──────────────────────────────── */
.skh-prog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
.skh-prog-item:last-child { border: none; }
.skh-pi-icon { font-size: 24px; flex-shrink: 0; }
.skh-pi-info { flex: 1; min-width: 0; }
.skh-pi-title{ font-size: 13px; font-weight: 700; color: var(--skh-navy); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skh-pi-time { font-size: 11px; color: var(--skh-muted); margin-top: 3px; }

.skh-prog-bar { height: 6px; background: var(--skh-border); border-radius: 99px; overflow: hidden; }
.skh-pb-fill  { height: 100%; border-radius: 99px; transition: width 0.6s ease; }

/* ── Subjects Page ────────────────────────────── */
.skh-grade-filter {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.skh-grade-filter::-webkit-scrollbar { display: none; }

.skh-gf-btn {
  padding: 6px 14px;
  border-radius: 99px;
  border: 2px solid var(--skh-border);
  background: white;
  font-size: 12px;
  font-weight: 700;
  color: var(--skh-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.skh-gf-btn:hover { border-color: var(--skh-primary); color: var(--skh-primary); }
.skh-gf-btn.active { background: var(--skh-primary); border-color: var(--skh-primary); color: white; }

.skh-subject-section {
  margin: 0 16px 16px;
  background: white;
  border: 2px solid var(--sc, var(--skh-border));
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--skh-shadow);
}

.skh-ss-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.skh-ss-icon  { font-size: 32px; }
.skh-ss-name  { font-size: 16px; font-weight: 800; color: var(--skh-navy); }
.skh-ss-range { font-size: 11px; color: var(--skh-muted); font-family: 'Space Mono', monospace; margin-top: 2px; }

.skh-sub-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.skh-ssc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--skh-bg);
  border: 2px solid var(--sc, var(--skh-border));
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
  text-align: center;
}
.skh-ssc:hover { border-color: var(--sc); background: white; transform: translateY(-2px); }
.skh-ssc-icon  { font-size: 24px; }
.skh-ssc-name  { font-size: 12px; font-weight: 700; color: var(--skh-navy); }
.skh-ssc-count { font-size: 10px; color: var(--skh-muted); font-family: 'Space Mono', monospace; }

.skh-ch-list-inline { display: flex; flex-direction: column; gap: 6px; }

.skh-ch-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--skh-bg);
  border: 1.5px solid var(--skh-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--skh-text);
  transition: all 0.2s;
}
.skh-ch-link:hover { border-color: var(--skh-primary); background: var(--skh-primary-light); }
.skh-ch-num {
  width: 30px; height: 30px;
  background: var(--skh-primary);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.skh-ch-link-info { flex: 1; }
.skh-ch-link-title { font-size: 13px; font-weight: 700; color: var(--skh-navy); margin-bottom: 2px; }
.skh-ch-link-sub   { font-size: 11px; color: var(--skh-muted); }

/* ── Slide Panel ──────────────────────────────── */
.skh-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
}

.skh-slide-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(400px, 100vw);
  background: white;
  z-index: 400;
  overflow-y: auto;
  box-shadow: -4px 0 30px rgba(0,0,0,0.15);
  animation: skh-slide-in 0.3s ease;
}

@keyframes skh-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.skh-sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 2px solid var(--skh-border);
  background: white;
  position: sticky;
  top: 0;
  z-index: 1;
}
.skh-sp-header h3 { font-size: 17px; font-weight: 800; color: var(--skh-navy); margin: 0; }
.skh-sp-close {
  background: var(--skh-bg);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skh-sp-header + div { padding: 14px; display: flex; flex-direction: column; gap: 8px; }

/* ── Quick Actions (Teacher/Admin) ────────────── */
.skh-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}

.skh-qa-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  background: white;
  border: 2px solid var(--skh-border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--skh-text);
  transition: all 0.2s;
  text-align: center;
  box-shadow: var(--skh-shadow);
}
.skh-qa-card:hover { border-color: var(--qc, var(--skh-primary)); transform: translateY(-3px); box-shadow: var(--skh-shadow-md); }
.skh-qa-card span  { font-size: 28px; }
.skh-qa-card div   { font-size: 11px; font-weight: 700; color: var(--skh-muted); }

/* ── Leaderboard ──────────────────────────────── */
.skh-lb-filter { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
.skh-lb-filter::-webkit-scrollbar { display: none; }

.skh-lb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: white;
}
.skh-lb-item:first-child { background: linear-gradient(135deg, #fef3c7, #fff); border-radius: 14px 14px 0 0; }
.skh-lb-rank  { font-size: 20px; min-width: 36px; text-align: center; }
.skh-lb-name  { flex: 1; font-size: 14px; font-weight: 700; color: var(--skh-navy); }
.skh-lb-score { font-size: 16px; font-weight: 900; color: var(--skh-primary); font-family: 'Space Mono', monospace; }

/* ── Auth Forms ───────────────────────────────── */
.skh-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(160deg, var(--skh-primary-light), var(--skh-primary-mid));
}

.skh-auth-card {
  background: white;
  border-radius: 24px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(14,165,217,0.15);
  border: 2px solid var(--skh-border);
}

.skh-auth-logo {
  font-size: 20px;
  font-weight: 900;
  color: var(--skh-primary);
  text-align: center;
  margin-bottom: 16px;
}

.skh-auth-card h2 { font-size: 22px; font-weight: 800; color: var(--skh-navy); text-align: center; margin-bottom: 4px; }
.skh-auth-sub { font-size: 13px; color: var(--skh-muted); text-align: center; margin-bottom: 20px; }

.skh-form-group {
  margin-bottom: 14px;
}
.skh-form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--skh-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }

.skh-pw-wrap { position: relative; }
.skh-pw-toggle {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer; font-size: 16px; padding: 4px;
}

.skh-form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.skh-check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }

.w-full { width: 100%; }
.skh-link { color: var(--skh-primary); font-weight: 600; text-decoration: none; }
.skh-link:hover { text-decoration: underline; }
.skh-auth-foot { font-size: 13px; text-align: center; color: var(--skh-muted); margin-top: 16px; }

.skh-msg { display: none; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.skh-msg-ok  { background: #dcfce7; color: #166534; border: 1.5px solid #86efac; }
.skh-msg-err { background: #fee2e2; color: #991b1b; border: 1.5px solid #fca5a5; }

/* ── Bottom Navigation ────────────────────────── */
.skh-bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 680px;
  background: white;
  border-top: 2px solid var(--skh-border);
  display: flex;
  z-index: 200;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(14,165,217,0.10);
}

.skh-bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--skh-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 0;
  transition: all 0.2s;
}
.skh-bn-item svg, .skh-bn-item span:first-child { font-size: 20px; }
.skh-bn-item:hover, .skh-bn-item.active { color: var(--skh-primary); }
.skh-bn-item.active span:first-child { transform: translateY(-2px); display: inline-block; }

/* ── Login Wall ───────────────────────────────── */
.skh-login-wall {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 12px;
}
.skh-lw-icon { font-size: 56px; }
.skh-login-wall h2 { font-size: 22px; font-weight: 800; color: var(--skh-navy); }
.skh-login-wall p  { font-size: 14px; color: var(--skh-muted); }

/* ── Empty States ─────────────────────────────── */
.skh-empty-state {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.skh-empty-state div { font-size: 48px; }
.skh-empty-state p   { font-size: 14px; color: var(--skh-muted); }
.skh-empty-quiz { padding: 32px; text-align: center; color: var(--skh-muted); font-size: 14px; background: var(--skh-bg); border-radius: 14px; }

/* ── Inline Form Msg ──────────────────────────── */
.skh-form-inline-msg { margin-top: 10px; font-size: 13px; font-weight: 600; min-height: 18px; }
.skh-ok  { color: var(--skh-green); }
.skh-err { color: var(--skh-red); }

/* ── Loading ──────────────────────────────────── */
.skh-loading {
  padding: 20px;
  text-align: center;
  color: var(--skh-muted);
  font-size: 13px;
  font-style: italic;
  animation: skh-pulse 1.5s ease-in-out infinite;
}
@keyframes skh-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── Toast ────────────────────────────────────── */
.skh-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--skh-navy);
  color: white;
  padding: 10px 22px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.skh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Notice ───────────────────────────────────── */
.skh-notice {
  padding: 14px 16px;
  background: #fef9c3;
  border: 1.5px solid #fbbf24;
  border-radius: 10px;
  font-size: 13px;
  color: #92400e;
  margin: 16px;
}

/* ── Responsive ───────────────────────────────── */
@media (min-width: 681px) {
  .skh-app { border-left: 1px solid var(--skh-border); border-right: 1px solid var(--skh-border); }
  .skh-bottom-nav { border-radius: 0; }
}

@media (max-width: 480px) {
  .skh-qa-grid { grid-template-columns: repeat(3, 1fr); }
  .skh-greeting-banner { padding: 18px 16px; }
  .skh-greeting-name   { font-size: 16px; }
  .skh-ch-hero-title   { font-size: 19px; }
  .skh-quiz-card       { padding: 16px; }
  .skh-question        { font-size: 15px; }
  .skh-auth-card       { padding: 24px 20px; }
  .skh-join-row        { flex-direction: column; }
  .skh-practice-row    { flex-direction: column; }
}

@media (max-width: 360px) {
  .skh-qa-grid { grid-template-columns: repeat(2, 1fr); }
  .skh-stat-row { grid-template-columns: repeat(2, 1fr); }
}