/* ════════════════════════════════
   SCOPED VARIABLES — prefix: pp26
   ════════════════════════════════ */
#pp26-root {
  --p-bg:        #f0f4ff;
  --p-surface:   #ffffff;
  --p-surface2:  #eef2fb;
  --p-border:    #dce4f5;
  --p-text:      #1a2340;
  --p-muted:     #626f8f;
  --p-blue:      #2563eb;
  --p-blue-lt:   #eff4ff;
  --p-blue-bd:   #bfcffc;
  --p-blue-dk:   #1d4ed8;
  --p-amber:     #d97706;
  --p-amber-lt:  #fffbeb;
  --p-amber-bd:  #fcd34d;
  --p-green:     #059669;
  --p-green-lt:  #ecfdf5;
  --p-green-bd:  #6ee7b7;
  --p-red:       #e03d5b;
  --p-red-lt:    #fff1f4;
  --p-red-bd:    #fca5a5;
  --p-purple:    #7c3aed;
  --p-purple-lt: #f5f3ff;
  --p-purple-bd: #c4b5fd;
  --p-teal:      #0891b2;
  --p-teal-lt:   #ecfeff;
  --p-teal-bd:   #a5f3fc;
  --p-sh-sm: 0 1px 4px rgba(37,99,235,0.07);
  --p-sh-md: 0 4px 18px rgba(37,99,235,0.10);
  --p-sh-lg: 0 8px 32px rgba(37,99,235,0.14);
  all: initial;
  display: block;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  position: relative;
}

/* ══ HEADER ══ */
#pp26-root .pp-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px;
  margin-bottom: 32px; padding-bottom: 24px;
  border-bottom: 2px solid var(--p-border);
}
#pp26-root .pp-hd-left { padding-left: 18px; position: relative; }
#pp26-root .pp-hd-left::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; background: linear-gradient(to bottom, var(--p-blue), var(--p-amber)); border-radius: 4px;
}
#pp26-root .pp-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--p-blue); display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
#pp26-root .pp-eyebrow::before {
  content: ''; display: inline-block; width: 18px; height: 2px; background: var(--p-blue); border-radius: 2px;
}
#pp26-root .pp-title {
  font-size: 52px; font-weight: 800; color: var(--p-text); letter-spacing: -0.5px; line-height: 1.15;
}
#pp26-root .pp-title-accent {
  color: var(--p-blue); position: relative; display: inline-block;
}
#pp26-root .pp-title-accent::after {
  content: ''; position: absolute; bottom: 1px; left: 0; right: 0; height: 4px;
  background: var(--p-amber); border-radius: 2px; opacity: 0.5;
}
#pp26-root .pp-subtitle {
  font-size: 15px; color: var(--p-muted); font-weight: 400; margin-top: 6px; line-height: 1.5;
}
#pp26-root .pp-hd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#pp26-root .pp-icon-box {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--p-blue), var(--p-blue-dk));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; box-shadow: var(--p-sh-md); margin-bottom: 8px; margin-left: auto;
}
#pp26-root .pp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 13px; border-radius: 20px; font-size: 13px; font-weight: 600;
}
#pp26-root .pp-badge.blue  { background: var(--p-blue-lt);  border: 1px solid var(--p-blue-bd);  color: var(--p-blue); }
#pp26-root .pp-badge.amber { background: var(--p-amber-lt); border: 1px solid var(--p-amber-bd); color: var(--p-amber); }
#pp26-root .pp-bdot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; display: inline-block; }

/* ══ STATS STRIP ══ */
#pp26-root .pp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 32px;
}
#pp26-root .pp-stat {
  background: var(--p-surface); border: 1.5px solid var(--p-border);
  border-radius: 14px; padding: 16px 14px; text-align: center;
  box-shadow: var(--p-sh-sm); position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
#pp26-root .pp-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 14px 14px 0 0;
}
#pp26-root .pp-stat.blue::before   { background: var(--p-blue); }
#pp26-root .pp-stat.amber::before  { background: var(--p-amber); }
#pp26-root .pp-stat.green::before  { background: var(--p-green); }
#pp26-root .pp-stat.purple::before { background: var(--p-purple); }
#pp26-root .pp-stat.teal::before   { background: var(--p-teal); }
#pp26-root .pp-stat-icon { font-size: 20px; display: block; margin-bottom: 6px; }
#pp26-root .pp-stat-num  { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -1px; display: block; margin-bottom: 4px; }
#pp26-root .pp-stat.blue   .pp-stat-num { color: var(--p-blue); }
#pp26-root .pp-stat.amber  .pp-stat-num { color: var(--p-amber); }
#pp26-root .pp-stat.green  .pp-stat-num { color: var(--p-green); }
#pp26-root .pp-stat.purple .pp-stat-num { color: var(--p-purple); }
#pp26-root .pp-stat.teal   .pp-stat-num { color: var(--p-teal); }
#pp26-root .pp-stat-lbl { font-size: 16px; color: var(--p-muted); font-weight: 500; line-height: 1.4; }

