/** * Library category pages (forms, charts, visuals, …) — align with index.html + shell.css. * Load order: shell.css → page inline in ). */ html.light { background-image: none !important; background-color: var(--bg) !important; } html.light body { background-image: none !important; background-color: var(--bg) !important; color: var(--text-primary); } html.light .filter-bar { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(15, 23, 42, 0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } html.light .nav-brand { color: var(--text-primary); } html.light .filter-bar-title { color: var(--text-tertiary); } html.light .filter-pill { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); } html.light .filter-pill:hover { color: var(--text-primary); border-color: var(--border); } html.light .filter-pill.active { background: #0f172a; color: #fff; border-color: #0f172a; } html.light .filter-pill .count { opacity: 0.75; } html.light .back-link { color: var(--text-secondary); border-color: var(--border); } html.light .back-link:hover { color: var(--accent); border-color: rgba(13, 148, 136, 0.35); } html.light .section-nav a { color: var(--text-tertiary); } html.light .section-nav a:hover { color: var(--text-primary); background: rgba(15, 23, 42, 0.04); } html.light .section-nav a.current { background: #0f172a; color: #fff; border-color: transparent; box-shadow: var(--shadow-card); } html.light .nav-right .nav-link { color: rgba(15, 23, 42, 0.55); } html.light .nav-right .nav-link:hover { color: #0f172a; background: rgba(15, 23, 42, 0.04); } html.light .nav-right .nav-link--cta { background: #0f172a; color: #fff; } html.light .nav-right .nav-link--cta:hover { background: #1e293b; color: #fff; opacity: 1; } html.light .nav-toggle { border-color: var(--border); color: var(--text-secondary); } html.light .nav-toggle:hover { color: var(--accent); border-color: rgba(13, 148, 136, 0.35); } html.light .nav-drawer { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } html.light .nav-drawer a { color: rgba(15, 23, 42, 0.65); } html.light .nav-drawer a:hover, html.light .nav-drawer a.active { color: #0f172a; background: rgba(15, 23, 42, 0.04); } html.light .nav-drawer .drawer-close { border-color: var(--border); color: var(--text-secondary); } html.light .hero-copy, html.light .hero-meta { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-card); } html.light .hero-copy small { color: var(--accent); } html.light .hero-meta strong { color: var(--text-tertiary); } html.light .hero-tag { background: rgba(15, 23, 42, 0.03); border-color: var(--border); color: var(--text-secondary); } html.light .meta-stat { background: rgba(15, 23, 42, 0.02); border-color: var(--border); } html.light .concept-card { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-card); } html.light .concept-card:hover { box-shadow: var(--shadow-card-hover); } html.light .concept-visual { background: var(--bg-elevated); } html.light .concept-type { background: var(--accent-soft); color: var(--accent); border-color: rgba(13, 148, 136, 0.2); } html.light .concept-info p { color: var(--text-secondary); } html.light .concept-tags span { background: rgba(15, 23, 42, 0.04); border-color: var(--border); color: var(--text-secondary); } html.light .modal-panel { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-card-hover); } html.light .modal-header { border-bottom-color: var(--border); } html.light .modal-body pre { background: rgba(15, 23, 42, 0.04); border-color: var(--border); color: var(--text-secondary); } html.light .btt { background: #fff; border-color: rgba(15, 23, 42, 0.1); color: rgba(15, 23, 42, 0.5); } html.light .btt:hover { color: var(--accent); border-color: rgba(13, 148, 136, 0.3); } html.light .filter-select { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); } html.light .filter-control span { color: var(--text-tertiary); } /* section.html — card grid + modal (classes not covered by dedicated category pages) */ html.light .sec-card { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-card); } html.light .sec-card:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(13, 148, 136, 0.18); } html.light .sec-card-bar { background: var(--bg-elevated); border-bottom-color: var(--border); } html.light .sec-actions { border-top-color: var(--border); } html.light .btn-code { background: var(--cta-gradient); color: var(--cta-ink); box-shadow: 0 8px 22px rgba(13, 148, 136, 0.15); } html.light .btn-code:hover { filter: brightness(1.04); } html.light .btn-prompt { background: var(--accent-soft); color: var(--accent); border-color: rgba(13, 148, 136, 0.22); } html.light .btn-prompt:hover { background: rgba(13, 148, 136, 0.12); border-color: rgba(13, 148, 136, 0.38); } html.light .modal { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-card-hover); } html.light .modal-header, html.light .modal-tabs, html.light .modal-footer { border-color: var(--border); } html.light .modal-tab.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(13, 148, 136, 0.22); } html.light .modal-content { background: rgba(15, 23, 42, 0.03); color: var(--text-secondary); } html.light .modal-copy { background: var(--cta-gradient); color: var(--cta-ink); box-shadow: 0 8px 22px rgba(13, 148, 136, 0.15); } html.light .modal-copy:hover { filter: brightness(1.05); } html.light .scroll-progress { background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); } /* Auth (login / signup / reset / verify) */ html.light .auth-card { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-card-hover); } html.light .auth-card h1 { color: var(--text-primary); } html.light .auth-card .subtitle, html.light .auth-footer { color: var(--text-secondary); } html.light .form-group label { color: var(--text-tertiary); } html.light .form-group input { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); } html.light .form-group input::placeholder { color: var(--text-tertiary); } html.light .pw-toggle { color: var(--text-tertiary); } html.light .pw-toggle:hover { color: var(--text-primary); }