/* ── Subject page shared ────────────────────────────────────────────────── */
.subj-hero { margin-top: -64px; padding: 128px 0 56px; }
.subj-badge { display: inline-block; padding: 6px 18px; border-radius: var(--pk-radius-pill); font-size: 13px; font-weight: 800; margin-bottom: 16px; }
.subj-hero-text h1 { font-size: 38px; font-weight: 900; margin-bottom: 12px; }
.subj-hero-text p { font-size: 16px; color: var(--pk-text-soft); line-height: 1.7; max-width: 520px; }

.subj-hero-grid { display: flex; align-items: center; gap: 48px; }
.subj-hero-grid .subj-hero-text { flex: 1; }
.subj-hero-grid .subj-hero-deco { flex-shrink: 0; }

/* ── Math decorative geometry ───────────────────────────────────────────── */
.subj-hero-deco--math { display: grid; grid-template-columns: repeat(4,60px); grid-template-rows: repeat(4,60px); gap: 4px; opacity: 0.25; }
.math-geo { border-radius: 4px; }
.math-geo--tri { grid-area: 1/1/3/3; background: #388e3c; clip-path: polygon(50% 0,100% 100%,0 100%); }
.math-geo--sq { grid-area: 1/3/3/5; background: #43a047; }
.math-geo--cir { grid-area: 3/2/5/4; background: #66bb6a; border-radius: 50%; }
.math-grid { grid-area: 1/1/-1/-1; border: 2px dashed rgba(56,142,60,0.3); border-radius: 8px; }

/* ── Physics wave animations ─────────────────────────────────────────────── */
.subj-waves { position: absolute; bottom: 0; left: 0; right: 0; height: 160px; overflow: hidden; opacity: 0.15; }
.subj-wave { position: absolute; bottom: 0; width: 200%; height: 100%; background: #4D96FF; border-radius: 40% 40% 0 0; animation: waveDrift 8s ease-in-out infinite; }
.w1 { left: -50%; animation-delay: 0s; opacity: 0.3; }
.w2 { left: -50%; animation-delay: -3s; opacity: 0.2; }
.w3 { left: -50%; animation-delay: -6s; opacity: 0.1; }
@keyframes waveDrift { 0%,100% { transform: translateY(20px) rotate(0deg) } 50% { transform: translateY(0) rotate(3deg) } }

/* ── Chemistry floating molecules ────────────────────────────────────────── */
.subj-molecules { position: absolute; inset: 0; pointer-events: none; }
.subj-mol { position: absolute; border-radius: 50%; background: rgba(245,124,0,0.12); border: 2px solid rgba(245,124,0,0.2); animation: molFloat 4s ease-in-out infinite; }
@keyframes molFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }

/* ── Grade chips ─────────────────────────────────────────────────────────── */
.grade-groups { display: flex; flex-direction: column; gap: 24px; }
.grade-group {
    border-radius: 18px; padding: 28px 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: all 0.2s;
    position: relative; overflow: hidden;
}
.grade-group:nth-child(1) {
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 40%, #fff 100%);
}
.grade-group:nth-child(2) {
    background: linear-gradient(135deg, #e8eaf6 0%, #e3f2fd 40%, #fff 100%);
}
.grade-group:nth-child(3) {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 40%, #fff 100%);
}
.grade-group::after {
    content: ''; position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%; opacity: 0.08; pointer-events: none;
}
.grade-group:nth-child(1)::after { background: #388e3c; }
.grade-group:nth-child(2)::after { background: #1976d2; }
.grade-group:nth-child(3)::after { background: #f57c00; }
.grade-group:hover { box-shadow: var(--pk-shadow); transform: translateY(-1px); }

.grade-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.grade-head-icon {
    width: 36px; height: 36px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.grade-group-title {
    font-size: 16px; font-weight: 800; white-space: nowrap;
    padding: 6px 14px; border-radius: 8px;
}
.grade-head-line { flex: 1; height: 1px; background: #eee; margin-left: 8px; }

.grade-row { display: flex; gap: 10px; flex-wrap: wrap; }
.grade-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; border-radius: var(--pk-radius-pill);
    font-weight: 700; font-size: 15px; color: var(--pk-text-soft);
    background: var(--pk-bg); border: none; transition: all 0.2s;
}
.grade-chip:hover {
    background: var(--gc); color: #fff;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.grade-chip small { font-weight: 500; font-size: 12px; opacity: 0.65; margin-left: 6px; }
.grade-chip:hover small { opacity: 1; }

/* ── Fun cards ───────────────────────────────────────────────────────────── */
.fun-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fun-card {
    border-radius: 20px; padding: 32px 28px; text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fun-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.fun-emoji { font-size: 40px; margin-bottom: 16px; display: block; }
.fun-card h4 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.fun-card p { font-size: 14px; color: var(--pk-text-soft); line-height: 1.7; }

/* ── Challenge card ──────────────────────────────────────────────────────── */
.challenge-card {
    background: #fff; border-radius: 24px; padding: 48px 44px;
    box-shadow: var(--pk-shadow-lg); border: 2px dashed var(--pk-sunny);
    display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
}
.challenge-card .challenge-left { flex: 1; min-width: 260px; text-align: left; }
.challenge-card .challenge-right { flex-shrink: 0; }
.challenge-badge { font-size: 14px; font-weight: 800; color: var(--pk-orange); margin-bottom: 12px; display: block; }
.challenge-card h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; line-height: 1.5; }
.challenge-card > p { font-size: 16px; color: var(--pk-text-soft); margin-bottom: 0; }
.challenge-hint {
    display: inline-block; padding: 8px 20px; background: var(--pk-bg-warm);
    border-radius: var(--pk-radius-pill); font-size: 14px; font-weight: 600;
    color: var(--pk-text-soft); margin-top: 14px;
}

@media (max-width: 768px) {
    .subj-hero { margin-top: -56px; padding: 112px 0 56px; }
    .fun-grid { grid-template-columns: 1fr; }
    .subj-hero-text h1 { font-size: 28px; }
    .subj-hero-deco--math { grid-template-columns: repeat(4,36px); grid-template-rows: repeat(4,36px); gap: 2px; }
    .subj-waves { height: 80px; }
    .stats-dashboard { grid-template-columns: repeat(2, 1fr); }
    .challenge-card { padding: 32px 24px; }
    .challenge-card h3 { font-size: 18px; }
    .stats-continue { flex-direction: column; text-align: center; gap: 16px; }
    .recent-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .recent-item-score { width: 100%; justify-content: space-between; }
}

/* ── Stats dashboard ─────────────────────────────────────────────────────── */
.stats-dashboard {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.stat-card {
    background: #fff; border-radius: 16px; padding: 28px 20px;
    text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--pk-shadow); }
.stat-icon {
    width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff;
}
.stat-value { font-size: 28px; font-weight: 900; color: var(--pk-text); }
.stat-label { font-size: 13px; color: var(--pk-text-soft); margin-top: 4px; font-weight: 600; }

/* ── Continue practice row ──────────────────────────────────────────────── */
.stats-continue {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 28px; padding: 18px 24px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.stats-continue-info { font-size: 14px; color: var(--pk-text-soft); }
.stats-continue-info strong { color: var(--pk-text); }

/* ── Recent practice history ─────────────────────────────────────────────── */
.recent-section { margin-top: 48px; }
.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-item {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; border-radius: 12px; padding: 14px 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04); transition: transform 0.15s, box-shadow 0.15s;
}
.recent-item:hover { transform: translateX(3px); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.recent-item-main { display: flex; align-items: center; gap: 16px; }
.recent-date { font-size: 13px; color: var(--pk-text-soft); font-weight: 600; min-width: 70px; }
.recent-diff { font-size: 12px; color: var(--pk-text-light); }
.recent-item-score { display: flex; align-items: center; gap: 14px; }
.recent-badge {
    padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
.recent-badge--pass { background: #e8f5e9; color: var(--pk-mint-dark); }
.recent-badge--fail { background: #fce4ec; color: var(--pk-coral); }
.recent-score { font-size: 18px; font-weight: 800; color: var(--pk-text); }
.recent-score small { font-size: 13px; margin-left: 2px; }

/* ── Lecture entry on subject page ──────────────────────────────────────── */
.lec-subject-entry {
    padding: 32px; border-radius: 16px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    text-align: center;
}