:root{color-scheme:light;--bg:#f4f6fb;--surface:#ffffff;--border:#e3e8f2;--text:#101828;--muted:#667085;--brand:#4f46e5;--brand-dark:#4338ca;--brand-soft:#eef1fd;--accent:#06b6d4;--radius-sm:10px;--radius:12px;--radius-lg:14px;--shadow:0 1px 2px rgba(16,24,40,0.05),0 8px 22px rgba(79,70,229,0.07);--ease:cubic-bezier(0.22,1,0.36,1);--t-fast:0.15s;--t:0.2s;--hero-bg:linear-gradient(135deg,#4f46e5,#06b6d4);--hero-text:#ffffff;--hero-muted:rgba(255,255,255,0.85);--hero-border:transparent;--hero-blob:rgba(255,255,255,0.14);--header-bg:linear-gradient(180deg,#f7f9fd,#ffffff);--topbar-bg:rgba(255,255,255,0.72);--icon-hover:#e0e7ff;--card-hover-border:var(--accent);--card-hover-shadow:0 10px 24px rgba(79,70,229,0.18);--pill-border:#dfe4fb;--focus-ring:rgba(6,182,212,0.28);--btn-bg:var(--brand);--btn-bg-hover:var(--brand-dark);--btn-text:#ffffff;--btn-shadow:rgba(79,70,229,0.28);--success-bg:#ecfdf5;--success-border:#a7f3d0;--success-fg:#047857;--danger-bg:#fef2f2;--danger-border:#fecaca;--danger-fg:#b91c1c;--danger-fg-soft:#7f1d1d;--danger-solid:#dc2626;--checker-1:#ffffff;--checker-2:#eceef1}:root[data-theme=dark]{color-scheme:dark;--bg:#0f1117;--surface:#171a22;--border:#262b36;--text:#e8eaf0;--muted:#9aa2b1;--brand:#f5b942;--brand-dark:#ffcb5e;--brand-soft:rgba(245,185,66,0.14);--accent:#7c5cff;--shadow:0 1px 2px rgba(0,0,0,0.4),0 8px 22px rgba(0,0,0,0.35);--hero-bg:radial-gradient(120% 90% at 50% -20%,rgba(245,185,66,0.22) 0%,transparent 60%),linear-gradient(180deg,#191d27,#0f1117);--hero-text:#f4efe6;--hero-muted:#b9b2a4;--hero-border:#2a3040;--hero-blob:rgba(245,185,66,0.1);--header-bg:linear-gradient(180deg,#171a22,#12141b);--topbar-bg:rgba(23,26,34,0.72);--icon-hover:rgba(245,185,66,0.24);--card-hover-border:rgba(245,185,66,0.55);--card-hover-shadow:0 0 0 1px rgba(245,185,66,0.4),0 10px 24px rgba(245,185,66,0.14);--pill-border:rgba(245,185,66,0.3);--focus-ring:rgba(245,185,66,0.3);--btn-bg:#f5b942;--btn-bg-hover:#ffcb5e;--btn-text:#1a1206;--btn-shadow:rgba(245,185,66,0.28);--success-bg:rgba(16,185,129,0.12);--success-border:rgba(16,185,129,0.38);--success-fg:#4ade80;--danger-bg:rgba(248,113,113,0.12);--danger-border:rgba(248,113,113,0.38);--danger-fg:#f87171;--danger-fg-soft:#fca5a5;--danger-solid:#ef4444;--checker-1:#232833;--checker-2:#1a1e27}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Microsoft YaHei,PingFang SC,Hiragino Sans GB,sans-serif;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}:root{accent-color:var(--brand)}::selection{background:var(--brand-soft);color:var(--brand-dark)}a{color:var(--brand);text-decoration:none;transition:color var(--t-fast) ease}a:hover{color:var(--brand-dark);text-decoration:underline}h1{font-size:1.6rem;margin:.2em 0 .4em}h1,h2{text-wrap:balance}h2{font-size:1.2rem;margin:1.6em 0 .6em}:where(a,button,[tabindex],summary):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}:where(input,textarea,select):focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring)}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}:root{--sidebar-w:232px;--topbar-h:56px;--content-max:1600px}.app-shell{min-height:100dvh}.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:var(--topbar-h);padding:0 16px;background:var(--topbar-bg);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--border)}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.topbar{background:var(--header-bg)}}.sidebar-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex-shrink:0;font-size:1.25rem;line-height:1;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}.sidebar-toggle:hover{border-color:var(--brand);background:var(--icon-hover)}.logo{font-weight:700;font-size:1.15rem;color:var(--text)}.logo:hover{text-decoration:none}.shell-body{display:flex;align-items:flex-start}.sidebar{flex-shrink:0;width:var(--sidebar-w);position:-webkit-sticky;position:sticky;top:var(--topbar-h);align-self:flex-start;height:calc(100dvh - var(--topbar-h));overflow-y:auto;padding:16px 12px;background:var(--surface);border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent}.sidebar-nav{display:flex;flex-direction:column;gap:4px}.sidebar-link{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text);font-size:.95rem;transition:background var(--t-fast) ease,color var(--t-fast) ease}.sidebar-link:hover{background:var(--brand-soft);text-decoration:none}.sidebar-link.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}.sidebar-link.active:before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--brand)}.sidebar-link:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}.sidebar-icon{display:grid;place-items:center;width:28px;height:28px;font-size:1.15rem;line-height:1;flex-shrink:0}.sidebar-scrim,html[data-sidebar=collapsed] .sidebar{display:none}.main-col{flex:1 1;min-width:0;display:flex;flex-direction:column;min-height:calc(100dvh - var(--topbar-h))}.content{flex:1 1;width:100%;max-width:var(--content-max);margin:0 auto;padding:24px 28px 8px}.content .tool-page{max-width:860px;margin:0 auto}.theme-toggle{margin-left:auto;display:inline-grid;place-items:center;width:38px;height:38px;flex-shrink:0;font-size:1.15rem;line-height:1;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}.theme-toggle:hover{border-color:var(--brand)}.theme-toggle:active{transform:translateY(1px)}.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:20px 28px;color:var(--muted);font-size:.85rem;text-align:center}.site-footer p{margin:4px 0}.site-footer a{color:var(--muted)}.site-footer .visit-counter{margin-top:10px;font-size:.8rem}.visit-counter [id^=busuanzi_value]{color:var(--brand);font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}@media (max-width:1023px){.sidebar{position:fixed;top:var(--topbar-h);left:0;z-index:45;height:calc(100dvh - var(--topbar-h));transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow)}html[data-sidebar=collapsed] .sidebar{display:block}.app-shell.drawer-open .sidebar{transform:translateX(0)}.app-shell.drawer-open .sidebar-scrim{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:44;background:rgba(0,0,0,.45)}.content{padding:20px 16px 8px}.site-footer{padding:20px 16px}}.hero{position:relative;text-align:center;padding:40px 16px 32px;background:var(--hero-bg);color:var(--hero-text);border:1px solid var(--hero-border);margin-top:8px}.hero,.hero-decor{border-radius:22px}.hero-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero-decor:after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:var(--hero-blob)}.hero-title{font-size:2.15rem;margin:0;letter-spacing:.5px}.hero-logo{display:inline-block;font-size:2.4rem;transform-origin:70% 90%;animation:bear-wobble 4s ease-in-out infinite}@keyframes bear-wobble{0%,92%,to{transform:rotate(0deg)}95%{transform:rotate(-9deg)}98%{transform:rotate(6deg)}}.hero .tagline{color:var(--hero-muted);margin:8px 0 0;font-size:1.02rem}@media (prefers-reduced-motion:reduce){.hero-logo{animation:none}}.feature-strip{list-style:none;padding:0;margin:16px 0 8px;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px}.feature-strip li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);transition:transform var(--t) var(--ease),box-shadow var(--t) ease,border-color var(--t) ease}.feature-strip li:hover{transform:translateY(-2px);border-color:var(--card-hover-border);box-shadow:var(--card-hover-shadow)}.feature-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;font-size:1.4rem;line-height:1;background:linear-gradient(145deg,var(--brand-soft),transparent);border:1px solid var(--border);border-radius:12px}.feature-title{font-weight:600;font-size:.95rem}.feature-desc{color:var(--muted);font-size:.8rem}.category-block{margin-top:32px}.category-title{display:flex;align-items:center;gap:8px;margin-bottom:12px}.category-title a{color:var(--text)}.category-count,.category-title a:hover{color:var(--brand-dark)}.category-count{font-size:.75rem;font-weight:600;background:var(--brand-soft);border:1px solid var(--pill-border);border-radius:999px;padding:1px 10px}.tool-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:14px;gap:14px}.tool-card{position:relative;display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow);color:var(--text);height:100%;transition:border-color .2s ease,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease}.tool-card:hover{border-color:var(--card-hover-border);text-decoration:none;transform:translateY(-4px);box-shadow:var(--card-hover-shadow)}.tool-card:active{transform:translateY(-1px);transition-duration:.08s}.tool-card:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus-ring)}.tool-icon{display:grid;place-items:center;width:46px;height:46px;font-size:1.5rem;line-height:1;flex-shrink:0;background:linear-gradient(145deg,var(--brand-soft),transparent);border:1px solid var(--border);border-radius:12px;transition:background .2s ease,transform .2s cubic-bezier(.22,1,.36,1),border-color .2s ease}.tool-card:hover .tool-icon{background:var(--icon-hover);border-color:var(--card-hover-border);transform:scale(1.06)}.tool-card-body{min-width:0;display:flex;flex-direction:column;gap:4px}.tool-card .tool-name{font-weight:600;font-size:.98rem;letter-spacing:.2px;transition:color .2s ease}.tool-card:hover .tool-name{color:var(--brand-dark)}.tool-card .tool-desc{color:var(--muted);font-size:.84rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-card-sm{align-items:center;gap:10px}.tool-card-sm .tool-icon{width:38px;height:38px;font-size:1.2rem;border-radius:11px}@media (prefers-reduced-motion:reduce){.tool-card,.tool-card:active,.tool-card:hover,.tool-card:hover .tool-icon{transform:none}}.search-icon{margin-right:8px}@media (max-width:560px){.feature-strip{grid-template-columns:1fr}}.search-box{position:relative;max-width:460px;margin:16px auto 0}.search-box input{width:100%;padding:12px 18px;font-size:1rem;color:var(--text);border:1px solid var(--border);border-radius:999px;background:var(--surface);outline:none;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--focus-ring)}.search-results{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;max-height:min(60vh,440px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:10;text-align:left}.search-results li a{display:block;padding:8px 10px;border-radius:8px;color:var(--text)}.search-results li a:hover{background:var(--bg);text-decoration:none}.search-empty{padding:8px 10px;color:var(--muted)}.breadcrumb{font-size:.85rem;margin-bottom:10px}.breadcrumb,.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--brand)}.tool-h1{display:flex;align-items:center;gap:10px;text-wrap:balance}.tool-h1-icon{font-size:1.8rem;line-height:1}.tool-intro{color:var(--muted);margin:0 0 12px;font-size:.95rem}.privacy-badge{display:inline-block;background:var(--success-bg);color:var(--success-fg);border:1px solid var(--success-border);border-radius:999px;padding:4px 12px;font-size:.85rem;margin:0 0 16px}.tool-region{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}.tool-crashed,.tool-loading{color:var(--muted);padding:24px;text-align:center}.tool-region textarea{width:100%;resize:vertical;padding:12px;font-size:1rem;line-height:1.7;border:1px solid var(--border);border-radius:8px;font-family:inherit;outline:none}.tool-region textarea:focus{border-color:var(--brand)}.stat-grid{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:10px;gap:10px}.stat-cell{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center;transition:border-color var(--t-fast) ease,transform var(--t) var(--ease)}.stat-cell:hover{border-color:var(--card-hover-border);transform:translateY(-2px)}.stat-num{font-size:1.4rem;font-weight:700;color:var(--brand);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.stat-label{font-size:.8rem;color:var(--muted);margin-top:2px}.tool-crashed p{margin:4px 0}.howto ol{padding-left:1.4em}.howto li{margin-bottom:6px}.faq-item{padding:12px 0 14px;border-bottom:1px solid var(--border)}.faq-item:last-child{border-bottom:none}.faq-item dt{font-weight:600}.faq-item dd{margin:6px 0 0;color:var(--muted)}.related .tool-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:40px 16px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color var(--t) ease,background var(--t) ease,box-shadow var(--t) ease}.dropzone.dragging,.dropzone:hover{border-color:var(--brand);background:var(--brand-soft)}.dropzone.dragging{border-style:solid;box-shadow:0 0 0 4px var(--focus-ring)}.dropzone input[type=file]{display:none}.control-row{display:flex;align-items:center;gap:12px;margin:16px 0;flex-wrap:wrap}.control-row label{min-width:72px}.control-row input[type=range]{flex:1 1;min-width:160px}.control-row input[type=number],.control-row input[type=text],.control-row select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit}.control-row input[type=text]{flex:1 1;min-width:180px;outline:none}.control-row input[type=number]{width:96px;outline:none}.control-row input[type=number]:focus,.control-row input[type=text]:focus{border-color:var(--brand)}.ts-now{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}.ts-now-label{color:var(--muted);font-size:.85rem}.ts-now-val{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:1.1rem;font-weight:700;color:var(--brand);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;transition:border-color var(--t-fast) ease}.ts-now-val:hover{border-color:var(--brand)}.ts-now-val em{font-style:normal;font-weight:400;font-size:.75rem;color:var(--muted);margin-left:4px}.ts-h3{font-size:1rem;margin:20px 0 8px}.ts-table{width:100%;border-collapse:collapse}.ts-table th{text-align:left;color:var(--muted);font-weight:500;white-space:nowrap;padding:8px 12px 8px 0;width:110px;vertical-align:top}.ts-table td{font-family:ui-monospace,Consolas,Menlo,monospace;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;padding:8px 0}.ts-table tr+tr td,.ts-table tr+tr th{border-top:1px solid var(--border)}.link-btn{background:none;border:none;color:var(--brand);cursor:pointer;font:inherit;padding:0;text-decoration:underline}.convert-tool .control-row select{min-width:160px;flex:1 1}.convert-table{margin-top:4px}.convert-table th{width:auto}.convert-table th em{font-style:normal;color:var(--muted);font-size:.8rem;margin-left:4px}.convert-table tr.is-source td,.convert-table tr.is-source th{color:var(--brand)}.convert-table tr.is-source th{font-weight:700}.convert-copied{margin-left:8px;font-size:.75rem;color:var(--muted);font-family:system-ui,sans-serif}.pw-output{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}.pw-value{flex:1 1;min-width:200px;text-align:left;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:1.25rem;font-weight:600;word-break:break-all;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;color:var(--text);transition:border-color var(--t-fast) ease}.pw-value:hover{border-color:var(--brand)}.pw-copied{color:var(--success-fg);font-size:.85rem;margin:6px 0 0}.pw-strength{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin:12px 0}.pw-strength-bar{height:7px;border-radius:999px;width:140px;background:var(--border);position:relative;overflow:hidden}.pw-strength-bar:after{content:"";position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;transition:width var(--t) var(--ease),background var(--t) ease}.pw-weak .pw-strength-bar:after{width:33%;background:#dc2626}.pw-medium .pw-strength-bar:after{width:66%;background:#f59e0b}.pw-strong .pw-strength-bar:after{width:100%;background:#16a34a}.pw-checks{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:12px}.pw-checks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.qr-result{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:16px}.qr-img{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;image-rendering:pixelated;box-shadow:var(--shadow)}.stitch-preview{max-width:100%;max-height:420px;border:1px solid var(--border);border-radius:8px;background:repeating-conic-gradient(var(--checker-2) 0 25%,var(--checker-1) 0 50%) 50% /20px 20px}.stitch-list{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-gap:10px;gap:10px}.stitch-list li{position:relative}.stitch-list img{width:100%;height:96px;object-fit:cover;border:1px solid var(--border);border-radius:var(--radius-sm);display:block;transition:border-color var(--t-fast) ease}.stitch-list li:hover img{border-color:var(--brand)}.stitch-remove{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);background:var(--danger-solid);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:transform var(--t-fast) var(--ease)}.stitch-remove:hover{transform:scale(1.12)}.split-grid{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-gap:4px;gap:4px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.split-tile{position:relative;padding:0;border:none;background:none;cursor:pointer;display:block;width:100%}.split-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity var(--t-fast) ease}.split-tile:hover img{opacity:.55}.split-tile:after{content:"⬇";position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity var(--t-fast) ease;pointer-events:none}.split-tile:focus-visible:after,.split-tile:hover:after{opacity:1}.split-tile:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}input[type=color]{width:40px;height:34px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer}.notfound{text-align:center;padding:24px 0 8px}.notfound-code{font-size:4rem;font-weight:800;color:var(--brand);line-height:1;display:flex;align-items:center;justify-content:center;gap:12px}.notfound-bear{font-size:3.4rem}.notfound-title{margin:12px 0 4px}.notfound-desc{color:var(--muted);margin:0 auto 16px;max-width:420px}.notfound .search-box{margin-left:auto;margin-right:auto}.notfound-actions{margin:18px 0 8px}.notfound-tools{margin-top:24px;text-align:left}.result-compare{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-top:16px}.result-compare .cell{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center}.result-compare img{max-width:100%;max-height:220px;border-radius:8px}.result-compare .size{font-weight:600;margin-top:6px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.saving{color:var(--success-fg)}.btn,.saving{font-weight:600}.btn{display:inline-block;background:var(--btn-bg);color:var(--btn-text);border:1px solid transparent;border-radius:var(--radius-sm);padding:10px 20px;font-size:1rem;line-height:1.2;cursor:pointer;box-shadow:0 2px 6px var(--btn-shadow);transition:background var(--t-fast) ease,transform .1s var(--ease),box-shadow var(--t-fast) ease,border-color var(--t-fast) ease}.btn:hover{background:var(--btn-bg-hover);box-shadow:0 4px 12px var(--btn-shadow)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring),0 2px 6px var(--btn-shadow)}.btn[disabled]{opacity:.5;cursor:not-allowed}.tool-error{color:var(--danger-fg);background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:8px;padding:10px 12px;margin-top:12px}.convert-panes{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;align-items:stretch}.pane{display:flex;flex-direction:column}.pane textarea{width:100%;flex:1 1;min-height:200px;resize:vertical;padding:12px;font-size:1rem;line-height:1.7;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;outline:none;transition:border-color var(--t-fast) ease}.pane textarea:focus{border-color:var(--brand)}.pane textarea[readonly]{background:var(--bg)}.pane textarea.json-input{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem;line-height:1.6}.pane-foot{display:flex;align-items:center;justify-content:space-between;min-height:34px;margin-top:8px;color:var(--muted);font-size:.85rem}.btn-sm{padding:5px 14px;font-size:.85rem}.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:none}.btn-secondary:hover{background:var(--bg);border-color:var(--brand)}.json-input{width:100%;resize:vertical;padding:12px;font-size:.9rem;line-height:1.6;border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;outline:none;white-space:pre;overflow-wrap:normal;overflow-x:auto}.json-input:focus{border-color:var(--brand)}.json-input[readonly]{background:var(--bg)}.json-error{background:var(--danger-bg);border:1px solid var(--danger-border);border-left:4px solid var(--danger-solid);border-radius:var(--radius-sm);padding:12px 14px;margin-top:12px}.json-error-msg{display:flex;gap:8px;align-items:baseline;color:var(--danger-fg);font-weight:600}.json-error-msg:before{content:"⚠";flex-shrink:0}.json-error-context{margin:8px 0 0;padding:10px;background:var(--surface);border:1px solid var(--danger-border);border-radius:8px;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:.85rem;line-height:1.5;color:var(--danger-fg-soft);overflow-x:auto}@media (max-width:520px){.convert-panes,.result-compare{grid-template-columns:1fr}}.svg-preview{flex:1 1;min-height:220px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:repeating-conic-gradient(var(--checker-2) 0 25%,var(--checker-1) 0 50%) 50% /20px 20px}.svg-preview img{max-width:100%;max-height:320px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.12))}.emoji-picker{display:flex;flex-wrap:wrap;gap:6px}.emoji-btn{width:40px;height:40px;font-size:1.3rem;line-height:1;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;transition:border-color var(--t-fast) ease,background var(--t-fast) ease,transform var(--t-fast) var(--ease)}.emoji-btn:hover{border-color:var(--brand);transform:translateY(-1px)}.emoji-btn.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 2px var(--focus-ring)}.crop-stage{position:relative;margin:12px auto;max-width:100%;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.crop-stage img{display:block;width:100%;height:100%;pointer-events:none}.crop-box{position:absolute;border:2px solid var(--brand);box-shadow:0 0 0 100vmax rgba(0,0,0,.35);cursor:move;box-sizing:border-box}.crop-box:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 0),linear-gradient(180deg,rgba(255,255,255,.5) 1px,transparent 0);background-size:33.333% 100%,100% 33.333%}.crop-handle{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;background:var(--brand);border:2px solid #fff;border-radius:50%;cursor:nwse-resize;box-shadow:0 1px 4px rgba(0,0,0,.35)}.crop-dims{color:var(--muted);font-size:.9rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.checkerboard{background-image:linear-gradient(45deg,var(--checker-2) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-2) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-2) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-2) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}