.app-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--color-primary); }
.nav { flex-wrap: wrap; }
.nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-muted); }
.nav a:hover { background: var(--color-surface); color: var(--color-ink); }
.nav a.is-active { color: var(--color-primary); background: #fff1f2; }
.hero { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-10); background: radial-gradient(circle at top, #fff5f5, var(--color-white)); border-radius: var(--radius-xl); border: 1px solid var(--color-border); }
.search-bar { display: flex; gap: var(--space-3); max-width: 640px; }
@media (max-width: 640px) { .hero { padding: var(--space-6); } .search-bar { flex-direction: column; } .nav { gap: var(--space-1); } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.rating { color: var(--color-warning); font-weight: 600; }
.page-title { margin-bottom: var(--space-4); }
.toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-6); }
.detail-head { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.layout-split { grid-template-columns: 1.4fr 1fr; align-items: start; }
@media (max-width: 900px) { .layout-split { grid-template-columns: minmax(0,1fr); } }