:root {
  --bg: #f2f4f8;
  --card: #fff;
  --ink: #1c2433;
  --muted: #5b6472;
  --line: #e3e7ee;
  --racs: #0f766e;
  --racs-soft: #dcf2ee;
  --shadow: 0 1px 2px rgba(28, 36, 51, .06), 0 8px 24px rgba(28, 36, 51, .10);
  --radius: 14px;
  --sans: "Avenir Next", "Avenir", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: inherit; }
.wrap { max-width: 900px; margin: 0 auto; padding: 48px 20px 80px; }
header h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.7rem); letter-spacing: -.03em; }
header p { margin: 4px 0 0; color: var(--muted); font-size: 1.06rem; }
.back { display: inline-block; margin-bottom: 22px; color: var(--racs); font-weight: 700; text-decoration: none; }
.subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 32px; }
.subject-card { display: block; min-height: 210px; padding: 25px; border-top: 4px solid var(--racs); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); text-decoration: none; }
a.subject-card:hover { transform: translateY(-2px); }
.subject-card h2 { margin: 12px 0 8px; font-size: 1.45rem; line-height: 1.2; }
.subject-card p { margin: 0; color: var(--muted); }
.pending { opacity: .72; }
.stamp { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--racs-soft); color: var(--racs); font: 700 .72rem var(--mono); letter-spacing: .04em; }
.footer-note { margin-top: 38px; color: var(--muted); font-size: .9rem; }