/* ============================================================
 * 屏幕护眼排行榜
 * 双主题：light = 米黄纸感；dark = 暖深灰。用 data-theme 切换。
 * 简洁取向：单一强调色、少边框、几乎无投影、大留白。
 * 性能：contain / content-visibility、减少重绘属性、卡片数量受控。
 * ========================================================== */

/* ---------------- 主题变量 ---------------- */
:root{
  --bg:#f7f3e8;          /* 米黄 */
  --bg-soft:#fbf8f0;
  --panel:#fffdf7;
  --panel-2:#f5f1e6;
  --line:#e8dfc9;
  --line-soft:#f0e9d8;
  --text:#3a352a;
  --text-2:#6b6353;
  --text-3:#9a907a;
  --accent:#8a6f3a;
  --accent-2:#6f5730;
  --accent-soft:#f0e8d3;
  --accent-line:#ddcfae;
  --ok:#5c8a5e;
  --warn:#a8853f;
  --bad:#a9694f;
  --danger:#b23b3b;        /* 免责声明用：明确的红色，深浅两套 */
  --todo:#c8bfa5;
  --tag-bg:#f3eee1;
  --radius:14px;
  --radius-sm:9px;
  --topbar-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1b1917;
  --bg-soft:#211f1c;
  --panel:#232019;
  --panel-2:#2b2823;
  --line:#3d3830;
  --line-soft:#322e28;
  --text:#e8e1d1;
  --text-2:#b3ab98;
  --text-3:#8a8272;
  --accent:#d9be86;
  --accent-2:#e8d3a8;
  --accent-soft:#332d22;
  --accent-line:#4d4535;
  --ok:#7fa87f;
  --warn:#c4a05c;
  --bad:#c08a6e;
  --danger:#d98b8b;
  --todo:#57503f;
  --tag-bg:#2c291f;
  color-scheme:dark;
}

/* [hidden] 兜底：自定义 display 会覆盖浏览器默认隐藏规则 */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s,color .2s;
}
body.locked{overflow:hidden}
h1,h2,h3{margin:0;font-weight:600}
code{background:var(--panel-2);padding:1px 5px;border-radius:4px;font-size:.9em}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
main.wrap{padding-bottom:56px}

/* ---------------- 按钮 ---------------- */
.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--text-2);
  padding:7px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;
  transition:border-color .15s,color .15s,background-color .15s;white-space:nowrap;
  font-family:inherit;line-height:1.6;
}
.btn:hover{border-color:var(--accent-line);color:var(--accent-2)}
.btn.sm{padding:5px 12px;font-size:12.5px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--bg)}
.icon-btn{
  border:1px solid var(--line);background:var(--panel);color:var(--text-2);
  width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:17px;line-height:1;flex:0 0 auto;transition:.15s;
}
.icon-btn:hover{border-color:var(--accent-line);color:var(--accent-2)}
.theme-btn{margin-left:4px}

/* ---------------- 顶部 ---------------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--bg-soft);border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;gap:28px;padding:12px 28px;flex-wrap:wrap}
.brand-block h1{font-size:18px}
.sub{margin:1px 0 0;font-size:12px;color:var(--text-3)}
.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tab{
  border:1px solid transparent;background:transparent;color:var(--text-2);
  padding:6px 15px;border-radius:999px;cursor:pointer;font-size:13.5px;
  display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;font-family:inherit;
}
.tab:hover{background:var(--panel-2);color:var(--accent-2)}
.tab.active{background:var(--accent-soft);color:var(--accent-2)}
.tab .n{font-size:11px;color:var(--text-3)}
.tab svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- 免责声明（置顶，静态 HTML，JS 挂了也在） ---------------- */
.disclaimer{
  margin:22px 0 0;padding:10px 14px;
  background:var(--panel);border:1px solid var(--line-soft);border-left:3px solid var(--danger);
  border-radius:var(--radius-sm);
  font-size:11.5px;line-height:1.85;color:var(--danger);font-weight:600;
}
.disclaimer .dc-link{
  color:var(--danger);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;margin-left:4px;
}
.disclaimer .dc-link:hover{text-decoration-thickness:2px}

