/* ==========================================================================
   Тема „modern“: спокойна и чиста – неутрален фон с фина мрежа, бели карти
   с меки сенки, един ярък акцент. Без цветни петна.
   ========================================================================== */
html[data-theme="modern"] {
  --radius: 14px; --radius-sm: 9px; --radius-lg: 20px;
  --shadow: 0 1px 2px rgb(16 24 40 / .05), 0 10px 28px -16px rgb(16 24 40 / .16);
  --shadow-lg: 0 24px 60px -28px rgb(16 24 40 / .3);
}
html[data-theme="modern"] .art-modern { display: block; }
html[data-theme="modern"] body { background-image: linear-gradient(color-mix(in srgb, var(--c-border) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-border) 35%, transparent) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
html[data-theme="modern"] .site-header { background: color-mix(in srgb, var(--c-bg) 85%, transparent); }
html[data-theme="modern"] .hero-title { letter-spacing: -.03em; }
html[data-theme="modern"] .hero-title::first-letter { color: var(--c-accent); }
html[data-theme="modern"] .brand-mark { border-radius: 10px; }
html[data-theme="modern"] .btn-primary { box-shadow: 0 8px 20px -10px var(--c-accent); }
html[data-theme="modern"] .card, html[data-theme="modern"] .song, html[data-theme="modern"] .drawing-card, html[data-theme="modern"] .facts, html[data-theme="modern"] .search-results li { box-shadow: var(--shadow); }
html[data-theme="modern"] .card-body::before { content: ""; display: block; width: 2rem; height: 3px; border-radius: 2px; background: var(--c-accent); margin-bottom: .6rem; }
html[data-theme="modern"] .section-title { padding-bottom: .4rem; border-bottom: 2px solid var(--c-border); }
html[data-theme="modern"] .section-head { border-bottom: 2px solid var(--c-border); padding-bottom: .4rem; }
html[data-theme="modern"] .section-head .section-title { border: 0; padding-bottom: 0; }
html[data-theme="modern"] .page-header h1 { position: relative; padding-bottom: .5rem; }
html[data-theme="modern"] .page-header h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 4px; border-radius: 2px; background: var(--c-accent); }
html[data-theme="modern"] .prose h2 { padding-left: 0; border-left: 0; }
html[data-theme="modern"] .prose pre { box-shadow: var(--shadow-lg); }
html[data-theme="modern"] .callout { box-shadow: var(--shadow); }
html[data-theme="modern"] .site-footer { background: var(--c-bg2); }
html[data-theme="modern"] .nav-list a[aria-current="page"] { box-shadow: 0 6px 16px -8px var(--c-accent); }
html[data-theme="modern"] .step-num { border-radius: 10px; }
html[data-theme="modern"] .tag { border-radius: 6px; }
html[data-theme="modern"] .lightbox { background: rgb(12 12 14 / .96); }