:root {
  --bg: #eef0f3;
  --surface: #fff;
  --text: #20242c;
  --muted: #767d88;
  --line: #e3e6ea;
  --shadow: 0 18px 55px rgba(30, 36, 46, 0.12);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; letter-spacing: 0; }
button,input,select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }

.preview-note { position: fixed; top: 50%; left: max(32px, calc(50% - 500px)); width: 220px; transform: translateY(-50%); }
.preview-note h2 { margin: 20px 0 4px; font-size: 25px; }
.preview-note p { margin: 0; color: var(--muted); font-size: 14px; }
.note-mark { display: flex; height: 52px; align-items: flex-end; gap: 8px; }
.note-mark span { display: block; width: 14px; background: #29313c; }
.note-mark span:nth-child(1) { height: 24px; background: #d05a43; }
.note-mark span:nth-child(2) { height: 48px; }
.note-mark span:nth-child(3) { height: 35px; background: #347c67; }
.note-rule { width: 44px; height: 2px; margin: 28px 0; background: #bfc4ca; }
.note-copy { line-height: 1.7; }
.site-record { display:flex; align-items:flex-start; flex-direction:column; gap:5px; margin-top:25px; padding-top:18px; border-top:1px solid #d9dde1; color:#838a93; font-size:10px; line-height:1.5; }
.site-record a,.record-link { color:#505a65; text-decoration:none; }
.site-record a:hover,.record-link:hover { text-decoration:underline; }
.api-status { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: #65707a; font-size: 13px; }
.api-status span { width: 8px; height: 8px; border-radius: 50%; background: #d39237; }
.api-status.online span { background: #31815f; }

.app-shell { position: relative; width: min(100%, 480px); min-height: 100vh; margin: 0 auto; padding: 0 22px 108px; background: #f8f9fa; box-shadow: var(--shadow); }
.app-header { position: sticky; z-index: 15; top: 0; display: flex; min-height: 94px; align-items: center; justify-content: flex-start; margin: 0 -22px; padding: 12px 22px 8px; background: rgba(248,249,250,.96); border-bottom: 1px solid transparent; }
.app-header h1 { max-width: 330px; margin: 3px 0 0; overflow: hidden; font-size: 25px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.brand-kicker { color: var(--muted); font-size: 12px; }
.icon-button,.info-button { display: grid; width: 36px; height: 36px; flex-shrink: 0; place-items: center; padding: 0; border: 1px solid #d8dce1; border-radius: 50%; background: transparent; color: #505762; }
.back-button { margin-right: 12px; border: 0; font-size: 34px; }
.app-header:has(.back-button:not(.hidden)) > div { min-width: 0; flex: 1; }
.info-button { margin-left:auto; font-family:Georgia,serif; font-size:17px; font-weight:700; }
.hidden { display: none !important; }
.view { display: none; }
.view.active { display: block; }

.search-wrap { position: relative; display: flex; height: 54px; align-items: center; padding: 0 15px; border: 1px solid transparent; border-radius: 7px; background: #fff; box-shadow: 0 5px 20px rgba(31,37,47,.07); }
.search-wrap:focus-within { border-color: #303640; }
.search-wrap input { min-width: 0; height: 50px; flex: 1; margin-left: 14px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
.search-icon { position: relative; width: 15px; height: 15px; border: 2px solid #3c424c; border-radius: 50%; }
.search-icon::after { position: absolute; right: -6px; bottom: -4px; width: 7px; height: 2px; background: #3c424c; content: ""; transform: rotate(45deg); }
.clear-search { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #eef0f3; color: #68707a; line-height: 28px; }
.search-results { overflow: hidden; margin-top: 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: 0 10px 30px rgba(31,37,47,.1); }
.search-result { display: flex; min-height: 65px; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid #edf0f2; background: #fff; text-align: left; }
.search-result:last-child { border-bottom: 0; }
.search-result strong,.search-result small { display: block; }
.search-result strong { max-width: 310px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.search-result small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.result-score { color: #2d333c; font-size: 13px; font-weight: 750; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 27px 0 13px; }
.section-heading h2 { margin: 0; font-size: 17px; }
.section-heading span { color: var(--muted); font-size: 12px; }
.text-button { padding: 5px 0; border: 0; background: transparent; color: #555f6a; font-size: 12px; }
.hot-searches { display:flex; align-items:center; gap:6px; min-width:0; margin-top:12px; overflow:hidden; }
.hot-searches > span { flex-shrink:0; color:var(--muted); font-size:11px; }
.hot-searches button { min-width:0; flex-shrink:1; overflow:hidden; padding:7px 9px; border:0; border-radius:4px; background:#eceff2; color:#58616c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.category-group-label { grid-column:1/-1; margin-top:4px; color:#6f7781; font-size:11px; font-weight:700; }
.category-group-label:not(:first-child) { margin-top:10px; }
.category-item { position: relative; height: 72px; overflow: hidden; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; text-align: left; }
.category-item::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); content: ""; }
.category-item.active { border-color:#252b33; background:#f3f5f6; }
.category-item strong,.category-item small { display: block; }
.category-item strong { margin-top: 3px; font-size: 15px; }
.category-item small { margin-top: 9px; color: var(--muted); font-size: 11px; }
.loading-grid::after { grid-column: 1/-1; padding: 50px 0; color: var(--muted); content: "正在加载分类…"; text-align: center; }
.home-ranking-heading { margin-bottom:9px; }
.home-ranking-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.home-ranking-tabs button { min-height:37px; padding:7px; border:1px solid #dfe2e7; border-radius:5px; background:#fff; color:#66707a; font-size:11px; line-height:1.25; }
.home-ranking-tabs button.active { border-color:#252b33; background:#252b33; color:#fff; font-weight:700; }
.home-source,.preview-count { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.home-source { margin:8px 0 16px; color:var(--muted); font-size:9px; }
.home-source span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-count { margin-bottom:8px; }.preview-count strong { font-size:14px; }.preview-count span { color:var(--muted); font-size:10px; }

.top-preview,.ladder-list { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.ladder-row { position:relative; display:grid; min-height:80px; grid-template-columns:38px minmax(0,1fr) 44px; align-items:center; overflow:hidden; padding:10px 9px 10px 5px; border-bottom:1px solid #fff; background:#edf0f2; }
.ladder-row:last-child { border-bottom: 0; }
.performance-fill { position:absolute; z-index:0; top:0; bottom:0; left:0; width:100%; box-sizing:border-box; transform-origin:left center; pointer-events:none; animation:step-grow .56s cubic-bezier(.22,.72,.26,1) both; }
.performance-cap { position:absolute; right:0; bottom:0; width:4px; height:14px; }
.ladder-row > :not(.performance-fill) { position:relative; z-index:1; }
@keyframes step-grow { from { transform:scaleX(0); } }
.rank { color: #858c96; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.rank.top { color: #262b33; font-size: 17px; font-weight: 800; }
.row-main { min-width: 0; padding: 0 9px; border: 0; background: transparent; text-align: left; }
.row-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.row-heading > span:first-child { min-width: 0; flex: 1; overflow: hidden; }
.row-name { display: block; overflow: hidden; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.row-score { flex-shrink: 0; font-size: 15px; font-weight: 800; }
.row-score-wrap { flex-shrink: 0; text-align: right; }
.row-score-wrap .row-score { display: block; }
.row-score-wrap small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }
.row-score-wrap .row-gap { color:#69727d; font-weight:650; }
.score-track { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 3px; background: #edf0f2; }
.score-fill { height: 100%; border-radius: 3px; }
.add-compare { width: 31px; height: 31px; padding: 0; border: 1px solid #cfd4da; border-radius: 50%; background: #fff; color: #555d67; font-size: 18px; line-height: 28px; }
.add-compare.selected { border-color: #252b33; background: #252b33; color: #fff; }
.source-note { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 0 12px; border: 0; border-top: 1px solid #dfe2e6; border-bottom: 1px solid #dfe2e6; background: transparent; text-align: left; }
.source-note strong,.source-note small { display: block; }
.source-note strong { font-size: 14px; }
.source-note small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.chevron { color: #777e88; font-size: 27px; }

.ranking-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0 -22px 12px; padding: 0 22px 12px; border-bottom: 1px solid var(--line); }
.ranking-tab { width: 100%; min-height: 38px; padding: 7px 8px; border: 0; border-radius: 5px; background: #ebedf0; color: #666e78; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.ranking-tab.active { background: #252b33; color: #fff; font-weight: 700; }
.ranking-source { display: grid; min-height: 53px; grid-template-columns: 66px minmax(0,1fr); align-items: center; margin: 0 -22px; padding: 8px 22px; border-bottom: 1px solid var(--line); background: #f2f4f5; }
.ranking-source > span { color: #7a828c; font-size: 10px; font-weight: 700; }
.ranking-source strong,.ranking-source small { display: block; }
.ranking-source strong { overflow-wrap: anywhere; font-size: 12px; }
.ranking-source small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.list-toolbar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; }
.list-toolbar strong { font-size: 13px; }
.list-toolbar select { max-width: 145px; height: 34px; padding: 0 28px 0 10px; border: 1px solid #dce0e5; border-radius: 5px; background: #fff; color: #535b65; font-size: 12px; }
.load-more { width: 100%; margin-top: 12px; padding: 12px; border: 1px solid #dfe2e6; border-radius: 6px; background: #fff; color: #626a75; font-size: 12px; }
.inline-loading,.inline-empty { padding: 55px 20px; color: var(--muted); text-align: center; }

.detail-heading { padding: 5px 1px 20px; }
.detail-heading > span { color: var(--muted); font-size: 12px; }
.detail-heading h2 { margin: 8px 0 0; overflow-wrap: anywhere; font-size: 25px; line-height: 1.25; }
.status-tag { display: inline-block; margin-left: 7px; padding: 3px 5px; border: 1px solid #caa04a; border-radius: 3px; color: #805f1b; font-size: 9px; font-style: normal; font-weight: 700; vertical-align: middle; }
.status-tag.rumored { border-style: dashed; border-color: #bd665e; color: #96463f; }
.original-model { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.rumor-note { margin: 10px 0 0; padding-left: 9px; border-left: 2px solid #bd665e; color: #8f4a43; font-size: 10px; line-height: 1.5; }
.detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.small-action { padding: 8px 13px; border: 1px solid #d9dde2; border-radius: 5px; background: #fff; color: #555d67; font-size: 12px; }
.small-action.primary { border-color: #252b33; background: #252b33; color: #fff; }
.score-panel { padding: 18px 17px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.score-summary { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 15px; }
.score-summary strong { font-size: 34px; font-variant-numeric: tabular-nums; }
.score-summary small { margin-left: 7px; color: var(--muted); }
.score-rank { text-align: right; }
.score-rank span { display: block; font-size: 13px; font-weight: 700; }
.score-rank small { display: block; margin-top: 5px; color: var(--muted); }
.beginner-summary,.comparison-conclusion { margin-top:14px; padding:15px; border-left:4px solid #28755a; border-radius:5px; background:#eef7f3; }
.beginner-summary small,.beginner-summary strong,.beginner-summary span,.comparison-conclusion small,.comparison-conclusion strong,.comparison-conclusion span { display:block; }
.beginner-summary small,.comparison-conclusion small { color:#3e7664; font-size:10px; font-weight:700; }
.beginner-summary strong,.comparison-conclusion strong { margin-top:5px; font-size:15px; line-height:1.4; }
.beginner-summary span,.comparison-conclusion span { margin-top:6px; color:#58625f; font-size:11px; line-height:1.5; }
.detail-section { margin-top: 25px; }
.detail-section h3 { margin: 0 0 12px; font-size: 16px; }
.spec-group + .spec-group { margin-top: 11px; }.spec-group h4 { margin: 0 0 6px; color: #656d77; font-size: 11px; }
.spec-list { overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#fff; }.spec-list div { display:grid; min-height:40px; grid-template-columns:120px minmax(0,1fr); align-items:center; padding:0 12px; border-bottom:1px solid #eceef1; }.spec-list div:last-child{border-bottom:0}.spec-list span{color:#7c838d;font-size:11px}.spec-list strong{overflow-wrap:anywhere;font-size:11px;text-align:right}
.source-links { margin-top: 9px; border-top: 1px solid #e3e7ea; }.source-links a { display:flex; min-height:34px; align-items:center; justify-content:space-between; gap:10px; color:#6e7680; font-size:10px; text-decoration:none; }.source-links small{flex-shrink:0;color:#9298a1}.source-pending{margin-top:10px;color:#969ca5;font-size:10px;line-height:1.5}
.benchmark-group { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.benchmark-source { padding: 11px 13px 8px; color: #5c646e; font-size: 11px; font-weight: 700; }
.benchmark-row { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-top: 1px solid #edf0f2; }
.benchmark-row span { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.benchmark-row strong { flex-shrink: 0; font-size: 14px; }
.benchmark-row a { display: grid; width: 24px; height: 24px; flex-shrink: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #626a74; font-size: 11px; text-decoration: none; }

.compare-dock { position: fixed; z-index: 25; right: max(14px,calc(50% - 226px)); bottom: 71px; left: max(14px,calc(50% - 226px)); display: flex; min-height: 57px; align-items: center; justify-content: space-between; padding: 7px 8px 7px 14px; border-radius: 7px; background: #222831; box-shadow: 0 10px 28px rgba(25,30,39,.25); color: #fff; }
.compare-dock > div { display: flex; align-items: center; gap: 8px; }
.compare-dock strong { font-size: 12px; }
.dock-bars { display: flex; height: 17px; align-items: flex-end; gap: 3px; }
.dock-bars i { width: 4px; background: #fff; }
.dock-bars i:nth-child(1) { height: 8px; }.dock-bars i:nth-child(2) { height: 16px; }.dock-bars i:nth-child(3) { height: 12px; }
.dock-clear,.dock-open { height: 39px; padding: 0 10px; border: 0; border-radius: 5px; font-size: 12px; }
.dock-clear { background: transparent; color: #c7ccd3; }
.dock-open { background: #fff; color: #222831; font-weight: 750; }

.compare-intro { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.compare-intro span { color: var(--muted); font-size: 11px; }
.compare-intro h2 { margin: 4px 0 0; font-size: 25px; }
.compare-products { display: flex; gap: 8px; overflow-x: auto; margin: 0 -22px; padding: 0 22px 7px; scrollbar-width: none; }
.compare-product { position: relative; width: 145px; min-height: 83px; flex-shrink: 0; padding: 13px 25px 10px 11px; border: 1px solid var(--line); border-top: 4px solid var(--series); border-radius: 5px; background: #fff; }
.compare-product strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.compare-product small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.compare-product .status-tag { margin: 6px 0 0; }
.remove-product { position: absolute; top: 4px; right: 3px; width: 25px; height: 25px; padding: 0; border: 0; background: transparent; color: #747b85; }
.save-compare-row { display:flex; min-height:44px; align-items:center; gap:10px; }.save-compare-row span { color:#39705f; font-size:10px; }
.chart-section { margin-top: 14px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.chart-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.chart-title strong { font-size: 15px; }.chart-title small { color: var(--muted); font-size: 10px; }
.curve-tabs { display:flex; gap:6px; overflow-x:auto; margin:-2px 0 8px; scrollbar-width:none; }.curve-tab{flex-shrink:0;padding:6px 9px;border:0;border-radius:4px;background:#eef0f2;color:#68707a;font-size:9px}.curve-tab.active{background:#252b33;color:#fff}
.curve-missing-notice { margin-top: 8px; padding: 8px 9px; border-left: 3px solid #aab1ba; background: #f3f5f6; color: #646c76; font-size: 10px; line-height: 1.5; }
.gap-item + .gap-item { margin-top: 16px; }
.gap-copy { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.gap-copy span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gap-copy span:last-child { flex-shrink: 0; color: var(--muted); }
.gap-line { display: grid; grid-template-columns: minmax(0,1fr) 38px; align-items: center; gap: 7px; margin-top: 6px; }
.gap-track { height: 10px; overflow: hidden; border-radius: 2px; background: #edf0f2; }.gap-track i { display: block; height: 100%; background: var(--series); }
.gap-line strong { font-size: 11px; text-align: right; }
#profileChart { display: block; width: 100%; height: 245px; }
.metric-block + .metric-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e8ebee; }
.metric-title strong,.metric-title small { display: block; }.metric-title strong { font-size: 13px; }.metric-title small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.metric-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.metric-leader{flex-shrink:0;text-align:right}.metric-leader strong{margin-top:3px;font-size:10px}.metric-leader small{font-size:9px}
.metric-item { margin-top: 11px; }.metric-copy { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }.metric-copy span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.metric-copy span:last-child { flex-shrink: 0; font-weight: 700; }
.metric-delta{margin-top:3px;color:#838a94;font-size:9px;text-align:right}.metric-source{display:block;margin-top:10px;color:#777f89;font-size:9px;text-decoration:none}
.metric-track { height: 6px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: #edf0f2; }.metric-track i { display: block; height: 100%; background: var(--series); }
.spec-table-wrap{overflow-x:auto}.compare-spec-table{min-width:560px;border:1px solid #e2e6e9;border-radius:5px}.spec-head,.spec-compare-row{display:grid;grid-template-columns:100px repeat(var(--columns),minmax(135px,1fr))}.spec-head>*{box-sizing:border-box;min-height:52px;padding:10px 8px;border-top:3px solid transparent;border-left:1px solid #eceef1;font-size:10px;line-height:1.35}.spec-head>*:first-child{display:flex;align-items:center;border-left:0;color:#858c96}.compare-spec-table h4{margin:0;padding:8px;border-top:1px solid #e1e4e8;background:#f3f5f6;color:#626a74;font-size:10px}.spec-compare-row>*{box-sizing:border-box;min-height:43px;padding:9px 8px;border-top:1px solid #eceef1;border-left:1px solid #eceef1;font-size:10px;line-height:1.4;overflow-wrap:anywhere}.spec-compare-row>*:first-child{border-left:0;color:#7c838d}.spec-compare-row.different>*:not(:first-child){background:#fff8ec;font-weight:700}.spec-compare-row.same>*:not(:first-child){color:#747b85}
.empty-comparison { padding: 120px 15px 30px; text-align: center; }.empty-comparison h2 { margin: 0; font-size: 21px; }.empty-comparison p { color: var(--muted); font-size: 12px; }.empty-comparison button { margin-top: 16px; padding: 11px 22px; border: 0; border-radius: 5px; background: #252b33; color: #fff; font-size: 13px; }
.empty-comparison .secondary { display: block; margin: 10px auto 0; background: transparent; color: #6f7681; }

.rewards-card { position:relative; display:flex; min-height:126px; align-items:center; justify-content:space-between; overflow:hidden; margin:4px 0 22px; padding:20px; border:1px solid #dbe4e4; border-top:4px solid #367765; border-radius:8px; background:#fff; box-shadow:0 10px 28px rgba(32,54,53,.07); }
.reward-copy small,.reward-copy span,.reward-copy p { color:#6f7a7a; }.reward-copy small { display:block; font-size:10px; font-weight:700; }.reward-copy div { display:flex; align-items:baseline; gap:6px; margin-top:5px; }.reward-copy strong { font-size:34px; line-height:1; font-variant-numeric:tabular-nums; }.reward-copy span { font-size:11px; }.reward-copy p { margin:10px 0 0; font-size:10px; }
.reward-action { display:flex; align-items:flex-end; flex-direction:column; gap:18px; }.reward-action button { min-width:94px; height:38px; padding:0 14px; border:0; border-radius:6px; background:#252b33; color:#fff; font-size:11px; font-weight:700; }.reward-action button:disabled { background:#e8edeb; color:#5d6f69; }
.reward-bars { display:flex; height:24px; align-items:flex-end; gap:4px; padding-right:8px; }.reward-bars i { width:5px; background:#367765; transform-origin:bottom; }.reward-bars i:nth-child(1){height:10px}.reward-bars i:nth-child(2){height:23px;background:#d36b4d}.reward-bars i:nth-child(3){height:16px}
.reward-pop { position:absolute; right:45px; bottom:40px; opacity:0; color:#34715f; font-size:14px; font-weight:700; pointer-events:none; }.rewards-card.reward-burst .reward-pop { animation:reward-pop .9s ease-out; }.rewards-card.reward-burst .reward-bars i { animation:reward-bar .65s ease-out; }.rewards-card.reward-burst .reward-copy strong { animation:reward-number .55s ease-out; }
@keyframes reward-pop { 0%{opacity:0;transform:translateY(8px) scale(.8)} 25%{opacity:1} 100%{opacity:0;transform:translateY(-30px) scale(1.08)} }
@keyframes reward-bar { 0%,100%{transform:scaleY(1)} 45%{transform:scaleY(1.35)} }
@keyframes reward-number { 0%,100%{transform:scale(1)} 45%{transform:scale(1.08);color:#367765} }
.profile-heading { display:flex; min-height:42px; align-items:center; justify-content:space-between; gap:12px; }
.local-status { display:flex; min-width:0; align-items:center; gap:9px; }.local-status > i { width:7px; height:7px; flex-shrink:0; border:3px solid #dcebef; border-radius:50%; background:#3d7180; }.local-status span,.local-status strong,.local-status small { display:block; }.local-status strong { color:#303741; font-size:12px; }.local-status small { margin-top:2px; color:#89909a; font-size:9px; font-weight:400; }
.profile-clear { padding:7px 3px; border:0; background:transparent; color:#5e6974; font-size:10px; }.profile-clear:disabled { color:#b7bcc3; }
.profile-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:14px 0 0; border-bottom:1px solid #dfe4e5; }.profile-tabs button { position:relative; display:flex; min-height:44px; align-items:center; justify-content:center; gap:6px; padding:0 5px 10px; border:0; background:transparent; color:#7b838d; font-size:11px; }.profile-tabs button::after { position:absolute; right:18%; bottom:-1px; left:18%; height:3px; border-radius:2px; background:transparent; content:""; }.profile-tabs button.active { color:#20262e; font-weight:700; }.profile-tabs button.active::after { background:#367765; }.profile-tabs button small { display:grid; min-width:17px; height:16px; place-items:center; padding:0 3px; border-radius:8px; background:#e8ecee; color:#737c85; font-size:8px; font-weight:600; }.profile-tabs button.active small { background:#e0eeea; color:#2f6d5b; }
.profile-records { overflow:hidden; margin-top:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }.profile-records.is-empty { border:0; background:transparent; }.profile-record { display:flex; min-height:70px; align-items:center; padding:9px 5px 9px 3px; border-bottom:1px solid #eceef1; }.profile-record:last-child { border-bottom:0; }.profile-record-main { min-width:0; flex:1; padding:0; border:0; background:transparent; text-align:left; }.profile-record-main strong,.profile-record-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.profile-record-main strong { font-size:13px; }.profile-record-main small { margin-top:5px; color:var(--muted); font-size:10px; }.profile-delete { display:grid; width:28px; height:28px; flex-shrink:0; place-items:center; margin-left:8px; padding:0; border:1px solid #e6d9d7; border-radius:50%; background:#fff; color:#9a625d; font-size:15px; }.profile-delete:hover { background:#fbf5f4; }
.profile-empty { display:grid; min-height:122px; grid-template-columns:46px minmax(0,1fr); align-content:center; column-gap:13px; padding:20px 8px; text-align:left; }.profile-empty > span { display:grid; width:42px; height:42px; grid-row:1/3; place-items:center; border:1px solid #d5e2e6; border-radius:50%; background:#edf4f5; color:#467482; font-size:20px; line-height:1; }.profile-empty strong { align-self:end; color:#343b44; font-size:13px; }.profile-empty small { align-self:start; margin-top:5px; color:#9097a0; font-size:10px; }
.storage-note { display:flex; align-items:flex-start; justify-content:flex-start; gap:6px; margin:18px 0 0; padding-top:13px; border-top:1px solid #e3e6e9; color:#9298a2; font-size:9px; line-height:1.5; text-align:left; }.storage-note i { width:4px; height:4px; flex-shrink:0; margin-top:5px; border-radius:50%; background:#aeb5bd; }

.about-intro { padding: 5px 2px 20px; }.about-intro > span { color: var(--muted); font-size: 12px; }.about-intro h2 { margin: 5px 0 10px; font-size: 25px; }.about-intro p { margin: 0; color: #626a74; font-size: 13px; line-height: 1.65; }
.method-list { border-top: 1px solid #dfe2e6; border-bottom: 1px solid #dfe2e6; }.method-list div { display: grid; min-height: 60px; grid-template-columns: 88px minmax(0,1fr); align-items: center; border-bottom: 1px solid #e8eaed; }.method-list div:last-child { border-bottom: 0; }.method-list strong { font-size: 13px; }.method-list span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.about-section { padding:24px 0 20px; border-bottom:1px solid #dfe2e6; }.about-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:13px; }.about-section-heading strong { font-size:16px; }.about-section-heading small { color:#8a919a; font-size:10px; }.about-section p { margin:8px 0 0; color:#68717b; font-size:11px; line-height:1.65; }
.about-source-lines > div { display:grid; min-height:52px; grid-template-columns:6px 124px minmax(0,1fr); align-items:center; gap:9px; border-bottom:1px solid #eceef0; }.about-source-lines > div:last-child { border-bottom:0; }.about-source-lines i { width:4px; height:21px; border-radius:1px; background:#303741; }.about-source-lines i.green { background:#367765; }.about-source-lines i.orange { background:#d36b4d; }.about-source-lines strong { font-size:11px; }.about-source-lines span { color:#737c86; font-size:10px; line-height:1.45; }
.about-status-lines > div { display:grid; min-height:46px; grid-template-columns:124px minmax(0,1fr); align-items:center; gap:9px; border-bottom:1px solid #eceef0; }.about-status-lines > div:last-child { border-bottom:0; }.about-status-lines strong { font-size:11px; }.about-status-lines span { color:#737c86; font-size:10px; }
.about-disclaimer { margin:16px 0 0; color:#9299a2; font-size:10px; line-height:1.6; }
.site-footer { display:flex; align-items:center; flex-direction:column; gap:5px; margin:34px -22px 0; padding:22px 22px 24px; border-top:1px solid #e1e4e8; color:#89919a; font-size:9px; line-height:1.5; text-align:center; }
.site-footer strong { color:#555e68; font-size:11px; }
.site-footer a { color:#6f7882; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.source-list { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.source-item { padding: 14px; border-bottom: 1px solid #eaedf0; }.source-item:last-child { border-bottom: 0; }.source-item strong { display: block; font-size: 13px; }.source-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }.source-status { display: inline-block; margin-top: 9px; padding: 4px 6px; border-radius: 3px; background: #fbe9e6; color: #a64339; font-size: 9px; }

.bottom-nav { position: fixed; z-index: 20; right: max(0px,calc(50% - 240px)); bottom: 0; left: max(0px,calc(50% - 240px)); display: grid; height: 62px; grid-template-columns: repeat(4,1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #e1e4e8; background: rgba(255,255,255,.97); }
.nav-item { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #8a919b; }
.nav-item.active { color: #252b33; }.nav-item small { font-size: 10px; }
.nav-home { width: 15px; height: 15px; border: 2px solid currentColor; border-top: 0; transform: rotate(45deg); }.nav-bars { display: flex; height: 16px; align-items: flex-end; gap: 2px; }.nav-bars i { width: 4px; background: currentColor; }.nav-bars i:nth-child(1){height:8px}.nav-bars i:nth-child(2){height:16px}.nav-bars i:nth-child(3){height:12px}.nav-compare { width: 18px; height: 13px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }.nav-info { display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-family: Georgia,serif; font-size: 11px; font-weight: 700; }
.nav-profile { position:relative; width:16px; height:16px; border:2px solid currentColor; border-radius:50% 50% 42% 42%; }.nav-profile::before { position:absolute; top:2px; left:4px; width:4px; height:4px; border:1.5px solid currentColor; border-radius:50%; content:""; }.nav-profile::after { position:absolute; right:2px; bottom:1px; left:2px; height:4px; border-top:1.5px solid currentColor; border-radius:50%; content:""; }

@media (max-width: 900px) {
  .preview-note { display: none; }
  .app-shell { width: 100%; box-shadow: none; }
  .compare-dock { right: 14px; left: 14px; }
  .bottom-nav { right: 0; left: 0; }
}