@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); html { scroll-behavior: smooth; } :root { --bg-primary: #ffffff; --bg-secondary: #f7f7f8; --bg-card: #ffffff; --bg-hover: #f0f0f2; --border: #e5e5e7; --border-light: #f0f0f2; --text-primary: #1a1a1a; --text-secondary: #6b6b6b; --text-muted: #999999; --accent: #1a1a1a; --accent-blue: #2563eb; --accent-blue-hover: #1d4ed8; --accent-green: #16a34a; --accent-orange: #d97706; --accent-red: #dc2626; --accent-purple: #7c3aed; --accent-teal: #0d9488; --accent-yellow: #ca8a04; --link: #1a1a1a; --link-hover: #2563eb; --radius: 8px; --radius-lg: 12px; --radius-pill: 24px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.06); --topnav-height: 56px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } .topnav { position: fixed; top: 0; left: 0; right: 0; height: var(--topnav-height); background: var(--bg-primary); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 24px; z-index: 50; } .topnav-logo { font-weight: 800; font-size: 16px; color: var(--text-primary); text-decoration: none; letter-spacing: -0.02em; flex-shrink: 0; } .topnav-logo:hover { text-decoration: none; color: var(--text-primary); } .topnav-links { display: flex; gap: 4px; align-items: center; } .topnav-link { padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--text-secondary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; border-radius: var(--radius); transition: all 0.15s; } .topnav-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; } .topnav-link.active { color: var(--text-primary); background: var(--bg-secondary); } .topnav-search { margin-left: auto; flex-shrink: 0; } .topnav-search input { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary); padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; width: 240px; outline: none; font-family: inherit; transition: border-color 0.15s; } .topnav-search input:focus { border-color: var(--text-muted); } .topnav-search input::placeholder { color: var(--text-muted); } .content { margin-top: var(--topnav-height); min-height: calc(100vh - var(--topnav-height)); } .page-content { padding: 40px 32px; max-width: 960px; margin: 0 auto; } .dashboard h1 { font-size: 1.6em; margin-bottom: 24px; font-weight: 800; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 32px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); } .stat-number { font-size: 2em; font-weight: 800; color: var(--text-primary); } .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .stat-card.accent-blue { border-top: 3px solid var(--accent-blue); } .stat-card.accent-orange { border-top: 3px solid var(--accent-orange); } .stat-card.accent-purple { border-top: 3px solid var(--accent-purple); } .stat-card.accent-green { border-top: 3px solid var(--accent-green); } .stat-card.accent-teal { border-top: 3px solid var(--accent-teal); } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; overflow-x: auto; box-shadow: var(--shadow-sm); } .card-title { font-size: 1em; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .accent-blue-text { color: var(--accent-blue); } .accent-orange-text { color: var(--accent-orange); } .accent-purple-text { color: var(--accent-purple); } .accent-green-text { color: var(--accent-green); } .accent-teal-text { color: var(--accent-teal); } .accent-yellow-text { color: var(--accent-yellow); } .accent-red-text { color: var(--accent-red); } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); } .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); } .data-table tr:hover td { background: var(--bg-secondary); } .data-table a { color: var(--accent-blue); } .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); } .badge-entity { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(37, 99, 235, 0.06); } .badge-claim { color: var(--accent-orange); border-color: var(--accent-orange); background: rgba(217, 119, 6, 0.06); } .badge-prediction { color: var(--accent-purple); border-color: var(--accent-purple); background: rgba(124, 58, 237, 0.06); } .badge-source { color: var(--accent-green); border-color: var(--accent-green); background: rgba(22, 163, 74, 0.06); } .badge-synthesis { color: var(--accent-teal); border-color: var(--accent-teal); background: rgba(13, 148, 136, 0.06); } .badge-concept { color: var(--accent-red); border-color: var(--accent-red); background: rgba(220, 38, 38, 0.06); } .badge-slide_deck { color: var(--accent-yellow); border-color: var(--accent-yellow); background: rgba(202, 138, 4, 0.06); } .badge-chart_note { color: var(--accent-red); border-color: var(--accent-red); background: rgba(220, 38, 38, 0.06); } .badge-research_brief { color: var(--accent-green); border-color: var(--accent-green); background: rgba(22, 163, 74, 0.06); } .badge-thematic_memo { color: var(--accent-teal); border-color: var(--accent-teal); background: rgba(13, 148, 136, 0.06); } .badge-entity_dossier { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(37, 99, 235, 0.06); } .tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; color: var(--accent-blue); background: rgba(37, 99, 235, 0.06); margin-right: 4px; } .wiki-page { max-width: 800px; } .page-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .page-header h1 { font-size: 1.8em; margin-bottom: 8px; font-weight: 800; } .page-header .subtitle { color: var(--text-secondary); font-size: 14px; } .page-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .page-tags { display: flex; gap: 4px; flex-wrap: wrap; } .meta-date { font-size: 12px; color: var(--text-muted); } .page-body { line-height: 1.7; } .page-body h1 { font-size: 1.6em; margin: 28px 0 12px; color: var(--text-primary); font-weight: 700; } .page-body h2 { font-size: 1.3em; margin: 24px 0 10px; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 6px; font-weight: 700; } .page-body h3 { font-size: 1.1em; margin: 20px 0 8px; color: var(--text-primary); font-weight: 600; } .page-body p { margin-bottom: 12px; color: var(--text-secondary); } .page-body ul, .page-body ol { margin: 8px 0 16px 24px; } .page-body li { margin-bottom: 4px; color: var(--text-secondary); } .page-body strong { color: var(--text-primary); } .page-body code { background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: var(--accent-orange); } .page-body pre { background: var(--bg-secondary); padding: 16px; border-radius: var(--radius); overflow-x: auto; margin: 12px 0; border: 1px solid var(--border); } .page-body pre code { background: none; padding: 0; color: var(--text-primary); } .page-body table { width: 100%; border-collapse: collapse; margin: 12px 0; } .page-body th { text-align: left; padding: 8px; border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text-primary); } .page-body td { padding: 8px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); } .page-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; } .page-body img { max-width: 100%; border-radius: var(--radius); margin: 16px 0; box-shadow: var(--shadow-md); } .page-body blockquote { border-left: 3px solid var(--border); padding-left: 16px; margin: 12px 0; color: var(--text-muted); } .wikilink { color: var(--accent-blue); border-bottom: 1px dashed rgba(37, 99, 235, 0.3); } .wikilink:hover { border-bottom-color: var(--accent-blue); text-decoration: none; } .page-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .file-path { font-family: monospace; font-size: 12px; color: var(--text-muted); } .search-page h1 { font-size: 1.6em; margin-bottom: 16px; font-weight: 800; } .search-form-large { display: flex; gap: 8px; margin-bottom: 24px; } .search-input-large { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary); padding: 12px 20px; border-radius: var(--radius-pill); font-size: 16px; outline: none; font-family: inherit; } .search-input-large:focus { border-color: var(--text-muted); } .btn { background: var(--accent); color: #fff; border: none; padding: 12px 24px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .search-summary { color: var(--text-secondary); margin-bottom: 20px; font-size: 14px; } .graph-page h1 { font-size: 1.6em; margin-bottom: 16px; font-weight: 800; } .error-page { text-align: center; padding-top: 80px; } .error-page h1 { font-size: 2em; margin-bottom: 12px; font-weight: 800; } .error-page p { color: var(--text-secondary); margin-bottom: 8px; } .error-page code { background: var(--bg-secondary); padding: 2px 8px; border-radius: 4px; } .nav-toggle-checkbox { display: none; } .nav-toggle-label { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-hamburger, .nav-hamburger::before, .nav-hamburger::after { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } .nav-hamburger { position: relative; } .nav-hamburger::before, .nav-hamburger::after { content: ''; position: absolute; left: 0; } .nav-hamburger::before { top: -7px; } .nav-hamburger::after { top: 7px; } .nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-hamburger { background: transparent; } .nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-hamburger::before { top: 0; transform: rotate(45deg); } .nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-hamburger::after { top: 0; transform: rotate(-45deg); } @media (max-width: 768px) { .topnav { padding: 0 16px; gap: 12px; flex-wrap: wrap; } .nav-toggle-label { display: flex; order: 1; } .topnav-links { display: none; flex-direction: column; width: 100%; order: 3; background: var(--bg-card); border-top: 1px solid var(--border); padding: 8px 0; } .nav-toggle-checkbox:checked ~ .topnav-links { display: flex; } .topnav-links .topnav-link { padding: 10px 16px; border-bottom: 1px solid var(--border-light); } .topnav-search { order: 2; flex: 1; } .topnav-search input { width: 100%; } .content { margin-top: var(--topnav-height); } .dashboard-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(3, 1fr); } .page-content { padding: 24px 16px; } } .dashboard-subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; } .explorer-stats { grid-template-columns: repeat(3, 1fr); max-width: 800px; } .stat-card.clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; text-decoration: none; display: block; } .stat-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; } .stat-sublabel { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .quick-links { margin-bottom: 32px; } .section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.1em; } .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); text-decoration: none; transition: all 0.15s; box-shadow: var(--shadow-sm); } .quick-link:hover { border-color: var(--text-muted); text-decoration: none; } .link-icon { font-size: 18px; } .link-text { font-size: 13px; font-weight: 500; } .explorer-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } .card-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .view-all { font-size: 12px; color: var(--accent-blue); } .entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .entity-tile { padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: all 0.15s; box-shadow: var(--shadow-sm); } .entity-tile:hover { border-color: var(--accent-blue); text-decoration: none; box-shadow: var(--shadow-md); } .entity-tile.missing-page { opacity: 0.5; border-style: dashed; } .entity-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .entity-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .source-count { font-size: 11px; color: var(--text-muted); } .source-list { display: flex; flex-direction: column; gap: 10px; } .source-item { padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: all 0.15s; box-shadow: var(--shadow-sm); } .source-item:hover { border-color: var(--text-muted); text-decoration: none; } .source-title { font-size: 13px; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; } .source-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .source-year { font-size: 11px; font-weight: 600; color: var(--accent-blue); } .source-pmid { font-size: 11px; color: var(--text-muted); font-family: monospace; } .stats-card .stat-section { margin-bottom: 20px; } .stats-card .stat-section:last-child { margin-bottom: 0; } .stats-card h3 { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .mini-stats { display: flex; flex-wrap: wrap; gap: 16px; } .mini-stat { display: flex; flex-direction: column; } .mini-stat-value { font-size: 18px; font-weight: 700; color: var(--accent-blue); } .mini-stat-label { font-size: 11px; color: var(--text-muted); } .mini-list { display: flex; flex-wrap: wrap; gap: 6px; } .mini-tag { padding: 3px 8px; background: var(--bg-hover); border-radius: 4px; font-size: 11px; color: var(--text-secondary); } .explorer-page { max-width: 1200px; } .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; } .filter-label { font-size: 12px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .filter-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .filter-btn { padding: 5px 14px; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-pill); text-decoration: none; transition: all 0.15s; } .filter-btn:hover { border-color: var(--text-muted); text-decoration: none; } .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .filter-count { margin-left: 4px; opacity: 0.7; } .coverage-badge { margin-left: auto; padding: 3px 10px; font-size: 11px; color: var(--text-muted); background: var(--bg-secondary); border-radius: var(--radius-pill); } .entity-sections { display: flex; flex-direction: column; gap: 32px; } .entity-section .section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; text-transform: none; letter-spacing: 0; } .section-count { color: var(--text-muted); font-weight: 400; font-size: 14px; } .entity-card { padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.15s; box-shadow: var(--shadow-sm); } .entity-card:hover { border-color: var(--accent-blue); } .entity-card.no-page { opacity: 0.5; border-style: dashed; } .entity-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .entity-header .entity-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .entity-aliases { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; font-style: italic; } .entity-stats { display: flex; gap: 12px; } .stat-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); } .stat-icon { font-size: 12px; } .missing-badge { padding: 1px 6px; font-size: 10px; color: var(--text-muted); background: var(--bg-hover); border-radius: 3px; } .sources-table-wrapper { overflow-x: auto; } .sources-table { font-size: 13px; } .sources-table .col-year { width: 60px; text-align: center; } .sources-table .col-title { min-width: 300px; } .sources-table .col-type { width: 120px; } .sources-table .col-pmid { width: 100px; } .sources-table .col-related { min-width: 150px; } .year-badge { padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--accent-blue); background: rgba(37, 99, 235, 0.06); border-radius: var(--radius-pill); } .year-unknown { color: var(--text-muted); } .source-title-link { font-weight: 500; line-height: 1.4; } .source-doi { font-size: 10px; color: var(--text-muted); margin-top: 4px; } .pmid-link { font-family: monospace; font-size: 11px; color: var(--accent-green); } .related-entities { display: flex; flex-wrap: wrap; gap: 4px; } .related-entity { padding: 2px 8px; font-size: 10px; color: var(--text-secondary); background: var(--bg-hover); border-radius: 3px; text-decoration: none; } .related-entity:hover { background: var(--border); text-decoration: none; } .more-related { font-size: 10px; color: var(--text-muted); } .badge.source-class { background: rgba(22, 163, 74, 0.06); color: var(--accent-green); } .search-suggestions { margin-bottom: 16px; padding: 10px 14px; background: rgba(37, 99, 235, 0.04); border-left: 3px solid var(--accent-blue); border-radius: 0 var(--radius) var(--radius) 0; } .suggestion-label { font-size: 13px; color: var(--text-secondary); margin-right: 8px; } .suggestion-link { padding: 3px 10px; font-size: 13px; font-weight: 500; color: var(--accent-blue); background: var(--bg-secondary); border-radius: var(--radius-pill); text-decoration: none; } .suggestion-link:hover { background: var(--bg-hover); text-decoration: none; } .filter-note { margin-left: 8px; color: var(--text-muted); font-size: 12px; } .search-result { padding: 14px 0; border-bottom: 1px solid var(--border-light); } .result-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .result-header .result-title { font-size: 15px; font-weight: 600; } .result-header .badge { font-size: 10px; } .result-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .result-type { font-size: 12px; color: var(--text-muted); } .linked-count { font-size: 11px; color: var(--accent-green); } .pmid-ref { font-family: monospace; font-size: 11px; color: var(--accent-green); } .empty-search { text-align: center; padding: 40px 20px; } .empty-search p { color: var(--text-secondary); margin-bottom: 24px; } .search-tips { max-width: 400px; margin: 0 auto; text-align: left; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .search-tips h4 { font-size: 13px; color: var(--text-primary); margin-bottom: 10px; font-weight: 600; } .search-tips ul { font-size: 12px; color: var(--text-secondary); margin-left: 16px; } .search-tips li { margin-bottom: 6px; } .badge.entity-type { background: rgba(37, 99, 235, 0.06); color: var(--accent-blue); } .status-badge { font-size: 11px; color: var(--text-muted); } .confidence-badge { font-size: 11px; color: var(--accent-orange); } .pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .page-info { font-size: 13px; color: var(--text-secondary); } .page-links { display: flex; gap: 8px; } .page-btn { padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-pill); text-decoration: none; transition: all 0.15s; } .page-btn:hover { border-color: var(--text-muted); text-decoration: none; } .page-btn.disabled { opacity: 0.4; cursor: not-allowed; } .col-citations { text-align: center; white-space: nowrap; } .citation-count { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--accent-teal); background: rgba(13, 148, 136, 0.06); border: 1px solid var(--accent-teal); border-radius: var(--radius-pill); cursor: help; } .oa-badge { display: inline-block; margin-left: 4px; padding: 1px 5px; font-size: 9px; font-weight: 600; color: #fff; background: var(--accent-green); border-radius: 3px; cursor: help; } .no-citations { color: var(--text-muted); font-size: 12px; } .entity-page { max-width: 1000px; } .badge-highlight { background: var(--accent-green); color: #fff; border-color: var(--accent-green); } .tag-alias { background: rgba(124, 58, 237, 0.06); color: var(--accent-purple); } .meta-label { font-size: 12px; color: var(--text-muted); margin-right: 8px; } .evidence-section { margin: 28px 0; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .section-title { font-size: 1.2em; margin-bottom: 16px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; font-weight: 700; } .section-icon { font-size: 1.1em; } .stat-card-safety { background: rgba(220, 38, 38, 0.04); border-color: var(--accent-red); } .stat-card-safety .stat-value { color: var(--accent-red); } .breakdown-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .breakdown-section h3 { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .breakdown-grid { display: flex; flex-wrap: wrap; gap: 8px; } .breakdown-item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-secondary); border-radius: var(--radius-pill); } .breakdown-badge { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; } .breakdown-count { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .tier-a { color: var(--accent-green); } .tier-b { color: var(--accent-teal); } .tier-c { color: var(--accent-orange); } .tier-d { color: var(--accent-red); } .tier-unknown { color: var(--text-muted); } .tier-rct { color: var(--accent-green); } .tier-meta-analysis { color: var(--accent-teal); } .tier-systematic-review { color: var(--accent-blue); } .tier-clinical-trial { color: var(--accent-purple); } .tier-observational { color: var(--accent-orange); } .tier-narrative-review { color: var(--text-muted); } .ods-section { background: rgba(37, 99, 235, 0.03); border-color: rgba(37, 99, 235, 0.15); } .ods-card { padding: 12px 16px; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); } .ods-title { font-weight: 500; margin-bottom: 8px; } .ods-title a { color: var(--text-primary); } .ods-title a:hover { color: var(--accent-blue); } .ods-link { font-size: 12px; } .ods-link a { color: var(--accent-blue); } .verticals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .vertical-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-sm); } .vertical-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .vertical-name { font-weight: 600; color: var(--text-primary); } .vertical-count { font-size: 11px; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 8px; border-radius: var(--radius-pill); } .vertical-sources { display: flex; flex-direction: column; gap: 8px; } .vertical-source { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; } .source-tier { font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; background: var(--bg-secondary); flex-shrink: 0; min-width: 28px; text-align: center; } .source-title { color: var(--text-primary); flex: 1; line-height: 1.4; } .source-title:hover { color: var(--accent-blue); } .source-meta { color: var(--text-muted); flex-shrink: 0; } .vertical-more { margin-top: 6px; font-size: 11px; } .vertical-more a { color: var(--accent-blue); } .journals-list { display: flex; flex-wrap: wrap; gap: 8px; } .journal-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; color: var(--text-secondary); } .journal-count { background: var(--bg-primary); color: var(--text-muted); padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 500; } .safety-section { background: rgba(220, 38, 38, 0.03); border-color: rgba(220, 38, 38, 0.15); } .safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .safety-card { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; } .safety-card a { color: var(--text-primary); font-weight: 500; } .safety-card a:hover { color: var(--accent-red); } .safety-count { font-size: 11px; color: var(--accent-red); background: rgba(220, 38, 38, 0.06); padding: 2px 8px; border-radius: var(--radius-pill); } .sources-table-container { overflow-x: auto; } .sources-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sources-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .sources-table td { padding: 12px 8px; border-bottom: 1px solid var(--border-light); vertical-align: top; } .sources-table tr:hover { background: var(--bg-secondary); } .tier-badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); background: var(--bg-secondary); border: 1px solid var(--border); } .tier-badge.tier-a { color: var(--accent-green); border-color: var(--accent-green); background: rgba(22, 163, 74, 0.06); } .tier-badge.tier-b { color: var(--accent-teal); border-color: var(--accent-teal); background: rgba(13, 148, 136, 0.06); } .tier-badge.tier-c { color: var(--accent-orange); border-color: var(--accent-orange); background: rgba(217, 119, 6, 0.06); } .tier-badge.tier-d { color: var(--accent-red); border-color: var(--accent-red); background: rgba(220, 38, 38, 0.06); } .evidence-badge { display: inline-block; padding: 2px 6px; font-size: 10px; border-radius: 3px; background: var(--bg-secondary); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .ev-rct { color: var(--accent-green); } .ev-meta-analysis { color: var(--accent-teal); } .ev-systematic-review { color: var(--accent-blue); } .source-link { color: var(--text-primary); font-weight: 500; } .source-link:hover { color: var(--accent-blue); } .source-abstract { margin-top: 6px; font-size: 12px; color: var(--text-secondary); } .evidence-results-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); } .evidence-results-section .section-heading { font-size: 18px; font-weight: 700; margin-bottom: 16px; } .evidence-results-section .section-subtitle { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 8px; } .result-evidence .result-excerpt { margin-top: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .badge.evidence-tier { background: rgba(37, 99, 235, 0.06); color: var(--accent-blue); text-transform: uppercase; font-size: 9px; letter-spacing: 0.3px; } .quality-badge { font-size: 11px; font-weight: 600; color: var(--accent-green); } .nct-ref { font-size: 11px; color: var(--accent-purple); } .doi-ref { font-size: 11px; color: var(--text-muted); } .rank-reason { font-size: 10px; color: var(--text-muted); font-style: italic; } .evidence-more { margin-top: 12px; font-size: 13px; } .source-links { margin-top: 6px; display: flex; gap: 12px; font-size: 11px; } .source-external { color: var(--accent-blue); } .source-vertical { color: var(--text-muted); } .source-journal, .source-year { white-space: nowrap; color: var(--text-secondary); } .page-body-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); } @media (max-width: 768px) { .verticals-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } NEW UI COMPONENTS — Full Rebuild .breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; padding: 0; } .breadcrumbs a { color: var(--accent-blue); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .bc-sep { color: var(--border); font-weight: 300; } .site-footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 40px 0 24px; margin-top: 48px; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } .footer-brand { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); } .footer-tagline { color: var(--text-muted); font-size: 0.85rem; margin: 6px 0 0; } .footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 10px; } .footer-col a { display: block; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; padding: 3px 0; } .footer-col a:hover { color: var(--text-primary); } .social-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .social-icon { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-hover); color: var(--text-secondary); padding: 0 !important; transition: background 0.2s, color 0.2s; } .social-icon:hover { background: var(--accent-blue); color: #fff; } .social-icon svg { flex-shrink: 0; } .dshea-disclaimer { max-width: 1100px; margin: 16px auto 0; padding: 12px 24px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; font-size: 0.82rem; color: #92400e; line-height: 1.5; } .dshea-disclaimer strong { color: #78350f; } .footer-legal { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .footer-legal a { color: var(--text-muted); text-decoration: underline; } .chat-disclaimer-banner { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; padding: 10px 16px; margin-bottom: 12px; font-size: 0.85rem; color: #92400e; line-height: 1.5; } .chat-disclaimer-banner a { color: #78350f; text-decoration: underline; } .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1e293b; color: #e2e8f0; padding: 16px 24px; box-shadow: 0 -2px 12px rgba(0,0,0,.3); } .cookie-banner-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cookie-banner p { margin: 0; font-size: 0.88rem; line-height: 1.5; } .cookie-banner a { color: #38bdf8; text-decoration: underline; } .cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; } .cookie-btn { border: none; border-radius: 6px; padding: 8px 18px; font-size: 0.85rem; cursor: pointer; font-weight: 600; } .cookie-btn-accept { background: #0d9488; color: #fff; } .cookie-btn-accept:hover { background: #0f766e; } .cookie-btn-reject { background: #475569; color: #e2e8f0; } .cookie-btn-reject:hover { background: #334155; } .ai-gen-badge { display: inline-flex; align-items: center; gap: 4px; background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 500; line-height: 1.6; white-space: nowrap; } .ai-gen-badge a { color: #7c3aed; text-decoration: underline; } .ai-gen-icon { font-size: 0.85rem; } .ix-critical-callout { background: #fef2f2; border: 2px solid #dc2626; border-radius: 8px; padding: 14px 18px; margin: 12px 0; color: #991b1b; font-size: 0.92rem; line-height: 1.5; } .ix-critical-callout strong { color: #7f1d1d; } .safety-score-fallback { font-size: 0.82rem; color: #6b7280; margin-top: 4px; font-style: italic; } .evidence-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; font-size: 0.82rem; color: #475569; } .ev-legend-item { display: inline-flex; align-items: center; gap: 4px; } .ev-legend-item .tier-badge { font-size: 0.72rem; } .tldr-box { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 14px 18px; margin: 12px 0 20px; } .tldr-box h3 { font-size: 0.9rem; margin: 0 0 8px; color: #166534; } .tldr-box ul { margin: 0; padding-left: 18px; font-size: 0.88rem; line-height: 1.6; color: #1e293b; } .ask-ai-cta { position: fixed; bottom: 80px; right: 24px; z-index: 100; background: #0d9488; color: #fff; border: none; border-radius: 24px; padding: 10px 20px; font-size: 0.88rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); text-decoration: none; display: none; } .ask-ai-cta:hover { background: #0f766e; } @media (min-width: 769px) { .ask-ai-cta { display: inline-flex; align-items: center; gap: 6px; } } @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr; } } .hero { text-align: center; padding: 48px 0 36px; } .hero-title { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; } .hero-subtitle { font-size: 1.1rem; color: var(--text-muted); margin: 0 0 28px; } .hero-search { display: flex; max-width: 560px; margin: 0 auto 24px; gap: 0; } .hero-search-input { flex: 1; padding: 14px 20px; border: 2px solid var(--border); border-right: none; border-radius: 12px 0 0 12px; font-size: 1.05rem; outline: none; background: var(--bg-card); color: var(--text-primary); } .hero-search-input:focus { border-color: var(--accent-blue); } .hero-search-btn { padding: 14px 28px; background: var(--accent-blue); color: #fff; border: 2px solid var(--accent-blue); border-radius: 0 12px 12px 0; font-size: 1.05rem; font-weight: 600; cursor: pointer; } .hero-search-btn:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); } .hero-stats { display: flex; justify-content: center; gap: 32px; } .hero-stat { text-align: center; text-decoration: none; color: inherit; } .hero-stat-number { display: block; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); } .hero-stat-label { display: block; font-size: 0.85rem; color: var(--text-muted); } .home-section { margin-top: 36px; } .section-heading { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .category-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; transition: all 0.15s; } .category-card:hover { border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08); transform: translateY(-1px); } .category-icon { font-size: 1.8rem; } .category-name { font-weight: 600; font-size: 0.95rem; } .category-count { font-size: 0.8rem; color: var(--text-muted); } .category-all { background: var(--bg-secondary); border-style: dashed; } .supp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .supp-grid-full { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .supp-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; transition: all 0.15s; } .supp-card:hover { border-color: var(--accent-blue); box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08); transform: translateY(-1px); } .supp-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .supp-card-name { font-weight: 600; font-size: 1rem; color: var(--text-primary); } .supp-card-meta { display: flex; gap: 8px; flex-wrap: wrap; } .supp-card-count { font-size: 0.85rem; color: var(--text-muted); } .supp-card-form { font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-secondary); padding: 2px 8px; border-radius: 6px; } .supp-card-type { font-size: 0.75rem; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500; } .safety-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 2px 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; } .safety-safe { background: rgba(22, 163, 74, 0.1); color: #16a34a; } .safety-caution { background: rgba(217, 119, 6, 0.1); color: #b45309; } .safety-concern { background: rgba(220, 38, 38, 0.1); color: #dc2626; } .supp-detail-header h1 { font-size: 2rem; font-weight: 800; margin: 0 0 8px; } .supp-detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .supp-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .supp-stat-card { display: flex; flex-direction: column; align-items: center; padding: 16px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; transition: all 0.15s; } .supp-stat-card:hover { border-color: var(--accent-blue); } .supp-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); } .supp-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .browse-products-btn { display: inline-block; padding: 12px 28px; background: var(--accent-blue); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 1rem; margin-bottom: 24px; transition: background 0.15s; } .browse-products-btn:hover { background: var(--accent-blue-hover); } .clickable-sections { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; } .clickable-pills { display: flex; flex-wrap: wrap; gap: 8px; } .click-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; text-decoration: none; color: inherit; font-size: 0.9rem; transition: all 0.15s; } .click-pill:hover { border-color: var(--accent-blue); background: rgba(37, 99, 235, 0.04); transform: translateY(-1px); } .pill-label { font-weight: 500; } .pill-count { font-size: 0.8rem; color: var(--text-muted); background: var(--bg-secondary); padding: 1px 7px; border-radius: 10px; } .click-pill-active { border-color: var(--accent-blue); background: rgba(37, 99, 235, 0.08); color: var(--accent-blue); font-weight: 600; } .click-pill-clear { border-color: #e74c3c; color: #e74c3c; font-size: 0.85rem; } .click-pill-clear:hover { background: rgba(231, 76, 60, 0.06); border-color: #c0392b; } .count-badge { font-size: 0.75em; color: var(--text-muted); font-weight: 400; } .supp-section-nav { display: flex; gap: 0.25rem; padding: 0.6rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-main); z-index: 10; } .supp-nav-link { padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: background 0.15s, color 0.15s; } .supp-nav-link:hover { background: rgba(37, 99, 235, 0.06); color: var(--accent-blue); } .marketplace-details { border: 1px solid var(--border); border-radius: 8px; padding: 0; margin-bottom: 1.5rem; background: var(--bg-card); } .marketplace-summary { padding: 0.8rem 1rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--text-muted); list-style: none; display: flex; align-items: center; gap: 0.5rem; } .marketplace-summary::before { content: '▸'; font-size: 0.8rem; transition: transform 0.2s; } .marketplace-details[open] .marketplace-summary::before { transform: rotate(90deg); } .marketplace-summary:hover { color: var(--text-primary); background: rgba(0,0,0,0.02); } .marketplace-details .clickable-sections { padding: 0 1rem 1rem; } .ods-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .ods-link-main { font-weight: 600; font-size: 1rem; } .ods-summary { margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } .safety-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .safety-card-header { display: flex; justify-content: space-between; align-items: center; } .safety-title { font-weight: 600; font-size: 1rem; } .safety-date-range { font-size: 0.78rem; color: var(--text-secondary); background: #f3f4f6; padding: 3px 10px; border-radius: 12px; white-space: nowrap; } .safety-stats { display: flex; gap: 2rem; } .safety-stat { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 0.75rem 1rem; background: #f9fafb; border-radius: 8px; } .safety-stat-serious { background: #fef2f2; } .safety-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--text-primary); } .safety-stat-serious .safety-stat-value { color: #dc2626; } .safety-stat-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; } .safety-events { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .safety-events-label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; } .safety-event-tag { font-size: 0.8rem; background: #fef2f2; color: #991b1b; padding: 3px 10px; border-radius: 12px; border: 1px solid #fecaca; } .safety-event-tag small { opacity: 0.6; } .safety-source-note { font-size: 0.72rem; color: #9ca3af; font-style: italic; margin: 0; } .rs-expand-btn { display: block; width: 100%; padding: 10px; margin-top: 8px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--accent-blue); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } .rs-expand-btn:hover { background: rgba(37, 99, 235, 0.04); } .citation-link { font-size: 0.85em; font-weight: 600; text-decoration: none; padding: 1px 5px; border-radius: 4px; white-space: nowrap; } .pmid-link { color: #2563eb; background: rgba(37, 99, 235, 0.08); } .pmid-link:hover { background: rgba(37, 99, 235, 0.16); text-decoration: underline; } .doi-link { color: #059669; background: rgba(5, 150, 105, 0.08); } .doi-link:hover { background: rgba(5, 150, 105, 0.16); text-decoration: underline; } .nct-link { color: #d97706; background: rgba(217, 119, 6, 0.08); } .nct-link:hover { background: rgba(217, 119, 6, 0.16); text-decoration: underline; } .claims-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .claim-stat { text-align: center; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; } .claim-stat-value { display: block; font-size: 1.5rem; font-weight: 700; } .claim-stat-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .product-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; transition: all 0.15s; } .product-card:hover { border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06); } .product-card-thumb { width: 100%; height: 120px; overflow: hidden; border-radius: 6px; background: #f8f8f8; } .product-card-thumb img { width: 100%; height: 100%; object-fit: contain; } .product-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .product-card-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); line-height: 1.3; } .product-card-meta { display: flex; gap: 8px; flex-wrap: wrap; } .product-card-brand { font-size: 0.85rem; color: var(--text-secondary); } .product-card-form { font-size: 0.8rem; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 8px; border-radius: 6px; } .product-card-serving { font-size: 0.8rem; color: var(--text-muted); } .product-list-header h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 4px; } .product-list-subtitle { color: var(--text-muted); margin: 0 0 20px; } .product-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 16px; background: var(--bg-secondary); border-radius: 10px; } .filter-group { display: flex; align-items: flex-start; gap: 10px; } .filter-group .filter-label { min-width: 50px; padding-top: 6px; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; } .filter-buttons-wrap { flex-wrap: wrap; } .az-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; padding: 12px; background: var(--bg-secondary); border-radius: 10px; } .az-link { padding: 4px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; text-decoration: none; color: var(--text-secondary); transition: all 0.12s; } .az-link:hover { background: var(--bg-hover); color: var(--text-primary); } .az-link.active { background: var(--accent-blue); color: #fff; } .az-disabled { color: var(--border); cursor: default; } .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .brand-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: inherit; transition: all 0.15s; } .brand-card:hover { border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06); } .brand-card-name { font-weight: 600; font-size: 1rem; } .brand-card-count { font-size: 0.85rem; color: var(--text-muted); } .brand-card-supps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .brand-card-supp { font-size: 0.75rem; color: var(--accent-blue); background: rgba(37, 99, 235, 0.06); padding: 2px 8px; border-radius: 6px; } .brand-detail-header h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 4px; } .brand-detail-subtitle { color: var(--text-muted); margin: 0 0 20px; } .brand-supps { margin-bottom: 24px; } .directory-header h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 4px; } .directory-subtitle { color: var(--text-muted); margin: 0 0 20px; } .view-all-link { display: inline-block; margin-top: 12px; color: var(--accent-blue); text-decoration: none; font-weight: 500; font-size: 0.95rem; } .view-all-link:hover { text-decoration: underline; } .empty-state { text-align: center; padding: 40px 0; color: var(--text-muted); } .empty-state .btn { display: inline-block; margin-top: 12px; padding: 8px 20px; background: var(--accent-blue); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; } @media (max-width: 768px) { .hero-title { font-size: 1.8rem; } .hero-search { flex-direction: column; gap: 8px; } .hero-search-input { border-radius: 10px; border-right: 2px solid var(--border); } .hero-search-btn { border-radius: 10px; } .hero-stats { gap: 16px; } .category-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .supp-grid, .supp-grid-full { grid-template-columns: repeat(2, 1fr); } .product-grid { grid-template-columns: 1fr; } .brand-grid { grid-template-columns: 1fr; } .claims-grid { grid-template-columns: 1fr; } .supp-stats-row { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .category-grid { grid-template-columns: repeat(2, 1fr); } .supp-grid, .supp-grid-full { grid-template-columns: 1fr; } } .verdict-card { border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; border: 2px solid; } .verdict-safe { border-color: #bbf7d0; background: #f0fdf4; } .verdict-caution { border-color: #fde68a; background: #fffbeb; } .verdict-concern { border-color: #fecaca; background: #fef2f2; } .verdict-header { display: flex; gap: 20px; align-items: flex-start; } .verdict-score { display: flex; flex-direction: column; align-items: center; min-width: 80px; } .verdict-icon { font-size: 2rem; } .verdict-number { font-size: 2rem; font-weight: 800; line-height: 1; margin-top: 4px; color: var(--text-primary); } .verdict-number small { font-size: 1rem; font-weight: 500; color: var(--text-muted); } .verdict-detail { flex: 1; } .verdict-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); } .verdict-reasons { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .verdict-flag { font-size: 0.88rem; line-height: 1.5; padding-left: 20px; position: relative; } .verdict-flag::before { position: absolute; left: 0; } .verdict-flag-ok::before { content: '✓'; color: #16a34a; } .verdict-flag-info::before { content: 'ℹ'; color: #2563eb; } .verdict-flag-high::before { content: '⚠'; color: #d97706; } .verdict-flag-critical::before { content: '🚨'; } .verdict-flag-medium::before { content: '•'; color: #d97706; } .verdict-compliance { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); } .compliance-grade { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; font-size: 1.3rem; font-weight: 800; color: #fff; } .grade-A { background: #16a34a; } .grade-B { background: #65a30d; } .grade-C { background: #d97706; } .grade-D { background: #dc2626; } .grade-F { background: #991b1b; } .compliance-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .dose-bar-container { margin-top: 8px; } .dose-bar-track { position: relative; height: 10px; background: #f0f0f2; border-radius: 5px; overflow: visible; } .dose-bar-fill { height: 100%; border-radius: 5px; transition: width 0.3s; } .dose-bar-ok { background: #86efac; } .dose-bar-warn { background: #fde68a; } .dose-bar-danger { background: #fca5a5; } .dose-bar-rda { position: absolute; top: -3px; width: 2px; height: 16px; background: #16a34a; border-radius: 1px; z-index: 1; } .dose-bar-ul { position: absolute; top: -3px; width: 2px; height: 16px; background: #dc2626; border-radius: 1px; z-index: 1; } .dose-bar-labels { display: flex; justify-content: space-between; font-size: 0.72rem; margin-top: 3px; color: var(--text-muted); } .dose-label-rda { color: #16a34a; } .dose-label-ul { color: #dc2626; } .dose-label-you { font-weight: 600; color: var(--text-secondary); } .stmt-group { padding: 14px 16px; border-radius: var(--radius); background: var(--bg-secondary); margin-bottom: 12px; } .stmt-group-warning { background: #fffbeb; border-left: 3px solid #d97706; } .stmt-group-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; color: var(--text-primary); } .stmt-text { font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 6px; white-space: pre-line; } .stmt-text:last-child { margin-bottom: 0; } .product-details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .detail-item { display: flex; flex-direction: column; padding: 10px 14px; background: var(--bg-secondary); border-radius: var(--radius); } .detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; } .detail-value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } .detail-value a { color: var(--accent-blue); text-decoration: none; } .detail-value a:hover { text-decoration: underline; } .similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; } .similar-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-card); transition: box-shadow 0.15s, border-color 0.15s; } .similar-card:hover { border-color: var(--accent-blue); box-shadow: var(--shadow-md); } .similar-thumb { height: 100px; background: #f8f8f8; display: flex; align-items: center; justify-content: center; overflow: hidden; } .similar-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; } .similar-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .similar-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .similar-brand { font-size: 0.78rem; color: var(--text-muted); } .top-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; } .top-product-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-card); transition: box-shadow 0.15s, border-color 0.15s; } .top-product-card:hover { border-color: var(--accent-blue); box-shadow: var(--shadow-md); } .tp-thumb { height: 90px; background: #f8f8f8; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tp-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; } .tp-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .tp-name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .tp-brand { font-size: 0.76rem; color: var(--text-muted); } .tp-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .tp-form { font-size: 0.72rem; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; } .dri-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-card); } .dri-values { display: flex; gap: 16px; flex-wrap: wrap; } .dri-item { flex: 1; min-width: 120px; padding: 12px; border-radius: var(--radius); text-align: center; } .dri-rda { background: #f0fdf4; border: 1px solid #bbf7d0; } .dri-ai { background: #eff6ff; border: 1px solid #bfdbfe; } .dri-ul { background: #fef2f2; border: 1px solid #fecaca; } .dri-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .dri-rda .dri-label { color: #16a34a; } .dri-ai .dri-label { color: #2563eb; } .dri-ul .dri-label { color: #dc2626; } .dri-value { display: block; font-size: 1.2rem; font-weight: 800; color: var(--text-primary); } .dri-desc { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; } .dri-source { font-size: 0.78rem; color: var(--text-muted); margin: 12px 0 0; } .evidence-stats-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .ev-stat { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-secondary); } .ev-stat.ev-meta-analysis { background: #f0fdf4; color: #15803d; } .ev-stat.ev-systematic-review { background: #eff6ff; color: #1d4ed8; } .ev-stat.ev-rct { background: #fefce8; color: #854d0e; } .ev-stat.ev-clinical-trial { background: #fdf4ff; color: #7e22ce; } .ev-stat.ev-cochrane-review { background: #fff7ed; color: #c2410c; } .ev-stat.ev-guideline { background: #f0f9ff; color: #0369a1; } .research-sources-list { display: flex; flex-direction: column; gap: 10px; } .research-source-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); transition: border-color 0.15s; } .research-source-card:hover { border-color: var(--accent-blue); } .rs-header { display: flex; align-items: flex-start; gap: 8px; } .rs-title { font-weight: 600; font-size: 0.92rem; color: var(--text-primary); line-height: 1.4; } .rs-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .rs-journal { font-size: 0.8rem; color: var(--text-muted); font-style: italic; } .rs-year { font-size: 0.78rem; color: var(--text-muted); } .rs-sample { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); padding: 1px 6px; border-radius: 4px; } .rs-abstract { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 0; } .rs-links { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .rs-link { font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; text-decoration: none; transition: opacity 0.15s; } .rs-link:hover { opacity: 0.85; } .rs-link-pubmed { background: #1a5276; color: #fff; } .rs-link-doi { background: #f97316; color: #fff; } .rs-link-nct { background: #7c3aed; color: #fff; } .rs-link-cochrane { background: #0891b2; color: #fff; } .rs-more { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px; font-style: italic; } @media (max-width: 768px) { .filter-bar { flex-direction: column; align-items: flex-start; } .filter-buttons { flex-wrap: wrap; } .az-nav { flex-wrap: wrap; gap: 4px; } .az-link { font-size: 0.75rem; padding: 4px 6px; } .directory-search-input { max-width: 100%; } .product-card-thumb { height: 80px; } .label-primary-img { max-height: 300px; } .label-gallery { grid-template-columns: repeat(2, 1fr); } .supp-detail-header h1 { font-size: 1.5rem; } .brand-detail-header h1 { font-size: 1.5rem; } .product-list-header h1 { font-size: 1.5rem; } .verdict-header { flex-direction: column; gap: 12px; } .verdict-score { flex-direction: row; gap: 8px; } .similar-grid { grid-template-columns: repeat(2, 1fr); } .product-details-grid { grid-template-columns: 1fr 1fr; } .top-products-grid { grid-template-columns: repeat(2, 1fr); } .dri-values { flex-direction: column; } .condition-grid { grid-template-columns: 1fr; } } .ai-summary-card { background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%); border: 1px solid #e0e7ff; border-radius: 12px; padding: 1.5rem; } .ai-overview { font-size: 1.05rem; line-height: 1.7; color: #1e293b; margin-bottom: 1.2rem; } .ai-sub-heading { font-size: 0.95rem; font-weight: 600; color: #334155; margin: 1.2rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid #e2e8f0; } .condition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 0.5rem; } .condition-card { background: #fff; border-radius: 8px; padding: 0.8rem 1rem; border-left: 3px solid #94a3b8; } .condition-card.condition-strong { border-left-color: #16a34a; } .condition-card.condition-moderate { border-left-color: #2563eb; } .condition-card.condition-weak { border-left-color: #d97706; } .condition-card.condition-insufficient { border-left-color: #94a3b8; } .condition-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; } .condition-name { font-weight: 600; font-size: 0.9rem; color: #1e293b; } .strength-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .strength-strong { background: rgba(22,163,74,0.1); color: #16a34a; } .strength-moderate { background: rgba(37,99,235,0.1); color: #2563eb; } .strength-weak { background: rgba(217,119,6,0.1); color: #d97706; } .strength-insufficient { background: rgba(148,163,184,0.15); color: #64748b; } .condition-summary { font-size: 0.85rem; color: #475569; line-height: 1.5; margin: 0; } .key-findings-list { padding-left: 1.2rem; margin: 0.3rem 0; } .key-findings-list li { font-size: 0.9rem; color: #334155; line-height: 1.6; margin-bottom: 0.3rem; } .ai-disclaimer { font-size: 0.75rem; color: #94a3b8; font-style: italic; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid #e2e8f0; } .static-page { max-width: 820px; margin: 0 auto; padding: 2rem 1rem; } .static-page-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid #e0e7ff; } .static-page-header h1 { font-size: 2rem; color: #1e293b; margin-bottom: 0.5rem; } .static-page-lead { font-size: 1.15rem; color: #475569; line-height: 1.6; } .static-section { margin-bottom: 2rem; } .static-section h2 { font-size: 1.3rem; color: #1e293b; margin-bottom: 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid #e2e8f0; } .static-section p { line-height: 1.7; color: #334155; margin-bottom: 0.8rem; } .data-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 1rem 0; } .data-source-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; } .data-source-card h3 { font-size: 0.95rem; color: #2563eb; margin-bottom: 0.3rem; } .data-source-card p { font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.5; } .feature-list { padding-left: 1.2rem; margin: 0.5rem 0; } .feature-list li { line-height: 1.7; color: #334155; margin-bottom: 0.4rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 1rem 0; } .stat-card { background: linear-gradient(135deg, #f0f9ff, #f8fafc); border: 1px solid #e0e7ff; border-radius: 8px; padding: 1rem; text-align: center; } .stat-card .stat-number { display: block; font-size: 1.6rem; font-weight: 700; color: #1e293b; } .stat-card .stat-label { display: block; font-size: 0.8rem; color: #64748b; margin-top: 0.2rem; } .stat-card .stat-detail { display: block; font-size: 0.7rem; color: #94a3b8; margin-top: 0.2rem; } .evidence-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } .evidence-table th { background: #f1f5f9; text-align: left; padding: 0.6rem 0.8rem; border-bottom: 2px solid #e2e8f0; color: #334155; font-weight: 600; } .evidence-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid #f1f5f9; color: #475569; } .evidence-table tr:hover td { background: #f8fafc; } .disclaimer-section { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 1rem 1.2rem; margin-top: 2rem; } .disclaimer-section p { color: #92400e; margin: 0; } .best-page { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; } .best-header h1 { font-size: 1.8rem; color: #1e293b; margin-bottom: 0.3rem; } .best-year { font-size: 0.9rem; color: #94a3b8; font-weight: 400; } .best-subtitle { color: #64748b; font-size: 1rem; margin-bottom: 1.5rem; } .best-stats-row { display: flex; gap: 12px; margin-bottom: 1.5rem; flex-wrap: wrap; } .best-stat { background: linear-gradient(135deg, #f0f9ff, #f8fafc); border: 1px solid #e0e7ff; border-radius: 8px; padding: 0.8rem 1.2rem; text-align: center; min-width: 120px; } .best-stat-number { display: block; font-size: 1.4rem; font-weight: 700; color: #1e293b; } .best-stat-label { display: block; font-size: 0.75rem; color: #64748b; margin-top: 0.1rem; } .best-evidence-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.2rem; margin-bottom: 1.5rem; } .best-evidence-summary h2 { font-size: 1.1rem; color: #1e293b; margin-bottom: 0.5rem; } .best-overview { color: #334155; line-height: 1.6; margin-bottom: 0.8rem; } .best-conditions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.5rem; } .best-condition-pill { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; font-weight: 500; } .condition-strong { background: #dcfce7; color: #166534; } .condition-moderate { background: #fef9c3; color: #854d0e; } .condition-weak { background: #fee2e2; color: #991b1b; } .best-rankings h2 { font-size: 1.2rem; color: #1e293b; margin-bottom: 0.3rem; } .ranking-method { font-size: 0.85rem; color: #64748b; margin-bottom: 1rem; } .ranking-table-wrap { overflow-x: auto; } .ranking-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .ranking-table th { background: #f1f5f9; text-align: left; padding: 0.6rem 0.8rem; border-bottom: 2px solid #e2e8f0; color: #334155; font-weight: 600; white-space: nowrap; } .rank-col { width: 40px; text-align: center; } .safety-col { width: 80px; } .evidence-col { width: 120px; } .form-col { width: 100px; } .ranking-row { cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background 0.15s; } .ranking-row:hover { background: #f8fafc; } .rank-cell { text-align: center; font-weight: 600; color: #64748b; padding: 0.5rem; } .product-cell { padding: 0.5rem 0.8rem; } .ranking-product-link { display: flex; align-items: center; gap: 10px; text-decoration: none; } .ranking-thumb { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; border: 1px solid #e2e8f0; background: #fff; flex-shrink: 0; } .ranking-product-info { display: flex; flex-direction: column; } .ranking-name { color: #1e293b; font-weight: 500; font-size: 0.85rem; line-height: 1.3; } .ranking-brand { color: #64748b; font-size: 0.75rem; } .safety-cell { text-align: center; padding: 0.5rem; } .evidence-cell { padding: 0.5rem; } .evidence-bar-wrap { width: 60px; height: 6px; background: #e2e8f0; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 4px; } .evidence-bar { height: 100%; background: #3b82f6; border-radius: 3px; } .evidence-pct { font-size: 0.75rem; color: #64748b; } .evidence-na { color: #cbd5e1; } .form-cell { color: #64748b; font-size: 0.8rem; padding: 0.5rem; } .ranking-note { font-size: 0.85rem; color: #64748b; margin-top: 0.8rem; } .ranking-methodology { margin-top: 2rem; padding: 1rem 1.2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; } .ranking-methodology h3 { font-size: 1rem; color: #1e293b; margin-bottom: 0.4rem; } .ranking-methodology p { font-size: 0.85rem; color: #475569; line-height: 1.6; margin-bottom: 0.4rem; } .condition-page { max-width: 860px; margin: 0 auto; padding: 2rem 1rem; } .condition-header h1 { font-size: 1.8rem; color: #1e293b; margin-bottom: 0.3rem; } .condition-subtitle { color: #64748b; font-size: 1rem; margin-bottom: 1.5rem; } .condition-method { font-size: 0.85rem; color: #64748b; margin-bottom: 1rem; } .condition-table-wrap { overflow-x: auto; } .condition-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .condition-table th { background: #f1f5f9; text-align: left; padding: 0.6rem 0.8rem; border-bottom: 2px solid #e2e8f0; color: #334155; font-weight: 600; } .condition-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid #f1f5f9; } .condition-row:hover { background: #f8fafc; } .condition-supplement-link { color: #2563eb; text-decoration: none; font-weight: 500; } .condition-supplement-link:hover { text-decoration: underline; } .condition-best-link { display: block; font-size: 0.75rem; color: #64748b; margin-top: 2px; } .condition-best-link:hover { color: #2563eb; } .condition-sources, .condition-products { color: #475569; } .condition-disclaimer { margin-top: 2rem; padding: 1rem 1.2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; } .condition-disclaimer p { font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 0.4rem; } .condition-empty { text-align: center; padding: 3rem 1rem; color: #64748b; } .condition-index-page { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; } .condition-index-header h1 { font-size: 1.8rem; color: #1e293b; margin-bottom: 0.3rem; } .condition-index-subtitle { color: #64748b; margin-bottom: 1.5rem; } .condition-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .condition-index-card { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; text-decoration: none; transition: border-color 0.15s, background 0.15s; } .condition-index-card:hover { border-color: #93c5fd; background: #eff6ff; } .condition-index-name { color: #1e293b; font-weight: 500; font-size: 0.9rem; } .condition-index-count { color: #64748b; font-size: 0.75rem; white-space: nowrap; } .faq-list { margin-top: 0.5rem; } .faq-item { border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px; overflow: hidden; } .faq-item[open] { border-color: #93c5fd; } .faq-question { padding: 0.7rem 1rem; font-weight: 500; color: #1e293b; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .faq-question::-webkit-details-marker { display: none; } .faq-question::before { content: '+'; font-size: 1.2rem; color: #3b82f6; font-weight: 600; flex-shrink: 0; width: 20px; text-align: center; } .faq-item[open] .faq-question::before { content: '−'; } .faq-answer { padding: 0 1rem 0.8rem 1.8rem; color: #475569; line-height: 1.6; font-size: 0.9rem; margin: 0; } .chat-pmid, .chat-doi, .chat-nct { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.8rem; font-family: monospace; text-decoration: none; margin: 0 2px; } .chat-pmid { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; } .chat-pmid:hover { background: #bfdbfe; } .chat-doi { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .chat-doi:hover { background: #bbf7d0; } .chat-nct { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .chat-nct:hover { background: #fde68a; } .chat-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 200px); } .chat-header { padding: 16px 0; border-bottom: 1px solid var(--border); } .chat-header h1 { font-size: 1.5rem; margin: 0; } .chat-subtitle { color: var(--text-secondary); margin: 4px 0 0; font-size: 0.9rem; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px 0; } .chat-welcome { text-align: center; padding: 20px 0; } .chat-welcome h3 { color: var(--text-secondary); margin-bottom: 16px; } .suggested-queries { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .query-btn { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 20px; padding: 8px 16px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; } .query-btn:hover { background: #dbeafe; } .message { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; max-width: 85%; line-height: 1.6; } .message.user { background: #dbeafe; margin-left: auto; border-bottom-right-radius: 4px; } .message.assistant { background: var(--bg-secondary); margin-right: auto; border-bottom-left-radius: 4px; } .message.assistant p { margin: 0 0 8px; } .message.assistant p:last-child { margin-bottom: 0; } .message.assistant code { background: var(--bg-hover); padding: 2px 4px; border-radius: 3px; font-size: 0.85em; } .message.assistant strong { color: var(--accent-blue); } .message.assistant .chat-heading { margin: 12px 0 6px; font-size: 1rem; color: var(--text-primary); } .message.assistant h2.chat-heading { font-size: 1.1rem; } .message.assistant h3.chat-heading { font-size: 1rem; } .message.assistant h4.chat-heading { font-size: 0.95rem; } .message.assistant hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; } .thinking-badge { display: inline-block; background: #fff3e0; color: #e65100; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; margin-bottom: 8px; } .source-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 0.85rem; } .source-card .source-title { font-weight: 600; margin-bottom: 4px; } .source-card .source-meta { color: var(--text-secondary); font-size: 0.8rem; } .source-card .quality-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; } .quality-badge.tier-a { background: #c8e6c9; color: #2e7d32; } .quality-badge.tier-b { background: #e3f2fd; color: #1565c0; } .quality-badge.tier-c { background: #fff3e0; color: #e65100; } .quality-badge.tier-d { background: #ffebee; color: #c62828; } .chat-sources { border-top: 1px solid var(--border); padding: 12px 0; max-height: 200px; overflow-y: auto; } .chat-sources h3 { font-size: 1rem; margin: 0 0 8px; } .chat-input-form { display: flex; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--bg-primary); } .chat-input { flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 24px; font-size: 1rem; outline: none; } .chat-input:focus { border-color: var(--accent-blue); } .chat-send-btn { background: var(--accent-blue); color: white; border: none; border-radius: 24px; padding: 10px 24px; font-size: 1rem; cursor: pointer; transition: background 0.2s; } .chat-send-btn:hover { background: var(--accent-blue-hover); } .chat-send-btn:disabled { background: #999; cursor: not-allowed; } .loading-dots { color: var(--text-secondary); font-style: italic; } .loading-dots::after { content: ''; animation: dots 1.5s steps(3, end) infinite; } .msg-actions { display: flex; gap: 4px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); opacity: 0.6; transition: opacity 0.2s; } .message.assistant:hover .msg-actions { opacity: 1; } .msg-action-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 0.8rem; line-height: 1; transition: background 0.15s; } .msg-action-btn:hover { background: var(--bg-hover); } .thumb-selected { background: #dbeafe; border-color: #93c5fd; } .thumb-btn { font-size: 0.75rem; } @keyframes dots { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } } .vertical-evidence-page { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; } .evidence-article h1 { font-size: 1.8rem; margin-bottom: 1rem; } .evidence-article h3 { font-size: 1.2rem; margin-top: 1.5rem; color: var(--text-primary); } .evidence-article p { line-height: 1.7; margin-bottom: 0.75rem; } .evidence-article ul { margin: 0.5rem 0 1rem 1.5rem; } .evidence-article li { margin-bottom: 0.4rem; line-height: 1.6; } .evidence-article strong { color: var(--text-primary); } .evidence-sidebar { margin-top: 2rem; } .sidebar-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; } .sidebar-card h3 { font-size: 1rem; margin-bottom: 0.5rem; } .sidebar-link { display: inline-block; color: var(--accent-blue); text-decoration: none; font-size: 0.9rem; } .sidebar-link:hover { text-decoration: underline; } .article-page { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; } @media (max-width: 768px) { .article-page { grid-template-columns: 1fr; } } .article-header h1 { font-size: 2rem; line-height: 1.3; margin-bottom: 0.75rem; color: var(--text-primary); } .article-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem; } .article-meta span::before { content: '·'; margin-right: 0.5rem; } .article-meta span:first-child::before { content: ''; } .article-toc { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 2rem; } .toc-heading { font-size: 1rem; margin-bottom: 0.5rem; } .toc-list { list-style: none; padding: 0; margin: 0; } .toc-item { margin-bottom: 0.3rem; } .toc-item a { color: var(--accent-blue); text-decoration: none; font-size: 0.9rem; } .toc-item a:hover { text-decoration: underline; } .toc-h3 { padding-left: 1.2rem; font-size: 0.85rem; } .article-body { line-height: 1.8; } .article-body h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; } .article-body h3 { font-size: 1.2rem; margin-top: 1.5rem; color: var(--text-primary); } .article-body p { margin-bottom: 0.75rem; } .article-body ul, .article-body ol { margin: 0.5rem 0 1rem 1.5rem; } .article-body li { margin-bottom: 0.4rem; line-height: 1.6; } .citation-link { color: var(--accent-blue); text-decoration: none; font-weight: 500; border-bottom: 1px dotted var(--accent-blue); } .citation-link:hover { border-bottom-style: solid; } .article-footer { margin-top: 2rem; } .article-cta { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .cta-button { display: inline-block; padding: 0.6rem 1.2rem; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background 0.2s; } .cta-primary { background: var(--accent-blue); color: #fff; } .cta-primary:hover { background: #2563eb; } .cta-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } .cta-secondary:hover { background: #e2e8f0; } .cta-small { padding: 0.4rem 0.8rem; font-size: 0.85rem; } .article-disclaimer { padding: 1rem; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 6px 6px 0; font-size: 0.85rem; color: #92400e; margin-bottom: 1rem; } .article-provenance { font-size: 0.8rem; color: var(--text-secondary); } .article-sidebar { position: sticky; top: 1rem; align-self: start; } .sidebar-cta { text-align: center; } .sidebar-cta p { font-size: 0.85rem; margin: 0.5rem 0; } .share-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--border); } .share-label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; font-size: 0.75rem; font-weight: 600; padding: 0; text-decoration: none; } .share-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .share-twitter:hover { background: #1da1f2; color: #fff; border-color: #1da1f2; } .share-linkedin:hover { background: #0077b5; color: #fff; border-color: #0077b5; } .share-facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; } .share-copy { width: auto; padding: 0 0.6rem; font-size: 0.75rem; } .social-card-preview { background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%); border: 1px solid #bae6fd; border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; } .social-card-stat { font-size: 1.1rem; font-weight: 600; color: #0c4a6e; margin-bottom: 0.5rem; } .social-card-takeaway { font-size: 1rem; color: #1e40af; margin-bottom: 0.4rem; font-weight: 500; } .social-card-caution { font-size: 0.85rem; color: #92400e; margin-bottom: 0.4rem; } .social-card-tags { margin-top: 0.5rem; } .social-tag { display: inline-block; background: #dbeafe; color: #1e40af; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.75rem; margin-right: 0.3rem; margin-bottom: 0.3rem; } .social-key-points { list-style: none; padding: 0; } .social-key-points li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); line-height: 1.5; } .social-key-points li:last-child { border-bottom: none; } .article-index-page { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; } .section-heading { font-size: 1.3rem; color: var(--text-secondary); border-bottom: 2px solid var(--border); padding-bottom: 0.3rem; margin-top: 2rem; margin-bottom: 1rem; } .article-group-header { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 2rem; margin-bottom: 0.75rem; } .article-group-header h2 { font-size: 1.4rem; margin: 0; } .article-count { font-size: 0.85rem; color: var(--text-secondary); } .article-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .article-card { display: block; padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; } .article-card:hover { border-color: var(--accent-blue); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .article-card-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; } .article-card-meta { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.4rem; } .article-card-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; } .article-card-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 4px; background: #dbeafe; color: #1e40af; margin-bottom: 0.4rem; } .badge-guide { background: #dcfce7; color: #166534; } .article-card-social { border-left: 3px solid #3b82f6; } .article-card-guide { border-left: 3px solid #22c55e; } .badge-compare { background: #fef3c7; color: #92400e; } .article-card-compare { border-left: 3px solid #f59e0b; } .safety-explanation { margin-top: 0.5rem; padding: 0.6rem 0.8rem; background: #fffbeb; border-left: 3px solid #f59e0b; font-size: 0.85rem; color: #92400e; line-height: 1.5; border-radius: 0 4px 4px 0; } .condition-overview { margin-bottom: 1.5rem; padding: 1rem 1.2rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; } .condition-overview h2 { font-size: 1.1rem; color: #0c4a6e; margin-bottom: 0.5rem; } .condition-overview p { font-size: 0.9rem; color: #334155; line-height: 1.6; } .interactions-list { display: flex; flex-direction: column; gap: 12px; } .interaction-card { padding: 1rem 1.2rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); } .interaction-card.severity-critical { border-left: 4px solid #dc2626; background: #fef2f2; } .interaction-card.severity-moderate { border-left: 4px solid #f59e0b; background: #fffbeb; } .interaction-card.severity-minor { border-left: 4px solid #22c55e; background: #f0fdf4; } .ix-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 0.5rem; } .ix-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); text-decoration: none; } .ix-title:hover { text-decoration: underline; } .severity-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .severity-badge.severity-critical { background: #fecaca; color: #991b1b; } .severity-badge.severity-moderate { background: #fde68a; color: #92400e; } .severity-badge.severity-minor { background: #bbf7d0; color: #166534; } .ix-detail { font-size: 0.88rem; color: #374151; line-height: 1.5; margin-bottom: 0.3rem; } .ix-management { background: rgba(255,255,255,0.5); padding: 0.4rem 0.6rem; border-radius: 4px; margin-top: 0.3rem; } .ix-meta { margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-muted); } .ix-disclaimer { margin-top: 1rem; padding: 0.6rem 0.8rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.8rem; color: #64748b; line-height: 1.5; } .interaction-detail-page { max-width: 900px; margin: 0 auto; } .legal-page { max-width: 800px; margin: 0 auto; padding: 1rem 0 3rem; line-height: 1.65; color: #374151; } .legal-page h1 { font-size: 2.1rem; color: #111827; margin: 0 0 0.75rem; } .legal-page .lede { font-size: 1.1rem; color: #4b5563; margin-bottom: 2rem; } .legal-page h2 { font-size: 1.25rem; color: #111827; margin: 2.25rem 0 0.75rem; padding-bottom: 0.3rem; border-bottom: 1px solid #e5e7eb; } .legal-page ul { margin: 0.5rem 0 1rem 1.5rem; } .legal-page li { margin: 0.35rem 0; } .legal-page code { background: #f1f5f9; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; } .methodology-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; } .stat-item { background: #f9fafb; border-radius: 10px; padding: 1rem 1.25rem; border: 1px solid #e5e7eb; text-align: center; } .stat-item strong { display: block; font-size: 1.6rem; color: #0d9488; margin-bottom: 0.25rem; } .stat-item span { font-size: 0.8rem; color: #64748b; } .tier-table { margin: 1rem 0 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; } .tier-row { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid #f1f5f9; } .tier-row:last-child { border-bottom: none; } .tier-badge { flex-shrink: 0; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; min-width: 120px; text-align: center; } .tier-a { background: #d1fae5; color: #065f46; } .tier-b { background: #dbeafe; color: #1e40af; } .tier-c { background: #fef3c7; color: #92400e; } .tier-d { background: #fee2e2; color: #991b1b; } .qa-answer-block { background: #fff; border: 1px solid var(--border, #e5e7eb); border-left: 4px solid #0d9488; border-radius: 12px; padding: 1.75rem 2rem; margin: 0 0 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .qa-answer-question { font-size: 1.6rem; font-weight: 700; color: var(--text-primary, #111827); margin: 0 0 1rem; line-height: 1.3; } .qa-answer-body { color: #374151; line-height: 1.65; font-size: 1rem; } .qa-answer-body h2 { font-size: 1.05rem; font-weight: 700; color: #111827; margin: 1.4rem 0 0.5rem; padding-bottom: 0.2rem; border-bottom: 1px solid #f1f5f9; } .qa-answer-body h2:first-child { margin-top: 0; } .qa-answer-body p { margin: 0 0 0.9rem; } .qa-answer-body ul, .qa-answer-body ol { margin: 0.5rem 0 0.9rem 1.25rem; padding: 0; } .qa-answer-body li { margin: 0.25rem 0; } .qa-answer-body strong { color: #111827; } .qa-answer-meta { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid #f1f5f9; font-size: 0.82rem; color: #64748b; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .qa-ai-badge { background: #ecfdf5; color: #0f766e; padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; font-size: 0.75rem; } .qa-review-flag { background: #fef3c7; color: #92400e; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.72rem; } .qa-answer-meta a { color: #0d9488; text-decoration: none; } .qa-answer-meta a:hover { text-decoration: underline; } .ix-severity-banner { padding: 1.5rem 2rem; border-radius: 12px; margin-bottom: 1.5rem; } .ix-severity-banner.severity-critical { background: linear-gradient(135deg, #fef2f2, #fee2e2); border: 2px solid #fca5a5; } .ix-severity-banner.severity-moderate { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fcd34d; } .ix-severity-banner.severity-minor { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 2px solid #86efac; } .ix-banner-content { display: flex; align-items: center; gap: 1rem; } .ix-banner-icon { font-size: 2.5rem; } .ix-banner-title { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--text-primary); } .ix-banner-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0.2rem 0 0; font-weight: 500; } .ix-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 1.5rem; } .ix-detail-card { padding: 1.2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .ix-detail-card h2 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .ix-detail-card p { font-size: 0.9rem; color: #374151; line-height: 1.6; margin: 0; } .ix-management-card { grid-column: 1 / -1; background: #f0f9ff; border-color: #bae6fd; } .ix-plain-explanation { padding: 1rem 1.2rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 1.5rem; } .ix-plain-explanation h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; } .ix-plain-explanation p { font-size: 0.9rem; color: #334155; line-height: 1.6; margin: 0; } .ix-source-citation { padding: 0.8rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-muted); } .ix-source-citation h3 { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.3rem; } .ix-source-citation p { margin: 0; } .ix-sources-list { display: flex; flex-direction: column; gap: 8px; } .ix-source-item { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; } .ix-source-title { font-size: 0.85rem; color: var(--text-primary); flex: 1; margin-right: 8px; } .ix-source-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ix-source-year { font-size: 0.75rem; color: var(--text-muted); } .ix-related-links { display: flex; justify-content: space-between; margin: 2rem 0 1rem; } .ix-related-link { display: inline-block; padding: 0.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--accent-blue); text-decoration: none; font-size: 0.88rem; font-weight: 500; } .ix-related-link:hover { border-color: var(--accent-blue); background: #eff6ff; } .ix-disclaimer-full { padding: 1rem 1.2rem; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.82rem; color: #64748b; line-height: 1.6; margin-top: 1rem; } @media (max-width: 768px) { .ix-detail-grid { grid-template-columns: 1fr; } .ix-related-links { flex-direction: column; gap: 8px; } } .interactions-index-page { max-width: 1000px; margin: 0 auto; } .ix-hero { text-align: center; margin-bottom: 2rem; } .ix-hero h1 { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; } .ix-hero-subtitle { font-size: 1.05rem; color: var(--text-muted); } .ix-checker-card { padding: 1.5rem 2rem; background: var(--bg-card); border: 2px solid var(--border); border-radius: 12px; margin-bottom: 2rem; } .ix-checker-card h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; color: var(--text-primary); } .ix-checker-form { display: flex; gap: 12px; align-items: flex-end; } .ix-input-group { flex: 1; } .ix-input-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } .ix-input-group input { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; background: white; } .ix-input-group input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .ix-check-btn { padding: 0.6rem 1.5rem; background: var(--accent-blue); color: white; border: none; border-radius: 6px; font-size: 0.95rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .ix-check-btn:hover { background: #1d4ed8; } .ix-result { margin-top: 1rem; } .ix-result-card { padding: 1rem 1.2rem; border-radius: 8px; border: 1px solid var(--border); } .ix-result-card.severity-critical { border-left: 4px solid #dc2626; background: #fef2f2; } .ix-result-card.severity-moderate { border-left: 4px solid #f59e0b; background: #fffbeb; } .ix-result-card.severity-minor { border-left: 4px solid #22c55e; background: #f0fdf4; } .ix-result-card.severity-none { border-left: 4px solid #94a3b8; background: #f8fafc; } .ix-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .ix-result-names { font-weight: 700; font-size: 1rem; } .ix-result-detail { font-size: 0.88rem; color: #374151; line-height: 1.5; margin-bottom: 0.3rem; } .ix-result-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-muted); } .ix-result-link { color: var(--accent-blue); font-weight: 600; text-decoration: none; } .ix-result-link:hover { text-decoration: underline; } .ix-result-none { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0.5rem 0 0; } .ix-error { color: #dc2626; font-weight: 600; } .ix-loading { color: var(--text-muted); } .ix-browse-section { margin-top: 1rem; } .ix-browse-section h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .ix-severity-group { margin-bottom: 1.5rem; } .ix-group-heading { font-size: 1rem; font-weight: 700; margin-bottom: 0.8rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--border); } .ix-group-heading.severity-critical { color: #dc2626; border-color: #fca5a5; } .ix-group-heading.severity-moderate { color: #d97706; border-color: #fcd34d; } .ix-group-heading.severity-minor { color: #16a34a; border-color: #86efac; } .ix-browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .ix-browse-card { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-radius: 6px; text-decoration: none; border: 1px solid var(--border); background: var(--bg-card); transition: all 0.15s; } .ix-browse-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .ix-browse-card.severity-critical { border-left: 3px solid #dc2626; } .ix-browse-card.severity-moderate { border-left: 3px solid #f59e0b; } .ix-browse-card.severity-minor { border-left: 3px solid #22c55e; } .ix-browse-names { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); } .ix-browse-evidence { font-size: 0.75rem; color: var(--text-muted); } @media (max-width: 768px) { .ix-checker-form { flex-direction: column; } .ix-browse-grid { grid-template-columns: 1fr; } } .interaction-alert { padding: 0.8rem 1rem; border-radius: 8px; margin: 0.5rem 0; font-size: 0.88rem; line-height: 1.5; } .interaction-alert.severity-critical { background: linear-gradient(135deg, #fef2f2, #fee2e2); border: 2px solid #fca5a5; border-left: 4px solid #dc2626; } .interaction-alert.severity-moderate { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fcd34d; border-left: 4px solid #f59e0b; } .interaction-alert.severity-minor { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 2px solid #86efac; border-left: 4px solid #22c55e; } .ix-alert-header { display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem; font-size: 0.95rem; } .ix-alert-icon { font-size: 1.2rem; } .ix-alert-detail { color: #374151; margin-bottom: 0.2rem; } .ix-alert-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; font-size: 0.8rem; color: #64748b; } .ix-alert-footer a { color: var(--accent-blue); font-weight: 600; text-decoration: none; } .ix-alert-footer a:hover { text-decoration: underline; } .ix-hidden { display: none !important; } .ix-show-more { display: block; margin: 12px auto 0; padding: 8px 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-size: 0.88rem; transition: all 0.15s; } .ix-show-more:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }