/* 2026-10-27 确认稿：白色画布、浅绿实心工具按钮，蓝色仅用于品牌与焦点。
   分类不再套卡片；所有具体工具在默认状态下都有完整边界。 */
:root {
  --paper:#fff; --surface:#fff; --raised:#f2f6f3;
  --ink:#172a24; --soft:#52625e; --muted:#5d7067;
  --line:#d6e0da; --strong:#8ba399;
  --accent:#1684ed; --accent-bg:#edf4ff; --on-accent:#fff;
  --link:#0967be; --on-link:#fff;
  --action:#174e3b; --tool-fill:#edf3ee; --tool-border:#9db5a7;
  --added:#e4f4e8; --removed:#fcebed; --changed:#e8f2ff;
  --control-border:#71897d; --motion-fast:120ms;
}
:root[data-theme=dark] {
  --paper:#14251f; --surface:#192e25; --raised:#233d30;
  --ink:#edf5f0; --soft:#c0d0c6; --muted:#b0c3b6;
  --line:#395448; --strong:#789889;
  --accent:#90c3ff; --accent-bg:#243d56; --on-accent:#10271d;
  --link:#90c3ff; --on-link:#10271d;
  --action:#b3ddc5; --tool-fill:#233e31; --tool-border:#648675;
  --added:#234d35; --removed:#542b35; --changed:#243f5d;
  --control-border:#789889;
}
body{font-size:15px;line-height:1.55}
h1,h2,h3,.brand{font-family:UI,system-ui,sans-serif}
.wrap{width:min(1440px,100%);padding-inline:48px}
main{min-width:0}
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.header-inner{min-height:64px;gap:32px;flex-wrap:nowrap;padding-block:0}
.brand{font-size:23px;gap:10px;letter-spacing:-.65px;font-weight:750}
.brand-mark{width:28px;height:32px;border-radius:0;background:none;color:var(--accent)}
.brand-mark svg{width:27px;height:30px}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--soft)}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--ink)}
.theme-toggle{margin-left:auto;width:44px;height:44px}
.theme-toggle svg{width:23px;height:23px}
.skip-link{z-index:20;background:var(--link);color:var(--on-link)}
.btn{min-height:44px;border:1px solid var(--strong);border-radius:5px;background:var(--tool-fill);font-size:14px;padding:9px 16px}
.btn:hover:not(:disabled){border-color:var(--action);background:var(--raised)}
.btn-primary{background:var(--action);border-color:var(--action);color:var(--paper)}
.btn-primary:hover:not(:disabled){background:var(--action);color:var(--paper);filter:brightness(.95)}
.btn-ghost{border-color:var(--line);background:var(--surface)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 小字号链接使用独立文字色，保留品牌与焦点的亮蓝；跳转正文入口同时保证底色与文字对比。 */
.tool-docs a,.prose a,.preview a,.case-links a,.guide-links a,.tool-privacy a,.breadcrumb a:hover,.footer-inner a:hover{color:var(--link)}

/* 首页直接展示全目录；每个工具仍为可抓取的规范链接，搜索只在本地筛选。 */
.directory-home{padding-top:28px;padding-bottom:22px}
.directory-heading{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:28px}
.directory-heading h1{font-size:30px;line-height:1.2;letter-spacing:-.8px;font-weight:750}
.directory-heading p{font-size:16px;color:var(--soft);margin-top:4px}
.mobile-copy{display:none}
.directory-search{width:min(44%,480px);min-width:0}
.search-control{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px;border:1px solid var(--control-border);border-radius:6px;background:var(--paper)}
.search-control:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.search-control svg{width:21px;height:21px;color:var(--soft)}
.search-control input{width:100%;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--ink);font-size:16px}
.search-control input:focus-visible{outline:0}
.search-control input::placeholder{color:var(--muted)}
.search-control kbd{font:12px UI,system-ui,sans-serif;color:var(--soft);border:1px solid var(--line);border-radius:3px;padding:0 5px}
.category-jumps{display:none}
.tool-directory{scroll-margin-top:20px}
.directory-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;align-items:start}
.directory-group{min-width:0;scroll-margin-top:20px}
.directory-category{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.directory-category h2{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.55px}
.collection-link:hover{text-decoration:underline;text-underline-offset:4px}
.directory-category .count{font:400 15px/1.5 UI,system-ui,sans-serif;color:var(--soft)}
.directory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:8px}
.directory-list li{min-width:0}
.directory-tool{display:flex;align-items:center;justify-content:center;min-height:52px;height:100%;padding:8px 11px;border:1px solid var(--tool-border);border-radius:6px;background:var(--tool-fill);text-align:center;color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:break-word;transition:background-color var(--motion-fast),border-color var(--motion-fast)}
.directory-tool:hover{background:var(--raised);border-color:var(--action)}
.directory-tool:active{background:var(--line);border-color:var(--action)}
.search-empty{padding:44px 16px;text-align:center;border:1px dashed var(--strong);border-radius:6px}
.search-empty h2{font-size:22px}
.search-empty p{color:var(--soft);margin:10px 0 18px}
.directory-help{margin-top:22px;font-size:13px;color:var(--soft)}
.directory-help a{text-decoration:underline;text-underline-offset:3px}
.directory-help a:hover{color:var(--ink)}
.compact-footer{background:var(--paper);margin-top:18px}
.footer-inner{min-height:56px;font-size:13px;gap:20px}
.footer-inner nav{gap:24px}
.footer-inner a{min-height:44px}
.footer-note{margin:0}
.page-content{padding-top:24px;padding-bottom:28px}
.tool-heading h1{font-size:32px;letter-spacing:-.7px}
.tool-heading p{max-width:78ch;font-size:16px;color:var(--soft)}
.csv-page>.breadcrumb{display:none}
.csv-page>.tool-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.csv-page .tool-heading-copy{min-width:0}
.csv-page .tool-heading h1{font-size:36px;color:var(--action)}
.tool-privacy{font-size:12px!important;margin-top:8px!important}
/* 顶部示例按钮与设置栏分组留白，窄屏换行后也保留相同间距。 */
.tool-workspace>.examples{margin:0 0 16px}
.tool-workspace .options{background:var(--raised)}
.tool-card:hover{border-color:var(--tool-border);background:var(--tool-fill)}
.collection-card:hover{border-color:var(--tool-border)}
/* 只提高可编辑控件的边界对比；分类、结果表格和其他分组边框保持原有视觉层次。 */
.control{background:var(--surface);border-color:var(--control-border)}
.editor{border-color:var(--control-border);border-radius:5px}

