/* ── Past Paper Tracker ── */
.pp-container { max-width: 100%; margin: 0 auto; padding: 0 0 2rem; font-family: 'Inter', sans-serif; }

/* Header */
.pp-header { background: linear-gradient(135deg, #1e3a5f, #2c5282); border-radius: 12px 12px 0 0; padding: 1.25rem 1.5rem; color: #fff; }
.pp-header h2 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; }
.pp-header-sub { font-size: .85rem; opacity: .7; }

/* Info bar */
.pp-info-bar { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .75rem 1.5rem; background: #f0f4f8; border-bottom: 1px solid #e2e8f0; font-size: .82rem; color: #4a5568; }
.pp-info-item { display: flex; align-items: center; gap: .4rem; }
.pp-info-label { font-weight: 600; color: #2d3748; }
.pp-info-value { color: #2563eb; font-weight: 600; }

/* Chart area */
.pp-chart-section { display: flex; justify-content: center; gap: 1.5rem; padding: 1.5rem; background: #fff; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; overflow-x: auto; }
.pp-chart-main { flex: none; width: 600px; position: relative; height: 320px; }
.pp-chart-side { flex: none; width: 240px; position: relative; height: 320px; }
.pp-chart-title { font-size: .8rem; font-weight: 600; color: #64748b; text-align: center; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }

/* Current Expected summary */
.pp-summary { display: flex; align-items: flex-start; justify-content: space-around; padding: 1rem 1.5rem; background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; }
.pp-summary-item { text-align: center; padding-top: 1.1rem; }
.pp-summary-label { font-size: .72rem; font-weight: 600; color: #065f46; text-transform: uppercase; letter-spacing: .5px; min-height: 2rem; display: flex; align-items: center; justify-content: center; }
.pp-summary-value { font-size: 1.8rem; font-weight: 800; color: #047857; margin-top: .15rem; }
.pp-summary-value.pp-grade { font-size: 2.2rem; margin-top: -.3rem; }
.pp-summary-badge { display: inline-block; padding: .25rem .75rem; border-radius: 20px; font-size: .78rem; font-weight: 700; margin-top: .7rem; }
.pp-badge-outstanding { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.pp-badge-good { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.pp-badge-needs-work { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Data table */
.pp-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-top: none; background: #fff; }
.pp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pp-table thead th { position: sticky; top: 0; z-index: 10; background: #f7fafc; padding: .6rem .5rem; border-bottom: 2px solid #cbd5e0; text-align: center; font-size: .75rem; font-weight: 700; color: #4a5568; white-space: nowrap; }
.pp-table thead th:first-child { text-align: left; min-width: 90px; }
.pp-table tbody td { padding: .5rem .5rem; border-bottom: 1px solid #f0f0f0; text-align: center; vertical-align: middle; }
.pp-table tbody td:first-child { text-align: left; font-weight: 600; color: #2d3748; }
.pp-table tbody tr:hover td { background: #f7fafc; }
.pp-table tbody tr.pp-row-empty td { color: #cbd5e0; }
.pp-table tbody tr.pp-row-filled td { color: #2d3748; }

/* Score highlighting */
.pp-score-high { color: #047857; font-weight: 700; }
.pp-score-mid { color: #d97706; font-weight: 700; }
.pp-score-low { color: #dc2626; font-weight: 700; }
.pp-ums-cell { font-weight: 700; font-size: .88rem; }
.pp-grade-cell { font-weight: 800; font-size: 1rem; }
.pp-date-cell { color: #64748b; font-size: .78rem; }
.pp-astar-cell { color: #94a3b8; font-size: .78rem; }
.pp-astar-raw-cell { font-weight: 700; font-size: .88rem; }
.pp-rank-cell { font-weight: 700; font-size: .82rem; color: #b45309; text-align: center; }

/* Footer */
.pp-footer { padding: .75rem 1.5rem; background: #f7fafc; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 12px 12px; font-size: .75rem; color: #94a3b8; text-align: center; }

/* Loading */
.pp-loading { text-align: center; padding: 3rem; color: #64748b; }
.pp-loading-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: pp-spin .8s linear infinite; margin-bottom: .75rem; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* Error */
.pp-error { text-align: center; padding: 2rem; color: #dc2626; background: #fef2f2; border-radius: 8px; margin: 1rem; }

/* Detailed Analysis */
.pp-analysis { border: 1px solid #e2e8f0; border-top: none; background: #fff; }
.pp-analysis-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.5rem; background: #f0f4f8; border-bottom: 1px solid #e2e8f0; }
.pp-analysis-title { font-size: .85rem; font-weight: 700; color: #1e3a5f; text-transform: uppercase; letter-spacing: .4px; }
.pp-analysis-meta { font-size: .8rem; color: #4a5568; }
.pp-analysis-grade { color: inherit; }
.pp-feedback-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; background: #1e3a5f; color: #fff; border-radius: 6px; font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .15s; }
.pp-feedback-btn:hover { background: #2c5282; }
.pp-feedback-btn svg { flex-shrink: 0; }
.pp-analysis-note { padding: .6rem 1.5rem; font-size: .82rem; color: #374151; background: #fffbeb; border-bottom: 1px solid #fde68a; line-height: 1.5; }
.pp-analysis-areas-title { padding: .6rem 1.5rem .3rem; font-size: .78rem; font-weight: 700; color: #dc2626; text-transform: uppercase; letter-spacing: .4px; }
.pp-areas-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pp-areas-table thead th { background: #fef2f2; padding: .4rem .75rem; text-align: left; font-size: .72rem; font-weight: 700; color: #7f1d1d; border-bottom: 1px solid #fecaca; white-space: nowrap; }
.pp-areas-table tbody td { padding: .45rem .75rem; border-bottom: 1px solid #f9fafb; vertical-align: top; }
.pp-areas-table tbody tr:last-child td { border-bottom: none; }
.pp-area-q { font-weight: 700; color: #1e40af; white-space: nowrap; }
.pp-area-unit { color: #6b7280; font-size: .75rem; white-space: nowrap; }
.pp-area-topic { color: #374151; font-weight: 600; }
.pp-area-lost { color: #dc2626; font-weight: 700; text-align: center; white-space: nowrap; }
.pp-area-note { color: #4b5563; line-height: 1.45; }

/* Responsive */
@media (max-width: 768px) {
  .pp-chart-section { flex-direction: column; align-items: center; }
  .pp-chart-main { width: 100%; }
  .pp-chart-side { width: 100%; min-height: 220px; margin-top: 2rem; }
  .pp-summary { flex-wrap: wrap; gap: 1rem; }
  .pp-info-bar { gap: .75rem; }
}