/* ══ FOOTER NOTE ══ */
#pp26-root .pp-note {
  margin-top: 20px; background: var(--p-amber-lt); border: 1.5px solid var(--p-amber-bd);
  border-radius: 14px; padding: 14px 18px;
  display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--p-sh-sm);
}
#pp26-root .pp-note-icon {
  width: 32px; height: 32px; flex-shrink: 0; background: var(--p-amber);
  border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
#pp26-root .pp-note-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--p-amber); display: block; margin-bottom: 3px;
}
#pp26-root .pp-note-text {
  font-size: 15px; font-weight: 500; color: var(--p-text); line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   CALENDAR EXAM SECTION — NEW
   Replaces .pp-cards and all .pp-card* styles
   ════════════════════════════════════════════════════════════════ */

/* ── Section wrapper & heading ──────────────────────────────────── */
#pp26-root .pp-cal-section {
  margin-bottom: 8px;
}
#pp26-root .pp-cal-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--p-border);
}
#pp26-root .pp-cal-heading-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--p-text);
  letter-spacing: -0.3px;
}
#pp26-root .pp-cal-heading-sub {
  font-size: 13px;
  color: var(--p-muted);
  font-weight: 400;
}

/* ── Legend ─────────────────────────────────────────────────────── */
#pp26-root .pp-cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
#pp26-root .pp-cal-legend-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--p-muted);
  margin-right: 2px;
}
#pp26-root .pp-cal-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}
/* Legend pill colour variants */
#pp26-root .pp-cal-pill-c-blue   { background:var(--p-blue-lt);  color:#1e40af; border-color:var(--p-blue-bd); }
#pp26-root .pp-cal-pill-c-teal   { background:var(--p-teal-lt);  color:#0e7490; border-color:var(--p-teal-bd); }
#pp26-root .pp-cal-pill-c-amber  { background:var(--p-amber-lt); color:#92400e; border-color:var(--p-amber-bd); }
#pp26-root .pp-cal-pill-c-green  { background:var(--p-green-lt); color:#065f46; border-color:var(--p-green-bd); }
#pp26-root .pp-cal-pill-c-purple { background:var(--p-purple-lt);color:#5b21b6; border-color:var(--p-purple-bd); }

/* Legend dot */
#pp26-root .pp-cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
#pp26-root .pp-cal-dot-c-blue   { background: var(--p-blue); }
#pp26-root .pp-cal-dot-c-teal   { background: var(--p-teal); }
#pp26-root .pp-cal-dot-c-amber  { background: var(--p-amber); }
#pp26-root .pp-cal-dot-c-green  { background: var(--p-green); }
#pp26-root .pp-cal-dot-c-purple { background: var(--p-purple); }

/* ── Timeline grid ───────────────────────────────────────────────── */
#pp26-root .pp-cal-timeline {
  display: flex;
  flex-direction: column;
}
#pp26-root .pp-cal-month {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: stretch;
  border-top: 1px solid var(--p-border);
}
#pp26-root .pp-cal-month:last-child {
  border-bottom: 1px solid var(--p-border);
}

/* ── Month label (left column) ───────────────────────────────────── */
#pp26-root .pp-cal-mlabel {
  padding: 16px 12px 16px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  border-right: 1px solid var(--p-border);
  flex-shrink: 0;
}
#pp26-root .pp-cal-mname {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  line-height: 1;
}
#pp26-root .pp-cal-myear {
  font-size: 10px;
  color: var(--p-muted);
  font-weight: 400;
}

/* ── Events column (right column) ────────────────────────────────── */
#pp26-root .pp-cal-mevents {
  padding: 12px 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
#pp26-root .pp-cal-empty {
  font-size: 12px;
  color: var(--p-muted);
  font-style: italic;
  opacity: .55;
  padding: 4px 0;
}

/* ── Individual event block ──────────────────────────────────────── */
#pp26-root .pp-cal-event {
  border-radius: 10px;
  padding: 11px 14px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
