:root{
  --bg:#f6f7fb;
  --paper:#ffffff;
  --paper2:#fbfcff;
  --ink:#111827;
  --ink2:#1f2937;
  --muted:#667085;
  --weak:#98a2b3;
  --line:#d9dee7;
  --line2:#edf0f5;
  --brand:#194fc7;
  --brand2:#0f358e;
  --gold:#a9783c;
  --green:#12805c;
  --red:#b42318;
  --shadow:0 18px 46px rgba(15,23,42,.07);
  --shadow-soft:0 8px 22px rgba(15,23,42,.05);
  --r:4px;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}

/* Header */
.topbar{height:72px;background:rgba(255,255,255,.92);border-bottom:1px solid #e7ebf2;position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(12px)}
.top-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#111827;font-weight:900;letter-spacing:.01em}
.brand-mark{width:32px;height:32px;border:1px solid #c8d2e2;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px;box-shadow:inset 0 0 0 1px #fff}
.brand-mark span{display:block;background:var(--brand)}
.brand-mark span:nth-child(2){background:#111827}
.brand-mark span:nth-child(3){background:var(--gold)}
.brand-text{font-size:20px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{position:relative;text-decoration:none;color:#344054;font-weight:800;font-size:15px;padding:10px 14px;border:1px solid transparent;border-radius:var(--r)}
.nav a:hover{background:#f6f8fc;border-color:#e2e7f0;color:#111827}
.nav a.active{background:#111827;color:#fff;border-color:#111827;box-shadow:0 8px 18px rgba(17,24,39,.12)}

/* Home */
.home-page{min-height:calc(100vh - 72px);background:
  linear-gradient(180deg,#fff 0%,#f8fafc 46%,#f3f5f9 100%);
}
.home-hero{position:relative;overflow:hidden;padding:74px 0 42px;border-bottom:1px solid #e8edf5}
.home-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#eef2f7 1px,transparent 1px),linear-gradient(90deg,#eef2f7 1px,transparent 1px);background-size:44px 44px;opacity:.45;pointer-events:none}
.home-hero:after{content:"";position:absolute;right:-180px;top:-220px;width:520px;height:520px;background:radial-gradient(circle,rgba(25,79,199,.14),rgba(25,79,199,0) 66%);pointer-events:none}
.home-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--gold);display:block}
.home-copy h1{margin:0;font-size:64px;line-height:1.05;letter-spacing:-.055em;color:#0b1220}
.home-copy p{margin:18px 0 0;color:#5d6b7d;font-size:18px;line-height:1.75;max-width:560px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.code-showcase{position:relative;height:310px}
.show-card{position:absolute;background:#fff;border:1px solid #dde4ee;box-shadow:var(--shadow);border-radius:var(--r);padding:20px}
.show-card span{display:block;margin-top:14px;font-size:12px;font-weight:900;color:#98a2b3;letter-spacing:.18em}
.show-qr{left:4px;top:8px;width:230px;height:252px}
.show-bar{right:0;bottom:0;width:280px;height:145px;border-left:3px solid var(--gold)}
.fake-qr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:160px;height:160px}
.fake-qr i{display:block;background:#111827;min-height:30px}
.fake-qr i:nth-child(2),.fake-qr i:nth-child(5),.fake-qr i:nth-child(8){background:#d5dce7}
.fake-qr i:nth-child(4),.fake-qr i:nth-child(7){background:var(--brand)}
.fake-bar{height:76px;display:flex;align-items:stretch;gap:5px}
.fake-bar i{display:block;background:#111827;width:8px}
.fake-bar i:nth-child(2),.fake-bar i:nth-child(5),.fake-bar i:nth-child(8){width:16px}
.fake-bar i:nth-child(3),.fake-bar i:nth-child(7){background:var(--brand)}
.tool-entry-section{padding:32px 28px 56px}
.entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.entry-card{position:relative;min-height:188px;background:#fff;border:1px solid #dfe5ee;text-decoration:none;box-shadow:var(--shadow-soft);border-radius:var(--r);padding:26px;display:grid;grid-template-rows:auto 1fr auto;gap:22px;overflow:hidden;transition:.18s ease}
.entry-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#d5dce7;transition:.18s ease}
.entry-card:hover{transform:translateY(-2px);border-color:#becbf0;box-shadow:var(--shadow)}
.entry-card:hover:before{background:var(--brand)}
.entry-card h2{font-size:24px;margin:0 0 8px;letter-spacing:-.03em;color:#101828}
.entry-card p{margin:0;color:#667085;line-height:1.65;font-weight:700}
.entry-card span{font-size:13px;color:var(--brand);font-weight:900;letter-spacing:.06em}
.entry-icon{width:38px;height:38px;border:1px solid #d9e0ea;background:#f9fafc;position:relative}
.qr-icon:before{content:"";position:absolute;inset:8px;background:linear-gradient(90deg,#111827 35%,transparent 35% 65%,#111827 65%),linear-gradient(#111827 35%,transparent 35% 65%,#111827 65%);background-size:14px 14px}
.bar-icon:before{content:"";position:absolute;left:8px;right:8px;top:9px;bottom:9px;background:repeating-linear-gradient(90deg,#111827 0 3px,transparent 3px 7px,#111827 7px 13px,transparent 13px 17px)}
.scan-icon:before,.scan-icon:after{content:"";position:absolute;border:2px solid var(--brand);width:13px;height:13px}
.scan-icon:before{left:6px;top:6px;border-right:0;border-bottom:0}.scan-icon:after{right:6px;bottom:6px;border-left:0;border-top:0}

/* Common page */
.hero{padding:38px 0 22px;background:linear-gradient(180deg,#fff,#f7f8fb);border-bottom:1px solid #e8edf5}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end}
.hero h1{font-size:36px;line-height:1.18;margin:0 0 10px;letter-spacing:-.04em;color:#0b1220}
.hero p{margin:0;color:#667085;line-height:1.75;font-size:15px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.badge{border:1px solid #dce3ed;background:#fff;color:#475467;height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--r);font-size:12px;font-weight:900}
.main{padding:24px 0 56px}
.grid{display:grid;grid-template-columns:minmax(0,1.05fr) 430px;gap:20px;align-items:start}
.qr-layout{grid-template-columns:minmax(0,1.04fr) 440px}
.side-stack{display:block}
.panel{background:#fff;border:1px solid #dfe5ee;box-shadow:var(--shadow-soft);border-radius:var(--r);padding:22px}
.panel + .panel{margin-top:16px}
.form-panel{box-shadow:var(--shadow)}
.panel-title{font-size:18px;font-weight:900;margin:0 0 18px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:#101828;letter-spacing:-.015em}
.sub{font-size:12px;color:#98a2b3;font-weight:800;letter-spacing:0}
.field{margin-bottom:16px}
.label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-weight:900;font-size:14px;color:#1f2937}
.hint{font-size:12px;color:#98a2b3;line-height:1.6;margin-top:6px}
textarea,input,select{width:100%;border:1px solid #cfd7e3;background:#fff;border-radius:var(--r);color:#101828;outline:0;padding:11px 12px;font-size:14px;transition:.14s ease}
textarea:focus,input:focus,select:focus{border-color:#4d73d9;box-shadow:0 0 0 3px rgba(25,79,199,.12)}
.color-input{height:44px;padding:5px;cursor:pointer}
.field.muted{opacity:.58}
.field.muted input{cursor:not-allowed}
textarea{min-height:220px;resize:vertical;line-height:1.65;font-family:Consolas,"Microsoft YaHei",monospace}
.name-area{min-height:116px}
.rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rows.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.switch{height:42px;border:1px solid #cfd7e3;border-radius:var(--r);display:flex;align-items:center;gap:9px;padding:0 12px;font-weight:800;color:#344054;background:#fff}
.switch.tall{height:44px}
.switch input{width:auto}
.tools-line{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;border-radius:var(--r);padding:11px 16px;font-weight:900;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;transition:.16s ease}
.btn.primary{background:#111827;color:#fff}.btn.primary:hover{background:#000}
.btn.green{background:var(--green);color:#fff}.btn.green:hover{background:#0b6d4d}
.btn.light{background:#fff;border:1px solid #cfd7e3;color:#344054}.btn.light:hover{border-color:#aeb8c8;background:#f8fafc}
.btn.gray{background:#eef1f6;color:#344054}.btn.gray:hover{background:#e4e8ef}
.btn.red{background:#fff1f0;color:var(--red);border:1px solid #ffd6d0}
.btn.full{width:100%;height:46px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.status{display:none;margin-top:12px;border-radius:var(--r);padding:11px 12px;line-height:1.6;font-size:13px}.status.show{display:block}.status.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}.status.ok{background:#ecfdf3;border:1px solid #abefc6;color:#067647}.status.err{background:#fef3f2;border:1px solid #fecdca;color:#b42318}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.pager{display:flex;align-items:center;gap:8px;color:#667085;font-size:13px}.pager button{width:34px;height:34px;border-radius:var(--r);border:1px solid #d0d5dd;background:#fff;cursor:pointer}.pager button:disabled{opacity:.5;cursor:not-allowed}
.result{min-height:360px}.empty{border:1px dashed #cfd6e1;background:#fafbfc;border-radius:var(--r);min-height:240px;display:flex;align-items:center;justify-content:center;text-align:center;color:#98a2b3;line-height:1.8;padding:18px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.code-card{border:1px solid #edf0f5;background:#fff;border-radius:var(--r);padding:12px}.code-media{height:190px;border:1px solid #edf0f5;background:#fafafa;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:auto;padding:10px}.code-media img{max-width:100%;max-height:100%;display:block}.code-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px;align-items:center}.code-text{min-width:0;color:#344054;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.download-link{color:var(--brand);font-size:13px;font-weight:900;text-decoration:none;flex:0 0 auto}.warn-list{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:var(--r);padding:10px 12px;margin-bottom:12px;font-size:13px;line-height:1.7}.zip-box{border:1px solid #abefc6;background:#ecfdf3;border-radius:var(--r);padding:14px;margin-top:12px}.zip-box a{display:inline-flex;background:var(--green);color:#fff;text-decoration:none;font-weight:900;border-radius:var(--r);padding:11px 14px}.side-note{color:#667085;line-height:1.8;font-size:13px;margin:0}.quick-download{border-top:3px solid var(--green)}.quick-download .side-note{margin-top:12px}.note-box{border:1px solid #edf0f5;background:#fafbfc;border-radius:var(--r);padding:12px;color:#667085;font-size:13px;line-height:1.75}.note-box strong{color:#101828}

/* Decode */
.reader-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}.drop{border:1px dashed #b8c2d2;background:#fafbfc;min-height:230px;border-radius:var(--r);position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px}.drop.drag{border-color:var(--brand);background:#eef3ff}.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop h3{margin:0 0 8px;font-size:19px}.drop p{margin:0 0 14px;color:#667085;line-height:1.7}.image-preview{border:1px solid var(--line);background:#fff;border-radius:var(--r);min-height:260px;display:flex;align-items:center;justify-content:center;padding:12px}.image-preview img,.image-preview video{max-width:100%;max-height:430px;display:block}.hidden{display:none!important}.camera{display:none;margin-top:12px;background:#111827;border-radius:var(--r);padding:10px}.camera video{width:100%;display:block;background:#000}.kbd{font-family:Consolas,monospace;background:#f2f4f7;border:1px solid #e4e7ec;border-radius:3px;padding:1px 5px;color:#344054}.small{font-size:12px}
.loading:after{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.65);border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.footer{border-top:1px solid #e3e8f0;color:#98a2b3;font-size:12px;padding:22px 0 28px;background:#fff}.footer-inner{display:flex;justify-content:space-between;gap:14px;align-items:center}

@media(max-width:1100px){.home-hero-grid{grid-template-columns:1fr}.code-showcase{display:none}.entry-grid{grid-template-columns:1fr}.grid,.qr-layout,.reader-grid{grid-template-columns:1fr}.badge-row{justify-content:flex-start}.quick-download{order:-1}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.wrap{padding:0 16px}.topbar,.top-inner{height:auto}.top-inner{padding:12px 0;align-items:flex-start;flex-direction:column}.nav{overflow:auto;width:100%;padding-bottom:4px}.nav a{white-space:nowrap}.home-hero{padding:42px 0 24px}.home-copy h1{font-size:42px}.home-copy p{font-size:15px}.tool-entry-section{padding:18px 16px 38px}.hero{padding:28px 0 18px}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:30px}.rows,.rows.two,.color-row{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:18px}.actions .btn{flex:1 1 auto}.footer-inner{display:block;text-align:center}.footer-inner span+span{display:block;margin-top:6px}}
@media(max-width:520px){.cards{grid-template-columns:1fr}.code-media{height:180px}.preview-head{display:block}.pager{margin-top:10px}.btn{width:100%}.tools-line .btn{width:auto}.brand-text{font-size:18px}.home-actions .btn{width:100%}.entry-card{min-height:160px}}


/* Clean commercial QR page - stable */
.qr-pro-page{background:#f4f6fa;}
.qr-pro-main{padding-top:36px;padding-bottom:54px;}
.qr-pro-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid #e4e8f0;}
.qr-pro-title h1{font-size:34px;line-height:1.15;margin:8px 0 8px;color:#101828;letter-spacing:-.04em;}
.qr-pro-title p{margin:0;color:#667085;font-weight:700;line-height:1.8;}
.qr-pro-actions{display:flex;gap:10px;flex-wrap:wrap;}
.qr-pro-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start;}
.qr-input-panel{min-height:420px;}
.qr-input-panel textarea#text{min-height:250px;font-size:15px;line-height:1.7;}
.qr-setting-panel{display:flex;flex-direction:column;gap:14px;}
.qr-preview-panel{grid-column:1 / -1;}
.qr-preview-panel .code-media.checker,
.code-media.checker{background-color:#fff;background-image:linear-gradient(45deg,#d9dee8 25%,transparent 25%),linear-gradient(-45deg,#d9dee8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dee8 75%),linear-gradient(-45deg,transparent 75%,#d9dee8 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;}
.quick-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.quick-colors button{height:38px;border:1px solid #d7deea;background:#fff;color:#344054;font-weight:900;cursor:pointer;border-radius:var(--r);}
.quick-colors button:hover{border-color:#111827;color:#111827;background:#f8fafc;}
.qr-setting-panel .panel-title,.qr-input-panel .panel-title,.qr-preview-panel .panel-title{font-size:18px;}
@media (max-width: 980px){.qr-pro-title{display:block}.qr-pro-actions{margin-top:16px}.qr-pro-grid{grid-template-columns:1fr}.qr-preview-panel{grid-column:auto}.qr-setting-panel{order:2}.qr-preview-panel{order:3}}


/* QR page density fix - reduce blank area */
.qr-pro-main{padding-top:24px;padding-bottom:42px;}
.qr-pro-title{margin-bottom:16px;padding-bottom:14px;align-items:center;}
.qr-pro-title h1{font-size:32px;margin:6px 0 6px;}
.qr-pro-title p{line-height:1.55;}
.qr-pro-grid{grid-template-columns:minmax(0,1fr) 360px;gap:14px;}
.qr-pro-page .panel{padding:18px;}
.qr-input-panel{min-height:0;}
.qr-input-panel .panel-title{margin-bottom:12px;}
.qr-input-panel textarea#text{min-height:148px;font-size:14px;line-height:1.55;}
.file-name-box{border:1px solid #e1e7f0;background:#fbfcff;border-radius:var(--r);margin:12px 0 14px;}
.file-name-box summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:14px;font-weight:900;color:#1f2937;display:flex;justify-content:space-between;gap:12px;align-items:center;}
.file-name-box summary::-webkit-details-marker{display:none;}
.file-name-box summary:after{content:"展开";font-size:12px;color:#667085;border:1px solid #d8dee9;background:#fff;padding:3px 8px;border-radius:var(--r);}
.file-name-box[open] summary:after{content:"收起";}
.file-name-box summary span{font-size:12px;color:#98a2b3;font-weight:800;}
.file-name-box .compact-field{padding:0 14px 14px;margin-bottom:0;}
.file-name-box .name-area{min-height:76px;}
.qr-actions-row{margin-top:2px;}
.qr-setting-panel{gap:12px;}
.qr-setting-panel .panel-title{margin-bottom:12px;}
.qr-setting-panel .field{margin-bottom:12px;}
.qr-setting-panel .hint{line-height:1.45;}
.qr-preview-panel{margin-top:0;}
.qr-preview-panel .empty{min-height:130px;}
.qr-preview-panel.result{min-height:0;}
.qr-preview-panel .cards{grid-template-columns:repeat(3,minmax(0,1fr));}
.qr-preview-panel .code-media{height:170px;}
@media (max-width: 1180px){.qr-preview-panel .cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 980px){.qr-pro-grid{grid-template-columns:1fr}.qr-preview-panel .cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 520px){.qr-preview-panel .cards{grid-template-columns:1fr}.file-name-box summary{display:block}.file-name-box summary span{display:block;margin-top:4px}}


/* 2026-07-03 最终布局修正：预览恢复到底部，输入区加高，示例按钮回到生成内容卡片 */
.qr-pro-title{display:block;padding-bottom:14px;border-bottom:1px solid #e5eaf2;margin-bottom:16px;}
.qr-pro-title p{max-width:720px;}
.qr-pro-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 370px!important;gap:18px!important;align-items:start!important;}
.qr-setting-panel{display:flex;flex-direction:column;gap:18px;}
.qr-setting-panel>.panel{margin:0;}
.qr-input-panel{min-height:100%;}
.input-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.input-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.btn.mini{height:34px;min-height:34px;padding:0 12px;font-size:13px;line-height:32px;}
.qr-input-panel textarea#text{min-height:430px!important;font-size:15px!important;line-height:1.68!important;}
.file-name-box{margin-top:12px;}
.file-name-box[open] .name-area{min-height:110px!important;}
.qr-actions-row{margin-top:14px;}
.qr-preview-panel{grid-column:1 / -1!important;margin-top:0!important;}
.qr-preview-panel .empty{min-height:220px!important;}
.qr-preview-panel .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.qr-preview-panel .code-media{height:190px!important;}
@media(max-width:1180px){
  .qr-pro-grid{grid-template-columns:minmax(0,1fr) 350px!important;}
  .qr-input-panel textarea#text{min-height:390px!important;}
  .qr-preview-panel .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:980px){
  .qr-pro-grid{grid-template-columns:1fr!important;}
  .qr-input-panel textarea#text{min-height:260px!important;}
  .qr-preview-panel{grid-column:auto!important;}
}
@media(max-width:640px){
  .input-title-row{align-items:flex-start;flex-direction:column;}
  .input-tools{width:100%;}
  .input-tools .btn{flex:1 1 auto;}
  .qr-preview-panel .cards{grid-template-columns:1fr!important;}
}