/* tools4free.dev site stylesheet: the single source for all pages and tools.
   Sections: 1) shell (tokens, header, side menu, footer) applies everywhere.
             2) site components: scoped to body.site so tool pages never pick them up.
             3) tool sections: scoped to body.tool-<name>. */


/* Order: components first, then the shell, so chrome (menu links, header) wins over component rules. */
/* 2) Site components (body.site) */
.site a {color:var(--link);text-decoration:none}
.site a:hover {text-decoration:underline}
.site h1 {font-size:30px;margin:.2em 0}
.site h2 {margin-top:36px;border-bottom:1px solid var(--line);padding-bottom:6px;font-size:20px}
.site .muted, .site .sub {color:var(--mut)}
.site .sub {margin-top:0}
.site .crumb {font-size:13px;color:var(--mut);margin-bottom:8px}
.site .hero {padding:28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,var(--hero-a),var(--panel))}
.site .hero h1 {font-size:36px}
.site .grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px}
.site .card {display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;color:var(--txt)}
.site a.card:hover {border-color:var(--acc);text-decoration:none}
.site .card h3 {margin:0 0 4px;font-size:17px}
.site .card p {margin:0}
.site .tip {background:var(--card);border-left:4px solid var(--tip);border-radius:6px;padding:12px 14px;margin:12px 0}
.site .tip .t {font-weight:700;color:var(--tip);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.site .tip p {margin:6px 0 0}
.site .ans {color:var(--ok);font-weight:700}
.site .trap {color:var(--trap);font-weight:700}
.site .diff-add {background:var(--ok-bg)}
.site .diff-remove {background:var(--bad-bg)}
.site .diff-line {margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.5}
.site table {width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.site th, .site td {border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.site th {background:var(--surface-2)}
.site .pager {display:flex;justify-content:space-between;margin-top:40px;font-size:14px}
.site .cram li {margin:6px 0}
.site .pg {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:16px 0}
.site .pg-text {font-size:13px;color:var(--mut);margin-bottom:6px}
.site .pg-bar {height:8px;background:var(--surface-2);border-radius:20px;overflow:hidden}
.site .pg-fill {height:100%;background:linear-gradient(90deg,var(--acc),var(--ok));transition:width .25s}
.site .pg-complete .pg-text {color:var(--ok);font-weight:700}
.site .pg-row {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.site .pg-row .pg {flex:1}
.site td .pg {margin:0;padding:6px 10px}
.site .btn-reset {background:none;border:1px solid var(--line);color:var(--mut);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.site .btn-reset:hover {color:var(--trap);border-color:var(--trap)}
.site .tip .t {display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.site .tip input[type=checkbox] {width:17px;height:17px;accent-color:var(--ok);cursor:pointer;margin:0}
.site .tip.done {border-left-color:var(--ok);opacity:.72}
.site .tip.done .t {color:var(--ok)}
.site .pg-badge {font-size:12px;padding:2px 8px;border-radius:20px;background:var(--surface-2);color:var(--mut);white-space:nowrap}
.site .pg-partial {background:var(--partial-bg);color:var(--partial-ink)}
.site .pg-done {background:var(--ok-strong);color:var(--ok)}
.site .note {background:var(--surface-3);border:1px dashed var(--line);border-radius:8px;padding:10px 14px;color:var(--mut);font-size:14px;margin:12px 0}
.site .src {font-size:13px}
.site .src li {margin:3px 0}
.site .btn {display:inline-block;background:var(--surface-2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font:inherit;cursor:pointer;text-decoration:none}
.site .btn:hover {border-color:var(--acc);text-decoration:none}
.site .btn-primary {background:var(--acc);border-color:var(--acc);color:#fff}
.site .facts li {margin:7px 0}
.site .plan {list-style:none;padding-left:0}
.site .plan li {margin:7px 0}
.site .plan label {cursor:pointer}
.site .plan input {accent-color:var(--ok);margin-right:6px}
.site .steps li {margin:9px 0}
.site code {background:var(--surface-2);border-radius:4px;padding:1px 6px;font-size:.92em}
.site .qgrid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.site .qcard {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:12px 0}
.site .qcard h3 {margin:0 0 6px}
.site .qrow {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.site .qopts {display:flex;flex-direction:column;gap:6px;margin:10px 0}
.site .qcheck {cursor:pointer;color:var(--txt)}
.site .qselect {background:var(--surface-2);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit}
.site .btn {background:var(--surface-2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font:inherit;cursor:pointer}
.site .btn:hover {border-color:var(--acc)}
.site .btn-primary {background:var(--acc);border-color:var(--acc);color:#fff}
.site .btn-danger:hover {border-color:var(--trap);color:var(--trap)}
.site .btn-ghost {background:none}
.site .btn-flag.on {border-color:var(--tip);color:var(--tip)}
.site .qtable {margin:8px 0}
.site .qtools {margin-top:28px}
.site .small {font-size:13px}
.site .qhead {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.site .qbadge {background:var(--acc);color:#fff;font-size:12px;padding:3px 10px;border-radius:20px}
.site .qbadge-soft {background:var(--surface-2);color:var(--mut)}
.site .qtimer {background:var(--ok-strong);color:var(--ok);font-variant-numeric:tabular-nums}
.site .qtimer.q-warn {background:#4a1d1d;color:var(--trap)}
.site .qscenario {background:var(--surface-3);border-left:3px solid var(--line);padding:10px 12px;border-radius:6px;color:var(--mut);white-space:pre-line}
.site .qstem {font-size:17px;font-weight:600;white-space:pre-line}
.site .qoptions {display:flex;flex-direction:column;gap:8px;margin-top:12px}
.site .qopt {display:flex;gap:10px;align-items:flex-start;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer}
.site .qopt:hover {border-color:var(--acc)}
.site .qopt input {margin-top:4px;accent-color:var(--acc)}
.site .qopt.is-correct {border-color:var(--ok);background:var(--ok-bg)}
.site .qopt.is-wrong {border-color:var(--trap);background:var(--bad-bg)}
.site .qresult {font-weight:700;margin:10px 0 4px}
.site .qresult.ok {color:var(--ok)}
.site .qresult.bad {color:var(--trap)}
.site .qexpl {margin:6px 0}
.site .qtraps {margin:4px 0 8px;padding-left:20px}
.site .qtraps li {margin:4px 0}
.site .qsrc a {word-break:break-all}
.site .qnavgrid {display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.site .qnum {min-width:38px;padding:6px 0;text-align:center}
.site .qnum.answered {background:var(--hi);border-color:var(--acc)}
.site .qnum.current {outline:2px solid var(--ok)}
.site .qnum.flagged {border-color:var(--tip);color:var(--tip)}
.site .qscore h2 {margin:0;border:0;font-size:30px}
.site .fcard {background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;min-height:220px;margin:12px 0;cursor:pointer;display:flex;flex-direction:column;justify-content:center;text-align:center}
.site .fcard:hover {border-color:var(--acc)}
.site .fcard.flipped {cursor:default;border-color:var(--ok)}
.site .fc-label {color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.site .fc-front {font-size:20px;font-weight:600;margin:0 0 12px}
.site .fc-back {font-size:18px;color:var(--ok);font-weight:700;margin:6px 0}
.site .fc-trap {color:var(--mut);margin:8px 0 0}
.site .fc-trap strong {color:var(--trap)}
.site .qbadge-warn {background:#4a3a1d;color:var(--tip)}
.site .qwarn {background:#2e2a1a;border-left:3px solid var(--tip);padding:8px 12px;border-radius:6px;color:var(--tip);font-size:13px}
.site .qorder {display:flex;flex-direction:column;gap:10px;margin:12px 0 6px}
.site .qoitem {display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 14px;text-align:left;font:inherit;color:var(--txt);background:var(--surface-3);border:1px solid var(--line);border-radius:10px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.site .qoitem:hover {border-color:var(--acc)}
.site .qoitem:focus-visible {outline:3px solid var(--acc);outline-offset:2px}
.site .qonum {flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px dashed var(--mut);color:var(--txt);font-weight:700;font-size:16px;line-height:1}
.site .qotext {flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.site .qoitem.picked {border-color:var(--acc);background:var(--hi)}
.site .qoitem.picked .qonum {border:2px solid var(--acc);background:var(--acc);color:#fff}
.site .qoitem:disabled {opacity:1;cursor:default;color:var(--txt)}
.site .qoitem.is-correct {border-color:var(--ok);background:var(--ok-bg)}
.site .qoitem.is-correct .qonum {background:var(--ok);border-color:var(--ok);color:#06231a}
.site .qoitem.is-wrong {border-color:var(--trap);background:var(--bad-bg)}
.site .qoitem.is-wrong .qonum {background:var(--trap);border-color:var(--trap)}
.site .qoitem.missed {border-color:var(--tip);border-style:dashed}
.site .qoitem.unused {opacity:.55}
.site .qostatus {min-height:1.4em;margin:6px 0 0;color:var(--mut)}
.site .qostatus.qowarn {color:var(--tip);font-weight:600}
.site .qresult.part {color:var(--tip)}
.site .qseq {margin:4px 0 8px;padding-left:24px}
.site .qseq li {margin:4px 0}
@media (max-width:480px) {
  .site .qoitem {padding:12px}
  .site .qonum {width:36px;height:36px}
  .site .qstem {font-size:16px}
}
.site .qmatch {display:grid;grid-template-columns:1fr;gap:16px;margin:12px 0 6px}
.site .qmcol {display:flex;flex-direction:column;gap:10px}
.site .qmhead {margin:0;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.site .qmitem {display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;text-align:left;font:inherit;color:var(--txt);background:var(--surface-3);border:1px solid var(--line);border-radius:10px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.site .qmitem:hover {border-color:var(--acc)}
.site .qmitem:focus-visible {outline:3px solid var(--acc);outline-offset:2px}
.site .qmnum {flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--hi);border:2px solid var(--acc);color:var(--txt);font-weight:700;font-size:15px;line-height:1}
.site .qmletter {border-radius:8px;background:var(--surface-2);border-color:var(--mut)}
.site .qmtext {flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.site .qmto, .site .qmfrom {flex:0 0 auto;min-width:2.2em;text-align:right;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}
.site .qmprompt.active {border-color:var(--tip);background:#33301a;box-shadow:0 0 0 2px var(--tip) inset}
.site .qmprompt.active .qmnum {background:var(--tip);border-color:var(--tip);color:#241c00}
.site .qmprompt.matched {border-color:var(--acc);background:var(--hi)}
.site .qmtarget.used {border-color:var(--acc);background:#262a55}
.site .qmitem:disabled {opacity:1;cursor:default;color:var(--txt)}
.site .qmitem.is-correct {border-color:var(--ok);background:var(--ok-bg)}
.site .qmitem.is-correct .qmnum {background:var(--ok);border-color:var(--ok);color:#06231a}
.site .qmitem.is-wrong {border-color:var(--trap);background:var(--bad-bg)}
.site .qmitem.is-wrong .qmnum {background:var(--trap);border-color:var(--trap)}
.site .qmitem.missed {border-color:var(--tip);border-style:dashed}
.site .qmitem.unused {opacity:.55}
.site .qpairs {margin:4px 0 8px;padding-left:20px}
.site .qpairs li {margin:5px 0}
@media (min-width:760px) {
  .site .qmatch {grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:480px) {
  .site .qmitem {padding:12px}
  .site .qmnum {width:36px;height:36px}
}
.site .kw {border-bottom:2px solid var(--acc);background:rgba(124,108,255,.16);border-radius:3px;padding:0 2px;cursor:help}
.site .kw-cost {border-color:var(--ok);background:rgba(62,207,142,.14)}
.site .kw-effort {border-color:#4fc3f7;background:rgba(79,195,247,.14)}
.site .kw-code {border-color:#b388ff;background:rgba(179,136,255,.16)}
.site .kw-recovery {border-color:var(--tip);background:rgba(255,200,87,.14)}
.site .kw-scope {border-color:#5ee6d0;background:rgba(94,230,208,.13)}
.site .kw-tier {border-color:#ff9f43;background:rgba(255,159,67,.14)}
.site .kw-retired {border-color:var(--trap);background:rgba(255,107,107,.16)}
.site .kw-hybrid {border-color:#90caf9;background:rgba(144,202,249,.14)}
.site .kw-identity {border-color:#f48fb1;background:rgba(244,143,177,.14)}
.site .kw-compliance {border-color:#ce93d8;background:rgba(206,147,216,.14)}
.site .kw-multi {border-color:var(--txt);background:rgba(230,231,245,.12)}
.site .kw-other {border-color:var(--line)}
.site .kwlegend {display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--mut);margin:0 0 10px}

/* 0) Fonts: self-hosted in assets/fonts (no CDN) */
/* latin-ext */
@font-face {font-family:'Inter'; font-style:normal; font-weight:400 900; font-display:swap; src:url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family:'Inter'; font-style:normal; font-weight:400 900; font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face {font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600 800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600 800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Shell */
:root {--bg:#0f1020;--panel:#14162b;--card:#181a33;--line:#2a2d55;--txt:#e6e7f5;--mut:#9a9cc4;--acc:#7c6cff;--ok:#3ecf8e;--trap:#ff6b6b;--tip:#ffc857;--side:270px;--top:56px;
  --link:#a99cff;--brand-accent:#9b8cff;--surface-2:#22244a;--surface-3:#1b1d3b;--hover:#1f2147;--hero-a:#1d1a4a;--hi:#2c2a5e;--ok-bg:#173a2e;--bad-bg:#3a1a22;--ok-strong:#1d4a3a;--partial-bg:#3a3260;--partial-ink:#d8d2ff;color-scheme:dark}
html[data-theme="light"] {--bg:#f5f6fb;--panel:#ffffff;--card:#ffffff;--line:#d6d9ea;--txt:#1b1d33;--mut:#55587a;--acc:#5b4ce6;--ok:#13875a;--trap:#c62f3d;--tip:#9a6400;--link:#4b3fd0;--brand-accent:#5b4ce6;--surface-2:#eceefb;--surface-3:#f2f3fb;--hover:#e8eaf7;--hero-a:#e9e6ff;--hi:#e3e0fb;--ok-bg:#dff4ea;--bad-bg:#fde6e9;--ok-strong:#d3eedf;--partial-bg:#e4e0f8;--partial-ink:#3b2fa3;color-scheme:light}
 .topbar {position:fixed;inset:0 0 auto 0;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line);z-index:20}
 .brand {display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
 .brand-mark {height:32px;width:32px;display:block}
 .brand-word {font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:19px;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--txt);white-space:nowrap}
 .brand-accent {color:var(--brand-accent)}
 .brand-tld {color:var(--mut);font-weight:500}
 .burger {display:none;background:none;border:1px solid var(--line);color:var(--txt);font-size:18px;border-radius:6px;padding:2px 10px;cursor:pointer}
 .theme-toggle {margin-left:auto;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap}
 .theme-toggle:hover {border-color:var(--acc)}
 .shell {display:flex;padding-top:var(--top)}
 .sidebar {position:fixed;top:var(--top);bottom:0;left:0;width:var(--side);overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;font-size:14px}
 .sidebar a {display:block;color:var(--mut);padding:5px 10px;border-radius:6px}
 .sidebar a:hover {background:var(--hover);color:var(--txt);text-decoration:none}
 .sidebar a.active {background:var(--acc);color:#fff}
 .sidebar .cat {margin-top:14px;font-weight:700;color:var(--txt);text-transform:uppercase;font-size:12px;letter-spacing:.06em}
 .sidebar ul {list-style:none;margin:0;padding-left:12px}
 .sidebar ul.collapsed {display:none}
 .nav-row {display:flex;align-items:center}
 .nav-row a {flex:1}
 .nav-label {flex:1;padding:5px 10px;color:var(--txt);font-weight:600;cursor:pointer;user-select:none}
 .nav-toggle {background:none;border:0;color:var(--mut);cursor:pointer;width:18px;padding:0;font-size:11px;line-height:1}
 .nav-toggle:hover {color:var(--txt)}
 main {flex:1;margin-left:var(--side);padding:32px 40px 40px;max-width:calc(1000px + var(--side));display:flex;flex-direction:column;min-height:calc(100vh - var(--top));min-width:0}
 .foot {margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
main > :nth-last-child(2) {margin-bottom:60px}
@media (max-width:860px) {
   .burger {display:block}
   .sidebar {transform:translateX(-100%);transition:transform .2s;z-index:15}
   .nav-open .sidebar {transform:none}
   main {margin-left:0;padding:24px 18px}
}
 .shell {width:100%}
 .sidebar a,  .brand {text-decoration:none}
 .tool-main {padding:0;max-width:none;min-height:calc(100vh - var(--top))}

/* Ads (placed by assets/js/ads.js; never sticky, never inside the menu, header or footer) */
 .ad-slot {margin:0;color:var(--mut);font-size:12px;text-align:center}
 .ad-label {display:block;margin-bottom:4px;letter-spacing:.04em;text-transform:uppercase}
 .ad-top {margin-bottom:24px}
 .ad-bottom {margin-top:24px}
 .ad-mock {display:flex;align-items:center;justify-content:center;min-height:90px;border:1px dashed var(--line);border-radius:8px;background:var(--surface-3);color:var(--mut);font-size:14px}
 .adsbygoogle {display:block;min-height:90px}
 .ad-rail .adsbygoogle {display:inline-block;width:160px;height:600px;min-height:0}
 .ad-rail {display:none}
 .ad-rail .ad-mock {width:160px;height:600px;min-height:0}
@media (min-width:1400px) {
   main {padding-right:24px}
   .ad-rail {display:block;flex:0 0 160px;align-self:flex-start;margin:32px 16px 0 0}
}
* {box-sizing:border-box}
body {margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6}

/* 3) Tools: each tool's styles are scoped to body.tool-<name> */
/* Tool: app-store-listing-generator (body.tool-appstore) */
 .tool-app {display:flex;flex:1 1 auto;min-width:0}
.tool-app > * {min-width:0}
 .tool-appstore {background:var(--t-page)}
 .tool-appstore {--t-brand-1: #4f46e5;
    --t-brand-2: #7c3aed;
    --t-brand-3: #9333ea;
    --t-panel: #111118;
    --t-panel-2: #0a0a0f;
    --t-line: #1e1e2e;}
 .tool-appstore {margin: 0; padding: 0; box-sizing: border-box;}
 .tool-appstore {font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--t-panel-2); color:var(--t-ink); display: flex; min-height: 100vh;}
 .tool-appstore .controls {width: 400px; min-width: 400px; background: var(--t-panel); border-right: 1px solid var(--t-line); padding: 26px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;}
 .tool-appstore .controls h1 {font-size: 20px; font-weight: 900; background: linear-gradient(135deg, #818cf8, #a78bfa, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.3px;}
 .tool-appstore .controls .subtitle {font-size: 12px; color: var(--t-dim); font-weight: 500; letter-spacing: 0.5px;}
 .tool-appstore .section {display: flex; flex-direction: column; gap: 8px;}
 .tool-appstore .section-label {font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #6366f1;}
 .tool-appstore .toggle-group {display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--t-line); background: var(--t-panel-2);}
 .tool-appstore .toggle-btn {flex: 1; padding: 11px 16px; background: transparent; color: var(--t-dim); border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: inherit;}
 .tool-appstore .toggle-btn.active {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2)); color: var(--t-ink); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);}
 .tool-appstore .toggle-btn:hover:not(.active) {background: var(--t-page); color: var(--t-dim);}
 .tool-appstore .grid2 {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
 .tool-appstore .fmt-btn {padding: 11px 12px; background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 10px; color: #aaa; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; transition: all 0.18s ease; font-family: inherit; line-height: 1.25;}
 .tool-appstore .fmt-btn small {display: block; font-size: 9.5px; font-weight: 500; color: #5a5a72; margin-top: 3px; letter-spacing: 0.2px;}
 .tool-appstore .fmt-btn:hover {border-color: var(--t-brand-1); color: #ddd;}
 .tool-appstore .fmt-btn.active {border-color: #6366f1; background: rgba(99, 102, 241, 0.1); color: var(--t-ink); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.07);}
 .tool-appstore .fmt-btn.active small {color: var(--t-tint);}
 .tool-appstore .input-group {display: flex; flex-direction: column; gap: 5px;}
 .tool-appstore .input-group label {font-size: 11px; font-weight: 600; color: var(--t-dim); letter-spacing: 0.3px;}
 .tool-appstore select,  .tool-appstore .input-group input,  .tool-appstore .input-group textarea {background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 10px; padding: 11px 14px; color: var(--t-ink); font-size: 14px; font-family: inherit; outline: none; transition: border 0.2s ease, box-shadow 0.2s ease; width: 100%;}
 .tool-appstore select:focus,  .tool-appstore .input-group input:focus,  .tool-appstore .input-group textarea:focus {border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);}
 .tool-appstore .input-group textarea {resize: vertical; min-height: 58px;}
 .tool-appstore .presets {display: flex; flex-direction: column; gap: 5px;}
 .tool-appstore .preset-btn {width: 100%; padding: 10px 12px; background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 10px; color: #999; font-size: 12px; font-weight: 500; cursor: pointer; text-align: left; transition: all 0.18s ease; font-family: inherit; display: flex; align-items: center; gap: 10px;}
 .tool-appstore .preset-btn:hover {border-color: var(--t-brand-1); background: var(--t-panel); color: #ddd;}
 .tool-appstore .preset-btn.active-preset {border-color: #6366f1; background: rgba(99, 102, 241, 0.08); color: #fff; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.06);}
 .tool-appstore .preset-num {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2)); color: #fff; font-size: 10px; font-weight: 700; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
 .tool-appstore .file-upload input[type="file"] {display: none;}
 .tool-appstore .upload-btn,  .tool-appstore .download-btn {width: 100%; padding: 13px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; font-family: inherit; text-align: center; border: none;}
 .tool-appstore .upload-btn {background: var(--t-panel-2); border: 2px dashed var(--t-raised); color: var(--t-dim); display: block;}
 .tool-appstore .upload-btn:hover {border-color: #6366f1; color: var(--t-ink); background: var(--t-panel);}
 .tool-appstore .download-btn {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2), var(--t-brand-3)); color: var(--t-ink); font-size: 14px; letter-spacing: 0.3px; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);}
 .tool-appstore .download-btn:hover {transform: translateY(-1px); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);}
 .tool-appstore .download-btn:disabled {opacity: 0.6; cursor: progress; transform: none;}
 .tool-appstore .file-name {font-size: 11px; color: #6366f1; margin-top: 4px; text-align: center; word-break: break-all;}
 .tool-appstore .hint {font-size: 11px; color: var(--t-dim); text-align: center; font-weight: 500;}
 .tool-appstore .spec-pill {font-size: 11px; color: var(--t-tint); background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; padding: 8px 10px; text-align: center; font-weight: 600; letter-spacing: 0.2px;}
 .tool-appstore .row {display: flex; gap: 8px;}
 .tool-appstore .hidden {display: none !important;}
 .tool-appstore .preview-area {flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; overflow: auto; background: radial-gradient(circle at 50% 0%, #14141f 0%, #0a0a0f 70%);}
 .tool-appstore .stage {box-shadow: 0 25px 90px rgba(0,0,0,0.7); border-radius: 6px; overflow: hidden;}
 .tool-appstore .canvas {position: relative; overflow: hidden; transform-origin: top left; display: flex; flex-direction: column; align-items: center;}
 .tool-appstore .canvas-bg {position: absolute; inset: 0; background: linear-gradient(155deg, #312e81 0%, #4f46e5 28%, #6d28d9 58%, #9333ea 86%, #7c3aed 100%); z-index: 0;}
 .tool-appstore .canvas-vignette {position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.28) 100%); pointer-events: none;}
 .tool-appstore .canvas-pattern {position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;}
 .tool-appstore .ring {position: absolute; border-radius: 50%; aspect-ratio: 1; box-sizing: border-box;}
 .tool-appstore .orb {position: absolute; border-radius: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(196,181,253,0.24) 0%, rgba(139,92,246,0.10) 45%, transparent 72%);}
 .tool-appstore .header-section {position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex-shrink: 0;}
 .tool-appstore .headline {font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: #ffffff; font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; text-align: center; width: 100%; text-shadow: 0 2px 30px rgba(0,0,0,0.25), 0 0 50px rgba(196,181,253,0.18);}
 .tool-appstore .header-accent {height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);}
 .tool-appstore .subheadline {color: rgba(255,255,255,0.86); font-weight: 500; line-height: 1.4; text-align: center; width: 100%; letter-spacing: 0;}
 .tool-appstore .device-section {position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;}
 .tool-appstore .device-frame {position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #4a4a5a 0%, #2a2a3a 18%, #16161f 50%, #2a2a3a 82%, #4a4a5a 100%);}
 .tool-appstore .device-frame::before {content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); z-index: 10;}
 .tool-appstore .device-screen {width: 100%; height: 100%; background: #ffffff; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center;}
 .tool-appstore .device-screen img {width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;}
 .tool-appstore .screen-placeholder {color: #aaa; font-size: 18px; font-weight: 600; text-align: center; padding: 40px; letter-spacing: 0.2px; line-height: 1.5;}
 .tool-appstore .device-notch {position: absolute; z-index: 5; background: #0c0c14;}
 .tool-appstore .device-punch {position: absolute; z-index: 5; background: #0c0c14; border-radius: 50%;}
 .tool-appstore .closing-content {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; width: 100%;}
 .tool-appstore .divider-line {background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);}
 .tool-appstore .checkmarks {display: flex; flex-direction: column; align-items: flex-start; margin: 0 auto;}
 .tool-appstore .check-item {display: flex; align-items: center; color: rgba(255,255,255,0.92); font-weight: 600; letter-spacing: -0.01em;}
 .tool-appstore .check-icon {background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #ffffff; font-weight: 700;}
 .tool-appstore .fullbleed-img {position: absolute; inset: 0; z-index: 1;}
 .tool-appstore .fullbleed-img img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}
 .tool-appstore .fullbleed-scrim {position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(49,46,129,0.96) 0%, rgba(76,29,149,0.88) 55%, rgba(124,58,237,0) 100%);}
 .tool-appstore .fullbleed-header {position: relative; z-index: 3; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
 .tool-appstore .feature-content {position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center;}
 .tool-appstore .feature-left {display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 64px; width: 100%;}
 .tool-appstore .feature-brandrow {display: flex; align-items: center; gap: 18px;}
 .tool-appstore .feature-icon {width: 88px; height: 88px; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;}
 .tool-appstore .feature-icon.fallback {background: linear-gradient(145deg, #ffffff, #e9e7ff); box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.85);}
 .tool-appstore .feature-icon.logo {background: transparent;}
 .tool-appstore .feature-icon img {width: 100%; height: 100%; object-fit: cover;}
 .tool-appstore .feature-icon span {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 32px; color: #5b21b6;}
 .tool-appstore .feature-appname {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 42px; letter-spacing: -0.02em;}
 .tool-appstore .feature-headline {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 58px; line-height: 1.02; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0,0,0,0.28); max-width: 90%;}
 .tool-appstore .feature-sub {color: rgba(255,255,255,0.9); font-weight: 500; font-size: 24px; line-height: 1.35; max-width: 82%;}
 .tool-appstore .feature-pills {display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap;}
 .tool-appstore .feature-pill {background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); color: #fff; font-weight: 600; font-size: 17px; padding: 8px 16px; border-radius: 999px; display: flex; align-items: center; gap: 7px;}
.tool-appstore {--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25)}
.tool-appstore .export-dark {display:flex;--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25);color:#e0e0e0}
html[data-theme="light"] .tool-appstore {--t-page:#f5f6fb;--t-surface:#ffffff;--t-raised:#eef0f8;--t-rule:#d6d9ea;--t-ink:#1b1d33;--t-dim:#55587a;--t-glass:rgba(255,255,255,.8);--t-edge:rgba(100,116,139,.28);--t-sheen:rgba(15,23,42,.03);--t-tint:#4338ca;--t-chip:#e4e2fb;--t-chip-hover:#d3cffa;--t-shade:rgba(15,23,42,.07);--t-panel:#ffffff;--t-panel-2:#eef0f8;--t-line:#d6d9ea}

/* Tool: asset-generator (body.tool-asset) */
  .tool-asset {background:var(--t-page)}
 .tool-asset {--t-brand-1: #4f46e5;
    --t-brand-2: #7c3aed;
    --t-brand-3: #9333ea;
    --t-panel: #111118;
    --t-panel-2: #0a0a0f;
    --t-line: #1e1e2e;}
 .tool-asset {margin: 0; padding: 0; box-sizing: border-box;}
 .tool-asset {font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--t-panel-2); color:var(--t-ink); display: flex; min-height: 100vh;}
 .tool-asset .controls {width: 420px; min-width: 420px; background: var(--t-panel); border-right: 1px solid var(--t-line); padding: 26px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; max-height: 100vh;}
 .tool-asset .controls h1 {font-size: 20px; font-weight: 900; background: linear-gradient(135deg, #818cf8, #a78bfa, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.3px;}
 .tool-asset .controls .subtitle {font-size: 12px; color: var(--t-dim); font-weight: 500; letter-spacing: 0.5px;}
 .tool-asset .section {display: flex; flex-direction: column; gap: 8px;}
 .tool-asset .section-label {font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #6366f1; display: flex; align-items: center; justify-content: space-between;}
 .tool-asset .toggle-group {display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--t-line); background: var(--t-panel-2);}
 .tool-asset .toggle-btn {flex: 1; padding: 10px 8px; background: transparent; color: var(--t-dim); border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: inherit;}
 .tool-asset .toggle-btn.active {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2)); color: var(--t-ink); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);}
 .tool-asset .toggle-btn:hover:not(.active) {background: var(--t-page); color: var(--t-dim);}
 .tool-asset .grid2 {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
 .tool-asset .grid3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;}
 .tool-asset .fmt-btn {padding: 10px 12px; background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 10px; color: #aaa; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; transition: all 0.18s ease; font-family: inherit; line-height: 1.25;}
 .tool-asset .fmt-btn small {display: block; font-size: 9.5px; font-weight: 500; color: #5a5a72; margin-top: 3px; letter-spacing: 0.2px;}
 .tool-asset .fmt-btn:hover {border-color: var(--t-brand-1); color: #ddd;}
 .tool-asset .fmt-btn.active {border-color: #6366f1; background: rgba(99, 102, 241, 0.1); color: var(--t-ink); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.07);}
 .tool-asset .fmt-btn.active small {color: var(--t-tint);}
 .tool-asset .input-group {display: flex; flex-direction: column; gap: 5px;}
 .tool-asset .input-group label {font-size: 11px; font-weight: 600; color: var(--t-dim); letter-spacing: 0.3px;}
 .tool-asset select,  .tool-asset .input-group input,  .tool-asset .input-group textarea {background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 10px; padding: 10px 13px; color: var(--t-ink); font-size: 13px; font-family: inherit; outline: none; transition: border 0.2s ease, box-shadow 0.2s ease; width: 100%;}
 .tool-asset select:focus,  .tool-asset .input-group input:focus,  .tool-asset .input-group textarea:focus {border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);}
 .tool-asset .input-group textarea {resize: vertical; min-height: 54px;}
 .tool-asset .input-group input[type="color"] {padding: 4px; height: 40px; cursor: pointer;}
 .tool-asset .input-group input[type="range"] {padding: 0; height: 24px; accent-color: #6366f1; border: none; background: transparent;}
 .tool-asset .range-row {display: flex; align-items: center; gap: 10px;}
 .tool-asset .range-row input[type="range"] {flex: 1;}
 .tool-asset .range-val {font-size: 11px; color: var(--t-tint); font-weight: 600; min-width: 42px; text-align: right;}
 .tool-asset .presets {display: flex; flex-direction: column; gap: 5px;}
 .tool-asset .preset-btn {width: 100%; padding: 9px 12px; background: var(--t-panel-2); border: 1px solid var(--t-line); border-radius: 10px; color: #999; font-size: 12px; font-weight: 500; cursor: pointer; text-align: left; transition: all 0.18s ease; font-family: inherit; display: flex; align-items: center; gap: 10px;}
 .tool-asset .preset-btn:hover {border-color: var(--t-brand-1); background: var(--t-panel); color: #ddd;}
 .tool-asset .preset-btn.active-preset {border-color: #6366f1; background: rgba(99, 102, 241, 0.08); color: #fff; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.06);}
 .tool-asset .preset-num {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2)); color: #fff; font-size: 10px; font-weight: 700; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
 .tool-asset .file-upload input[type="file"] {display: none;}
 .tool-asset .upload-btn,  .tool-asset .download-btn,  .tool-asset .action-btn {width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; font-family: inherit; text-align: center; border: none;}
 .tool-asset .upload-btn {background: var(--t-panel-2); border: 2px dashed var(--t-raised); color: var(--t-dim); display: block;}
 .tool-asset .upload-btn:hover {border-color: #6366f1; color: var(--t-ink); background: var(--t-panel);}
 .tool-asset .download-btn {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2), var(--t-brand-3)); color: var(--t-ink); font-size: 14px; letter-spacing: 0.3px; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);}
 .tool-asset .download-btn:hover {transform: translateY(-1px); box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);}
 .tool-asset .download-btn:disabled,  .tool-asset .action-btn:disabled {opacity: 0.6; cursor: progress; transform: none;}
 .tool-asset .action-btn {background: var(--t-panel-2); border: 1px solid var(--t-line); color: var(--t-dim);}
 .tool-asset .action-btn:hover {border-color: #6366f1; color: var(--t-ink);}
 .tool-asset .file-name {font-size: 11px; color: #6366f1; margin-top: 4px; text-align: center; word-break: break-all;}
 .tool-asset .hint {font-size: 11px; color: var(--t-dim); text-align: center; font-weight: 500;}
 .tool-asset .spec-pill {font-size: 11px; color: var(--t-tint); background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; padding: 8px 10px; text-align: center; font-weight: 600; letter-spacing: 0.2px;}
 .tool-asset .row {display: flex; gap: 8px;}
 .tool-asset .row > * {flex: 1;}
 .tool-asset .hidden {display: none !important;}
 .tool-asset .switch {position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer;}
 .tool-asset .switch input {display: none;}
 .tool-asset .switch .track {position: absolute; inset: 0; border-radius: 999px; background: #26263a; transition: background 0.2s;}
 .tool-asset .switch .knob {position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #777; transition: all 0.2s;}
 .tool-asset .switch input:checked + .track {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2));}
 .tool-asset .switch input:checked + .track + .knob {left: 21px; background: #fff;}
 .tool-asset .swatches {display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;}
 .tool-asset .swatch {aspect-ratio: 1; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: all 0.15s; position: relative;}
 .tool-asset .swatch:hover {transform: scale(1.06);}
 .tool-asset .swatch.active {border-color: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,0.5);}
 .tool-asset .swatch-name {position: absolute; bottom: -16px; left: 0; right: 0; font-size: 8px; color: #666; text-align: center; white-space: nowrap; overflow: hidden;}
 .tool-asset .subrow {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px;}
 .tool-asset .subrow label {font-size: 12px; color: var(--t-dim); font-weight: 500;}
 .tool-asset .group-title {font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #4a4a5e; text-transform: uppercase; margin-top: 4px;}
 .tool-asset .preview-area {flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; overflow: auto; background: radial-gradient(circle at 50% 0%, #14141f 0%, #0a0a0f 70%);}
 .tool-asset .stage {box-shadow: 0 25px 90px rgba(0,0,0,0.7); border-radius: 6px; overflow: hidden;}
 .tool-asset .stage.alpha-grid {background: repeating-conic-gradient(#26262f 0% 25%, #17171f 0% 50%) 0 0 / 24px 24px;}
 .tool-asset .canvas {position: relative; overflow: hidden; transform-origin: top left; display: flex; flex-direction: column; align-items: center;}
 .tool-asset .canvas-bg {position: absolute; inset: 0; z-index: 0;}
 .tool-asset .canvas-vignette {position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.28) 100%); pointer-events: none;}
 .tool-asset .canvas-pattern {position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;}
 .tool-asset .ring {position: absolute; border-radius: 50%; aspect-ratio: 1; box-sizing: border-box;}
 .tool-asset .orb {position: absolute; border-radius: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(196,181,253,0.24) 0%, rgba(139,92,246,0.10) 45%, transparent 72%);}
 .tool-asset .fullbleed-img {position: absolute; inset: 0; z-index: 1;}
 .tool-asset .fullbleed-img img {width: 100%; height: 100%; object-fit: cover; object-position: top center;}
 .tool-asset .fullbleed-scrim {position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(49,46,129,0.96) 0%, rgba(76,29,149,0.88) 55%, rgba(124,58,237,0) 100%);}
 .tool-asset .content-col {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%;}
 .tool-asset .text-block {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex-shrink: 0;}
 .tool-asset .headline {font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; text-align: center; width: 100%;}
 .tool-asset .header-accent {height: 4px; border-radius: 2px;}
 .tool-asset .subheadline {font-weight: 500; line-height: 1.4; text-align: center; width: 100%; letter-spacing: 0;}
 .tool-asset .checkmarks {display: flex; flex-direction: column; align-items: flex-start; margin: 0 auto;}
 .tool-asset .check-item {display: flex; align-items: center; font-weight: 600; letter-spacing: -0.01em;}
 .tool-asset .check-icon {border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; border: 1px solid transparent;}
 .tool-asset .color-swatch {width: 26px; height: 26px; border-radius: 8px; border: 2px solid #2a2a3a; cursor: pointer; flex-shrink: 0; transition: all 0.15s;}
 .tool-asset .color-swatch:hover {transform: scale(1.1);}
 .tool-asset .color-swatch.active {border-color: #fff; box-shadow: 0 0 0 2px rgba(99,102,241,0.5);}
 .tool-asset .device-section {position: relative; display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;}
 .tool-asset .frame-wrap {display: flex; align-items: center; justify-content: center;}
 .tool-asset .device-frame {position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #4a4a5a 0%, #2a2a3a 18%, #16161f 50%, #2a2a3a 82%, #4a4a5a 100%);}
 .tool-asset .device-frame::before {content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); z-index: 10;}
 .tool-asset .device-screen {width: 100%; height: 100%; background: #ffffff; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center;}
 .tool-asset .device-screen img {width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;}
 .tool-asset .screen-placeholder {color: #aaa; font-size: 18px; font-weight: 600; text-align: center; padding: 40px; letter-spacing: 0.2px; line-height: 1.5;}
 .tool-asset .device-notch {position: absolute; z-index: 5; background: #0c0c14;}
 .tool-asset .device-punch {position: absolute; z-index: 5; background: #0c0c14; border-radius: 50%;}
 .tool-asset .monitor {display: flex; flex-direction: column; align-items: center;}
 .tool-asset .monitor-neck {background: linear-gradient(180deg, #6e6e7a 0%, #b9b9c4 30%, #cfcfd8 50%, #a6a6b2 78%, #83838e 100%); clip-path: polygon(30% 0%, 70% 0%, 88% 100%, 12% 100%);}
 .tool-asset .monitor-base {background: linear-gradient(180deg, #dcdce4 0%, #b4b4bf 45%, #8b8b96 80%, #6b6b76 100%);}
 .tool-asset .laptop {display: flex; flex-direction: column; align-items: center;}
 .tool-asset .laptop-deck {position: relative; background: linear-gradient(180deg, #c2c2cc 0%, #9a9aa6 70%, #6f6f7a 100%);}
 .tool-asset .laptop-notch {position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #8f8f9c, #b3b3bf);}
 .tool-asset .browser {display: flex; flex-direction: column; overflow: hidden;}
 .tool-asset .browser-chrome {display: flex; align-items: center; flex-shrink: 0; background: linear-gradient(180deg, #f1f2f5, #e4e5ea); border-bottom: 1px solid #d2d3da; position: relative;}
 .tool-asset .traffic {display: flex; align-items: center; flex-shrink: 0;}
 .tool-asset .traffic span {border-radius: 50%; display: block;}
 .tool-asset .t-red {background: #ff5f57;}
 .tool-asset .t-yellow {background: #febc2e;}
 .tool-asset .t-green {background: #28c840;}
 .tool-asset .url-pill {background: #ffffff; border: 1px solid #d8d9e0; color: #5b5b6b; font-weight: 500; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;}
 .tool-asset .win-btns {display: flex; align-items: center; margin-left: auto; flex-shrink: 0; color: #5b5b6b; font-family: 'Inter', sans-serif;}
 .tool-asset .win-btns span {display: flex; align-items: center; justify-content: center;}
 .tool-asset .win-tab {background: #ffffff; border: 1px solid #d8d9e0; border-bottom: none; display: flex; align-items: center; color: #44444f; font-weight: 600; overflow: hidden; white-space: nowrap;}
 .tool-asset .frame2-wrap {position: absolute; z-index: 3; transform: translate(-50%, -50%);}
 .tool-asset .ag-annotations {position: absolute; inset: 0; z-index: 40; pointer-events: none;}
 .tool-asset .ann {position: absolute; pointer-events: auto; cursor: grab; transform: translate(-50%, -50%);}
 .tool-asset .ann:active {cursor: grabbing;}
 .tool-asset .ann-box {border-style: solid; border-color: #f43f5e; background: rgba(244,63,94,0.07); border-radius: 8px;}
 .tool-asset .ann-redact {background: #0f172a;}
 .tool-asset .ann-step {background: linear-gradient(135deg, var(--t-brand-1), var(--t-brand-2)); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Inter', sans-serif; box-shadow: 0 2px 12px rgba(0,0,0,0.35);}
 .tool-asset .ann-arrow {display: flex; align-items: center;}
 .tool-asset .ann-arrow .shaft {flex: 1; background: #f43f5e; border-radius: 99px;}
 .tool-asset .ann-arrow .head {width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #f43f5e;}
 .tool-asset .ag-badges {position: absolute; left: 0; right: 0; z-index: 35; display: flex; align-items: center; justify-content: center;}
 .tool-asset .store-badge {display: flex; align-items: center; background: #000; border-style: solid; border-color: #a6a6a6; color: #fff;}
 .tool-asset .ag-guides {position: absolute; inset: 0; z-index: 60; pointer-events: none;}
 .tool-asset .ag-guides .g-v {position: absolute; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: rgba(56,189,248,0.65);}
 .tool-asset .ag-guides .g-h {position: absolute; left: 0; right: 0; height: 3px; transform: translateY(-50%); background: rgba(56,189,248,0.65);}
 .tool-asset .ag-guides .g-safe {position: absolute; inset: 5%; border: 3px dashed rgba(251,191,36,0.75); border-radius: 10px;}
 .tool-asset .preview-area.dropping {outline: 3px dashed #6366f1; outline-offset: -12px;}
 .tool-asset .feature-content {position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center;}
 .tool-asset .feature-left {display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 64px; width: 100%;}
 .tool-asset .feature-brandrow {display: flex; align-items: center; gap: 18px;}
 .tool-asset .feature-icon {width: 88px; height: 88px; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;}
 .tool-asset .feature-icon.fallback {background: linear-gradient(145deg, #ffffff, #e9e7ff); box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.85);}
 .tool-asset .feature-icon.logo {background: transparent;}
 .tool-asset .feature-icon img {width: 100%; height: 100%; object-fit: cover;}
 .tool-asset .feature-icon span {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 32px; color: #5b21b6;}
 .tool-asset .feature-appname {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 42px; letter-spacing: -0.02em;}
 .tool-asset .feature-headline {font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff; font-size: 58px; line-height: 1.02; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0,0,0,0.28); max-width: 90%;}
 .tool-asset .feature-sub {color: rgba(255,255,255,0.9); font-weight: 500; font-size: 24px; line-height: 1.35; max-width: 82%;}
 .tool-asset .feature-pills {display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap;}
 .tool-asset .feature-pill {background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); color: #fff; font-weight: 600; font-size: 17px; padding: 8px 16px; border-radius: 999px; display: flex; align-items: center; gap: 7px;}
.tool-asset {--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25)}
.tool-asset .export-dark {display:flex;--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25);color:#e0e0e0}
html[data-theme="light"] .tool-asset {--t-page:#f5f6fb;--t-surface:#ffffff;--t-raised:#eef0f8;--t-rule:#d6d9ea;--t-ink:#1b1d33;--t-dim:#55587a;--t-glass:rgba(255,255,255,.8);--t-edge:rgba(100,116,139,.28);--t-sheen:rgba(15,23,42,.03);--t-tint:#4338ca;--t-chip:#e4e2fb;--t-chip-hover:#d3cffa;--t-shade:rgba(15,23,42,.07);--t-panel:#ffffff;--t-panel-2:#eef0f8;--t-line:#d6d9ea}

/* Tool: image-converter (body.tool-converter) */
 .tool-converter {background:var(--t-page)}
 .tool-converter {margin: 0; padding: 0; box-sizing: border-box;}
 .tool-converter {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--t-surface);
            color: var(--t-ink);
            min-height: 100vh;
            padding: 2rem 1rem;}
 .tool-converter .container {max-width: 960px; margin: 0 auto;}
 .tool-converter h1 {text-align: center;
            font-size: 2rem;
            margin-bottom: 0.25rem;
            background: linear-gradient(135deg, #818cf8, #a78bfa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;}
 .tool-converter .subtitle {text-align: center; color: var(--t-dim); margin-bottom: 1.5rem; font-size: 0.95rem;}
 .tool-converter .drop-zone {border: 2px dashed #4f46e5;
            border-radius: 16px;
            padding: 2.5rem 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(79, 70, 229, 0.05);}
 .tool-converter .drop-zone:hover,  .tool-converter .drop-zone.dragover {border-color: #818cf8;
            background: rgba(79, 70, 229, 0.12);
            transform: scale(1.01);}
 .tool-converter .drop-zone-icon {font-size: 3rem; margin-bottom: 1rem;}
 .tool-converter .drop-zone p {font-size: 1.1rem; color: var(--t-ink);}
 .tool-converter .drop-zone .hint {font-size: 0.85rem; color: var(--t-dim); margin-top: 0.5rem;}
 .tool-converter .drop-zone input[type="file"] {display: none;}
 .tool-converter .browse-btn {display: inline-block; margin-top: 1rem; padding: 0.6rem 1.5rem;
            background: #4f46e5; color: var(--t-ink); border: none; border-radius: 8px;
            font-size: 0.95rem; cursor: pointer; transition: background 0.2s;}
 .tool-converter .browse-btn:hover {background: #6366f1;}
 .tool-converter .options {background: var(--t-raised); border: 1px solid var(--t-rule); border-radius: 12px;
            padding: 1.25rem; margin: 1.5rem 0;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem; align-items: start;}
 .tool-converter .opt {display: flex; flex-direction: column; gap: 0.5rem;}
 .tool-converter .opt > label {font-size: 0.85rem; color: var(--t-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;}
 .tool-converter .opt select,  .tool-converter .opt input[type="number"] {background: var(--t-surface); color: var(--t-ink); border: 1px solid var(--t-rule);
            border-radius: 8px; padding: 0.55rem 0.7rem; font-size: 0.95rem;}
 .tool-converter .opt input[type="range"] {width: 100%; accent-color: #6366f1;}
 .tool-converter .range-row {display: flex; align-items: center; gap: 0.75rem;}
 .tool-converter .range-value {background: var(--t-surface); padding: 0.3rem 0.7rem; border-radius: 6px;
            font-weight: 600; color: #a78bfa; min-width: 78px; text-align: center; font-size: 0.85rem;}
 .tool-converter .opt .note {font-size: 0.78rem; color: var(--t-dim);}
 .tool-converter .opt.hidden {display: none;}
 .tool-converter .opt input[type="color"] {width: 48px; height: 36px; border: 1px solid var(--t-rule); border-radius: 6px; background: var(--t-surface); cursor: pointer;}
 .tool-converter .color-row {display: flex; align-items: center; gap: 0.6rem;}
 .tool-converter .presets {display: flex; flex-wrap: wrap; gap: 0.5rem;}
 .tool-converter .preset-btn {padding: 0.45rem 0.85rem; background: var(--t-chip); color: var(--t-tint);
            border: 1px solid #4338ca; border-radius: 8px; font-size: 0.82rem; cursor: pointer; transition: all 0.15s;}
 .tool-converter .preset-btn:hover {background: var(--t-chip-hover); color: var(--t-ink);}
 .tool-converter .total-bar {font-size: 0.85rem; color: var(--t-dim); margin: 0.25rem 0 0.5rem;}
 .tool-converter .total-bar strong {color: #34d399;}
 .tool-converter .actions {display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 1rem;}
 .tool-converter .btn {padding: 0.6rem 1.4rem; color: var(--t-ink); border: none; border-radius: 8px; font-size: 0.9rem; cursor: pointer; transition: background 0.2s;}
 .tool-converter .btn-zip {background: #059669; display: none;}
 .tool-converter .btn-zip:hover {background: #10b981;}
 .tool-converter .btn-clear {background: var(--t-dim); display: none;}
 .tool-converter .btn-clear:hover {background: var(--t-dim);}
 .tool-converter .results {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1rem;}
 .tool-converter .card {background: var(--t-raised); border-radius: 12px; overflow: hidden; border: 1px solid var(--t-rule); transition: transform 0.2s;}
 .tool-converter .card:hover {transform: translateY(-2px);}
 .tool-converter .card.updating {opacity: 0.55;}
 .tool-converter .card-preview {width: 100%; height: 180px; object-fit: contain; display: block;
            background-color: var(--t-rule);
            background-image:
                linear-gradient(45deg, var(--t-raised) 25%, transparent 25%),
                linear-gradient(-45deg, var(--t-raised) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, var(--t-raised) 75%),
                linear-gradient(-45deg, transparent 75%, var(--t-raised) 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0;}
 .tool-converter .card-body {padding: 1rem;}
 .tool-converter .card-name {font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.35rem; color: var(--t-ink);}
 .tool-converter .card-route {font-size: 0.75rem; color: #818cf8; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em;}
 .tool-converter .card-sizes {display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--t-dim); margin-bottom: 0.5rem;}
 .tool-converter .card-sizes .savings {color: #34d399; font-weight: 600;}
 .tool-converter .card-sizes .increase {color: #f87171; font-weight: 600;}
 .tool-converter .card-dim {font-size: 0.72rem; color: var(--t-dim); margin-bottom: 0.6rem;}
 .tool-converter .card-download {width: 100%; padding: 0.5rem; background: #4f46e5; color: var(--t-ink); border: none; border-radius: 8px; cursor: pointer; font-size: 0.85rem; transition: background 0.2s;}
 .tool-converter .card-download:hover {background: #6366f1;}
 .tool-converter .card.error {border-color: #7f1d1d;}
 .tool-converter .card.error .card-body {color: #fca5a5; font-size: 0.85rem;}
 .tool-converter .spinner {text-align: center; padding: 2rem; color: var(--t-dim); display: none;}
 .tool-converter .spinner.active {display: block;}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 .tool-converter .spinner .dots {animation: pulse 1.5s infinite; font-size: 1.5rem;}
.tool-converter {--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25)}
html[data-theme="light"] .tool-converter {--t-page:#f5f6fb;--t-surface:#ffffff;--t-raised:#eef0f8;--t-rule:#d6d9ea;--t-ink:#1b1d33;--t-dim:#55587a;--t-glass:rgba(255,255,255,.8);--t-edge:rgba(100,116,139,.28);--t-sheen:rgba(15,23,42,.03);--t-tint:#4338ca;--t-chip:#e4e2fb;--t-chip-hover:#d3cffa;--t-shade:rgba(15,23,42,.07)}

/* Tool: image-inverter (body.tool-inverter) */
 .tool-inverter {background:var(--t-page)}
 .tool-inverter {--t-bg: #0f172a;
      --t-panel: #111827;
      --t-panel-2: #1f2937;
      --t-border: #334155;
      --t-text: #e5e7eb;
      --t-muted: #94a3b8;
      --t-accent: #6366f1;
      --t-accent-2: #818cf8;
      --t-success: #10b981;
      --t-radius: 16px;}
 .tool-inverter {box-sizing: border-box;}
 .tool-inverter {margin: 0;
      font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(180deg, var(--t-page) 0%, var(--t-surface) 100%);
      color: var(--t-text);
      min-height: 100vh;
      padding: 32px 16px;}
 .tool-inverter .wrap {max-width: 1180px;
      margin: 0 auto;}
 .tool-inverter .hero {text-align: center;
      margin-bottom: 24px;}
 .tool-inverter .hero h1 {margin: 0 0 8px;
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      line-height: 1.15;
      font-weight: 800;
      background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;}
 .tool-inverter .hero p {margin: 0;
      color: var(--t-muted);
      font-size: 0.98rem;}
 .tool-inverter .upload {background: var(--t-glass);
      border: 1px solid var(--t-border);
      border-radius: 20px;
      padding: 28px;
      margin-bottom: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);}
 .tool-inverter .dropzone {border: 2px dashed var(--t-dim);
      border-radius: 18px;
      padding: 42px 24px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      background: rgba(99, 102, 241, 0.03);}
 .tool-inverter .dropzone:hover,  .tool-inverter .dropzone.dragover {border-color: var(--t-accent);
      background: rgba(99, 102, 241, 0.08);}
 .tool-inverter .dropzone .icon {font-size: 2rem;
      margin-bottom: 10px;}
 .tool-inverter .dropzone .title {font-size: 1rem;
      font-weight: 700;
      margin-bottom: 6px;}
 .tool-inverter .dropzone .sub {color: var(--t-muted);
      font-size: 0.92rem;}
 .tool-inverter input[type="file"] {display: none;}
 .tool-inverter .info {display: none;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--t-page);
      border: 1px solid var(--t-border);
      color: var(--t-muted);
      font-size: 0.9rem;
      gap: 8px;
      flex-wrap: wrap;}
 .tool-inverter .info.active {display: flex;}
 .tool-inverter .pill {display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--t-surface);
      border: 1px solid var(--t-rule);
      color: var(--t-ink);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 0.85rem;}
 .tool-inverter .controls {display: none;
      background: rgba(17, 24, 39, 0.9);
      border: 1px solid var(--t-border);
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);}
 .tool-inverter .controls.active {display: block;}
 .tool-inverter .control-grid {display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      align-items: end;}
 .tool-inverter .field {grid-column: span 12;
      background: var(--t-page);
      border: 1px solid var(--t-rule);
      border-radius: 16px;
      padding: 14px;}
@media (min-width: 900px) {
   .tool-inverter .field.target {grid-column: span 4;}
   .tool-inverter .field.slider1 {grid-column: span 4;}
   .tool-inverter .field.slider2 {grid-column: span 4;}
   .tool-inverter .field.actions {grid-column: span 12;}
}
 .tool-inverter .label {display: block;
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--t-ink);
      margin-bottom: 10px;}
 .tool-inverter .segmented {display: flex;
      flex-wrap: wrap;
      gap: 8px;}
 .tool-inverter .segmented button,  .tool-inverter .action-btn {appearance: none;
      border: 1px solid var(--t-dim);
      background: var(--t-surface);
      color: var(--t-ink);
      padding: 10px 14px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 0.92rem;
      cursor: pointer;
      transition: all 0.18s ease;}
 .tool-inverter .segmented button:hover,  .tool-inverter .action-btn:hover {border-color: var(--t-accent);
      transform: translateY(-1px);}
 .tool-inverter .segmented button.active {background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-2) 100%);
      border-color: transparent;
      color: white;
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.25);}
 .tool-inverter .action-row {display: flex;
      flex-wrap: wrap;
      gap: 10px;}
 .tool-inverter .download-btn {background: linear-gradient(135deg, #059669 0%, #10b981 100%);
      border: none;
      color: white;}
 .tool-inverter .webp-btn {background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
      border: none;
      color: white;}
 .tool-inverter .secondary-btn {background: var(--t-surface);
      border: 1px solid var(--t-dim);
      color: var(--t-ink);}
 .tool-inverter .slider-wrap {display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;}
 .tool-inverter .value-box {min-width: 54px;
      text-align: center;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--t-surface);
      border: 1px solid var(--t-dim);
      color: var(--t-ink);
      font-weight: 700;
      font-size: 0.9rem;}
 .tool-inverter input[type="range"] {width: 100%;
      accent-color: var(--t-accent);
      cursor: pointer;}
 .tool-inverter .hint {margin-top: 8px;
      color: var(--t-muted);
      font-size: 0.83rem;
      line-height: 1.4;}
 .tool-inverter .preview {display: none;
      grid-template-columns: 1fr;
      gap: 20px;}
 .tool-inverter .preview.active {display: grid;}
@media (min-width: 900px) {
   .tool-inverter .preview {grid-template-columns: 1fr 1fr;}
}
 .tool-inverter .card {background: rgba(17, 24, 39, 0.92);
      border: 1px solid var(--t-border);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);}
 .tool-inverter .card-header {padding: 14px 16px;
      border-bottom: 1px solid var(--t-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: var(--t-page);}
 .tool-inverter .card-title {font-weight: 800;
      font-size: 0.95rem;
      letter-spacing: 0.02em;}
 .tool-inverter .card-sub {color: var(--t-muted);
      font-size: 0.82rem;}
 .tool-inverter .stage {min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      position: relative;
      overflow: hidden;}
 .tool-inverter .stage.light {background:
        linear-gradient(45deg, var(--t-ink) 25%, transparent 25%),
        linear-gradient(-45deg, var(--t-ink) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--t-ink) 75%),
        linear-gradient(-45deg, transparent 75%, var(--t-ink) 75%);
      background-color: var(--t-ink);
      background-size: 24px 24px;
      background-position: 0 0, 0 12px, 12px -12px, -12px 0;}
 .tool-inverter .stage.dark {background:
        linear-gradient(45deg, var(--t-raised) 25%, transparent 25%),
        linear-gradient(-45deg, var(--t-raised) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--t-raised) 75%),
        linear-gradient(-45deg, transparent 75%, var(--t-raised) 75%);
      background-color: var(--t-page);
      background-size: 24px 24px;
      background-position: 0 0, 0 12px, 12px -12px, -12px 0;}
 .tool-inverter .stage img,  .tool-inverter .stage canvas {max-width: 100%;
      max-height: 440px;
      object-fit: contain;
      border-radius: 10px;
      display: block;}
 .tool-inverter .footer-note {margin-top: 18px;
      color: var(--t-muted);
      font-size: 0.9rem;
      line-height: 1.55;
      text-align: center;}
 .tool-inverter .footer-note strong {color: var(--t-ink);}
 .tool-inverter .small-warning {margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.25);
      color: #fcd34d;
      font-size: 0.87rem;
      line-height: 1.45;}
.tool-inverter {--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25)}
html[data-theme="light"] .tool-inverter {--t-page:#f5f6fb;--t-surface:#ffffff;--t-raised:#eef0f8;--t-rule:#d6d9ea;--t-ink:#1b1d33;--t-dim:#55587a;--t-glass:rgba(255,255,255,.8);--t-edge:rgba(100,116,139,.28);--t-sheen:rgba(15,23,42,.03);--t-tint:#4338ca;--t-chip:#e4e2fb;--t-chip-hover:#d3cffa;--t-shade:rgba(15,23,42,.07);--t-bg:#f5f6fb;--t-panel:#ffffff;--t-panel-2:#eef0f8;--t-border:#d6d9ea;--t-text:#1b1d33;--t-muted:#55587a;--t-accent:#5b4ce6;--t-accent-2:#7c5cf0;--t-success:#13875a}

/* Tool: logo-edge-cleaner (body.tool-logo) */
 .tool-logo {background:var(--t-page)}
 .tool-logo {--t-bg:#111827;--t-panel:#0f172a;--t-panel-2:#1f2937;--t-border:#334155;--t-text:#e5e7eb;--t-muted:#94a3b8;--t-accent:#6366f1;--t-accent-2:#8b5cf6;--t-success:#10b981;--t-danger:#ef4444;--t-shadow:0 18px 40px rgba(0,0,0,.35);--t-radius:18px}
 .tool-logo {box-sizing:border-box}
 .tool-logo {margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--t-text);background:radial-gradient(circle at top left,rgba(99,102,241,.16),transparent 28%),radial-gradient(circle at top right,rgba(139,92,246,.16),transparent 30%),linear-gradient(180deg,var(--t-page),var(--t-bg));min-height:100vh}
 .tool-logo .wrap {max-width:1360px;margin:0 auto;padding:28px}
 .tool-logo .hero {display:grid;grid-template-columns:1.3fr .9fr;gap:22px;align-items:start}
 .tool-logo .card {background:linear-gradient(180deg,var(--t-sheen),var(--t-sheen));border:1px solid var(--t-edge);border-radius:var(--t-radius);box-shadow:var(--t-shadow);backdrop-filter:blur(8px)}
 .tool-logo .header {padding:28px 28px 8px}
 .tool-logo h1 {margin:0 0 8px;line-height:1.08;font-size:clamp(2rem,3.8vw,3.2rem);letter-spacing:-.03em;background:linear-gradient(135deg,var(--t-tint) 0%,var(--t-tint) 30%,var(--t-tint) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
 .tool-logo .sub {margin:0;color:var(--t-muted);font-size:1rem;line-height:1.65;max-width:70ch}
 .tool-logo .uploader {margin:20px 28px 28px;padding:26px;border:1.5px dashed rgba(99,102,241,.55);border-radius:16px;background:rgba(99,102,241,.08);text-align:center;transition:.2s ease;cursor:pointer}
 .tool-logo .uploader.drag {transform:translateY(-1px);background:rgba(99,102,241,.12);border-color:rgba(139,92,246,.8)}
 .tool-logo .uploader .big {font-size:46px;display:block;margin-bottom:12px}
 .tool-logo .uploader p {margin:8px 0;color:var(--t-muted)}
 .tool-logo .uploader strong {color:var(--t-text)}
 .tool-logo .uploader {display:block}
 .tool-logo input[type=file] {display:none}
 .tool-logo .btns {display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;justify-content:center}
 .tool-logo button,  .tool-logo .fake-btn {appearance:none;border:0;cursor:pointer;color:white;font-weight:700;border-radius:12px;padding:12px 16px;background:linear-gradient(135deg,var(--t-accent),var(--t-accent-2));box-shadow:0 10px 24px rgba(99,102,241,.28);transition:transform .16s ease,opacity .16s ease,filter .16s ease;font-size:.95rem}
 .tool-logo button:hover,  .tool-logo .fake-btn:hover {transform:translateY(-1px);filter:brightness(1.06)}
 .tool-logo button.secondary {background:var(--t-raised);color:var(--t-text);box-shadow:none;border:1px solid var(--t-edge)}
 .tool-logo button.success {background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 10px 24px rgba(16,185,129,.24)}
 .tool-logo button:disabled {opacity:.45;cursor:not-allowed;transform:none!important;filter:none!important}
 .tool-logo .panel {padding:24px}
 .tool-logo .panel h2 {margin:0 0 6px;font-size:1.05rem;letter-spacing:-.02em}
 .tool-logo .panel .desc {margin:0 0 18px;color:var(--t-muted);font-size:.92rem;line-height:1.55}
 .tool-logo .controls {display:grid;gap:14px}
 .tool-logo .control {padding:14px;border-radius:14px;background:var(--t-glass);border:1px solid var(--t-edge)}
 .tool-logo .control label {display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;font-weight:650;font-size:.93rem}
 .tool-logo .control .hint {color:var(--t-muted);font-weight:500}
 .tool-logo input[type=range] {width:100%;accent-color:#8b5cf6}
 .tool-logo .master-control {padding:16px;border-radius:14px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08));border:1.5px solid rgba(99,102,241,.3)}
 .tool-logo .master-control label {display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;font-weight:700;font-size:1rem;color:var(--t-tint)}
 .tool-logo .toggles {display:grid;gap:10px}
 .tool-logo .toggle {display:flex;align-items:center;gap:10px;color:var(--t-text);font-size:.94rem;padding:10px 12px;border-radius:12px;background:var(--t-glass);border:1px solid var(--t-edge)}
 .tool-logo .toggle input {transform:scale(1.12)}
 .tool-logo .preview-card {margin-top:22px;padding:20px}
 .tool-logo .toolbar {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
 .tool-logo .toolbar .left,  .tool-logo .toolbar .right {display:flex;flex-wrap:wrap;gap:10px;align-items:center}
 .tool-logo .pill {display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--t-glass);border:1px solid var(--t-edge);color:var(--t-muted);font-size:.88rem}
 .tool-logo .preview-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px}
 .tool-logo .stage {border-radius:16px;overflow:hidden;border:1px solid var(--t-edge);background:var(--t-page)}
 .tool-logo .stage-head {display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;background:var(--t-sheen);border-bottom:1px solid var(--t-edge);font-size:.92rem}
 .tool-logo .canvas-wrap {position:relative;min-height:300px;display:grid;place-items:center;padding:20px;background-size:20px 20px;background-image:linear-gradient(45deg,var(--t-surface) 25%,transparent 25%),linear-gradient(-45deg,var(--t-surface) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--t-surface) 75%),linear-gradient(-45deg,transparent 75%,var(--t-surface) 75%);background-position:0 0,0 10px,10px -10px,-10px 0}
 .tool-logo .canvas-wrap.dark {background:var(--t-page);background-image:none}
 .tool-logo .canvas-wrap.light {background:var(--t-ink);background-image:none}
 .tool-logo canvas {max-width:100%;max-height:62vh;width:auto;height:auto;image-rendering:auto;border-radius:8px}
 .tool-logo .footnote {margin-top:16px;color:var(--t-muted);font-size:.88rem;line-height:1.6}
 .tool-logo .stats {display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
 .tool-logo .stat {padding:10px 12px;border-radius:12px;background:var(--t-glass);border:1px solid var(--t-edge);color:var(--t-muted);font-size:.88rem}
 .tool-logo .stat strong {color:var(--t-text)}
 .tool-logo .edge-info {margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#6ee7b7;font-size:.88rem;display:none}
 .tool-logo .edge-info.active {display:block}
@media(max-width:1080px) {
   .tool-logo .hero {grid-template-columns:minmax(0,1fr)}
   .tool-logo .hero>*,  .tool-logo .card {min-width:0}
}
@media(max-width:780px) {
   .tool-logo .wrap {padding:16px}
   .tool-logo .hero {grid-template-columns:minmax(0,1fr)}
   .tool-logo .hero>*,  .tool-logo .card {min-width:0}
   .tool-logo .preview-grid {grid-template-columns:1fr}
   .tool-logo .header {padding:22px 18px 8px}
   .tool-logo .uploader,  .tool-logo .panel,  .tool-logo .preview-card {margin-left:18px;margin-right:18px}
   .tool-logo .uploader {margin-bottom:18px}
   .tool-logo .preview-card {padding:16px}
   .tool-logo .canvas-wrap {min-height:220px}
}
.tool-logo {--t-page:#0b1020;--t-surface:#111827;--t-raised:#1f2937;--t-rule:#334155;--t-ink:#e5e7eb;--t-dim:#94a3b8;--t-glass:rgba(15,23,42,.72);--t-edge:rgba(148,163,184,.16);--t-sheen:rgba(255,255,255,.02);--t-tint:#c7d2fe;--t-chip:#312e81;--t-chip-hover:#4338ca;--t-shade:rgba(0,0,0,.25)}
html[data-theme="light"] .tool-logo {--t-page:#f5f6fb;--t-surface:#ffffff;--t-raised:#eef0f8;--t-rule:#d6d9ea;--t-ink:#1b1d33;--t-dim:#55587a;--t-glass:rgba(255,255,255,.8);--t-edge:rgba(100,116,139,.28);--t-sheen:rgba(15,23,42,.03);--t-tint:#4338ca;--t-chip:#e4e2fb;--t-chip-hover:#d3cffa;--t-shade:rgba(15,23,42,.07);--t-bg:#f5f6fb;--t-panel:#ffffff;--t-panel-2:#eef0f8;--t-border:#d6d9ea;--t-text:#1b1d33;--t-muted:#55587a;--t-accent:#5b4ce6;--t-accent-2:#7c5cf0;--t-success:#13875a;--t-danger:#c62f3d;--t-shadow:0 18px 40px rgba(20,22,50,.12)}

/* Tool pages: the shell's own buttons (menu arrows, burger) keep their chrome styling, not the tool's button style */
body.tool .nav-toggle,
body.tool .burger {background:none;box-shadow:none;border:0;padding:0;margin:0;width:18px;border-radius:0;color:var(--mut);font-size:11px;line-height:1;transform:none;filter:none}
body.tool .burger {width:auto;border:1px solid var(--line);color:var(--txt);font-size:18px;border-radius:6px;padding:2px 10px}
body.tool .nav-toggle:hover {color:var(--txt);transform:none}

/* Logo tool: version marker in the title */
.tool-logo h1 sup {font-size:.45em;color:var(--t-accent)}

/* 4) Catalogue utilities. One class per layout value; !important so they beat component and tool rules.
   Use these instead of inline style="" attributes. Spacing scale: 4px = 1. */
.scroll-x {overflow-x:auto !important}
.mb-1 {margin-bottom:4px !important}
.mb-2 {margin-bottom:8px !important}
.mb-5 {margin-bottom:20px !important}
.flex-1 {flex:1 !important}
.col-full {grid-column:1 / -1 !important}
.btns-start {justify-content:flex-start !important}
.h2-tight {margin-top:22px !important}

/* Network tools */
.site .ip-value {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.3rem;font-weight:700;word-break:break-all;color:var(--txt);margin:4px 0 14px}

/* Forms and results for site tools (body.site). Reuse these; do not add one-off styles. */
.site .field {display:block;margin:12px 0}
.site .field > span {display:block;font-weight:600;margin-bottom:6px}
.site .input {width:100%;background:var(--surface-2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.site textarea.input {min-height:200px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;resize:vertical}
.site .input:focus {outline:2px solid var(--acc);outline-offset:1px}
.site .actions {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center}
.site .result {background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;min-height:3em}
.site .result.is-error {border-color:var(--trap);color:var(--trap)}
.site .badge {display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;border:1px solid var(--line);margin-left:6px;vertical-align:middle}
.site .badge--pass {background:var(--ok-bg);color:var(--ok)}
.site .badge--fail {background:var(--bad-bg);color:var(--trap)}
.site .stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.site .stat {background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.site .stat-label {display:block;color:var(--mut);font-size:13px}
.site .stat-value {display:block;font-size:1.25rem;font-weight:700;margin-top:4px}
.site .sample {border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0;font-size:18px}
.site .inline-field {display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.site .inline-field .input {width:auto;flex:1 1 160px}
.site input[type=color] {width:56px;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);cursor:pointer}
.site .check-row {display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
.site fieldset {border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:12px 0}
.site legend {padding:0 6px}

/* PDF editor drawing layer (body.site): a relative wrapper, the page canvas, and a transparent overlay canvas on top */