/* Shared page treatment extending the approved blue ranking screen. */
:root { --primary: #2864c6; --primary-soft: #f1f5fc; --bg: #f3f4f6; --muted: #747b87; --line: #e4e7ec; --shadow: none; }
.icon-search { --icon: url('/preview/icons/search.svg'); }
.icon-close { --icon: url('/preview/icons/close.svg'); }
.icon-star { --icon: url('/preview/icons/star.svg'); }
.icon-history { --icon: url('/preview/icons/history.svg'); }
.icon-info { --icon: url('/preview/icons/info.svg'); }
.icon-save { --icon: url('/preview/icons/save.svg'); }
.icon-external { --icon: url('/preview/icons/external.svg'); }
.icon-chevron { --icon: url('/preview/icons/chevron.svg'); }
.note-logo { width: 42px; height: 42px; color: var(--primary); }
.api-status.online span { background: var(--primary); }
.app-header { position: relative; min-height: 119px; align-items: flex-end; padding-top: 22px; padding-bottom: 20px; }
.app-header > div { min-width: 0; flex: 1; }
.app-header .brand-kicker { margin-bottom: 16px; }
.app-header:has(.back-button:not(.hidden)) .brand-kicker { margin-left: -36px; }
.app-header h1 { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.info-button { align-self: flex-start; border: 0; border-radius: 6px; }
.section-heading { gap: 12px; flex-wrap: wrap; }
.section-heading h2,.detail-section h3,.chart-title strong { font-size: 17px; font-weight: 600; }
.text-button { min-height: 36px; color: var(--primary); font-size: 12px; }
.search-wrap { height: 46px; border-color: var(--line); border-radius: 6px; background: #f7f8fa; box-shadow: none; }
.search-wrap > .ui-icon { width: 19px; height: 19px; color: var(--muted); }
.search-wrap:focus-within { border-color: var(--primary); background: #fff; }
.clear-search { display: grid; width: 34px; height: 40px; place-items: center; background: transparent; }
.clear-search .ui-icon { width: 18px; height: 18px; }
.search-results { box-shadow: none; }
.search-result { gap: 12px; }
.search-result > span { min-width: 0; }
.search-result strong { white-space: normal; overflow-wrap: anywhere; font-weight: 500; }
.result-score { flex-shrink: 0; }
.hot-searches { gap: 4px; }
.hot-searches button { padding: 9px 6px; background: transparent; font-size: 11px; }
.category-grid { gap: 8px; }
.category-item { height: 62px; padding: 10px 12px; border-radius: 4px; }
.category-item::before { display: none; }
.category-item.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.category-item.active strong { color: var(--primary); }
.category-item strong { margin-top: 0; font-size: 14px; font-weight: 500; }
.category-item small { margin-top: 5px; }
.category-group-label { font-weight: 400; }
.home-ranking-tabs button { min-height: 40px; background: #f7f8fa; font-size: 12px; line-height: 1.4; }
.home-ranking-tabs button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: none; font-weight: 600; }
.home-ranking-tabs button.active::before { display: none; }
.platform-tabs { margin: 14px 0; padding: 2px; border: 0; border-radius: 6px; background: #f1f3f6; }
.platform-tabs button { height: 40px; color: #69727d; }
.platform-tabs button.active { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1px #dce3ee; }
.home-source { align-items: flex-start; flex-wrap: wrap; margin: 14px 0; font-size: 11px; line-height: 1.5; }
.home-source span:first-child { white-space: normal; overflow-wrap: anywhere; }
.preview-count strong { font-size: 15px; font-weight: 600; }
.preview-count span { font-size: 11px; }
#homeView .top-preview { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
#homeView .score-group-heading { padding: 12px 0; border-bottom: 1px solid var(--line); background: #fff; color: #626b77; font-size: 12px; font-weight: 500; }
.small-action { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-color: #dce3ee; color: var(--primary); font-size: 13px; }
.small-action .ui-icon { width: 18px; height: 18px; }
.small-action.primary { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.detail-heading h2 { font-size: 24px; font-weight: 600; line-height: 1.35; }
.detail-actions { flex-wrap: wrap; }
.score-panel { padding: 20px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.score-summary { gap: 12px; align-items: center; }
.score-summary strong { font-size: 32px; font-weight: 600; }
.score-summary small { font-size: 11px; }
.score-fill { background: var(--primary) !important; }
.beginner-summary,.comparison-conclusion { padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; }
.comparison-conclusion { border-top: 1px solid var(--line); }
.comparison-conclusion + .chart-section { margin-top: 0; border-top: 0; }
.beginner-summary small,.comparison-conclusion small { color: var(--primary); font-size: 11px; font-weight: 600; }
.beginner-summary strong,.comparison-conclusion strong { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.beginner-summary span,.comparison-conclusion span { margin-top: 8px; color: #626b77; font-size: 12px; line-height: 1.6; }
.spec-list,.benchmark-group { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.spec-list div { grid-template-columns: 105px minmax(0,1fr); gap: 12px; min-height: 44px; padding: 10px 0; }
.spec-list span,.spec-list strong { font-size: 12px; font-weight: 400; }
.benchmark-row { gap: 8px; padding: 12px 0; }
.benchmark-row span { flex: 1; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.benchmark-row strong { font-size: 15px; font-weight: 600; }
.benchmark-row a { width: 30px; height: 36px; border: 0; border-radius: 0; color: var(--primary); }
.benchmark-row .ui-icon { width: 17px; height: 17px; }
.benchmark-source { padding-left: 0; font-size: 12px; font-weight: 500; }
.source-links a { min-height: 40px; font-size: 11px; line-height: 1.5; }
.source-links a > span { min-width: 0; overflow-wrap: anywhere; }
.source-pending { font-size: 11px; }
.compare-intro h2 { font-size: 22px; font-weight: 600; }
.compare-products { gap: 8px; }
.compare-product { width: 146px; min-height: 92px; padding: 14px 32px 12px 11px; border-top-width: 2px; border-radius: 4px; }
.compare-product strong { font-size: 13px; font-weight: 500; }
.remove-product { display: grid; width: 32px; height: 36px; top: 3px; right: 1px; place-items: center; }
.remove-product .ui-icon { width: 17px; height: 17px; }
.save-compare-row { flex-wrap: wrap; padding-top: 10px; }
.save-compare-row span { color: var(--primary); font-size: 11px; }
.chart-section { margin-top: 22px; padding: 22px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.chart-title { flex-wrap: wrap; gap: 8px; }
.chart-title small { font-size: 11px; }
.curve-tabs { padding: 1px; }
.curve-tab { min-height: 36px; padding: 8px 10px; background: #f7f8fa; font-size: 11px; }
.curve-tab.active { background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.gap-copy,.metric-copy { font-size: 12px; }
.gap-copy span:first-child,.metric-copy span:first-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.gap-copy span:last-child { font-size: 11px; }
.metric-title strong { font-weight: 600; }
.metric-title small,.metric-delta,.metric-source { font-size: 11px; }
.metric-source { min-height: 36px; padding-top: 10px; color: var(--primary); }
.metric-leader strong { font-size: 11px; }
.spec-head > *,.spec-compare-row > * { font-size: 11px; }
.spec-compare-row.different > :not(:first-child) { background: var(--primary-soft); color: #304c72; font-weight: 500; }
.empty-comparison { padding-top: 80px; }
.empty-comparison > .ui-icon { width: 40px; height: 40px; margin: 0 auto 20px; color: var(--primary); }
.empty-comparison h2 { font-weight: 600; }
.empty-comparison button { min-height: 44px; background: var(--primary); }
.empty-comparison .secondary { background: transparent; }
.rewards-card { min-height: 130px; margin: 4px 0 24px; padding: 20px 0 28px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.reward-copy small,.reward-copy span,.reward-copy p { color: var(--muted); font-size: 12px; }
.reward-copy strong { font-size: 34px; font-weight: 600; }
.reward-action button { min-height: 42px; background: var(--primary); font-size: 12px; font-weight: 500; }
.reward-action button:disabled { background: #eef1f5; color: var(--muted); }
.reward-pop { color: var(--primary); }
.profile-heading { align-items: flex-start; }
.local-status > i { background: var(--primary); border-color: #e6edf9; }
.local-status small { font-size: 11px; line-height: 1.5; }
.profile-clear { min-height: 40px; flex-shrink: 0; font-size: 11px; }
.profile-tabs button { min-height: 48px; font-size: 14px; }
.profile-tabs button.active { color: var(--primary); font-weight: 600; }
.profile-tabs button.active::after { background: var(--primary); }
.profile-tabs button.active small { background: var(--primary-soft); color: var(--primary); }
.profile-record-main strong { font-size: 14px; font-weight: 500; white-space: normal; line-height: 1.45; }
.profile-record-main small { font-size: 11px; }
.profile-delete { width: 36px; height: 42px; border: 0; border-radius: 0; color: var(--muted); }
.profile-delete .ui-icon { width: 18px; height: 18px; }
.profile-delete:hover { background: #f7f8fa; }
.profile-empty > .ui-icon { width: 30px; height: 30px; border: 0; border-radius: 0; background: var(--primary); }
.profile-empty strong { font-size: 14px; font-weight: 500; }
.profile-empty small { font-size: 11px; line-height: 1.5; }
.storage-note { font-size: 11px; }
body[data-view="profile"] .app-shell,body[data-view="about"] .app-shell,body[data-view="compare"] .app-shell { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.about-link { display: flex; width: 100%; min-height: 48px; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: #fff; color: #626b77; font-size: 13px; text-align: left; }
.about-intro h2 { font-size: 24px; font-weight: 600; }
.about-intro > span { color: var(--primary); }
.method-list div { gap: 12px; padding: 12px 0; }
.method-list strong,.about-section-heading strong { font-weight: 600; }
.method-list span,.about-section p,.about-source-lines span,.about-status-lines span,.about-disclaimer { font-size: 12px; line-height: 1.6; }
.about-section-heading { flex-wrap: wrap; }
.about-source-lines > div { grid-template-columns: 6px 96px minmax(0,1fr); padding: 10px 0; }
.about-source-lines i,.about-source-lines i.green,.about-source-lines i.orange { background: var(--primary); }
.about-source-lines strong { font-size: 12px; font-weight: 500; }
.about-status-lines strong { font-size: 12px; font-weight: 500; }
@media (max-width: 360px) { .metric-title-row { grid-template-columns: minmax(0,1fr); } .metric-leader { text-align: left; } .score-summary { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .performance-fill,.rewards-card.reward-burst .reward-pop,.rewards-card.reward-burst .reward-copy strong { animation: none; } }