/* Shared finishing layer: readable controls, clear actions and language-safe spacing. */
:root { --qr-ink:#25243b; --qr-muted:#59566e; --qr-accent:#6350d8; --qr-edge:#e2dfed; }
html { font-size:16px; }
.fqrc-generator,.qr-bulk-workspace { --qr-ink:#25243b; --qr-muted:#59566e; --qr-accent:#6350d8; }
body { color:var(--qr-ink); background:radial-gradient(ellipse at 95% 0,#efedff,transparent 34rem),#f7f8fc; }
.qr-site-header .navbar { margin-bottom:0!important; padding:.85rem 0; box-shadow:0 2px 16px #29204404; }
.qr-site-header .navbar .nav-link { border-radius:9px; padding:.7rem .8rem; font-size:.9rem; color:var(--qr-muted)!important; }
.qr-site-header .navbar .nav-link:hover,.qr-site-header .nav-link[aria-current] { background:#efecfc; color:#4935ab!important; }
.qr-site-header .navbar-toggler { min-width:44px; min-height:44px; border-color:var(--qr-edge); border-radius:10px; }
.qr-site-header .navbar-brand { letter-spacing:-.03em; }
.qr-language-switcher select { border-color:var(--qr-edge); background:#faf9fd; font-size:.9rem; }
.qr-generator-nav { margin:1.3rem 0 1.6rem; }
.qr-generator-nav-inner { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.45rem; padding:0 0 1.3rem; }
.qr-generator-nav-item { display:flex; align-items:center; justify-content:center; min-height:44px; text-align:center; font-size:.85rem; line-height:1.35; padding:.65rem .45rem; background:#fff; border:1px solid var(--qr-edge); border-radius:10px; color:var(--qr-muted); text-decoration:none; overflow-wrap:anywhere; }
.qr-generator-nav-item:hover { border-color:#b9acee; background:#f4f1ff; }
.qr-generator-nav-item { flex-direction:column; gap:.45rem; min-height:78px; }
.qr-type-icon { display:block; width:22px; height:22px; flex:none; }
.qr-generator-nav-item>span { max-width:100%; }
.qr-generator-nav-item[aria-current=page] { background:#6350d8; color:#fff; border-color:#6350d8; box-shadow:0 3px 9px #6350d821; font-weight:650; }
.fqrc-header { margin:1.8rem 0; }
.fqrc-header h1 { letter-spacing:-.04em; }
.fqrc-header p { color:var(--qr-muted); font-size:1rem; }
.qr-eyebrow { color:#655395; font-size:.72rem; letter-spacing:.13em; }
.qr-workflow-steps { max-width:100%; margin-bottom:1.4rem; border:1px solid #e5e0f4; background:#efecf7; }
.qr-workflow-steps a { min-height:44px; font-size:.9rem; color:#57506b; }
.fqrc-layout { gap:1.5rem; }
.fqrc-controls { box-shadow:0 8px 32px #28213e05; }
.fqrc-section { padding:1.4rem; }
.fqrc-section h3 { font-size:1.03rem; font-weight:700; }
.fqrc-label,.wifi-fields label { font-size:.9rem; color:#4e485f; font-weight:600; }
.fqrc-hint,.fqrc-preview-help,.fqrc-download-note,.qr-format-hint { color:var(--qr-muted); font-size:.85rem; line-height:1.65; }
.fqrc-input,.fqrc-select,.fqrc-textarea,.wifi-fields input,.wifi-fields select { background:#fff; border-color:#d4d0df; min-height:46px; }
.fqrc-color-row input[type=text] { min-width:0; }
.fqrc-input:hover,.fqrc-select:hover,.fqrc-textarea:hover { border-color:#b5aacd; }
.qr-disclosure>summary,.qr-preset-panel summary,.qr-check-details summary,.qr-print-options summary { font-size:.92rem; min-height:44px; align-content:center; }
.qr-disclosure>summary small { color:#655d73; font-size:.81rem; }
.fqrc-primary-button,.fqrc-secondary-button,.fqrc-reset { min-height:44px; padding:.75rem 1rem; font-size:.9rem; border-radius:10px; line-height:1.4; }
.fqrc-secondary-button { color:#514467; border-color:#dad3e7; background:#f8f6fc; }
.fqrc-secondary-button:hover { color:#42315c; border-color:#b5a6d0; background:#f0ebf9; }
.fqrc-primary-button { font-weight:650; }
.fqrc-generator button:disabled,.qr-bulk-workspace button:disabled { opacity:.6; }
.fqrc-preview-title { align-items:center; flex-wrap:wrap; font-size:1rem; }
#fqrc-status { font-size:.8rem; padding:.4rem .7rem; }
#fqrc-status[data-state=attention] { color:#75490a; background:#fff1d6; }
.fqrc-preview { background:#f0eef7; min-height:260px; }
.qr-verification { font-size:.85rem; line-height:1.6; }
.qr-verification[data-state=pending] { color:#565069; background:#f3f1f8; border-color:#ddd7e9; }
.qr-preview-shortcuts { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.65rem; padding-top:.65rem; border-top:1px solid var(--qr-edge); }
.qr-preview-shortcuts a { display:inline-flex; align-items:center; min-height:44px; font-size:.87rem; font-weight:600; text-underline-offset:4px; }
.fqrc-download-card h3 { font-size:1.1rem; margin-bottom:.5rem; }
.qr-format-hint { margin-bottom:1rem; }
.fqrc-download-buttons { gap:.65rem; }
#qr-content,#qr-design,#qr-preview,#qr-download { scroll-margin-top:1.25rem; }
.qr-password-field { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.qr-password-field input { flex:1 1 180px; min-width:0; width:auto; }
.qr-password-toggle { flex:0 1 auto; min-height:46px; padding:.6rem .8rem; border:1px solid #d4d0df; border-radius:9px; background:#f6f3fd; color:#4c3994; font-size:.85rem; font-weight:600; }
.qr-password-toggle[hidden] { display:none; }
.qr-password-toggle:hover { background:#eee7fc; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #7860d3; outline-offset:3px; }
.qr-code-content { color:var(--qr-muted); }
.qr-code-content>section { padding:1.6rem; background:#fff!important; }
.qr-blog-heading p,.qr-blog-card p { color:var(--qr-muted); }
.qr-blog-card { box-shadow:0 4px 18px #29204404; border-color:var(--qr-edge); }
.qr-blog-card:hover { border-color:#beb0e6; }
.qr-blog-card:focus-within { border-color:#7860d3; box-shadow:0 0 0 3px #7860d312; }
.qr-blog-card h2 { font-size:1.3rem; }
.qr-blog-card h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.qr-guide-link { display:inline-flex; align-items:center; min-height:44px; }
.blog-content { font-size:1.0625rem; line-height:1.85; overflow-wrap:break-word; }
.blog-content .blog-lead { font-size:1.15rem; }
.blog-content h1 { letter-spacing:-.035em; }
.blog-content h2 { margin-top:2.5rem; scroll-margin-top:1.25rem; }
.blog-content li { padding-left:.2rem; }
.blog-content a { text-decoration-thickness:1px; text-underline-offset:4px; }
.blog-meta { color:#655b73; font-size:.85rem; }
.qr-article-sidebar { max-height:calc(100vh - 3rem); overflow-y:auto; }
.qr-article-sidebar li a { display:block; padding:.25rem 0; }
.qr-mobile-contents summary { min-height:44px; align-content:center; }
.qr-mobile-contents a { display:inline-block; padding:.4rem 0; }
.qr-table-scroll:focus-visible { outline:3px solid #7860d3; outline-offset:3px; }
.blog-content thead th { color:#423453; }
.blog-content tbody tr:nth-child(even) { background:#faf9fd; }
html[lang=zh-cn] :is(h1,h2,h3,.qr-eyebrow,.qr-generator-nav-item) { letter-spacing:normal; }
html[lang=zh-cn] .blog-content { line-height:1.95; }
@media(min-width:801px) and (max-width:1100px) { .qr-generator-nav-inner { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:991.98px) { .qr-site-header #site-navigation { padding:.8rem 0 .2rem; } .qr-site-header .navbar-nav { gap:.2rem; } }
@media(max-width:800px) {
    .qr-generator-nav { margin:.8rem 0 1.1rem; }
    .qr-mobile-type { color:#514a63; font-size:.9rem; }
    .qr-mobile-type select { background:#fff; border-color:#d4d0df; min-height:48px; }
    .fqrc-header h1 { font-size:clamp(1.85rem,7vw,2.4rem); }
    .fqrc-header p { font-size:.96rem; }
    .qr-workflow-steps a { font-size:.85rem; padding:.65rem .4rem; }
    .fqrc-layout { gap:1rem; }
    .fqrc-section { padding:1.15rem; }
    .fqrc-preview { min-height:220px; }
    .fqrc-preview-card,.fqrc-download-card { padding:1.1rem; }
    .fqrc-input,.fqrc-select,.fqrc-textarea,.wifi-fields input,.wifi-fields select { font-size:16px; }
    .qr-code-content>section { padding:1.15rem; }
    .qr-blog-shell { margin-top:1.5rem; }
    .qr-mobile-contents { padding:.6rem 1rem; }
    .qr-article-sidebar { max-height:none; overflow:visible; }
    .blog-content { font-size:1rem; }
    .blog-content h1 { font-size:clamp(1.7rem,6.7vw,2.25rem); }
    .blog-content .blog-lead { font-size:1.05rem; }
}
@media(max-width:400px) {
    .qr-site-header .navbar-light .navbar-brand { font-size:.8rem; gap:.25rem; }
    .qr-site-header .qr-brand-mark { width:26px; height:26px; }
    .qr-site-header .navbar-toggler { margin-left:.25rem; }
    .qr-language-switcher select { width:84px; font-size:.8rem; }
}
@media print { .qr-preview-shortcuts,.qr-password-toggle { display:none!important; } }