:root { --page:#f7f7f4; --surface:#fff; --ink:#1a1d1c; --muted:#68706c; --line:#dde2de; --line-strong:#bfc9c3; --accent:#245c4b; --accent-dark:#174638; --soft:#e8f1ed; --danger:#a33b35; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; color-scheme:light; }
* { box-sizing:border-box; }
body { min-width:20rem; min-height:100vh; margin:0; background:var(--page); color:var(--ink); line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,select,summary,textarea { font:inherit; }
button,a,input,select,summary,textarea { outline-offset:.2rem; }
:focus-visible { outline:.15rem solid #3b8069; }
.skip-link { margin:0; padding:.6rem .9rem; position:fixed; top:.75rem; inset-inline-start:.75rem; z-index:30; background:var(--ink); color:#fff; transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.tools-header { width:min(100% - 2rem,74rem); min-height:4.75rem; margin:0 auto; padding:.75rem 0; position:relative; display:flex; align-items:center; gap:1.25rem; }
.tools-brand { min-height:2.75rem; display:inline-flex; align-items:center; gap:.65rem; border-radius:.65rem; font-weight:750; }
.tools-brand__mark { width:2rem; height:2rem; display:grid; place-items:center; background:var(--ink); border-radius:.65rem; color:#fff; font-size:.75rem; }
.language-menu { margin-inline-start:auto; position:relative; z-index:20; }
.language-menu summary { list-style:none; }
.language-menu summary::-webkit-details-marker { display:none; }
.language-button { min-width:8rem; min-height:2.75rem; padding:.45rem .7rem; display:flex; align-items:center; justify-content:center; gap:.5rem; border:.0625rem solid var(--line); border-radius:.7rem; background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
.language-button:hover,.language-menu[open] .language-button { border-color:var(--line-strong); background:#fbfcfb; box-shadow:0 .4rem 1.2rem rgba(25,35,30,.08); }
.language-button svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.language-button .language-chevron { width:.85rem; height:.85rem; margin-inline-start:auto; transition:transform .2s ease; }
.language-menu[open] .language-chevron { transform:rotate(180deg); }
.language-panel { width:13rem; margin:.5rem 0 0; padding:.4rem; position:absolute; top:100%; inset-inline-end:0; display:grid; gap:.15rem; border:.0625rem solid var(--line); border-radius:.8rem; background:var(--surface); box-shadow:0 1rem 2.5rem rgba(25,35,30,.14); }
.language-panel button { width:100%; min-height:2.75rem; padding:.5rem .7rem; display:flex; align-items:center; border:0; border-radius:.55rem; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:.82rem; text-align:start; transition:background-color .2s ease,color .2s ease; }
.language-panel button:hover { background:var(--soft); color:var(--accent-dark); }
.language-panel button[aria-current="page"] { background:var(--ink); color:#fff; }
.tools-hero,.tool-page { width:min(100% - 2rem,74rem); margin:0 auto; }
.tools-hero { padding:3.75rem 0 2rem; }
.tools-hero h1,.tool-heading h1 { max-width:54rem; margin:0; font-size:clamp(2.35rem,6vw,4.8rem); line-height:1.05; letter-spacing:-.05em; }
.tools-hero p,.tool-heading > p { max-width:46rem; margin:1.2rem 0 0; color:var(--muted); font-size:1rem; }
.guide-entry { min-height:2.7rem; margin:1.25rem 0 0; padding:.5rem .85rem; display:inline-flex; align-items:center; border:.0625rem solid var(--line); border-radius:.65rem; background:var(--surface); color:var(--accent-dark); font-size:.82rem; font-weight:750; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.guide-entry:hover { border-color:var(--accent); box-shadow:0 .45rem 1rem rgba(23,70,56,.1); transform:translateY(-.08rem); }
.tool-directory { width:min(100% - 2rem,74rem); margin:0 auto 7rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(13.25rem,1fr)); gap:.7rem; }
.tool-card { min-height:8.5rem; padding:1.1rem; position:relative; display:flex; flex-direction:column; justify-content:center; border:.0625rem solid var(--line); border-radius:.85rem; background:var(--surface); box-shadow:0 .35rem 1.2rem rgba(25,35,30,.035); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.tool-card::after { width:1.7rem; height:1.7rem; position:absolute; inset-block-end:.85rem; inset-inline-end:.85rem; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--accent-dark); content:'→'; font-size:.8rem; transition:background-color .2s ease,transform .2s ease; }
[dir="rtl"] .tool-card::after { content:'←'; }
.tool-card:hover,.tool-card:focus-visible { border-color:#a8beb4; box-shadow:0 1rem 2.8rem rgba(25,35,30,.1); transform:translateY(-.2rem); }
.tool-card:hover::after,.tool-card:focus-visible::after { background:#d9ebe3; transform:translateX(.18rem); }
[dir="rtl"] .tool-card:hover::after,[dir="rtl"] .tool-card:focus-visible::after { transform:translateX(-.18rem); }
.tool-card h2 { margin:0; padding-inline-end:2rem; overflow:hidden; font-size:1rem; letter-spacing:-.015em; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.tool-card p { max-width:100%; margin:.45rem 0 0; padding-inline-end:1.9rem; display:-webkit-box; overflow:hidden; color:var(--muted); font-size:.78rem; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.guide-directory { width:min(100% - 2rem,74rem); margin:0 auto 7rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:.8rem; }
.guide-card { min-height:10rem; padding:1.25rem; display:flex; flex-direction:column; justify-content:center; border:.0625rem solid var(--line); border-radius:1rem; background:var(--surface); box-shadow:0 .35rem 1.2rem rgba(25,35,30,.035); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.guide-card:hover,.guide-card:focus-visible { border-color:#a8beb4; box-shadow:0 1rem 2.8rem rgba(25,35,30,.1); transform:translateY(-.2rem); }
.guide-card h2 { margin:0; font-size:1.05rem; line-height:1.35; }
.guide-card p { margin:.55rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.guide-page { width:min(100% - 2rem,54rem); margin:0 auto; padding:2rem 0 7rem; }
.guide-heading { padding:1rem 0 2rem; border-bottom:.0625rem solid var(--line); }
.guide-heading h1 { margin:0; font-size:clamp(2.1rem,5vw,3.7rem); line-height:1.08; letter-spacing:-.045em; }
.guide-heading p { margin:1rem 0 0; color:var(--muted); font-size:1.05rem; line-height:1.65; }
.guide-heading time { margin:1rem 0 0; display:block; color:#78817c; font-size:.74rem; }
.guide-body { padding:1rem 0; }
.guide-body section { padding:1.3rem 0; border-bottom:.0625rem solid var(--line); }
.guide-body h2,.guide-sources h2 { margin:0; font-size:1.15rem; }
.guide-body p { margin:.65rem 0 0; color:#3f4843; font-size:.98rem; line-height:1.8; }
.guide-tool-link { margin:1.5rem 0; padding:1rem 1.15rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:.0625rem solid #bdd2c8; border-radius:.85rem; background:var(--soft); color:var(--accent-dark); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.guide-tool-link:hover { border-color:var(--accent); box-shadow:0 .6rem 1.4rem rgba(23,70,56,.1); transform:translateY(-.08rem); }
.guide-tool-link span { font-size:.78rem; }
.guide-sources { margin:2rem 0 0; padding:1.25rem; border:.0625rem solid var(--line); border-radius:.85rem; background:#fbfcfb; }
.guide-sources ul { margin:.8rem 0 0; padding-inline-start:1.2rem; }
.guide-sources li + li { margin-top:.45rem; }
.guide-sources a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:.2rem; }
.tool-page { padding:2rem 0 7rem; }
.back-link { min-height:2.75rem; margin:0 0 1rem; padding:0 .15rem; display:inline-flex; align-items:center; border-radius:.35rem; color:var(--muted); font-size:.85rem; transition:color .2s ease,transform .2s ease; }
.back-link:hover { color:var(--ink); transform:translateX(-.15rem); }
[dir="rtl"] .back-link:hover { transform:translateX(.15rem); }
.tool-heading { padding:1rem 0 2.5rem; }
.privacy-note { margin:1rem 0 0; display:inline-flex; align-items:center; gap:.45rem; color:var(--accent-dark); font-size:.78rem; }
.privacy-note::before { width:.45rem; height:.45rem; display:inline-block; border-radius:50%; background:var(--accent); content:''; }
.tool-heading__meta { margin:1rem 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.2rem; }
.tool-heading__meta .privacy-note { margin:0; }
.region-control { min-height:2.5rem; margin:0; padding:.25rem .35rem .25rem .7rem; display:inline-flex; align-items:center; gap:.5rem; border:.0625rem solid var(--line); border-radius:.65rem; background:var(--surface); color:var(--muted); font-size:.76rem; font-weight:700; }
.region-control select { min-height:2rem; padding:0 .55rem; border:0; border-radius:.45rem; background:var(--soft); color:var(--ink); cursor:pointer; }
.tool-content-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; }
.tool-content-layout > * { min-width:0; }
.tool-content-layout--sidebar { grid-template-columns:minmax(0,1fr) 18rem; align-items:start; }
.tool-workspace { padding:clamp(1.25rem,4vw,2.5rem); border:.0625rem solid var(--line); border-radius:1.35rem; background:var(--surface); box-shadow:0 1rem 3rem rgba(25,35,30,.06); }
.tool-tabs { margin:0 0 1.25rem; padding:.3rem; display:inline-flex; gap:.25rem; border:.0625rem solid var(--line); border-radius:.8rem; background:var(--page); }
.tool-tab { min-height:2.75rem; padding:.5rem 1rem; border:0; border-radius:.6rem; background:transparent; color:var(--muted); cursor:pointer; font-weight:750; transition:background-color .2s ease,color .2s ease,box-shadow .2s ease; }
.tool-tab:hover { color:var(--accent-dark); }
.tool-tab[aria-selected="true"] { background:var(--surface); color:var(--accent-dark); box-shadow:0 .2rem .7rem rgba(25,35,30,.1); }
.tool-tab-panel[hidden] { display:none; }
.tool-sidebar { position:sticky; top:1rem; align-self:start; }
.field-label { margin:0 0 .5rem; display:grid; gap:.5rem; color:#3d4541; font-size:.8rem; font-weight:700; }
.tool-textarea { width:100%; min-height:15rem; margin:0; padding:1rem; display:block; resize:vertical; border:.0625rem solid #cbd2ce; border-radius:.8rem; background:#fbfcfb; color:var(--ink); line-height:1.55; transition:border-color .2s ease,box-shadow .2s ease; }
.tool-textarea:hover { border-color:#9eaaa4; }
.tool-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(36,92,75,.1); }
.tool-textarea--code,.tool-output { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.tool-input { width:100%; min-height:2.8rem; margin:0 0 1rem; padding:.6rem .8rem; display:block; border:.0625rem solid #cbd2ce; border-radius:.7rem; background:#fbfcfb; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.tool-input:hover { border-color:#9eaaa4; }
.tool-input:focus { border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(36,92,75,.1); }
.stat-grid { margin:1rem 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.stat-card { margin:0; padding:1rem; border:.0625rem solid var(--line); border-radius:.8rem; background:#fbfcfb; transition:border-color .2s ease,background-color .2s ease; }
.stat-card:hover { border-color:#bac6c0; background:#fff; }
.stat-card dt { color:var(--muted); font-size:.75rem; }
.stat-card dd { margin:.3rem 0 0; font-size:1.5rem; font-weight:800; }
.editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.tool-output { min-height:15rem; margin:0; padding:1rem; overflow:auto; white-space:pre-wrap; word-break:break-word; border:.0625rem solid #cbd2ce; border-radius:.8rem; background:#16201c; color:#e8f4ee; }
.tool-actions { margin:1rem 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; }
.tool-button { min-height:2.8rem; margin:0; padding:.55rem 1rem; display:inline-flex; align-items:center; justify-content:center; border:.0625rem solid var(--accent); border-radius:.7rem; background:var(--accent); color:#fff; cursor:pointer; font-weight:750; transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.tool-button:hover:not(:disabled) { border-color:var(--accent-dark); background:var(--accent-dark); box-shadow:0 .45rem 1rem rgba(23,70,56,.18); transform:translateY(-.08rem); }
.tool-button:active:not(:disabled) { transform:translateY(0); }
.tool-button:disabled { cursor:not-allowed; opacity:.5; }
.tool-button--secondary { border-color:var(--line); background:#fff; color:var(--ink); }
.tool-button--secondary:hover:not(:disabled) { border-color:var(--line-strong); background:#f3f6f4; color:var(--ink); }
.tool-button--download { margin:1rem 0 0; background:var(--accent-dark); }
.tool-status { min-height:1.6rem; margin:1rem 0 0; color:var(--accent-dark); font-size:.82rem; }
.tool-status--error { color:var(--danger); }
.qr-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr); align-items:start; gap:1.5rem; }
.qr-result { min-height:24rem; margin:0; padding:1rem; display:grid; place-items:center; overflow:hidden; border:.0625rem solid var(--line); border-radius:1rem; background:#f7f8f7; }
.qr-result canvas,.qr-result svg,.qr-result img { width:min(100%,24rem) !important; height:auto !important; max-height:24rem; display:block; }
.workspace-section { margin:2rem 0 0; padding:1.5rem 0 0; border-top:.0625rem solid var(--line); }
.workspace-title { margin:0 0 1rem; font-size:1.1rem; letter-spacing:-.015em; }
.tool-textarea--compact { min-height:8rem; }
.inline-options { margin:1rem 0 0; padding:.75rem 1rem; border:.0625rem solid var(--line); border-radius:.75rem; background:#fbfcfb; }
.inline-options summary { min-height:2.75rem; display:flex; align-items:center; cursor:pointer; color:var(--accent-dark); font-weight:700; }
.inline-options .field-label { margin-top:.75rem; }
.option-grid--compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
.option-grid input[type="color"] { width:100%; height:2.8rem; padding:.2rem; border:.0625rem solid #cbd2ce; border-radius:.65rem; background:#fff; cursor:pointer; }
.workspace-hint { margin:.6rem 0 0; color:var(--muted); font-size:.75rem; }
.workspace-summary { min-height:1.6rem; margin:1rem 0 0; color:var(--accent-dark); font-size:.82rem; font-weight:700; }
.pdf-page-grid { margin:1rem 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:.8rem; }
.pdf-page-card { min-width:0; margin:0; padding:.75rem; display:flex; align-items:stretch; flex-direction:column; gap:.65rem; border:.0625rem solid var(--line); border-radius:.8rem; background:#fbfcfb; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.pdf-page-card:hover { border-color:#a8beb4; box-shadow:0 .7rem 1.6rem rgba(25,35,30,.08); transform:translateY(-.1rem); }
.pdf-page-card img { width:100%; height:10rem; display:block; object-fit:contain; border-radius:.45rem; background:#edf0ee; transition:transform .2s ease; }
.pdf-page-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
.page-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.page-action { min-width:0; min-height:2.35rem; margin:0; padding:.25rem .35rem; overflow:hidden; border:.0625rem solid var(--line); border-radius:.45rem; background:#fff; color:var(--ink); cursor:pointer; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; transition:border-color .2s ease,background-color .2s ease,transform .2s ease; }
.page-action:hover:not(:disabled) { border-color:var(--accent); background:var(--soft); transform:translateY(-.05rem); }
.page-action:disabled { cursor:not-allowed; opacity:.4; }
.metadata-results { margin:1rem 0 0; display:grid; gap:1rem; }
.metadata-card { min-width:0; padding:1rem; display:grid; grid-template-columns:8rem minmax(0,1fr) auto; align-items:start; gap:1rem; border:.0625rem solid var(--line); border-radius:1rem; background:#fbfcfb; transition:border-color .2s ease,box-shadow .2s ease; }
.metadata-card:hover { border-color:#a8beb4; box-shadow:0 .7rem 1.6rem rgba(25,35,30,.07); }
.metadata-card > img { width:8rem; height:8rem; grid-row:1/5; display:block; object-fit:cover; border-radius:.7rem; background:#edf0ee; }
.metadata-card__heading { min-width:0; grid-column:2/-1; display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.metadata-card__heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metadata-card__heading span { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.metadata-flags { min-height:0; grid-column:2/-1; display:flex; flex-wrap:wrap; gap:.4rem; }
.metadata-flags span { padding:.2rem .5rem; border-radius:99rem; background:#f7e6e4; color:var(--danger); font-size:.68rem; }
.metadata-list { max-height:14rem; margin:0; padding:.65rem; grid-column:2/-1; display:grid; grid-template-columns:minmax(7rem,.35fr) minmax(0,1fr); gap:.25rem .7rem; overflow:auto; border-radius:.6rem; background:#fff; font-size:.72rem; }
.metadata-list dt { color:var(--muted); overflow-wrap:anywhere; }
.metadata-list dd { margin:0; overflow-wrap:anywhere; }
.metadata-list__sensitive { color:var(--danger); font-weight:700; }
.diagram-preview { min-height:22rem; margin:0; padding:1rem; display:grid; place-items:center; overflow:auto; border:.0625rem solid #cbd2ce; border-radius:.8rem; background:#fbfcfb; }
.diagram-preview svg { width:100%; height:auto; max-height:38rem; }
.tool-guide { width:100%; margin:1.5rem 0 0; padding:0; border:.0625rem solid var(--line); border-radius:.9rem; background:var(--surface); }
.tool-guide summary { min-height:3.2rem; padding:.7rem 1rem; display:flex; align-items:center; cursor:pointer; font-weight:750; transition:background-color .2s ease,color .2s ease; }
.tool-guide summary:hover { background:var(--soft); color:var(--accent-dark); }
.tool-guide ul { margin:0; padding:0 2.2rem 1rem; color:var(--muted); font-size:.82rem; }
.tool-guide li + li { margin-top:.35rem; }
.related-guides { width:100%; margin:1.5rem 0 0; }
.related-guides-grid { width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.75rem; }
.related-guide-card { min-height:7rem; padding:1rem; display:flex; flex-direction:column; justify-content:center; gap:.4rem; border:.0625rem solid #bdd2c8; border-radius:.9rem; background:var(--soft); color:var(--accent-dark); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.related-guide-card:hover,.related-guide-card:focus-visible { transform:translateY(-.12rem); border-color:var(--accent); box-shadow:0 .5rem 1.2rem rgba(15,23,42,.08); }
.related-guide-card span { color:#4d6359; font-size:.78rem; line-height:1.55; }
.related-tools { width:100%; margin:1.5rem 0 0; }
.related-tools-grid { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.related-tool-card { min-height:6rem; padding:1rem; display:flex; flex-direction:column; gap:.35rem; border:.0625rem solid var(--line); border-radius:.9rem; background:var(--surface); color:var(--text); text-decoration:none; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.related-tool-card:hover { transform:translateY(-.12rem); border-color:var(--accent); box-shadow:0 .5rem 1.2rem rgba(15,23,42,.08); }
.related-tool-card:focus-visible { outline:.18rem solid var(--focus); outline-offset:.18rem; }
.related-tool-card span { color:var(--muted); font-size:.8rem; line-height:1.5; }
.file-picker { min-height:9rem; margin:0; padding:1.5rem; display:grid; place-items:center; border:.1rem dashed #aab5af; border-radius:1rem; background:#fbfcfb; color:var(--accent-dark); cursor:pointer; font-weight:750; transition:border-color .2s ease,background-color .2s ease; }
.file-picker:hover,.file-picker:focus-within { border-color:var(--accent); background:var(--soft); }
.file-picker input { width:100%; max-width:100%; min-width:0; margin:.75rem 0 0; }
.file-picker--compact { min-height:7rem; }
.option-grid { margin:1.25rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.option-grid select { min-height:2.8rem; margin:0; padding:0 .75rem; border:.0625rem solid #cbd2ce; border-radius:.65rem; background:#fff; }
.option-grid input[type="range"] { width:100%; }
.option-grid--action { align-items:end; }
.option-grid--action > .tool-button { margin-bottom:.5rem; }
.business-field-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.business-field-grid .field-label { margin:0; }
.business-input { width:100%; min-height:2.8rem; margin:0; padding:.55rem .75rem; border:.0625rem solid #cbd2ce; border-radius:.7rem; background:#fbfcfb; color:var(--ink); font:inherit; transition:border-color .2s ease,box-shadow .2s ease; }
.business-input:hover { border-color:#9eaaa4; }
.business-input:focus { border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(36,92,75,.1); }
.business-input--error { border-color:var(--danger) !important; box-shadow:0 0 0 .2rem rgba(153,55,46,.1) !important; }
.business-field--wide,.business-file { grid-column:1/-1; }
.business-results { margin:1.25rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:.7rem; }
.business-results .stat-card dd { overflow-wrap:anywhere; font-size:1.25rem; }
.barcode-label-sheet { margin:1.25rem 0 0; padding:1rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; border:.0625rem solid var(--line); border-radius:.8rem; background:#fff; }
.barcode-label-sheet[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.barcode-label-sheet[data-columns="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.barcode-label { min-width:0; min-height:7rem; margin:0; padding:.5rem; display:grid; place-items:center; overflow:hidden; border:.0625rem dashed #b7bdb9; background:#fff; break-inside:avoid; }
.barcode-label canvas { width:100%; height:auto; max-height:6rem; display:block; object-fit:contain; }
.data-table-wrap { width:100%; max-height:32rem; margin:1rem 0 0; overflow:auto; border:.0625rem solid var(--line); border-radius:.8rem; background:#fff; }
.data-table { width:100%; border-collapse:collapse; font-size:.78rem; white-space:nowrap; }
.data-table caption { padding:.65rem .7rem; background:#fff; color:var(--muted); font-weight:750; text-align:start; }
.data-table th,.data-table td { max-width:22rem; padding:.55rem .7rem; overflow:hidden; border-bottom:.0625rem solid var(--line); text-align:start; text-overflow:ellipsis; }
.data-table th { position:sticky; top:0; z-index:1; background:#edf3ef; color:var(--accent-dark); font-weight:800; }
.data-table tr:hover td { background:#f8faf9; }
.diff-result { min-height:12rem; margin:1rem 0; padding:1rem; overflow:auto; border:.0625rem solid var(--line); border-radius:.8rem; background:#fbfcfb; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; line-height:1.75; white-space:pre-wrap; word-break:break-word; }
.diff-add { background:#d9f0e3; color:#174638; text-decoration:none; }
.diff-remove { background:#f7ddda; color:#822d28; text-decoration:line-through; }
.preview-grid { margin:1rem 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.preview-card { min-width:0; min-height:18rem; margin:0; padding:1rem; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:.75rem; border:.0625rem solid var(--line); border-radius:.8rem; background:#f4f6f5; }
.preview-card figcaption { width:100%; color:var(--muted); font-size:.75rem; font-weight:800; }
.preview-card img { width:100%; height:16rem; display:block; object-fit:contain; }
.archive-list { max-height:22rem; margin:1rem 0 0; overflow:auto; border:.0625rem solid var(--line); border-radius:.75rem; }
.archive-entry { min-height:2.9rem; padding:.5rem .7rem; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.6rem; border-bottom:.0625rem solid var(--line); font-size:.76rem; }
.archive-entry:last-child { border-bottom:0; }
.archive-entry span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mind-map-preview { width:100%; height:32rem; overflow:hidden; border:.0625rem solid #cbd2ce; border-radius:.8rem; background:#fbfcfb; }
.mind-map-preview svg { width:100%; height:100%; display:block; }
.pdf-sign-layout { margin:1rem 0 0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr); align-items:start; gap:1rem; }
.sign-pdf-preview { width:100%; height:auto; max-height:70vh; display:block; border:.0625rem solid var(--line); border-radius:.7rem; background:#edf0ee; cursor:crosshair; object-fit:contain; }
.pdf-sign-controls { min-width:0; padding:1rem; position:sticky; top:5.5rem; border:.0625rem solid var(--line); border-radius:.8rem; background:#fbfcfb; }
.signature-canvas { width:100%; height:9rem; display:block; border:.1rem dashed #aab5af; border-radius:.7rem; background:#fff; touch-action:none; }
.invoice-items { margin:.75rem 0 1rem; display:grid; gap:.5rem; }
.invoice-item-row { display:grid; grid-template-columns:minmax(10rem,2fr) repeat(3,minmax(6rem,.7fr)) auto; align-items:center; gap:.5rem; }
.file-button { position:relative; overflow:hidden; }
.document-preview { width:min(100%,52rem); min-height:34rem; margin:1.25rem auto; padding:2rem; border:.0625rem solid var(--line); border-radius:.5rem; background:#fff; box-shadow:0 .8rem 2rem rgba(15,23,42,.08); color:#17231e; }
.document-preview__heading { display:flex; align-items:start; justify-content:space-between; gap:1rem; border-bottom:.14rem solid var(--accent); }
.document-preview__heading h2 { margin:0 0 1rem; font-size:1.8rem; }
.document-preview__heading > div { display:flex; align-items:center; gap:.75rem; }
.document-preview__heading img { width:auto; height:3rem; display:block; object-fit:contain; }
.document-preview__parties { margin:1.2rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; white-space:pre-wrap; }
.document-preview__dates { margin:0 0 1rem; display:flex; justify-content:flex-end; gap:1.5rem; }
.document-preview .data-table { table-layout:fixed; white-space:normal; }
.document-preview .data-table th,.document-preview .data-table td { overflow-wrap:anywhere; }
.document-preview__parties div,.document-preview__dates div,.document-preview__totals div { display:grid; gap:.2rem; }
.document-preview__parties strong,.document-preview__dates strong,.document-preview__totals strong { color:var(--muted); font-size:.7rem; text-transform:uppercase; }
.document-preview__totals { width:min(100%,20rem); margin:1.25rem 0 0 auto; display:grid; gap:.45rem; }
.document-preview__totals div { grid-template-columns:1fr auto; }
.document-preview__totals div:last-child { padding-top:.5rem; border-top:.1rem solid var(--ink); font-size:1.05rem; font-weight:800; }
.document-preview__notes { margin:1.25rem 0 0; padding-top:1rem; display:grid; gap:.3rem; border-top:.0625rem solid var(--line); white-space:pre-wrap; }
.product-image-layout { margin:1rem 0; display:grid; grid-template-columns:minmax(20rem,1.25fr) minmax(18rem,.75fr); align-items:start; gap:1rem; }
.product-cropper { width:100%; height:30rem; position:relative; overflow:hidden; border:.0625rem solid var(--line); border-radius:.8rem; background:#edf0ee; }
.product-cropper cropper-canvas { width:100%; height:100%; }
.product-cropper > img { max-width:100%; display:block; }
.check-grid { margin:1rem 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.5rem; }
.check-option { min-height:3rem; padding:.65rem .8rem; display:flex; align-items:center; gap:.55rem; border:.0625rem solid var(--line); border-radius:.65rem; background:#fbfcfb; cursor:pointer; transition:border-color .2s ease,background-color .2s ease; }
.check-option:hover,.check-option:focus-within { border-color:var(--accent); background:var(--soft); }
.sheet-header-input { width:100%; min-width:7rem; padding:.3rem .4rem; border:.0625rem solid transparent; border-radius:.3rem; background:transparent; color:inherit; font:inherit; font-weight:800; }
.sheet-header-input:hover,.sheet-header-input:focus { border-color:var(--accent); background:#fff; outline:0; }
.address-label-sheet { margin:1.25rem auto 0; padding:.4in .18in; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:.0625rem solid var(--line); background:#fff; }
.address-label { min-width:0; min-height:1in; padding:.12in .2in; display:flex; justify-content:center; flex-direction:column; overflow:hidden; border:.0625rem dashed #d5d9d7; color:#111; font-size:.68rem; line-height:1.35; break-inside:avoid; }
.address-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.address-label-sheet--a4 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ad-placement { width:100%; max-width:100%; margin:3rem 0; padding:.55rem; overflow:hidden; contain:layout paint; border:.0625rem solid #e3e6e4; border-radius:.85rem; background:#f2f3f1; direction:ltr; text-align:center; }
.ad-placement--horizontal { min-height:8rem; }
.ad-placement--vertical { min-height:38rem; margin:0; }
.ad-placement--multiplex { min-height:17rem; }
.ad-label { margin:0 0 .35rem; display:block; color:#8a918d; font-size:.62rem; letter-spacing:.04em; }
.adsbygoogle { width:100% !important; max-width:100% !important; min-height:inherit; display:block; overflow:hidden; }
.tools-footer { width:min(100% - 2rem,74rem); min-height:7rem; margin:0 auto; padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:.0625rem solid var(--line); color:var(--muted); font-size:.75rem; }
.tools-footer nav { display:flex; gap:1rem; }
.tools-footer a { min-height:2.75rem; display:inline-flex; align-items:center; border-radius:.3rem; transition:color .2s ease; }
.tools-footer a:hover { color:var(--ink); }
[hidden] { display:none !important; }
@media (max-width:64rem) { .tool-content-layout--sidebar { grid-template-columns:1fr; } .tool-sidebar { position:static; } .ad-placement--vertical { min-height:14rem; margin:1.5rem 0 0; } }
@media (max-width:50rem) { .tools-hero { padding:3rem 0 1.75rem; } .editor-grid,.qr-layout,.preview-grid,.related-tools-grid,.pdf-sign-layout,.product-image-layout { grid-template-columns:1fr; } .pdf-sign-controls { position:static; } .business-field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .invoice-item-row { grid-template-columns:minmax(8rem,1fr) repeat(3,minmax(4.5rem,.55fr)) auto; } .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .metadata-card { grid-template-columns:6rem minmax(0,1fr); } .metadata-card > img { width:6rem; height:6rem; grid-row:1/3; } .metadata-card > .tool-button,.metadata-card__heading,.metadata-list,.metadata-flags { grid-column:1/-1; } }
@media (max-width:32rem) { .tools-brand > span:last-child { display:none; } .language-button { min-width:2.75rem; } .language-button > span { display:none; } .language-panel { width:min(13rem,calc(100vw - 2rem)); } .tool-directory,.option-grid,.option-grid--compact,.business-field-grid { grid-template-columns:1fr; } .tool-card { min-height:8rem; } .tool-card p { font-size:1rem; line-height:1.45; } .tool-tabs { width:100%; display:flex; } .tool-tab { padding:.5rem; flex:1; } .tool-actions { align-items:stretch; flex-direction:column; } .tool-button { width:100%; } .invoice-item-row { grid-template-columns:1fr 1fr; } .invoice-item-row > :first-child,.invoice-item-row > :last-child { grid-column:1/-1; } .document-preview { min-height:28rem; padding:1rem; } .document-preview__parties { grid-template-columns:1fr; } .product-cropper { height:22rem; } .address-label-sheet { grid-template-columns:repeat(2,minmax(0,1fr)); } .barcode-label-sheet,.barcode-label-sheet[data-columns] { grid-template-columns:1fr; } .metadata-card { grid-template-columns:1fr; } .metadata-card > img { width:100%; height:10rem; grid-row:auto; } .metadata-card > .tool-button,.metadata-card__heading,.metadata-list,.metadata-flags { grid-column:auto; } .metadata-list { grid-template-columns:1fr; } .tools-footer { align-items:flex-start; flex-direction:column; } }
@media print { body * { visibility:hidden !important; } .barcode-label-sheet,.barcode-label-sheet *,.document-preview,.document-preview *,.address-label-sheet,.address-label-sheet * { visibility:visible !important; } .barcode-label-sheet,.document-preview,.address-label-sheet { width:100%; max-width:none; margin:0; padding:0; position:absolute; top:0; left:0; border:0; border-radius:0; box-shadow:none; } .barcode-label { min-height:1.35in; } .address-label-sheet { padding:.25in .18in; } .address-label { border:.01in solid transparent; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }
.worksheet-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.worksheet-controls select{width:100%;height:2.75rem;padding:0 .75rem;background:#fff;border:1px solid var(--border);border-radius:.55rem;color:var(--ink);font:inherit;}
.worksheet-content{margin:1rem 0;padding:1rem;display:flex;border:1px solid var(--border);border-radius:.65rem;flex-wrap:wrap;gap:.75rem 1.25rem;}
.worksheet-content legend{padding:0 .35rem;color:var(--muted);font-size:.85rem;font-weight:700;}
.worksheet-preview{margin-top:1.5rem;display:grid;gap:1rem;}
.worksheet-paper{padding:1rem 1.15rem;background:#fff;border:1px solid var(--border);border-radius:.65rem;}
.worksheet-paper h3{margin:0 0 .75rem;color:var(--ink);font-size:1rem;}
.worksheet-paper ol{margin:0;padding-inline-start:1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.5rem;}
.worksheet-paper li{min-width:0;color:var(--ink);line-height:1.5;overflow-wrap:anywhere;}
@media(max-width:42rem){.worksheet-controls,.worksheet-paper ol{grid-template-columns:1fr;}}
