/* =========================================================
   工具箱统一设计系统 (Notion 纸感风格)
   - 底色：暖白纸感 #F7F6F3；卡片纯白，层次靠极淡阴影而非边框
   - 圆角：克制的小圆角（4 / 6 / 8 / 10px）—— Notion 的关键特征
   - 中性色：暖调灰（带一点棕），非冷灰；主文字 #37352F
   - 强调色：Notion 蓝 #2383E2；语义色取 Notion 官方色板
   - 质感：hover 用浅灰底而非位移，动效克制（仅 transform/opacity）
   - 对比度：正文 #37352F 对白底 12.6:1、对纸底 11.8:1（WCAG AAA）
   ========================================================= */
:root{
  /* 品牌色阶（映射为 Notion 蓝） */
  --brand-50:#E7F3F8; --brand-100:#D3EAF4; --brand-200:#A8D7EA; --brand-300:#6FBEE0;
  --brand-400:#3C9DD8; --brand-500:#2383E2; --brand-600:#1A6DC0; --brand-700:#145A9E;
  --brand-800:#0F4880; --brand-900:#0B3A66;
  /* 中性灰（Notion 暖调灰） */
  --gray-0:#ffffff; --gray-50:#FBFAF8; --gray-100:#F1F0EE; --gray-200:#E9E5E0;
  --gray-300:#DFDBD4; --gray-400:#C8C4BC; --gray-500:#9B9A97; --gray-600:#787774;
  --gray-700:#5F5E5B; --gray-800:#454440; --gray-900:#37352F;
  /* 语义色（Notion 官方色板） */
  --success:#0F7B6C; --success-bg:#DDEDEA;
  --danger:#E03E3E;  --danger-bg:#FBE4E4;
  --warning:#D9730D; --warning-bg:#FAEBDD;
  /* 别名（兼容各页面 var 引用） */
  --bg:#F7F6F3; --surface:#ffffff; --border:#E9E5E0;
  --text:#37352F; --muted:#787774;
  --primary:var(--brand-500); --primary-dark:var(--brand-600); --ok:var(--success);
  --shadow:0 0 0 1px rgba(15,15,15,.05), 0 1px 2px rgba(15,15,15,.04);
  --shadow-hover:0 0 0 1px rgba(15,15,15,.07), 0 4px 14px rgba(15,15,15,.06);
  /* 圆角（Notion 偏小、克制） */
  --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:10px;
  /* 间距（8px 基准） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  /* 字体（Notion 系统字体栈） */
  --font-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Courier New",monospace;
  /* 容器 */
  --container:980px;
  /* 键盘布局单位 */
  --u:50px; --gap:6px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--text); line-height:1.5;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ---------- 容器 / 返回 / 标题 ---------- */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:var(--s6) var(--s4) var(--s8);}
.wrap--sm{max-width:640px;} .wrap--md{max-width:820px;} .wrap--lg{max-width:1100px;}

.back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--primary);text-decoration:none;font-size:15px;font-weight:500;
  margin-bottom:var(--s4);transition:opacity .15s,transform .15s;
}
.back:hover{opacity:.7;transform:translateX(-2px);}
.back:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}

.header{text-align:center;margin-bottom:var(--s6);}
.header h1{font-size:clamp(22px,5vw,28px);font-weight:650;letter-spacing:-.01em;line-height:1.2;}
.header p{color:var(--muted);font-size:14px;margin-top:8px;}

/* ---------- 卡片（纯白 + 极淡描边阴影，无重边框） ---------- */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:var(--s5);margin-bottom:var(--s4);
}
.card:last-child{margin-bottom:0;}

/* ---------- 说明文字 ---------- */
.intro{font-size:14px;line-height:1.7;color:var(--text);}
.intro b{color:var(--primary);font-weight:600;}
.intro ul,.intro ol{margin:var(--s2) 0 0 20px;}
.intro li{margin:4px 0;}
.intro .note{display:block;margin-top:12px;padding:12px 14px;background:var(--gray-100);
  border-radius:var(--r);font-size:12.5px;color:var(--muted);line-height:1.6;}

/* ---------- 表单字段 ---------- */
.field{margin-bottom:var(--s5);}
.field:last-child{margin-bottom:0;}
.field-label{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  font-size:14px;font-weight:600;margin-bottom:10px;
}
.field-label .val{
  background:var(--gray-100);color:var(--primary);padding:2px 10px;
  border-radius:var(--r-sm);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;
}
input[type=range]{width:100%;accent-color:var(--primary);cursor:pointer;height:24px;}
input[type=text],input[type=number],select.select{
  width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r);
  font-size:15px;outline:none;background:var(--surface);color:var(--text);font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input[type=text]:focus,input[type=number]:focus,select.select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,131,226,.16);
}
input[type=color]{
  width:46px;height:38px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:none;cursor:pointer;padding:2px;
}