@media(min-width:851px) and (max-width:1150px){
  .wrap{padding-inline:30px}
  .directory-groups{gap:30px 22px}
  .directory-category h2{font-size:19px}
  .directory-tool{font-size:14px;padding-inline:8px;min-height:56px}
}
/* 较矮的桌面收紧区块留白，保持字号与两行长名称的可读性。 */
@media(min-width:1101px) and (max-height:800px){
  .directory-home{padding-top:22px}
  .directory-heading{margin-bottom:22px}
  .directory-groups{row-gap:28px}
  .directory-tool{min-height:50px}
}
@media(min-width:651px) and (max-width:850px){
  .wrap{padding-inline:28px}
  .brand{font-size:21px}
  .header-inner{gap:24px}
  .directory-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .directory-tool{min-height:54px;font-size:14px}
  .directory-category h2{font-size:20px}
  .directory-heading h1{font-size:28px}
  .directory-search{width:44%}
}
@media(max-width:650px){
  .wrap{padding-inline:16px}
  .header-inner{min-height:48px;gap:12px}
  .brand{font-size:18px;gap:7px;letter-spacing:-.5px}
  .brand-mark{width:23px;height:28px}
  .brand-mark svg{width:23px;height:26px}
  .theme-toggle{width:44px;height:44px}
  .site-nav{display:none}
  .tool-page-body .site-nav{display:flex;margin-left:auto}
  .tool-page-body .site-nav a:first-child{min-height:36px;padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:var(--tool-fill);font-size:12px;white-space:nowrap}
  .tool-page-body .site-nav a:last-child{display:none}
  .tool-page-body .theme-toggle{margin-left:0}
  .tool-page-body .header-inner{gap:8px}
  .directory-home{padding-top:14px;padding-bottom:20px}
  .directory-heading{display:block;margin-bottom:12px}
  .directory-heading h1{font-size:25px;letter-spacing:-.6px;line-height:1.2}
  .directory-heading p{font-size:14px;line-height:1.45;margin-top:3px}
  .desktop-copy{display:none}
  .mobile-copy{display:inline}
  .directory-search{width:100%;margin-top:12px}
  .search-control{height:44px;padding-inline:12px}
  .search-control input{font-size:16px}
  .search-control kbd{display:none}
  .category-jumps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;margin-bottom:18px}
  .category-jumps a{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-size:13px;color:var(--soft)}
  .category-jumps a:hover{border-color:var(--strong);color:var(--ink)}
  .category-jumps span{font-size:15px;line-height:1}
  .directory-groups{grid-template-columns:minmax(0,1fr);gap:20px}
  .directory-category{gap:12px;margin-bottom:8px}
  .directory-category h2{font-size:20px;line-height:1.3}
  .directory-category .count{font-size:14px}
  .directory-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .directory-tool{min-height:52px;padding:7px 9px;font-size:14px;line-height:1.3}
  .footer-inner{padding-block:12px;gap:2px 12px;font-size:12px;flex-wrap:wrap}
  .footer-inner nav{gap:18px}
  .footer-note{flex-basis:100%}
  .page-content{padding-top:18px}
  .tool-heading h1{font-size:29px}
  .tool-heading p{font-size:15px}
  .csv-page>.tool-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}
  .csv-page .tool-heading h1{font-size:30px}
}
@media(max-width:360px){
  .wrap{padding-inline:12px}
  .directory-tool{font-size:14px;padding-inline:6px;min-height:56px}
  .directory-category h2{font-size:19px}
  .category-jumps a{font-size:12px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}