/* ---------------- 图例 ---------------- */
.legend{margin:30px 0 16px}
.legend-toggle{display:none}          /* 桌面端不折叠，直接展开显示 */
.legend-title{font-size:12px;color:var(--text-3);margin-bottom:9px}
.legend-items{display:flex;gap:6px;flex-wrap:wrap}
.lg{
  display:flex;align-items:center;gap:7px;padding:4px 11px;font-size:12px;
  color:var(--text-2);background:var(--panel);border:1px solid var(--line);border-radius:999px;
}
.lg i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.lg b{color:var(--text);font-weight:600}

/* ---------------- 筛选栏（平铺一行，无卡片、无图标、无分组标题） ---------------- */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:0 0 12px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.toolbar-primary{display:flex;gap:10px;align-items:center}
.search-box{position:relative;flex:0 1 240px;min-width:0;max-width:240px}
.search-box input{
  width:100%;padding:8px 30px 8px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:13.5px;outline:none;background:var(--bg-soft);color:var(--text);font-family:inherit;
}
.search-box input::placeholder{color:var(--text-3)}
.search-box input:focus{border-color:var(--accent-line);background:var(--panel)}
.clear-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;background:var(--line-soft);color:var(--text-2);width:22px;height:22px;border-radius:50%;cursor:pointer;line-height:1}
.toolbar-advanced{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.filter-toggle{display:none;min-height:40px}
.fbadge{display:inline-block;min-width:16px;padding:0 4px;margin-left:5px;background:var(--accent);color:var(--bg);border-radius:99px;font-size:11px;line-height:16px;text-align:center}
.sel{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-soft);font-size:13px;color:var(--text);outline:none;font-family:inherit;max-width:150px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:transparent;border-radius:999px;
  padding:4px 12px;font-size:12.5px;cursor:pointer;color:var(--text-2);
  transition:.15s;font-family:inherit;line-height:1.6;
}
.chip:hover{border-color:var(--accent-line);color:var(--accent-2)}
.chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}
.count{margin-left:auto;font-size:12.5px;color:var(--text-3);white-space:nowrap}

