/* Term Page Styles */
:root {
    --bg-deep: #faf9f7;
    --bg-surface: #ffffff;
    --bg-elevated: #f5f3f0;
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #a8a29e;
    --accent-amber: #b45309;
    --accent-amber-dim: #d97706;
    --accent-orange: #c2410c;
    --accent-cyan: #0891b2;
    --accent-emerald: #059669;
    --accent-violet: #7c3aed;
    --accent-rose: #e11d48;
    --border-subtle: rgba(28, 25, 23, 0.08);
    --border-emphasis: rgba(180, 83, 9, 0.25);
    --font-display: 'Crimson Pro', Georgia, serif;
    --font-body: 'Instrument Sans', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg-deep); color: var(--text-primary); font-family: var(--font-body); line-height: 1.7; }
::selection { background: var(--accent-amber); color: #ffffff; }

.nav { position: fixed; top: 0; width: 100%; z-index: 100; background: rgba(250, 249, 247, 0.9); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
.nav-inner { max-width: 900px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; color: var(--accent-amber); text-decoration: none; }
.logo span { color: var(--text-muted); }
.back-link { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.back-link:hover { color: var(--accent-amber); }

.content { max-width: 900px; margin: 0 auto; padding: 6rem 2rem 4rem; }

.term-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-subtle); }
.term-category { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.75rem; }
.term-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; }
.term-level { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; padding: 0.375rem 0.75rem; border-radius: 4px; margin-bottom: 1.5rem; }
.term-level.l1 { background: rgba(5, 150, 105, 0.12); color: var(--accent-emerald); }
.term-level.l2 { background: rgba(8, 145, 178, 0.12); color: var(--accent-cyan); }
.term-level.l3 { background: rgba(180, 83, 9, 0.12); color: var(--accent-amber); }
.term-level.l4 { background: rgba(124, 58, 237, 0.12); color: var(--accent-violet); }
.term-level.l5 { background: rgba(225, 29, 72, 0.12); color: var(--accent-rose); }
.term-aliases { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.term-aliases code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--bg-elevated); padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }

.section { margin-bottom: 3rem; }
.section-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.section-title::before { content: ''; width: 20px; height: 2px; background: var(--accent-amber); }
.section-content { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.8; }
.section-content p { margin-bottom: 1rem; }
.section-content ul, .section-content ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.section-content li { margin-bottom: 0.5rem; }
.section-content strong { color: var(--text-primary); }

.code-block { background: #1c1917; color: #fafaf9; border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap; }

.example-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.example-label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-amber); margin-bottom: 0.75rem; }
.example-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.example-description { font-size: 0.9375rem; color: var(--text-secondary); }

.exercise { background: var(--bg-surface); border: 2px solid var(--border-emphasis); border-radius: 12px; padding: 2rem; margin: 2rem 0; }
.exercise-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.exercise-icon { width: 40px; height: 40px; background: rgba(180, 83, 9, 0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.exercise-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.exercise-instructions { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.exercise-instructions p { margin-bottom: 0.75rem; }
.exercise-input { width: 100%; min-height: 120px; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 0.9375rem; resize: vertical; margin-bottom: 1rem; background: var(--bg-deep); }
.exercise-input:focus { outline: none; border-color: var(--accent-amber); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.1); }
.exercise-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn { font-family: var(--font-mono); font-size: 0.8125rem; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; transition: all 0.2s; border: none; }
.btn-primary { background: var(--accent-amber); color: white; }
.btn-primary:hover { background: var(--accent-orange); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { border-color: var(--accent-amber); }
.exercise-output { margin-top: 1.5rem; padding: 1rem; background: var(--bg-elevated); border-radius: 8px; font-family: var(--font-mono); font-size: 0.875rem; white-space: pre-wrap; display: none; }
.exercise-output.visible { display: block; }

.tips-box { background: rgba(8, 145, 178, 0.08); border-left: 4px solid var(--accent-cyan); padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; }
.tips-title { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-cyan); margin-bottom: 0.5rem; }
.tips-content { font-size: 0.9375rem; color: var(--text-secondary); }
.tips-content ul { margin-left: 1.25rem; }
.tips-content li { margin-bottom: 0.375rem; }

.related-terms { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.related-term { font-family: var(--font-mono); font-size: 0.8125rem; padding: 0.5rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 100px; color: var(--text-secondary); text-decoration: none; transition: all 0.2s; }
.related-term:hover { border-color: var(--accent-amber); color: var(--accent-amber); }

.footer-nav { display: flex; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--border-subtle); margin-top: 3rem; }
.footer-nav-link { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; padding: 1rem; border-radius: 8px; transition: background 0.2s; max-width: 45%; }
.footer-nav-link:hover { background: var(--bg-elevated); }
.footer-nav-label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.footer-nav-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--text-primary); }
.footer-nav-link.next { text-align: right; margin-left: auto; }

@media (max-width: 640px) {
    .content { padding: 5rem 1.25rem 3rem; }
    .exercise { padding: 1.5rem; }
    .footer-nav { flex-direction: column; gap: 1rem; }
    .footer-nav-link { max-width: 100%; }
    .footer-nav-link.next { text-align: left; }
}