/* ===== Common CSS for all tool pages ===== */
* { box-sizing:border-box; border-radius:0 !important; }
html { scroll-behavior:smooth; overflow-y:scroll; }
body {
  min-width:320px; margin:0; color:#27364a;
  font-family:"Inter","Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(115,185,255,0.18), transparent 28%),
    linear-gradient(180deg, #f0f7ff 0%, #e8f1fc 42%, #f5f9ff 100%);
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button,input[type="text"],input[type="search"],textarea { min-height:36px; }
img { display:block; }
.site { min-height:100vh; }
.container { width:min(1460px, calc(100% - 40px)); margin:0 auto; }
.topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(214,224,238,0.9); background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); }
.nav { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:20px; }
.brand { display:flex; align-items:center; flex:0 0 auto; gap:10px; }
.brand-logo { width:42px; height:42px; object-fit:cover; flex-shrink:0; }
.brand strong,.brand small { display:block; }
.brand strong { color:#172033; font-size:17px; letter-spacing:0.02em; }
.brand small { margin-top:2px; color:#6c7d92; font-size:11px; }
.menu { display:flex; flex:1; align-items:center; justify-content:center; gap:2px; overflow-x:auto; scrollbar-width:none; }
.menu::-webkit-scrollbar { display:none; }
.menu a { padding:8px 10px; border-radius:8px !important; color:#506276; font-size:13px; white-space:nowrap; transition:color .2s ease,background .2s ease; }
.menu a:hover { color:#1e6fe8; background:#f0f6ff; }
.menu a.active { color:#1e6fe8; background:#edf4ff; font-weight:600; }
/* 右上角博客按钮 */
.submit-link, .nav-blog-link {
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 22px; border:none; color:#fff;
  font-size:13px; text-decoration:none; white-space:nowrap;
  transition:all .2s ease;
  background: linear-gradient(135deg, #5ba8ff 0%, #3a8ff5 100%);
  box-shadow: 0 2px 8px rgba(58, 143, 245, 0.3);
  border-radius: 8px !important;
}
.submit-link:hover, .nav-blog-link:hover {
  background: linear-gradient(135deg, #4a9dff 0%, #1e6fe8 100%);
  box-shadow: 0 4px 12px rgba(30, 111, 232, 0.4);
  color:#fff;
}
.submit-link.active, .nav-blog-link.active {
  background: linear-gradient(135deg, #4a9dff 0%, #1e6fe8 100%);
  box-shadow: 0 4px 12px rgba(30, 111, 232, 0.4);
  color:#fff;
}
/* 汉堡菜单按钮 */
.hamburger-btn {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  width:40px; height:40px; padding:0; flex-shrink:0;
  border:1px solid rgba(214,224,238,0.9); border-radius:8px !important;
  background:#fff; cursor:pointer; transition:all .2s ease;
}
.hamburger-btn span {
  display:block; width:20px; height:2px; background:#506276;
  margin:2px 0; transition:all .3s ease;
}
.hamburger-btn:hover { border-color:#1e6fe8; }
.hamburger-btn:hover span { background:#1e6fe8; }
.hamburger-btn.is-active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger-btn.is-active span:nth-child(2) { opacity:0; }
.hamburger-btn.is-active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.generic-tool-page { padding:20px 0 60px; min-height:60vh; }
.generic-tool-breadcrumb { display:flex; align-items:center; gap:6px; padding:10px 16px; font-size:13px; color:#fff; background:linear-gradient(90deg,#5ba8ff 0%,#73b9ff 50%,#8fc7ff 100%); margin:0 0 16px; }
.generic-tool-breadcrumb a { color:#111; font-size:18px; font-weight:900; text-decoration:none; }
.generic-tool-breadcrumb a:hover { text-decoration:underline; opacity:0.9; }
.generic-tool-breadcrumb span { color:#111; font-size:18px; font-weight:900; }
.generic-tool-breadcrumb span:last-child { color:lightyellow; font-size:13px; font-weight:400; }
.generic-tool-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:flex-start; }
.generic-tool-main { min-width:0; }
.generic-tool-header { display:flex; align-items:center; gap:16px; padding:16px 0 14px; border-bottom:1px solid #dce6f4; margin-bottom:16px; }
.generic-tool-header h1 { margin:0; font-size:18px; font-weight:600; color:#1a2a40; line-height:1; white-space:nowrap; }
.generic-tool-header p { margin:4px 0 0; font-size:13px; color:#7a8da3; line-height:1.5; }
.tool-item-icon { flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; border-radius:8px; font-size:15px; font-weight:700; color:#1890ff; font-style:normal; border:1px solid transparent; }
.tool-item-icon.sm { width:28px; height:28px; font-size:12px; border-radius:6px; }
.tool-item-icon.lg { width:52px; height:52px; font-size:22px; border-radius:10px; }
.icon-blue { background:linear-gradient(135deg,#e8f2ff,#d0e4ff); color:#3a8ff5; border-color:#bcd8ff; }
.icon-green { background:linear-gradient(135deg,#e8f7e6,#d4efd0); color:#389e0d; border-color:#b8e0b3; }
.icon-orange { background:linear-gradient(135deg,#fff2e0,#ffe0b8); color:#d46b08; border-color:#ffd199; }
.icon-purple { background:linear-gradient(135deg,#f0e6ff,#e0d0ff); color:#531dab; border-color:#cbb3ff; }
.icon-red { background:linear-gradient(135deg,#ffeae5,#ffd5cd); color:#cf1322; border-color:#ffbfb3; }
.icon-gold { background:linear-gradient(135deg,#e8f2ff,#d0e4ff); color:#3a8ff5; border-color:#bcd8ff; }
.icon-teal { background:linear-gradient(135deg,#e0f7f5,#b8f0ea); color:#0d9488; border-color:#8ce5d8; }
.icon-cyan { background:linear-gradient(135deg,#e0f2ff,#c0e4ff); color:#0284c7; border-color:#8ccfff; }
.icon-yellow { background:linear-gradient(135deg,#fff8d6,#fff0a8); color:#ca8a04; border-color:#ffe066; }
.icon-indigo { background:linear-gradient(135deg,#e0e8ff,#c8d4ff); color:#4f46e5; border-color:#a8b8ff; }
.icon-gray { background:linear-gradient(135deg,#f0f4f8,#e2e8f0); color:#6b7280; border-color:#cbd5e1; }
.icon-pink { background:linear-gradient(135deg,#fce7f3,#f9c5dd); color:#db2777; border-color:#f5a0c6; }
/* ===== Shared utility classes ===== */
.btn-primary { padding:8px 24px; background:#73b9ff; color:#fff; border:none; cursor:pointer; font-size:13px; transition:all .2s; }
.btn-primary:hover:not(:disabled) { background:#5ba8ff; }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-ghost { padding:8px 20px; background:#fff; color:#666; border:1px solid #dce6f4; cursor:pointer; font-size:13px; transition:all .2s; }
.btn-ghost:hover:not(:disabled) { border-color:#73b9ff; color:#3a8ff5; }
.btn-ghost:disabled { opacity:0.5; cursor:not-allowed; }
.info-item { display:flex; flex-direction:column; gap:2px; }
.info-label { font-size:12px; color:#8a94a6; }
.info-value { font-size:13px; color:#27364a; font-weight:500; }
.stat-item { display:flex; flex-direction:column; gap:2px; }
.stat-label { font-size:12px; color:#8a94a6; }
.stat-value { font-size:13px; color:#3a8ff5; font-weight:500; }
.stat-ok { color:#52c41a; }
.stat-err { color:#c00; }
/* ===== Sidebar + Bottom Tools + Footer ===== */
.generic-tool-sidebar { background:#fff; border:1px solid #dce6f4; border-radius:8px; padding:16px; position:sticky; top:80px; }
.sidebar-related-section { overflow:hidden; border:1px solid #dce6f4; border-radius:8px; background:#fff; }
.sidebar-related-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #e3ecf6; }
.sidebar-related-title strong { color:#172033; font-size:14px; font-weight:600; }
.sidebar-related-title span { color:#7a8da3; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.sidebar-related-link { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #edf2f8; color:#42576f; font-size:13px; transition:color .2s ease,background .2s ease; }
.sidebar-related-link:last-child { border-bottom:0; }
.sidebar-related-link:hover { color:#3a8ff5; background:#e8f2ff; }
.sidebar-related-link em { overflow:hidden; font-style:normal; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.bottom-tools-section { margin-top:32px; padding:24px; background:#fff; border:1px solid #dce6f4; border-radius:8px; }
.bottom-tools-section h2 { margin:0 0 16px; font-size:18px; font-weight:600; color:#1f2937; }
.bottom-tools-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; }
.bottom-tool-card { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#f5f9ff; border:1px solid #dce6f4; border-radius:6px; color:#42576f; font-size:13px; transition:all .2s ease; }
.bottom-tool-card:hover { border-color:#73b9ff; background:#e8f2ff; color:#3a8ff5; box-shadow:0 2px 8px rgba(58,143,245,0.12); }
.bottom-tool-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.footer { border-top:1px solid #dce6f4; background:#fff; }
.footer-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; min-height:84px; color:#617489; max-width:min(1460px, calc(100% - 40px)); margin:0 auto; padding:16px 0; text-align:center; }
.footer-inner strong { color:#172033; }
.footer-copy-text { font-size:13px; color:#617489; white-space:nowrap; }
.footer-copy-text a { color:#617489; text-decoration:none; }
.footer-copy-text a:hover { color:#3a8ff5; }
.footer-gov-link { display:inline-flex !important; align-items:center; gap:4px; }
.footer-gov-icon { width:14px; height:14px; vertical-align:middle; }
.footer-sitemap-link { display:inline-flex; align-items:center; justify-content:center; padding:7px 22px; border:none; color:#fff; font-size:13px; text-decoration:none; white-space:nowrap; transition:all .2s ease; background:linear-gradient(135deg,#5ba8ff 0%,#3a8ff5 100%); box-shadow:0 2px 8px rgba(58,143,245,0.3); border-radius:8px !important; }
.footer-sitemap-link:hover { background:linear-gradient(135deg,#4a9dff 0%,#1e6fe8 100%); box-shadow:0 4px 12px rgba(30,111,232,0.4); color:#fff; }
.friend-links-section { width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:12px; border-bottom:1px solid #dce6f4; padding:10px 0; }
.friend-links-title { font-size:14px; color:#555; margin:0; line-height:24px; flex-shrink:0; }
.friend-links-list { list-style:none; display:flex; flex-wrap:wrap; gap:0; padding:0; }
.friend-links-list li { padding:0; line-height:24px; }
.friend-links-list li::after { content:'|'; color:#dce6f2; margin:0 12px; }
.friend-links-list li:last-child::after { display:none; }
.friend-links-list a { font-size:13px; color:#617489; text-decoration:none; transition:color .2s; }
.friend-links-list a:hover { color:#3a8ff5; }
.footer-copyright { font-size:13px; color:#617489; }
.footer-links { width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; padding:10px 0; border-bottom:1px solid #dce6f4; }
.footer-links a { font-size:14px; color:#3a8ff5; text-decoration:none; transition:color .2s; padding:4px 0; }
.footer-links a:hover { color:#1e6fe8; }
.footer-links a::after { content:'|'; color:#dce6f2; margin:0 16px; }
.footer-links a:last-child::after { display:none; }
.mobile-menu-header { display:none; }
.mobile-blog-link { display:none; }
/* ===== Common responsive ===== */
@media (max-width:1024px) { .generic-tool-layout { grid-template-columns:1fr; } .generic-tool-sidebar { position:static; } }
@media (max-width:768px) {
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .topbar { backdrop-filter:none !important; z-index:999; }
  .nav { flex-wrap:wrap; padding:12px 0; }
  .hamburger-btn { display:flex !important; }
  .submit-link, .nav-blog-link { display:none; }

  /* 遮罩层 */
  .mobile-menu-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(15,23,42,0.45); z-index:998;
    animation:mmOverlayIn 0.25s ease both;
  }
  @keyframes mmOverlayIn { from { opacity:0; } to { opacity:1; } }

  /* 抽屉菜单 */
  .menu {
    position:fixed; top:0; right:0; bottom:0;
    width:min(80vw,320px);
    background:#fff; z-index:1000;
    display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:0 0 env(safe-area-inset-bottom); margin:0; border:none;
    border-left:1px solid #e6edf6;
    box-shadow:-12px 0 32px rgba(23,32,51,0.10);
    transform:translateX(100%);
    transition:transform 0.28s cubic-bezier(0.22,0.61,0.36,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .menu.menu-open { transform:translateX(0); }

  /* 抽屉头部：仅保留关闭按钮 */
  .mobile-menu-header {
    display:flex; align-items:center; justify-content:flex-end;
    padding:12px 14px; margin:0;
    border-bottom:1px solid #eef2f8;
  }
  .mobile-menu-close {
    border:none; background:transparent; color:#64778c;
    cursor:pointer; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    transition:color .2s ease, background .2s ease;
  }
  .mobile-menu-close:hover { color:#1e6fe8; background:#f0f6ff; }

  /* 抽屉菜单项 */
  .menu a {
    padding:15px 24px; font-size:15px; line-height:1.5; text-align:left;
    border-radius:0 !important;
    border-bottom:1px solid #f0f4f9 !important;
    color:#3d4f63;
    transition:color .2s ease, background .2s ease;
  }
  .menu a:hover { background:#f5f9ff; color:#1e6fe8; }
  .menu a.active { color:#1e6fe8; background:#f0f6ff; box-shadow:inset 3px 0 0 #1e6fe8; font-weight:600; }

  /* 抽屉底部博客入口（按钮化） */
  .menu a.mobile-blog-link,
  .menu a.mobile-blog-link:hover {
    display:flex; align-items:center; justify-content:center;
    margin:20px 24px calc(20px + env(safe-area-inset-bottom));
    padding:10px 16px;
    border:none !important;
    color:#fff; font-size:14px; font-weight:500;
    background:linear-gradient(135deg,#5ba8ff 0%,#3a8ff5 100%) !important;
    box-shadow:0 2px 8px rgba(58,143,245,0.3);
  }
  .bottom-tools-grid { grid-template-columns:repeat(2, 1fr); }
}