/* ---------------- 卡片（不再按档位分块，档位标在卡片右上角） ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:11px;margin-bottom:4px}
.c-tier{
  position:absolute;top:9px;right:9px;z-index:1;
  min-width:30px;padding:1px 7px;border-radius:999px;
  color:#fff;font-size:10.5px;font-weight:600;line-height:1.7;text-align:center;
  background:var(--tier-color,var(--todo));
}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;cursor:pointer;position:relative;overflow:hidden;
  contain:layout style paint;transition:border-color .15s;
}
.card::before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;
  border-radius:0 3px 3px 0;background:var(--tier-color,var(--todo));
}
.card:hover{border-color:var(--accent-line)}
.card:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.card.flash{animation:flash 1.2s}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:var(--panel)}}
.c-model{font-size:14.5px;font-weight:550;margin:0 0 9px 4px;padding-right:40px;line-height:1.45;word-break:break-word}
.c-tags{display:flex;gap:5px;flex-wrap:wrap;padding-left:4px}
.tag{font-size:11px;padding:2px 8px;border-radius:6px;border:1px solid transparent;white-space:nowrap;line-height:1.65}
.tag.empty{background:var(--tag-bg);color:var(--text-3);border-color:var(--line-soft)}
.tag.ltpo{background:var(--tag-bg);color:#7a6ba0;border-color:var(--line)}
.tag.ltps{background:var(--tag-bg);color:#5b7288;border-color:var(--line)}
.tag.oled{background:var(--tag-bg);color:#8a7350;border-color:var(--line)}
.tag.lcd,.tag.dc,.tag.hi{background:var(--tag-bg);color:var(--ok);border-color:var(--line)}
.tag.mid{background:var(--tag-bg);color:var(--warn);border-color:var(--line)}
.tag.low{background:var(--tag-bg);color:var(--bad);border-color:var(--line)}
:root[data-theme="dark"] .tag.ltpo{color:#b3a3d8}
:root[data-theme="dark"] .tag.ltps{color:#9db6cc}
:root[data-theme="dark"] .tag.oled{color:#c9b189}
.card.verified{border-color:var(--accent-line)}
.more-btn{
  margin-top:10px;width:100%;border:1px dashed var(--line);background:transparent;
  color:var(--text-2);padding:8px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:12.5px;font-family:inherit;transition:.15s;
}
.more-btn:hover{border-color:var(--accent-line);color:var(--accent-2)}

/* ---------------- 空状态 ---------------- */
.empty-box{
  background:var(--panel);border:1px dashed var(--accent-line);border-radius:var(--radius);
  padding:60px 24px;text-align:center;color:var(--text-3);
}
.empty-box .big{margin-bottom:10px;opacity:.75}
.empty-box .big svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.empty-box h3{font-size:16px;color:var(--text);margin-bottom:8px}
.empty-box p{margin:0 auto;font-size:13px;max-width:520px;line-height:1.8}
.no-result{padding:44px;text-align:center;color:var(--text-3);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.markall{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------------- 详情面板 ---------------- */
.mask{position:fixed;inset:0;background:rgba(30,26,18,.34);z-index:50;animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.detail{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--panel);
  z-index:60;display:flex;flex-direction:column;border-left:1px solid var(--line);
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.detail-grabber{display:none}
.detail-head{padding:18px 20px 14px;border-bottom:1px solid var(--line-soft);display:flex;gap:12px;align-items:flex-start}
/* 标题块必须吃掉剩余宽度，否则型号名短时关闭按钮会跟着缩到中间 */
.detail-title{flex:1 1 auto;min-width:0}
.detail-head .icon-btn{margin-left:auto;flex:0 0 auto}
.detail-tier{display:inline-block;color:#fff;font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px;margin-bottom:9px}
.detail-title h2{font-size:18px;line-height:1.45;word-break:break-word}
.detail-meta{font-size:12px;color:var(--text-3);margin:5px 0 0}
.detail-body{flex:1;overflow-y:auto;padding:16px 20px;-webkit-overflow-scrolling:touch}
/* 底部一排：上一款 / 下一款 靠左，关闭靠右 */
.detail-foot{padding:12px 20px;border-top:1px solid var(--line-soft);display:flex;gap:8px;align-items:center}
.detail-foot .btn{min-height:36px}
#detailClose2{margin-left:auto}
.sec-title{font-size:11px;color:var(--text-3);letter-spacing:.08em;margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--line-soft)}
.sec-title:first-child{margin-top:0;padding-top:0;border-top:0}
/* 统一版式：每行 = 标签（小号灰字）在上 + 值（整行）在下，行间一条细线 */
/* 短字段两列排，长字段（调光/认证/护眼功能/备注/来源）整行铺开 */
.kv{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;margin:0}
.kv-row{display:block;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.kv-row.wide{grid-column:1 / -1}
.kv-row:last-child{border-bottom:0}
@media (max-width:520px){.kv{grid-template-columns:1fr}}
.kv dt{font-size:11.5px;color:var(--text-3);margin-bottom:3px;letter-spacing:.02em}
.kv dd{margin:0;font-size:13.5px;color:var(--text);word-break:break-word;overflow-wrap:anywhere;line-height:1.75}
.kv dd.empty{color:var(--text-3);font-size:12.5px}
.kv dd.multi{white-space:pre-wrap;line-height:1.85}
/* 数据来源：markdown 链接写法 [站点](url) */
.md-links{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.md-link{
  color:var(--accent);text-decoration:none;word-break:break-all;
  font-size:12.5px;line-height:1.8;
}
.md-link:hover{text-decoration:underline;text-underline-offset:3px}
.md-link b{font-weight:550}
.md-out{color:var(--text-3);font-size:10.5px;margin-left:3px}
.md-tail{color:var(--text-3);font-size:11.5px}

/* 未查到的字段不再逐行罗列「待补录」，压成一行小标签 */
.todo-list{display:flex;flex-wrap:wrap;gap:6px}
.todo-chip{
  font-size:11.5px;color:var(--text-3);background:var(--tag-bg);
  border:1px solid var(--line-soft);border-radius:6px;padding:2px 9px;line-height:1.8;
}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
  background:var(--text);color:var(--bg);padding:9px 20px;border-radius:99px;font-size:13px;
  z-index:80;animation:up .2s;max-width:86vw;text-align:center;
}
@keyframes up{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* ============================================================
 * 平板 ≤ 900px
 * ========================================================== */
@media (max-width:900px){
  .wrap{padding:0 18px}
  .topbar-inner{padding:11px 18px;gap:14px}
  .tabs{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
}

/* ============================================================
 * 手机 ≤ 640px：底部弹层 + 折叠筛选
 * ========================================================== */
@media (max-width:640px){
  body{font-size:14.5px}
  /* 全部挤在一行：标题 … 品类图标 主题按钮（用 order 重排，DOM 不动；放不下再整体换行） */
  .topbar-inner{padding:10px 14px;gap:8px;flex-wrap:wrap}
  .brand-block{order:1;flex:1 1 auto;min-width:0}
  .tabs{order:2;flex:0 0 auto;width:auto;margin-left:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .theme-btn{order:3;margin-left:0}
  .brand-block h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sub{font-size:11px}

  /* tab 只显示图标 */
  .tab{padding:6px 10px;font-size:13px}
  .tab span{display:none}

  /* 档位说明折叠成按钮 */
  .disclaimer{margin-top:16px;padding:9px 12px;font-size:11px;line-height:1.8}
  .legend{margin:16px 0 12px}
  .legend-toggle{
    display:inline-flex;align-items:center;gap:5px;
    border:1px solid var(--line);background:var(--panel);color:var(--text-2);
    padding:6px 13px;border-radius:999px;font-size:12.5px;font-family:inherit;cursor:pointer;
  }
  .legend-toggle .chev{font-size:10px;transition:transform .18s}
  .legend-toggle.on{border-color:var(--accent-line);color:var(--accent-2)}
  .legend-toggle.on .chev{transform:rotate(180deg)}
  .legend-title{display:none}
  .legend-items{display:none}
  .legend.open .legend-items{display:flex;margin-top:10px}
  .toolbar{flex-direction:column;align-items:stretch;padding:0 0 12px;gap:10px;margin-bottom:16px}
  .toolbar-primary{width:100%}
  .filter-toggle{display:inline-flex;align-items:center;justify-content:center}
  .toolbar-advanced{display:none;flex-direction:column;align-items:stretch;gap:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
  .toolbar.open .toolbar-advanced{display:flex}
  .toolbar.open .filter-toggle{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}
  .sel{max-width:none;width:100%;padding:11px}
  .chips + .chips{margin-left:0;padding-left:0;border-left:0}
  .chip{padding:6px 12px}
  .count{margin-left:0}
  .search-box{flex:1 1 auto;max-width:none}
  .search-box input{padding:10px 32px 10px 13px;font-size:16px}

  .grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:9px}
  .card{padding:12px}
  .c-model{font-size:13.5px}
  .tag{font-size:10.5px;padding:2px 7px}
  .c-tier{top:8px;right:8px}

  .detail{
    top:auto;left:0;right:0;bottom:0;width:100%;max-height:90vh;
    border-radius:18px 18px 0 0;border-left:0;border-top:1px solid var(--line);
    animation:sheetUp .26s cubic-bezier(.2,.8,.2,1);padding-bottom:var(--safe-b);
  }
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  .detail-grabber{display:block;width:100%;padding:9px 0 2px;flex:0 0 auto;cursor:grab}
  .detail-grabber::before{content:"";display:block;width:36px;height:4px;margin:0 auto;border-radius:99px;background:var(--line)}
  .detail-head{padding:12px 16px}
  .detail-title h2{font-size:16.5px}
  .detail-body{padding:14px 16px}
  .detail-foot{padding:10px 16px;gap:8px}
  .detail-foot .btn{flex:1;min-height:44px;font-size:13.5px;padding:6px 10px}

  .toast{bottom:calc(18px + var(--safe-b))}
  .empty-box{padding:44px 18px}
}

@media (max-width:380px){
  .grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}