:root {
  --bg: #f5f8f7;
  --card: #ffffff;
  --card-soft: #f9fbfa;
  --text: #18352c;
  --muted: #71827c;
  --line: #dfe9e5;
  --primary: #2f8f6b;
  --primary-strong: #237758;
  --primary-soft: #e8f5ef;
  --accent: #f2a65a;
  --danger: #c95f5f;
  --shadow: 0 18px 55px rgba(25, 74, 57, .08);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(85,177,139,.16), transparent 32%),
    radial-gradient(circle at 88% 6%, rgba(242,166,90,.12), transparent 26%),
    var(--bg);
  min-height: 100vh;
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, .file-card:focus-visible, .dropzone:focus-visible { outline: 3px solid rgba(47,143,107,.2); outline-offset: 2px; }
[hidden] { display: none !important; }

.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.84);
  border-bottom: 1px solid rgba(223,233,229,.86);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-inner, .page { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#3da57d,#287b5e); box-shadow: 0 8px 22px rgba(47,143,107,.2); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-copy { display: grid; line-height: 1.12; gap: 3px; }
.brand-copy strong { font-size: 15px; }
.brand-copy small { color: var(--muted); font-size: 11px; font-weight: 600; }
.top-note { color: var(--muted); font-size: 14px; }
.top-nav { display: flex; align-items: center; gap: 6px; }
.top-nav a { color: #51665e; text-decoration: none; font-size: 14px; font-weight: 650; padding: 9px 11px; border-radius: 9px; }
.top-nav a:hover { color: var(--primary-strong); background: var(--primary-soft); }

.hero { text-align: center; padding: 64px 0 34px; }
.hero-badges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: 13px; font-weight: 750; }
.hero-badge::before { content:""; width: 7px; height: 7px; border-radius:50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(47,143,107,.1); }
h1 { margin: 0; font-size: clamp(32px,5vw,54px); line-height: 1.12; letter-spacing: -.045em; }
.hero p { width: min(800px,100%); margin: 18px auto 0; font-size: 17px; line-height: 1.8; color: var(--muted); }

.tool-shell { background: rgba(255,255,255,.9); border: 1px solid rgba(217,231,225,.92); box-shadow: var(--shadow); border-radius: 28px; overflow: hidden; margin-bottom: 28px; }
.tool-main { padding: 28px; }
.dropzone { min-height: 310px; border: 2px dashed #c9ddd4; border-radius: 20px; background: linear-gradient(180deg,#fbfdfc,#f7fbf9); display: grid; place-items: center; padding: 30px; text-align: center; cursor: pointer; transition: .2s ease; outline: none; }
.dropzone:hover, .dropzone.dragover, .dropzone:focus-visible { border-color: var(--primary); background: #f1faf6; transform: translateY(-1px); }
.upload-icon { width: 68px; height: 68px; margin: 0 auto 17px; border-radius: 20px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.upload-icon svg { width: 34px; height: 34px; }
.drop-title { font-size: 22px; font-weight: 800; margin-bottom: 7px; }
.drop-sub { color: var(--muted); font-size: 14px; line-height: 1.7; }
.drop-limit { margin-top: 14px; color: #95a39e; font-size: 12px; }

.primary-btn, .secondary-btn, .ghost-btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 750; cursor: pointer; transition: .18s ease; }
.primary-btn { color: #fff; background: linear-gradient(135deg,var(--primary),var(--primary-strong)); box-shadow: 0 10px 24px rgba(47,143,107,.2); }
.primary-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(47,143,107,.25); }
.primary-btn:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.secondary-btn { color: var(--primary-strong); background: var(--primary-soft); border: 1px solid #d5e9e0; }
.secondary-btn:hover { background: #def1e8; }
.ghost-btn { color: var(--muted); background: transparent; border: 1px solid var(--line); }
.ghost-btn:hover { background: #f7faf8; color: var(--text); }
.danger-text { color: var(--danger); }
.choose-btn { margin-top: 19px; min-width: 190px; }

.workspace { margin-top: 4px; }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 4px 0 20px; }
.workspace-head h2, .panel-head h2, .content-head h2, .result-top h2 { margin: 3px 0 0; font-size: 22px; letter-spacing: -.02em; }
.workspace-head p, .content-head p, .result-top p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.workspace-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.section-kicker { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.file-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; padding: 16px; border-radius: 18px; background: #f6faf8; border: 1px solid var(--line); margin-bottom: 24px; min-height: 126px; }
.file-card { position: relative; min-width: 0; background: #fff; border: 1px solid #dfeae5; border-radius: 15px; padding: 8px; box-shadow: 0 5px 14px rgba(24,53,44,.04); cursor: grab; user-select: none; transition: .18s ease; }
.file-card:hover { transform: translateY(-2px); border-color: #bed8cd; box-shadow: 0 9px 22px rgba(24,53,44,.08); }
.file-card.dragging { opacity: .42; transform: scale(.97); }
.file-card.drag-target { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,143,107,.1); }
.thumb-wrap { aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; background: repeating-conic-gradient(#edf3f0 0 25%,#fff 0 50%) 50%/16px 16px; display: grid; place-items: center; }
.thumb-wrap img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.file-index { position: absolute; top: 13px; left: 13px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px; display: grid; place-items: center; background: rgba(24,53,44,.82); color:#fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(7px); }
.file-remove { position: absolute; top: 13px; right: 13px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(255,255,255,.92); color: var(--danger); cursor:pointer; box-shadow: 0 3px 10px rgba(0,0,0,.08); font-size: 17px; line-height:1; }
.file-name { margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.file-meta { margin-top: 3px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-move { display: none; gap: 4px; margin-top: 7px; }
.file-move button { flex:1; border:1px solid var(--line); background:#f8fbfa; color:var(--muted); border-radius:7px; padding:4px; font-size:11px; }

.editor-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(340px,.75fr); gap: 20px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 20px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }
.panel-head.compact { margin-bottom: 8px; }
.preview-meta { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.preview-meta span { font-size:11px; color:var(--muted); background:#f5f8f7; border:1px solid var(--line); padding:6px 8px; border-radius:999px; }
.preview-stage { min-height: 520px; border-radius: 16px; border:1px solid #dce8e3; overflow:auto; background: repeating-conic-gradient(#eef3f1 0 25%,#f9fbfa 0 50%) 50%/22px 22px; display:grid; place-items:center; padding:24px; position:relative; }
.preview-stage canvas { display:block; max-width:100%; height:auto; box-shadow:0 14px 34px rgba(20,49,39,.16); background:transparent; }
.preview-empty { color:#7d8f88; font-size:14px; text-align:center; max-width:280px; line-height:1.7; }
.preview-note { margin:12px 2px 0; color:var(--muted); font-size:12px; line-height:1.7; }

.field { padding: 15px 0; border-top: 1px solid #edf2f0; }
.field:first-of-type { border-top:0; }
.field-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; color:#385149; font-size:13px; font-weight:750; }
.field-hint { color:#91a09b; font-weight:600; font-size:11px; }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mode-option input { position:absolute; opacity:0; pointer-events:none; }
.mode-option > span { min-height: 94px; border:1px solid var(--line); border-radius:13px; padding:10px 6px 9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; text-align:center; transition:.18s ease; }
.mode-option strong { font-size:12px; }
.mode-option small { font-size:10px; color:var(--muted); }
.mode-option input:checked + span { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px rgba(47,143,107,.08); color:var(--primary-strong); }
.mode-icon { width:31px; height:25px; display:flex; gap:2px; align-items:stretch; justify-content:center; margin-bottom:2px; }
.mode-icon i { display:block; background:currentColor; opacity:.75; border-radius:2px; }
.mode-icon.vertical { flex-direction:column; }
.mode-icon.vertical i { width:29px; height:6px; }
.mode-icon.horizontal i { width:8px; height:24px; }
.mode-icon.grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; }
.mode-icon.grid i { width:auto; height:auto; }
.select, .input { width:100%; border:1px solid #d7e4de; background:#fff; color:var(--text); border-radius:11px; padding:11px 12px; outline:none; transition:.18s ease; }
.select:focus, .input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,143,107,.1); }
.two-col-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.two-col-fields .field { border-top:1px solid #edf2f0; }
.unit-input { display:flex; align-items:center; gap:6px; border:1px solid #d7e4de; border-radius:11px; background:#fff; overflow:hidden; }
.unit-input:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,143,107,.1); }
.unit-input .input { border:0; box-shadow:none; border-radius:0; }
.unit-input span { padding-right:11px; color:var(--muted); font-size:12px; }
.target-row { display:flex; gap:8px; align-items:center; }
.target-row > .select { flex:1; }
.unit-input.mini { width:130px; flex:0 0 130px; }
.background-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.switch-row { display:flex; align-items:center; gap:9px; cursor:pointer; color:#425c53; font-size:13px; font-weight:700; }
.switch-row input { position:absolute; opacity:0; }
.switch-ui { width:38px; height:22px; padding:2px; border-radius:999px; background:#ccd9d4; transition:.18s ease; }
.switch-ui::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.12); transition:.18s ease; }
.switch-row input:checked + .switch-ui { background:var(--primary); }
.switch-row input:checked + .switch-ui::after { transform:translateX(16px); }
.color-wrap { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:6px 9px; color:var(--muted); font-size:11px; }
.color-wrap.disabled { opacity:.38; pointer-events:none; }
.color-wrap input { width:28px; height:28px; border:0; padding:0; background:transparent; cursor:pointer; }
.range { width:100%; accent-color:var(--primary); }
.quality-value { min-width:38px; padding:4px 8px; border-radius:999px; text-align:center; color:var(--primary-strong); background:var(--primary-soft); }
.range-labels { display:flex; justify-content:space-between; color:#97a49f; font-size:10px; margin-top:5px; }
.output-summary { display:grid; grid-template-columns:1.15fr .85fr; gap:8px; margin:8px 0 14px; }
.output-summary div { background:#f7faf8; border:1px solid var(--line); border-radius:12px; padding:10px 11px; min-width:0; }
.output-summary span { display:block; color:var(--muted); font-size:10px; margin-bottom:4px; }
.output-summary strong { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.merge-btn { width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; }
.btn-icon { font-size:17px; }
.inline-warning { margin-top:10px; padding:10px 11px; border-radius:10px; background:#fff6eb; border:1px solid #f3d5b2; color:#9b6129; font-size:11px; line-height:1.55; }

.result-card { margin-top:22px; border:1px solid #cfe5da; background:linear-gradient(180deg,#fbfffd,#f3faf7); border-radius:20px; padding:22px; }
.result-top { display:flex; align-items:center; gap:14px; }
.result-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--primary); color:#fff; font-size:23px; font-weight:900; box-shadow:0 10px 22px rgba(47,143,107,.19); }
.result-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
.result-stats div { background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px; }
.result-stats span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.result-stats strong { font-size:15px; }
.result-preview { max-height:460px; overflow:auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; padding:16px; background:repeating-conic-gradient(#eef3f1 0 25%,#fafcfa 0 50%) 50%/20px 20px; }
.result-preview img { max-width:100%; height:auto; display:block; box-shadow:0 10px 28px rgba(24,53,44,.13); }
.result-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }

.feature-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0; }
.feature-strip article { display:flex; align-items:flex-start; gap:12px; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:17px; padding:17px; }
.feature-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 38px; background:var(--primary-soft); color:var(--primary); }
.feature-icon svg { width:21px; height:21px; }
.feature-strip strong { display:block; font-size:14px; }
.feature-strip p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }

.content-card { background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:22px; box-shadow:0 12px 38px rgba(25,74,57,.045); padding:28px; margin:26px 0; }
.content-head { text-align:center; max-width:720px; margin:0 auto 22px; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.steps-grid article { border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; }
.steps-grid article > span { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--primary-soft); color:var(--primary-strong); font-weight:850; font-size:12px; }
.steps-grid h3 { margin:14px 0 6px; font-size:15px; }
.steps-grid p, .faq-card details p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.faq-card details { border-top:1px solid var(--line); padding:15px 2px; }
.faq-card summary { cursor:pointer; font-weight:750; font-size:14px; }
.faq-card details p { margin-top:9px; }

.site-footer { margin-top:48px; background:#edf4f1; border-top:1px solid #d8e5df; padding:42px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:36px; }
.footer-brand p { color:var(--muted); font-size:12px; line-height:1.7; max-width:350px; }
.footer-pills { display:flex; flex-wrap:wrap; gap:7px; }
.footer-pills span { color:var(--primary-strong); background:rgba(255,255,255,.65); border:1px solid #d5e5de; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.footer-grid h3 { font-size:13px; margin:4px 0 12px; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; gap:9px; }
.footer-grid a { color:#64766f; text-decoration:none; font-size:12px; }
.footer-grid a:hover { color:var(--primary-strong); }
.footer-bottom { border-top:1px solid #d8e5df; margin-top:30px; padding-top:17px; display:flex; justify-content:space-between; gap:20px; color:#81918b; font-size:11px; }
.footer-bottom p { margin:0; }
.topbtn { position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:14px; border:1px solid #d6e5de; background:rgba(255,255,255,.92); color:var(--primary); box-shadow:0 10px 28px rgba(24,53,44,.12); display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:.18s ease; backdrop-filter:blur(10px); z-index:20; }
.topbtn.show { opacity:1; transform:none; pointer-events:auto; }
.topbtn svg { width:22px; height:22px; }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:#18352c; color:#fff; padding:10px 14px; border-radius:10px; font-size:12px; opacity:0; pointer-events:none; transition:.2s ease; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.16); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#8f4242; }

@media (max-width: 1020px) {
  .file-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .editor-grid { grid-template-columns:1fr; }
  .settings-panel { order:-1; }
  .preview-stage { min-height:430px; }
  .feature-strip { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { display:none; }
}
@media (max-width: 760px) {
  .topbar { height:62px; }
  .topbar-inner, .page { width:min(100% - 22px,1160px); }
  .top-nav, .top-note { display:none; }
  .hero { padding:43px 0 24px; }
  .hero h1 { font-size:34px; }
  .hero p { font-size:14px; line-height:1.75; }
  .hero-badges { gap:6px; }
  .hero-badge { font-size:11px; padding:6px 9px; }
  .tool-shell { border-radius:20px; }
  .tool-main { padding:15px; }
  .dropzone { min-height:270px; padding:22px 15px; }
  .drop-title { font-size:19px; }
  .workspace-head { align-items:flex-start; flex-direction:column; }
  .workspace-actions { width:100%; }
  .workspace-actions button { flex:1; }
  .file-list { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding:12px; min-height:158px; }
  .file-card { min-width:128px; flex:0 0 128px; scroll-snap-align:start; cursor:default; }
  .file-move { display:flex; }
  .panel { padding:15px; border-radius:16px; }
  .settings-panel { order:0; }
  .editor-grid { display:flex; flex-direction:column; }
  .settings-panel, .preview-panel { width:100%; }
  .preview-panel { order:1; }
  .preview-stage { min-height:320px; padding:14px; }
  .mode-grid { gap:6px; }
  .mode-option > span { min-height:88px; padding:8px 3px; }
  .two-col-fields { gap:8px; }
  .result-stats { grid-template-columns:repeat(2,1fr); }
  .result-actions button { width:100%; }
  .feature-strip { grid-template-columns:1fr; gap:9px; }
  .content-card { padding:20px 16px; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 18px; }
  .footer-grid .footer-brand { grid-column:1/-1; }
  .footer-grid > div:last-child { display:flex; }
  .footer-bottom { flex-direction:column; gap:7px; }
  .topbtn { right:14px; bottom:14px; }
}
@media (max-width: 460px) {
  .hero h1 { font-size:30px; }
  .brand-copy small { display:none; }
  .mode-option strong { font-size:11px; }
  .target-row { align-items:stretch; flex-direction:column; }
  .unit-input.mini { width:100%; flex:auto; }
  .steps-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

/* ===== 2026-08-19：参考 PDF 文件大小调整工具的导航与深色页脚 ===== */
:root { --g:#0b9b78; --g2:#12b58c; --dark:#0b2135; --footer-text:#d4ede8; }

/* 顶部导航 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .nav {
  height: 82px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  text-decoration: none;
  color: inherit;
}
.site-header .mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg,#17bd92,#078d6d);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 12px 24px rgba(11,155,120,.22);
  flex: 0 0 48px;
}
.site-header .mark svg { width: 24px; height: 24px; }
.site-header .brand strong { display:block; color:var(--dark); font-size:21px; line-height:1.2; }
.site-header .brand small { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.site-header .navlinks { display:flex; gap:26px; align-items:center; justify-content:center; flex:1; }
.site-header .navlinks a {
  font-weight:700;
  font-size:16px;
  color:#405463;
  padding:27px 0;
  position:relative;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.site-header .navlinks a::after {
  content:'';
  position:absolute;
  left:50%;
  right:50%;
  bottom:18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#17bd92,#078d6d);
  opacity:0;
  box-shadow:0 3px 9px rgba(11,155,120,.22);
  transition:left .22s ease,right .22s ease,opacity .18s ease;
}
.site-header .navlinks a:hover,
.site-header .navlinks a.active { color:var(--g); transform:translateY(-1px); }
.site-header .navlinks a:hover::after,
.site-header .navlinks a.active::after { left:0; right:0; opacity:1; }
.site-header .actions { display:flex; gap:10px; }
.site-header .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  border:1px solid transparent;
  text-decoration:none;
}
.site-header .btn.primary { color:#fff; background:linear-gradient(135deg,#12b58c,#078f70); box-shadow:0 10px 24px rgba(11,155,120,.2); }
.site-header .btn.ghost { color:#087b61; border-color:#a3dccf; background:#fff; }
.site-header .menu { display:none; margin-left:auto; background:none; border:0; width:44px; height:44px; font-size:25px; cursor:pointer; color:#405463; }

/* 深绿色页脚：仅改变页脚视觉，不改变 footer-bottom 两句说明的原有布局逻辑 */
.site-footer {
  margin-top:48px;
  background:linear-gradient(135deg,#063f41,#07574d);
  border-top:0;
  color:var(--footer-text);
  padding:56px 0 26px;
}
.site-footer .footer-brand .brand { color:inherit; }
.site-footer .footer-brand .brand-mark {
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(145deg,#17bd92,#078d6d);
  color:#fff;
  box-shadow:0 12px 24px rgba(11,155,120,.22);
}
.site-footer .footer-brand .brand-mark svg { width:24px; height:24px; }
.site-footer .footer-brand .brand-copy strong { color:#fff; font-size:21px; line-height:1.2; }
.site-footer .footer-brand .brand-copy small,
.site-footer .footer-brand p { color:#b9d6d0; }
.site-footer .footer-pills span {
  color:#d4ede8;
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
}
.site-footer .footer-grid h3 { color:#fff; }
.site-footer .footer-grid a { color:#c4dfda; }
.site-footer .footer-grid a:hover { color:#fff; }
.site-footer .footer-bottom {
  border-top-color:rgba(255,255,255,.13);
  color:#b6d2cd;
}

@media (max-width:1000px) {
  .site-header .actions { display:none; }
  .site-header .menu { display:block; }
  .site-header .navlinks {
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:74px;
    width:100vw;
    max-width:none;
    margin:0;
    padding:12px 0 16px;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    background:rgba(255,255,255,.985);
    box-shadow:0 18px 38px rgba(13,75,61,.11);
    backdrop-filter:blur(14px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:calc(100vh - 74px);
    overflow-y:auto;
  }
  .site-header .navlinks.open { display:flex; }
  .site-header .navlinks a { display:block; width:100%; padding:13px 28px; transform:none; }
  .site-header .navlinks a::after { display:none; }
  .site-header .navlinks a span { display:inline-block; position:relative; padding-bottom:5px; }
  .site-header .navlinks a span::after {
    content:'';
    position:absolute;
    left:50%;
    right:50%;
    bottom:0;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#17bd92,#078d6d);
    opacity:0;
    box-shadow:0 3px 9px rgba(11,155,120,.20);
    transition:left .22s ease,right .22s ease,opacity .18s ease;
  }
  .site-header .navlinks a:hover,
  .site-header .navlinks a:focus-visible,
  .site-header .navlinks a:active,
  .site-header .navlinks a.active {
    color:var(--g);
    background:linear-gradient(90deg,rgba(11,155,120,.055),rgba(11,155,120,0));
  }
  .site-header .navlinks a:hover span::after,
  .site-header .navlinks a:focus-visible span::after,
  .site-header .navlinks a:active span::after,
  .site-header .navlinks a.active span::after { left:0; right:0; opacity:1; }
}

@media (max-width:680px) {
  .site-header .nav { height:74px; }
  .site-header .brand { min-width:0; }
  .site-header .brand strong { font-size:18px; }
  .site-header .brand small { display:block; font-size:11px; }
  .site-header .mark { width:44px; height:44px; flex-basis:44px; border-radius:13px; }
  .site-footer { padding:36px 0 20px; }
}

@media (max-width:430px) {
  .site-header .brand strong { font-size:17px; }
  .site-header .brand small { font-size:10px; }
}


/* ===== WebP 分享与功能更新时间：对齐 PDF 调整工具 ===== */
.hero-title-link { color: inherit; text-decoration: none; }
.hero-title-link:hover { color: var(--g, var(--primary)); }
.feature-update {
  display:inline-flex; align-items:center; margin:14px auto 0; padding:5px 11px;
  border-radius:999px; border:1px solid #d4e9df; background:rgba(255,255,255,.68);
  color:#6c8179; font-size:12px; line-height:1.4; font-weight:650;
}
.site-header .share-header-btn { cursor:pointer; }
.mobile-share-link { display:none !important; }

.share-modal { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(10,34,27,.42); backdrop-filter:blur(5px); }
.share-modal.show { display:flex; }
.share-dialog { width:min(470px,100%); border:1px solid #d9e9e3; border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(11,55,43,.22); overflow:hidden; animation:shareIn .2s ease; }
.share-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 22px 16px; border-bottom:1px solid #edf3f0; }
.share-dialog-head strong { display:block; color:var(--text); font-size:18px; margin-bottom:5px; }
.share-dialog-head span { color:var(--muted); font-size:12px; line-height:1.6; }
.share-close { width:34px; height:34px; border:0; border-radius:10px; background:#f1f5f3; color:#5d766d; cursor:pointer; font-size:22px; line-height:1; flex:0 0 auto; }
.share-close:hover { background:#e7efeb; color:var(--text); }
.share-dialog-body { padding:20px 22px 22px; }
.share-qr-row { display:grid; grid-template-columns:148px minmax(0,1fr); gap:20px; align-items:center; margin-bottom:18px; }
.share-qr-box { width:148px; height:148px; display:grid; place-items:center; padding:10px; border:1px solid #dcebe5; border-radius:16px; background:#fff; }
.share-qr-box img { width:100%; height:100%; display:block; }
.share-copy h3 { margin:0 0 8px; font-size:15px; color:var(--text); }
.share-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.share-link-box { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #dce9e4; border-radius:13px; background:#f8fbfa; }
.share-link-text { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 6px; color:#557067; font-size:12px; }
.share-dialog-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.share-action { min-height:44px; border-radius:12px; border:1px solid #b9dfd2; background:#f2faf7; color:var(--primary-strong); font-weight:800; cursor:pointer; transition:.18s ease; }
.share-action:hover { background:#e8f6f0; transform:translateY(-1px); }
.share-action.primary { border-color:transparent; background:var(--primary); color:#fff; }
.share-action.primary:hover { background:var(--primary-strong); }
.share-feedback { display:none; align-items:center; gap:8px; min-height:38px; margin-top:12px; padding:9px 12px; border-radius:11px; font-size:12px; font-weight:750; line-height:1.55; animation:shareFeedbackIn .18s ease; }
.share-feedback.show { display:flex; }
.share-feedback.success { color:#17684f; background:#eaf8f2; border:1px solid #c5eadc; }
.share-feedback.error { color:#8a4646; background:#fff2f2; border:1px solid #f0cccc; }
.share-feedback-icon { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:rgba(255,255,255,.7); font-size:12px; }
.share-privacy { margin-top:12px; text-align:center; color:#84958f; font-size:11px; line-height:1.6; }
@keyframes shareFeedbackIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes shareIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }

@media (max-width:1000px) {
  .mobile-share-link { display:block !important; }
}
@media (max-width:560px) {
  .feature-update { margin-top:12px; font-size:11px; }
  .share-modal { padding:12px; align-items:flex-end; }
  .share-dialog { border-radius:22px 22px 16px 16px; }
  .share-qr-row { grid-template-columns:1fr; text-align:center; }
  .share-qr-box { margin:0 auto; }
}

/* ===== 在线二维码生成器：独立功能区 ===== */
.qr-tool-main { padding:28px; }
.qr-type-head { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:18px; }
.qr-type-head h2 { margin:4px 0 6px; font-size:21px; }
.qr-type-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.static-badge { display:flex; flex-direction:column; align-items:flex-end; gap:3px; padding:9px 12px; border:1px solid #cfe6dc; border-radius:13px; background:#f3faf7; color:var(--primary-strong); white-space:nowrap; }
.static-badge span { font-size:12px; font-weight:850; }
.static-badge small { color:#789188; font-size:10px; }

.qr-type-tabs { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding:10px; margin-bottom:20px; border:1px solid var(--line); border-radius:17px; background:#f8fbfa; }
.qr-type-tab { border:1px solid transparent; border-radius:13px; min-width:0; min-height:76px; padding:9px 5px; background:transparent; color:#4d665d; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:.18s ease; }
.qr-type-tab:hover { background:#fff; border-color:#d9e7e1; transform:translateY(-1px); }
.qr-type-tab.active { color:var(--primary-strong); border-color:#a9d7c6; background:var(--primary-soft); box-shadow:inset 0 0 0 1px rgba(47,143,107,.08); }
.qr-type-icon { width:27px; height:27px; border-radius:9px; display:grid; place-items:center; background:#fff; border:1px solid #dce8e3; font-size:14px; font-weight:850; }
.qr-type-tab.active .qr-type-icon { color:#fff; background:var(--primary); border-color:var(--primary); }
.qr-type-tab strong { font-size:12px; line-height:1.2; }
.qr-type-tab small { color:#8b9a95; font-size:9px; }

.qr-editor-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:20px; align-items:start; }
.qr-settings-panel, .qr-preview-panel { min-width:0; }
.qr-preview-panel { position:sticky; top:102px; }
.qr-content-panel[hidden] { display:none !important; }
.qr-content-panel.active { display:block; }
.textarea { width:100%; resize:vertical; min-height:104px; border:1px solid #d7e4de; background:#fff; color:var(--text); border-radius:11px; padding:11px 12px; outline:none; transition:.18s ease; font:inherit; line-height:1.65; }
.textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,143,107,.1); }
.field-message { min-height:16px; margin-top:5px; color:#8b9a95; font-size:10px; line-height:1.5; }
.field-message.error { color:#b55050; }
.field-message.good { color:var(--primary-strong); }
.password-row { display:flex; gap:8px; }
.password-row .input { flex:1; }
.mini-btn { border:1px solid #d7e4de; border-radius:10px; min-width:62px; background:#f8fbfa; color:#587067; font-size:11px; font-weight:750; cursor:pointer; }
.mini-btn:hover { color:var(--primary-strong); border-color:#b7d9cc; background:#eef8f4; }
.qr-switch { min-height:42px; padding:0 2px; }

.settings-divider { display:flex; align-items:center; gap:10px; margin:5px 0 2px; color:#7b8f87; font-size:10px; font-weight:800; letter-spacing:.04em; }
.settings-divider::before, .settings-divider::after { content:""; height:1px; flex:1; background:#e5eeea; }
.settings-divider span { flex:0 0 auto; }
.compact-field { padding-top:10px; padding-bottom:11px; }
.inline-label { display:block; font-size:12px; color:#425c53; margin-bottom:2px; }
.field-note { color:#8a9b95; font-size:10px; line-height:1.55; margin-top:5px; }
.color-field { min-height:44px; display:flex; align-items:center; gap:9px; border:1px solid #d7e4de; border-radius:11px; padding:6px 10px; background:#fff; cursor:pointer; }
.color-field input[type="color"] { width:31px; height:31px; padding:0; border:0; background:transparent; cursor:pointer; }
.color-field span { color:#5c7169; font-size:11px; font-weight:750; }
.color-field.disabled { opacity:.38; pointer-events:none; }
.logo-field { padding-bottom:0; }
.logo-control { display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:13px; padding:11px; background:#f9fbfa; }
.logo-preview { width:58px; height:58px; border-radius:12px; display:grid; place-items:center; overflow:hidden; background:repeating-conic-gradient(#edf2f0 0 25%,#fafcfa 0 50%) 50%/14px 14px; border:1px solid #dbe7e2; color:#8da098; font-size:9px; font-weight:850; }
.logo-preview img { width:100%; height:100%; object-fit:contain; background:#fff; }
.logo-copy { min-width:0; }
.logo-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; margin-bottom:4px; }
.logo-copy span { display:block; color:var(--muted); font-size:10px; line-height:1.5; }
.logo-actions { display:flex; gap:6px; flex-direction:column; }
.logo-actions button { min-height:34px; padding:0 10px; font-size:10px; }

.qr-preview-stage { width:100%; min-height:380px; display:grid; place-items:center; padding:24px; border:1px solid var(--line); border-radius:16px; background:repeating-conic-gradient(#eef3f1 0 25%,#fbfcfb 0 50%) 50%/22px 22px; overflow:hidden; }
#qrCanvas { width:min(100%,420px); height:auto; max-height:420px; display:block; background:#fff; border-radius:4px; box-shadow:0 12px 32px rgba(24,53,44,.12); image-rendering:auto; }
.qr-empty { color:#83958e; text-align:center; font-size:12px; line-height:1.7; }
.qr-content-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:13px; }
.qr-content-summary > div { min-width:0; border:1px solid var(--line); border-radius:12px; background:#f9fbfa; padding:10px 11px; }
.qr-content-summary span { display:block; color:var(--muted); font-size:9px; margin-bottom:4px; }
.qr-content-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.qr-content-summary strong.good { color:var(--primary-strong); }
.qr-content-summary strong.warn { color:#a96a2f; }
.qr-content-summary strong.bad { color:#b44f4f; }
.qr-error { margin-top:11px; padding:10px 11px; border-radius:11px; border:1px solid #edcaca; background:#fff2f2; color:#914848; font-size:10px; line-height:1.65; }
.static-notice { display:flex; gap:10px; margin-top:12px; padding:11px 12px; border-radius:12px; border:1px solid #d4e8df; background:#f2faf7; }
.static-notice svg { width:20px; height:20px; flex:0 0 20px; color:var(--primary); margin-top:1px; }
.static-notice strong { display:block; color:#31594b; font-size:11px; margin-bottom:3px; }
.static-notice span { display:block; color:#71877f; font-size:9px; line-height:1.6; }
.download-actions { display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:8px; margin-top:13px; }
.download-actions button { min-height:44px; font-size:11px; }
.qr-preview-note { margin-bottom:0; }

@media (max-width:1100px) {
  .qr-type-tabs { grid-template-columns:repeat(4,1fr); }
  .qr-editor-grid { grid-template-columns:1fr; }
  .qr-preview-panel { position:static; }
}
@media (max-width:760px) {
  .qr-tool-main { padding:15px; }
  .qr-type-head { align-items:flex-start; flex-direction:column; gap:11px; }
  .static-badge { align-items:flex-start; }
  .qr-type-tabs { display:flex; overflow-x:auto; gap:7px; padding:8px; scroll-snap-type:x proximity; }
  .qr-type-tab { flex:0 0 86px; min-height:70px; scroll-snap-align:start; }
  .qr-editor-grid { display:flex; flex-direction:column; }
  .qr-settings-panel { order:1; width:100%; }
  .qr-preview-panel { order:0; width:100%; }
  .qr-preview-stage { min-height:300px; padding:16px; }
  #qrCanvas { width:min(100%,320px); max-height:320px; }
  .logo-control { grid-template-columns:52px minmax(0,1fr); }
  .logo-preview { width:52px; height:52px; }
  .logo-actions { grid-column:1/-1; flex-direction:row; }
  .logo-actions button { flex:1; }
  .download-actions { grid-template-columns:1fr; }
  .download-actions button { width:100%; }
}
@media (max-width:480px) {
  .qr-content-summary { grid-template-columns:1fr 1fr; }
  .color-fields { grid-template-columns:1fr 1fr; }
  .static-badge small { white-space:normal; }
}