:root{--content-max:1400px;--header-height:68px;--nav-blue:#245dca;--nav-text:#34445e}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{padding-top:calc(var(--header-height) + 14px);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;background:#f5f7fb;color:#273449;font-weight:400}
.container{max-width:var(--content-max);width:calc(100% - 64px);padding:0;margin-left:auto;margin-right:auto}
.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#2c3747;border-bottom:1px solid #2c3747;z-index:1000}
.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:var(--header-height);gap:24px}
.site-header .site-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-brand img{display:block;width:auto;height:50px;object-fit:contain}
.site-nav{display:flex;align-items:center;gap:8px}
.site-nav a{text-decoration:none;color:var(--nav-text)}
.site-nav .nav-home,.site-nav summary{display:flex;align-items:center;gap:9px;color:#e4eaf2;padding:9px 13px;border-radius:7px;font-size:16px;font-weight:500;line-height:1.5;cursor:pointer;user-select:none;transition:background .15s,color .15s}
.site-nav .nav-home:hover,.site-nav summary:hover{background:#ffffff12;color:#fff}
.site-nav .nav-home[aria-current=page],.site-nav .is-current-group>summary{color:#fff}
.site-nav details{position:relative}
.site-nav summary{list-style:none}
.site-nav summary::-webkit-details-marker{display:none}
.site-nav summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s;opacity:.6}
.site-nav details[open]>summary{color:#fff;background:#ffffff18}
.site-nav details[open]>summary::after{transform:translateY(1px) rotate(225deg);opacity:1}
.site-subnav{position:absolute;right:0;top:calc(100% + 12px);display:grid;grid-template-columns:minmax(0,1fr);width:260px;max-height:min(600px,calc(100dvh - 100px));overflow:auto;overscroll-behavior:contain;padding:8px;border:1px solid #e1e7f0;border-radius:12px;background:#fff;box-shadow:0 12px 40px #23354f15,0 2px 8px #23354f06;z-index:20;gap:3px}
.site-subnav--wide{width:490px;grid-template-columns:repeat(2,minmax(0,1fr))}
.site-subnav a{display:flex;flex-direction:column;gap:4px;min-width:0;padding:11px 12px;border-radius:7px;transition:background .12s,color .12s}
.site-subnav a:hover,.site-subnav a:focus-visible{background:#f3f6fc;color:var(--nav-blue)}
.site-subnav a[aria-current=page]{background:#edf3ff;color:var(--nav-blue)}
.nav-tool-name{font-size:15px;font-weight:500;line-height:1.5}
.nav-tool-description{font-size:12px;line-height:1.6;color:#8b97aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.site-subnav a[aria-current=page] .nav-tool-name::after{content:'当前';font-size:9px;margin-left:7px;color:#8aa7d4;font-weight:400}
.menu-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;margin:0;padding:10px;border:1px solid #ffffff35;border-radius:8px;background:transparent;color:#e4eaf2;cursor:pointer}
.menu-toggle-icon,.menu-toggle-icon::before,.menu-toggle-icon::after{display:block;width:17px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .15s,background .15s}
.menu-toggle-icon{position:relative}
.menu-toggle-icon::before,.menu-toggle-icon::after{content:'';position:absolute;left:0}
.menu-toggle-icon::before{top:-5px}.menu-toggle-icon::after{top:5px}
.nav-open .menu-toggle-icon{background:transparent}
.nav-open .menu-toggle-icon::before{transform:translateY(5px) rotate(45deg)}
.nav-open .menu-toggle-icon::after{transform:translateY(-5px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:var(--header-height) 0 0;background:#26375028;z-index:999;backdrop-filter:blur(1px)}
.site-footer{margin-top:40px}
.tool-home{padding-top:18px;padding-bottom:20px}.tool-home h1{font-size:30px;margin-bottom:0}.tool-home>p{color:#666}
.tool-home input[type=search]{max-width:600px;width:100%;padding:12px;border:1px solid #cdd5df;border-radius:8px;font-size:16px}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tool-card{min-width:0;min-height:144px;padding:24px;background:#fff;border:1px solid #e3e8f0;border-radius:10px;text-decoration:none;box-shadow:0 2px 6px #24375403;transition:box-shadow .15s}
.tool-card:hover{box-shadow:0 5px 20px #1232}.tool-card strong{display:block;color:#18578d;font-size:18px}.tool-card span{display:block;color:#666;margin-top:10px;font-size:14px;line-height:1.8}
.comm-box{max-width:var(--content-max);min-height:420px;padding:28px 32px;margin-top:12px;border-radius:10px}.comm-info{max-width:100ch;font-weight:400;line-height:1.9}
.comm-box>.row{min-width:0;max-width:100%}.comm-box input[type=text],.comm-box textarea{max-width:100%}.comm-box .CodeMirror{height:clamp(380px,58vh,680px);font-size:14px}
@media(min-width:1280px){.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.tool-card span{font-size:13px}}
button,input,select,textarea{font:inherit}button:disabled,input:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #8cabe6;outline-offset:3px}
.backToTop{border:0;cursor:pointer}.status-error{color:#b42318}.status-ok{color:#187240}
@media(max-width:991px){
  :root{--header-height:60px}
  .site-brand img{height:35px}
  .container{width:calc(100% - 40px)}
  body.nav-open{overflow:hidden}
  .menu-toggle{display:flex;flex-shrink:0}
  .site-nav{display:none;position:fixed;top:calc(var(--header-height) + 10px);left:12px;right:12px;max-height:calc(100dvh - var(--header-height) - 24px);overflow:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:3px;padding:10px;background:#fff;border:1px solid #e0e7f1;border-radius:12px;box-shadow:0 16px 40px #23354f20}
  .nav-open .site-nav{display:flex}
  .site-nav .nav-home,.site-nav summary{justify-content:space-between;color:var(--nav-text);padding:12px 13px;font-size:16px}
  .site-nav details{width:100%;border-top:1px solid #f1f3f7;padding-top:3px}
  .site-nav .nav-home:hover,.site-nav summary:hover{background:#f2f5fa;color:var(--nav-blue)}
  .site-nav .nav-home[aria-current=page],.site-nav .is-current-group>summary,.site-nav details[open]>summary{color:var(--nav-blue)}
  .site-nav details[open]>summary{background:#f0f5ff}
  .site-subnav,.site-subnav--wide{position:static;width:100%;max-height:none;margin-top:3px;border:0;box-shadow:none;background:#fafbfd;padding:6px;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;overflow:visible;border-radius:8px}
  .site-subnav a{padding:10px 9px}.nav-tool-description{font-size:12px}.nav-tool-name{font-size:14px}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){:root{--header-height:50px}}
@media(max-width:600px){.container{width:calc(100% - 24px)}.tool-grid{grid-template-columns:1fr}.comm-box{padding:16px}.comm-box .row{flex-wrap:wrap;gap:8px}.comm-box .CodeMirror{height:380px;font-size:13px}.tool-home h1{font-size:26px}.tool-card{min-height:130px;padding:18px}}
@media(max-width:340px){.site-subnav,.site-subnav--wide{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}