/* ---------- 复选 / 分段 ---------- */
.row{display:flex;align-items:center;gap:10px;}
.check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;user-select:none;}
.check input{accent-color:var(--primary);width:18px;height:18px;cursor:pointer;}
.check .ex{color:var(--muted);font-size:12px;}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.check-box{
  display:flex;align-items:center;gap:8px;padding:13px 15px;border:1px solid var(--border);
  border-radius:var(--r);cursor:pointer;user-select:none;transition:border-color .15s,background .15s;
}
.check-box:hover{border-color:var(--primary);}
.check.active,.check-box.active{border-color:var(--primary);background:var(--brand-50);}

.seg{display:flex;background:var(--gray-100);border-radius:var(--r);padding:2px;gap:2px;}
.seg button{
  flex:1;border:none;background:transparent;padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;font-family:inherit;
}
.seg button:hover{color:var(--text);}
.seg button.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 1px rgba(15,15,15,.05),0 1px 2px rgba(15,15,15,.05);}

/* ---------- 按钮（Notion：实心蓝 / 幽灵，hover 仅换底色不做位移） ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:11px 18px;border:none;border-radius:var(--r-sm);
  background:var(--primary);color:#fff;font-size:15px;font-weight:500;cursor:pointer;
  font-family:inherit;transition:background .15s;
}
.btn:hover{background:var(--brand-600);}
.btn:active{background:var(--brand-700);}
.btn:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;}
.btn.ghost{background:transparent;color:var(--text);box-shadow:0 0 0 1px var(--border);}
.btn.ghost:hover{background:var(--gray-100);}
.btn.ghost:active{background:var(--gray-200);}
.btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- 状态条 / 进度 / 图例 ---------- */
.status{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.last{flex:1;min-width:200px;background:var(--gray-100);border-radius:var(--r);padding:14px 16px;font-variant-numeric:tabular-nums;}
.last .k{font-size:18px;font-weight:700;color:var(--primary);word-break:break-all;font-family:var(--font-mono);}
.last .k.empty{color:var(--muted);font-weight:600;font-size:14px;font-family:var(--font-sans);}
.last .lbl{font-size:12.5px;color:var(--muted);}
.count{text-align:center;min-width:80px;}
.count .num{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;}
.count .lbl{font-size:12.5px;color:var(--muted);}

.progress{height:8px;border-radius:99px;background:var(--gray-200);overflow:hidden;margin-top:6px;}
.progress>i{display:block;height:100%;width:0;background:var(--primary);border-radius:99px;transition:width .2s;}

.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:14px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--border);display:inline-block;}
.dot.unt{background:#fff;} .dot.te{background:var(--brand-50);border-color:var(--primary);}
.dot.act{background:var(--primary);border-color:var(--primary);}

/* ---------- 统计卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--gray-100);border-radius:var(--r);padding:14px;text-align:center;}
.stat .num{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:4px;}
.stat.ok .num{color:var(--success);} .stat.bad .num{color:var(--danger);}

/* ---------- 提示 / 分组 ---------- */
.notice{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--success);
  background:var(--success-bg);padding:11px 14px;border-radius:var(--r);margin-top:14px;line-height:1.6;}
.notice.danger{color:var(--danger);background:var(--danger-bg);}
.group-title{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase;}
.divider{height:1px;background:var(--border);margin:18px 0;}

/* ---------- Toast（Notion：暖黑实心条，小圆角，无毛玻璃） ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);
  background:var(--gray-900);
  color:#fff;padding:10px 18px;border-radius:var(--r);
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 4px 14px rgba(15,15,15,.18);z-index:9999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- 移动优先微调 ---------- */
@media(max-width:600px){
  .wrap{padding:var(--s5) 14px var(--s8);}
  .card{padding:18px;}
  .checks{grid-template-columns:1fr;}
}

/* =========================================================
   首页专用：Hero + 搜索 + 彩色渐变图标卡（v2 美化）
   移动优先、随宽度从 1 列升到 2 / 3 列
   ========================================================= */

/* 工具的专属配色（Notion 官方色板：淡底 + 深色前景，不用渐变） */
:root{
  --tile-blue-bg:#E7F3F8;   --tile-blue-fg:#183347;
  --tile-purple-bg:#EAE4F2; --tile-purple-fg:#412454;
  --tile-orange-bg:#FAEBDD; --tile-orange-fg:#49290E;
  --tile-teal-bg:#DDEDEA;   --tile-teal-fg:#0B372D;
  --tile-pink-bg:#F4DFEB;   --tile-pink-fg:#4C1D3D;
  --tile-gray-bg:#F1F0EE;   --tile-gray-fg:#32302C;
  --tile-green-bg:#E9F2E7;  --tile-green-fg:#0E4B29;
  --tile-yellow-bg:#FBF3DB; --tile-yellow-fg:#5A4A0F;
  --tile-red-bg:#FDEBEC;    --tile-red-fg:#5D2526;
}