#pp26-root .pp-cal-event:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(37,99,235,.10);
}

/* Left accent bar */
#pp26-root .pp-cal-event::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0;
}

/* Continuation (multi-month overflow) — dashed + muted */
#pp26-root .pp-cal-event--cont {
  opacity: .55;
  border-style: dashed;
}

/* ── Event colour variants ───────────────────────────────────────── */
#pp26-root .pp-cal-ev-c-blue   { background:var(--p-blue-lt);  border-color:var(--p-blue-bd); }
#pp26-root .pp-cal-ev-c-blue::before   { background:var(--p-blue); }

#pp26-root .pp-cal-ev-c-teal   { background:var(--p-teal-lt);  border-color:var(--p-teal-bd); }
#pp26-root .pp-cal-ev-c-teal::before   { background:var(--p-teal); }

#pp26-root .pp-cal-ev-c-amber  { background:var(--p-amber-lt); border-color:var(--p-amber-bd); }
#pp26-root .pp-cal-ev-c-amber::before  { background:var(--p-amber); }

#pp26-root .pp-cal-ev-c-green  { background:var(--p-green-lt); border-color:var(--p-green-bd); }
#pp26-root .pp-cal-ev-c-green::before  { background:var(--p-green); }

#pp26-root .pp-cal-ev-c-purple { background:var(--p-purple-lt);border-color:var(--p-purple-bd); }
#pp26-root .pp-cal-ev-c-purple::before { background:var(--p-purple); }

/* ── Event inner layout ──────────────────────────────────────────── */
#pp26-root .pp-cal-event-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
#pp26-root .pp-cal-event-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  line-height: 1.35;
  flex: 1;
  min-width: 120px;
}
/* Continuation badge */
#pp26-root .pp-cal-cont-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.06);
  color: var(--p-muted);
  white-space: nowrap;
  align-self: center;
}
/* Date range pill */
#pp26-root .pp-cal-event-date {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid;
  align-self: flex-start;
}
#pp26-root .pp-cal-ev-c-blue   .pp-cal-event-date { background:#dbeafe; color:#1e40af; border-color:var(--p-blue-bd); }
#pp26-root .pp-cal-ev-c-teal   .pp-cal-event-date { background:var(--p-teal-lt); color:#0e7490; border-color:var(--p-teal-bd); }
#pp26-root .pp-cal-ev-c-amber  .pp-cal-event-date { background:var(--p-amber-lt); color:#92400e; border-color:var(--p-amber-bd); }
#pp26-root .pp-cal-ev-c-green  .pp-cal-event-date { background:var(--p-green-lt); color:#065f46; border-color:var(--p-green-bd); }
#pp26-root .pp-cal-ev-c-purple .pp-cal-event-date { background:var(--p-purple-lt); color:#5b21b6; border-color:var(--p-purple-bd); }

/* ── Tingkatan chips ─────────────────────────────────────────────── */
#pp26-root .pp-cal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#pp26-root .pp-cal-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
  color: var(--p-muted);
  border: 1px solid var(--p-border);
}
#pp26-root .pp-cal-chip::before {
  content: '▸';
  font-size: 9px;
  margin-right: 4px;
  color: var(--p-blue);
}