/* Hero —— 大字+小字副标，Notion 页面标题的克制感 */
.hero{
  text-align:center;
  padding: 8px 0 24px;
  margin-bottom: 8px;
}
.hero .eyebrow{
  display:inline-block;
  font-size:12px;font-weight:500;
  color:var(--gray-600);
  background:var(--gray-100);
  padding:3px 10px;border-radius:var(--r-sm);
  letter-spacing:.02em;
  margin-bottom:14px;
}
.hero h1{
  font-size:clamp(28px,6vw,38px);
  font-weight:700;letter-spacing:-.02em;line-height:1.15;
  color:var(--text);
}
.hero p.lead{
  color:var(--muted);font-size:15px;line-height:1.65;
  margin:10px auto 0;max-width:520px;
}
.hero p.lead b{color:var(--text);font-weight:600;}

/* 搜索框 —— Notion 风格：浅灰底、小圆角、聚焦转白底 */
.search{
  position:relative;
  margin: 18px auto 24px;
  max-width:480px;
}
.search input{
  width:100%;
  padding:10px 14px 10px 38px;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--gray-50);
  font-size:14px;color:var(--text);
  font-family:inherit;outline:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.search input::placeholder{color:var(--gray-500);}
.search input:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px rgba(35,131,226,.16);}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--gray-500);pointer-events:none;}

/* 分组标题（Notion 侧栏分组的小字灰标） */
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:500;color:var(--gray-600);
  margin: 6px 2px 12px;letter-spacing:.02em;
}
.section-title .meta{opacity:.85;}

/* 新版卡片网格：移动 1 列 → 540+ 2 列 → 880+ 3 列 */
.tile-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media(min-width:540px){.tile-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(min-width:880px){.tile-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}

/* 新版卡片：纯白 + 极淡描边阴影，hover 换底色而非位移（Notion 习惯） */
.tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:18px;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow);
  transition:background .15s ease,box-shadow .15s ease;
  min-height:168px;
}
.tile:hover{background:#FCFCFB;box-shadow:var(--shadow-hover);}
.tile:active{background:var(--gray-50);}
.tile:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* 图标块：淡色底 + 深色线性图标，无渐变无光晕 */
.tile .glyph{
  width:44px;height:44px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.tile .glyph svg{width:22px;height:22px;display:block;}

/* 5 组配色映射 */
.tile.g-blue   .glyph{background:var(--tile-blue-bg);   color:var(--tile-blue-fg);}
.tile.g-purple .glyph{background:var(--tile-purple-bg); color:var(--tile-purple-fg);}
.tile.g-orange .glyph{background:var(--tile-orange-bg); color:var(--tile-orange-fg);}
.tile.g-teal   .glyph{background:var(--tile-teal-bg);   color:var(--tile-teal-fg);}
.tile.g-pink   .glyph{background:var(--tile-pink-bg);   color:var(--tile-pink-fg);}
.tile.g-gray   .glyph{background:var(--tile-gray-bg);   color:var(--tile-gray-fg);}
.tile.g-green  .glyph{background:var(--tile-green-bg);  color:var(--tile-green-fg);}
.tile.g-yellow .glyph{background:var(--tile-yellow-bg); color:var(--tile-yellow-fg);}
.tile.g-red    .glyph{background:var(--tile-red-bg);    color:var(--tile-red-fg);}

.tile .title{
  font-size:16px;font-weight:600;line-height:1.35;
  color:var(--text);letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.tile .desc{
  margin-top:6px;font-size:13px;line-height:1.6;
  color:var(--gray-600);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.tile .foot{
  margin-top:auto;padding-top:14px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;
}
.tile .foot .label{color:var(--primary);font-weight:500;}
.tile .foot .arrow{
  width:24px;height:24px;border-radius:var(--r-sm);
  background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-600);font-size:13px;
  transition:background .15s,color .15s;
}
.tile:hover .foot .arrow{background:var(--primary);color:#fff;}

/* 占位卡片（无链接） */
.tile.placeholder{cursor:default;}
.tile.placeholder:hover{background:var(--surface);box-shadow:var(--shadow);}
.tile.placeholder .foot .arrow{background:transparent;color:var(--gray-500);font-size:16px;}

/* 角标（Notion tag 风格） */
.badge{
  display:inline-block;
  font-size:11px;font-weight:500;
  color:var(--warning);background:var(--warning-bg);
  padding:1px 7px;border-radius:var(--r-sm);
}

/* 首页底栏 —— 灰底小条幅 + 同步提示 */
.foot-bar{
  margin-top:44px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;
  font-size:12.5px;color:var(--gray-500);
}
.foot-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--success);}
.foot-bar .sep{opacity:.5;}

/* 隐藏用类 —— 搜索过滤时整张卡淡出 */
.tile.is-hidden{display:none;}