/* ── Detail rows ─────────────────────────────────────────────────── */
#pp26-root .pp-cal-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.07);
}
#pp26-root .pp-cal-detail {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11.5px;
  color: var(--p-text);
  line-height: 1.5;
  font-weight: 400;
}
#pp26-root .pp-cal-detail::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--p-amber);
  flex-shrink: 0;
  margin-top: 1px;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 768px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Original header/stats/note responsive rules (unchanged) */
  #pp26-root { font-size: 14px; }
  #pp26-root .pp-header { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; }
  #pp26-root .pp-hd-left { padding-left: 14px; }
  #pp26-root .pp-eyebrow { font-size: 10px; letter-spacing: 1.5px; gap: 6px; margin-bottom: 6px; }
  #pp26-root .pp-eyebrow::before { width: 14px; }
  #pp26-root .pp-title { font-size: clamp(22px, 6.5vw, 34px); letter-spacing: -0.3px; line-height: 1.2; }
  #pp26-root .pp-subtitle { font-size: 12px; margin-top: 5px; line-height: 1.55; }
  #pp26-root .pp-hd-right { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  #pp26-root .pp-icon-box { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; margin-bottom: 0; margin-left: 0; }
  #pp26-root .pp-badge { font-size: 11px; padding: 3px 10px; }
  #pp26-root .pp-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
  #pp26-root .pp-stat { padding: 12px 8px; border-radius: 10px; }
  #pp26-root .pp-stat-icon { font-size: 17px; margin-bottom: 4px; }
  #pp26-root .pp-stat-num { font-size: 26px; letter-spacing: -0.5px; margin-bottom: 3px; }
  #pp26-root .pp-stat-lbl { font-size: 11px; line-height: 1.35; }
  #pp26-root .pp-note { margin-top: 14px; padding: 12px 14px; gap: 10px; border-radius: 10px; }
  #pp26-root .pp-note-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
  #pp26-root .pp-note-title { font-size: 10px; letter-spacing: 0.8px; margin-bottom: 2px; }
  #pp26-root .pp-note-text { font-size: 12px; line-height: 1.6; font-weight: 400; }

  /* Calendar responsive */
  #pp26-root .pp-cal-heading { flex-direction: column; gap: 3px; margin-bottom: 14px; padding-bottom: 12px; }
  #pp26-root .pp-cal-heading-title { font-size: 15px; }
  #pp26-root .pp-cal-heading-sub { font-size: 11px; }
  #pp26-root .pp-cal-legend { gap: 6px; margin-bottom: 14px; }
  #pp26-root .pp-cal-legend-label { font-size: 10px; }
  #pp26-root .pp-cal-pill { font-size: 10px; padding: 2px 8px; }
  #pp26-root .pp-cal-month { grid-template-columns: 48px 1fr; }
  #pp26-root .pp-cal-mlabel { padding: 12px 8px 12px 2px; }
  #pp26-root .pp-cal-mname { font-size: 11px; }
  #pp26-root .pp-cal-myear { font-size: 9px; }
  #pp26-root .pp-cal-mevents { padding: 10px 0 10px 10px; gap: 6px; }
  #pp26-root .pp-cal-event { padding: 9px 11px; border-radius: 8px; gap: 5px; }
  #pp26-root .pp-cal-event-name { font-size: 12px; min-width: 0; }
  #pp26-root .pp-cal-event-date { font-size: 10px; padding: 2px 8px; }
  #pp26-root .pp-cal-chip { font-size: 9.5px; padding: 2px 7px; }
  #pp26-root .pp-cal-detail { font-size: 11px; gap: 6px; }
  #pp26-root .pp-cal-details { gap: 2px; margin-top: 1px; padding-top: 5px; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 480px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Original rules (unchanged) */
  #pp26-root .pp-stats { gap: 6px; }
  #pp26-root .pp-stat { padding: 10px 6px; }
  #pp26-root .pp-stat-num { font-size: 22px; }
  #pp26-root .pp-stat-lbl { font-size: 10px; }
  #pp26-root .pp-stat-icon { font-size: 15px; }
  #pp26-root .pp-title { font-size: clamp(20px, 7.5vw, 28px); }
  #pp26-root .pp-eyebrow { font-size: 9px; letter-spacing: 1px; }
  #pp26-root .pp-subtitle { font-size: 11px; }
  #pp26-root .pp-badge { font-size: 10px; padding: 2px 8px; }
  #pp26-root .pp-note-text { font-size: 11.5px; }

  /* Calendar responsive */
  #pp26-root .pp-cal-month { grid-template-columns: 40px 1fr; }
  #pp26-root .pp-cal-mlabel { padding: 10px 6px 10px 0; gap: 1px; }
  #pp26-root .pp-cal-mname { font-size: 10px; }
  #pp26-root .pp-cal-myear { display: none; }
  #pp26-root .pp-cal-mevents { padding: 8px 0 8px 8px; gap: 5px; }
  #pp26-root .pp-cal-event { padding: 8px 10px; }
  #pp26-root .pp-cal-event-name { font-size: 11.5px; }
  #pp26-root .pp-cal-event-top { gap: 6px; }
  #pp26-root .pp-cal-event-date { font-size: 9.5px; padding: 2px 7px; }
  #pp26-root .pp-cal-chips { gap: 4px; }
  #pp26-root .pp-cal-chip { font-size: 9px; padding: 1px 6px; }
  #pp26-root .pp-cal-detail { font-size: 10.5px; }
  #pp26-root .pp-cal-heading-title { font-size: 14px; }
  #pp26-root .pp-cal-legend { flex-wrap: wrap; gap: 5px; }
}