/* === Theme Tokens === */
:root{--bg:#ffffff;--text:#0f172a;--muted:#6b7280;--surface:#f8fafc;--card:#ffffff;--border:#e5e7eb;--primary:#111111;--primary-contrast:#ffffff;--accent-grad:linear-gradient(180deg,#111,#000);--btn-bg:#111111;--btn-text:#ffffff;--input-bg:#ffffff;--input-text:#0f172a;--input-border:#e5e7eb;--focus:0 0 0 3px rgba(0,0,0,.25);--slider-height:2px;--slider-size:20px;--slider-track:#111111;--slider-track-bg:#e5e7eb;--slider-thumb:#111111;--slider-thumb-border:#ffffff;--tool-h:30px;--tool-r:8px;--tool-gap:.6rem;--btn-h:34px;--btn-r:8px;--topH:30px;--iconBtn:44px;--iconSize:22px;--iconStroke:1.25}
*,*::before,*::after{box-sizing:border-box}
html[data-theme="dark"]{--bg:#0b0d12;--text:#e5e7eb;--muted:#9aa0a6;--surface:#12151d;--card:#141926;--border:#262c36;--primary:#ffffff;--primary-contrast:#0b0d12;--btn-bg:#1f2430;--btn-text:#e5e7eb;--input-bg:#0f1520;--input-text:#e5e7eb;--input-border:#2a3140;--focus:0 0 0 3px rgba(255,255,255,.25);--slider-track:#ffffff;--slider-track-bg:#1f1f1f;--slider-thumb:#ffffff;--slider-thumb-border:#0b0d12}

/* === Base / Reset === */
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:'Lexend',ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;font-size:14px;line-height:1.45}
@supports (min-height:100svh){body{min-height:100svh}}
@supports (min-height:100dvh){body{min-height:100dvh}}
select,select option,li,ol,a,p,div,input,button,label,td,th{font-family:'Lexend',ui-sans-serif,system-ui,Segoe UI,Roboto,Arial}
a{color:var(--primary)}
small{opacity:.75}
.muted{color:var(--muted)}
label{display:flex;align-items:center}

/* === Scrollbars === */
*{scrollbar-width:thin;scrollbar-color:#E6E8FA transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#E6E8FA;border-radius:999px}
*::-webkit-scrollbar-track{background:transparent}

/* === Layout primitives === */
.top,.nav,.toolbar,.out,.foot{flex:0 0 auto}
.foot{margin-top:auto}

/* === Logo === */
.logo-link{text-decoration:none}
.logo-link{color:inherit}
.logo-lines{position:relative;display:inline-block;color:currentColor;overflow:hidden;width:40px;height:40px}
.logo-lines *{box-shadow:none!important;border:none!important}
.logo-lines .logoWrap{position:absolute;left:50%;top:50%;transform-origin:center;will-change:transform}
.logo-lines .line{position:absolute;left:50%;top:50%;height:var(--th,2px);width:var(--L,40px);background:#000;border-radius:999px;transform-origin:center;transform:translate(-50%,-50%) translateY(var(--off,0px)) scaleX(var(--min,0.35));opacity:0;animation:pulse var(--speed,2.2s) ease-in-out infinite;will-change:transform,opacity}
.top .brand{color:var(--text)}
html[data-theme="dark"] .brand img{filter:invert(1) brightness(1.1)}
html[data-theme="dark"] .logo-lines .line{background:#fff}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) translateY(var(--off)) scaleX(var(--min,0.35));opacity:0}40%{opacity:1}50%{transform:translate(-50%,-50%) translateY(var(--off)) scaleX(1);opacity:1}60%{opacity:1}}

/* === Header / Menu === */
.top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .9rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.top-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.top-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.brand{display:flex;align-items:center;font-size:1rem;font-weight:300;letter-spacing:1px;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .logo-lines{color:var(--text)}
.menu{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.menu a{display:inline-flex;align-items:center;gap:.4rem;height:36px;padding:0 .6rem;border-radius:8px;text-decoration:none;color:var(--text);opacity:.9}
.menu a:hover{opacity:1;background:rgba(0,0,0,.05)}
html[data-theme="dark"] .menu a:hover{background:rgba(255,255,255,.07)}
.menu a.active{background:rgba(99,102,241,.12);color:#4f46e5}
.menu a .icon{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.menu a.active .icon{opacity:1}
.credits-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .55rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;height:32px}
.credits-pill:hover{opacity:1;background:rgba(0,0,0,.05)}
html[data-theme="dark"] .credits-pill:hover{background:rgba(255,255,255,.07)}
.icon-credit{width:16px;height:16px;flex:0 0 auto;opacity:.9}
html[data-theme="dark"] .icon-credit{fill:#fff;}
.credits-label{opacity:.85}
.credits-value{font-weight:600}
.theme-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;border:none}

/* === Forms / Inputs (global) === */
input,select,textarea{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);border-radius:8px}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--focus)}

/* === Toolbar (unified) === */
.toolbar{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:.5rem var(--tool-gap);padding:.7rem 1rem;border-bottom:1px solid var(--border);background:var(--surface)}
.toolbar label{display:flex;align-items:center;gap:.4rem}
.toolbar small{opacity:.7}
.toolbar .btn,.toolbar select,.toolbar input[type="url"],.toolbar input[type="text"],.toolbar input[type="email"],.toolbar input[type="number"],input,select,textarea{padding:5px 8px}
.toolbar .btn,.toolbar select,.toolbar input[type="url"],.toolbar input[type="text"],.toolbar input[type="email"],.toolbar input[type="number"]{border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:var(--tool-r);min-width:0}
.toolbar .btn{border-color:var(--border);background:var(--btn-bg);color:var(--btn-text);cursor:pointer}
.toolbar .btn:disabled{opacity:.5;cursor:not-allowed}
.toolbar .btn-ghost{background:transparent;color:var(--text)}
.toolbar input[type="color"]{width:var(--tool-h);min-width:var(--tool-h);height:var(--tool-h);padding:0;border:1px solid var(--input-border);background:var(--input-bg);border-radius:6px}
.toolbar input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.toolbar input[type="color"]::-webkit-color-swatch{border:none;border-radius:6px}
.toolbar .range{height:var(--tool-h);padding:0;margin:0}
#imgFile{width:100%;padding:2px}
#imgUrl{width:auto;flex:1 1 0;min-width:0}
.toolbar label>.btn{flex:0 0 auto}
.toolbar input[type="number"]{-moz-appearance:textfield}
.toolbar input[type="number"]::-webkit-outer-spin-button,.toolbar input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.toolbar .range{height:var(--slider-size);align-self:center;display:block}
input[type="range"]{-webkit-appearance:none;appearance:none;width:220px;height:var(--slider-size);background:transparent;cursor:pointer;margin:0;padding:0;display:block}
input[type="range"]:disabled{opacity:.5;cursor:not-allowed}
input[type="range"]::-webkit-slider-runnable-track{height:var(--slider-height);background:var(--slider-track-bg);border-radius:999px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--slider-size);height:var(--slider-size);border-radius:999px;background:var(--slider-thumb);border:1px solid var(--slider-thumb-border);margin-top:calc((var(--slider-height) - var(--slider-size))/2);transition:transform .08s ease,box-shadow .12s ease}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.03)}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--slider-thumb)}
input[type="range"]::-moz-range-track{height:var(--slider-height);background:var(--slider-track-bg);border-radius:999px}
input[type="range"]::-moz-range-progress{height:var(--slider-height);background:var(--slider-track);border-radius:999px}
input[type="range"]::-moz-range-thumb{width:var(--slider-size);height:var(--slider-size);border-radius:999px;background:var(--slider-thumb);border:1px solid var(--slider-thumb-border);transition:transform .08s ease,box-shadow .12s ease}
input[type="range"]:hover::-moz-range-thumb{transform:scale(1.03)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--slider-thumb)}
.toolbar label small{align-self:center}
#helpBtn{background:#E6E8FA;}
html[data-theme="dark"] #helpBtn{color:#000;}
#export{width:100%;margin-top:15px}
html[data-theme="dark"] #export{background:#E6E8FA;color:#000;}
#toolHelp{font-size:12px}

/* === Compact toolbar (left) === */
.toolbar-compact{display:flex;flex-direction:column;gap:.55rem;padding:.55rem .65rem;background:var(--surface);border-right:1px solid var(--border);border-bottom:0;position:sticky;top:var(--topH);max-height:calc(100dvh - var(--topH));overflow:auto}
.toolgroup{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.5rem .6rem}
.tg-title{margin:0 0 .35rem 0;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tg-body{display:grid;grid-template-columns:1fr;gap:.4rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.4rem}
label.full{grid-column:1/-1}
label.nowrap{white-space:nowrap}
.w-64{width:64px}
.w-72{width:72px}
.w-220{width:220px}
.toolbar-compact label{display:flex;align-items:center;gap:.35rem}
.toolbar-compact small{opacity:.7;margin-left:auto}
.toolbar-compact .btn,.toolbar-compact select,.toolbar-compact input[type="url"],.toolbar-compact input[type="text"],.toolbar-compact input[type="email"],.toolbar-compact input[type="number"]{height:var(--tool-h);padding:.25rem .55rem;min-width:0;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);border-radius:var(--tool-r)}
.toolbar-compact .btn{border-color:var(--border);background:var(--btn-bg);color:var(--btn-text)}
.toolbar-compact .btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.toolbar-compact input[type="color"]{width:var(--tool-h);min-width:var(--tool-h);height:var(--tool-h);padding:0;border:1px solid var(--input-border);border-radius:6px}
.toolbar-compact .range{height:var(--slider-size);display:block}
.toolbar-compact input[type="range"]{width:100%}

/* === Options grid === */
.options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .5rem}
@media (min-width:1280px){.options-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.options-grid .full{grid-column:1/-1}
.toolgroup .tg-body label{display:flex;align-items:center;gap:.4rem}
.toolgroup .tg-body label>input:not([type="checkbox"]):not([type="color"]),.toolgroup .tg-body label>select{flex:1 1 auto;min-width:27px}
.toolgroup .tg-body input[type="number"]{max-width:100px}
.toolgroup .tg-body input[type="color"]{width:var(--tool-h);min-width:var(--tool-h);height:var(--tool-h);padding:0;border-radius:6px}
.options-grid #stagger{min-width:50px}
.view-grid{display:flex}

/* === Stage / Editor === */
#stage{flex:1 1 0;min-height:0;overflow:auto;background:var(--surface)}
#stage.grid-on{background:linear-gradient(var(--surface),var(--surface)),repeating-linear-gradient(to right,rgba(0,0,0,.08) 0 1px,transparent 1px var(--grid)),repeating-linear-gradient(to bottom,rgba(0,0,0,.08) 0 1px,transparent 1px var(--grid));background-blend-mode:normal;background-size:auto,var(--grid) var(--grid),var(--grid) var(--grid)}
html[data-theme="dark"] #stage.grid-on{background:linear-gradient(var(--surface),var(--surface)),repeating-linear-gradient(to right,rgba(255,255,255,.09) 0 1px,transparent 1px var(--grid)),repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 1px,transparent 1px var(--grid))}
#stage>svg{display:block;margin:16px auto;width:auto;height:auto;max-width:98%;max-height:94%;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.1)}
.bg{pointer-events:none}
.overlay path,.overlay polygon{fill:rgba(0,0,0,.06);stroke:#000;stroke-opacity:.25;stroke-width:1.2;vector-effect:non-scaling-stroke}
html[data-theme="dark"] .overlay path,html[data-theme="dark"] .overlay polygon{fill:rgba(255,255,255,.05);stroke:#fff;stroke-opacity:.28}
.temp{fill:rgba(0,0,0,.03);stroke:#111;stroke-opacity:.6;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
html[data-theme="dark"] .temp{fill:rgba(255,255,255,.04);stroke:#fff;stroke-opacity:.7}
.point{fill:#111;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;cursor:grab}
html[data-theme="dark"] .point{fill:#fff;stroke:#0b0d12}
.point.sel{fill:#000}
html[data-theme="dark"] .point.sel{fill:#fff}
.handle-line{stroke:rgba(0,0,0,.35);stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
html[data-theme="dark"] .handle-line{stroke:rgba(255,255,255,.45)}
.handle{fill:#fff;stroke:#111;stroke-width:1;vector-effect:non-scaling-stroke;cursor:ns-resize}
html[data-theme="dark"] .handle{fill:#0b0d12;stroke:#fff}
.piece-line{fill:none}
.axis-line{stroke:rgba(0,0,0,.35);stroke-dasharray:3 6;vector-effect:non-scaling-stroke}

/* === Output / Paywall === */
.out{display:flex;gap:.6rem;align-items:center;padding:1.2rem;border-top:1px solid var(--border);background:var(--surface);color:var(--text);height:auto;min-height:0;position:relative}
#out{flex:1;height:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.6rem;white-space:pre;overflow:auto;box-shadow:0 10px 28px rgba(0,0,0,.1)}
#paywall{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.96));backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:99}
.paycard{width:min(92vw,640px);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);padding:18px}
.paycard h2{margin:0 0 8px}
.row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;gap:.35rem;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;background:var(--surface);color:var(--text)}
.stat{padding:.2rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--surface)}

/* === Pages / Pricing === */
.wrap{max-width:1200px;margin:24px auto;padding:60px 12px 30px 12px}
.wrap-account{display:grid;grid-template-columns:1fr;gap:16px}
.wrap h1{margin:0 0 .25rem}
.lead{font-size:1.05rem;line-height:1.5}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.plan h3{display:flex;align-items:center;margin:0;font-size:1.1rem}
.packIcons{width:44px;height:auto;object-fit:contain}
.plan .muted{font-size:.95rem}
.features{list-style:none;margin:8px 0 0;padding:0;color:var(--muted);display:grid;gap:6px}
.features li{display:flex;align-items:center;gap:.45rem}
.features svg{width:16px;height:16px;flex:0 0 auto;opacity:.9}
.plan .cta{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.notes{margin-top:16px;color:var(--primary);font-size:.95rem}
#contactForm input,#contactForm select{margin-left:5px}

/* === Help Panel === */
.help-inline{margin-left:.4rem}
.help-panel{position:fixed;right:12px;bottom:12px;max-width:460px;padding:12px 14px;background:#fff;color:#111827;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);font-size:13px;line-height:1.45;z-index:20}
.help-panel[hidden]{display:none}
html[data-theme="dark"] .help-panel{background:#0f1420;color:#e5e7eb;border-color:#262c36}
.help-panel .help-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.help-panel h3{margin:0;font-size:14px}
.help-panel .help-list{margin:.2rem 0 .4rem 1rem;padding:0}
.help-panel .help-list li{margin:.15rem 0}
.help-panel .help-close{padding:.2rem .4rem}

/* === Footer === */
.foot{display:flex;gap:.8rem;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:var(--surface);border-top:1px solid var(--border);color:var(--muted)}
.foot a{color:inherit;opacity:.85;text-decoration:none;margin-left:12px}
.foot a:hover{opacity:1;text-decoration:underline}
.foot-left a, .foot-left strong{color:#000;}
/* === Consent === */
.consent{position:fixed;right:12px;bottom:12px;display:none;align-items:center;gap:.5rem;padding:8px 10px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:90}
.consent.show{display:flex}
.consent small{opacity:.85}

/* === Buttons (global + variants) === */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);line-height:1;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--btn-r);background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .06s ease,box-shadow .2s ease,background .15s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px);background:rgba(0,0,0,.04)}
html[data-theme="dark"] .btn:hover{background:rgba(255,255,255,.06)}
.btn:active{transform:translateY(0);box-shadow:0 1px 1px rgba(0,0,0,.04)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(99,102,241,.45)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.btn-primary{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg);box-shadow:none}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{filter:brightness(.98)}
.toolbar .btn{height:var(--tool-h);padding:0 .65rem;border-radius:var(--tool-r);background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg);box-shadow:none;transform:none}
.out .btn,.consent .btn,.foot .btn,.paycard .btn{all:unset;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);line-height:1;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--btn-r);background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .06s ease,box-shadow .2s ease,background .15s ease;cursor:pointer}
.out .btn:hover,.consent .btn:hover,.foot .btn:hover,.paycard .btn:hover{transform:translateY(-1px);background:rgba(0,0,0,.04)}
html[data-theme="dark"] .out .btn:hover,html[data-theme="dark"] .consent .btn:hover,html[data-theme="dark"] .foot .btn:hover,html[data-theme="dark"] .paycard .btn:hover{background:rgba(255,255,255,.06)}
.out .btn:active,.consent .btn:active,.foot .btn:active,.paycard .btn:active{transform:translateY(0);box-shadow:0 1px 1px rgba(0,0,0,.04)}
.out .btn:focus-visible,.consent .btn:focus-visible,.foot .btn:focus-visible,.paycard .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(99,102,241,.45)}

/* === Two-panel main layout === */
.main-block{display:grid;grid-template-columns:20% 80%;gap:0;flex:1 1 auto;background:#f8fafc;min-height:0}
html[data-theme="dark"] .main-block{background:#0f1420}
.main-block .toolbar{border-bottom:0;border-right:1px solid var(--border);background:var(--surface);overflow:auto}
.stage-block{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
#stage{flex:3 1 0}
.stage-block .out{flex:1 1 0}

/* === Mobile/tablet responsive === */
@media (max-width:960px){.main-block{display:block;flex:1 1 auto;min-height:0}}
@media (max-width:960px){.toolbar-compact{position:static;top:auto;max-height:none;border-right:0;border-bottom:1px solid var(--border)}}
@media (max-width:960px){#stage{flex:none}}
@media (max-width:960px){.stage-block .out{flex:none}}
@media (max-width:960px){.stage-block{min-height:0;display:flex}}
@media (max-width:960px){#stage{min-height:400px!important}}
@media (max-width:960px){.stage-block .out{flex:0 0 var(--outH,140px)!important}}
@media (max-width:960px){#stage>svg{max-width:95%;max-height:100%;margin:12px auto;height:100%!important;min-height:400px!important;max-height:none!important;width:auto}}
@supports not (height:100dvh){@media (max-width:960px){.stage-block{min-height:calc(100vh - var(--topH))}}}
@supports not (height:100dvh){@media (max-width:960px){#stage{min-height:calc(100vh - var(--topH) - var(--outH,140px))!important}}}
@media (max-width:880px){.top{flex-wrap:wrap}}
@media (max-width:880px){.top-left{display:flex;flex-wrap:wrap;gap:10px;width:100%}}
@media (max-width:880px){.logo-link{flex:0 0 auto;order:1}}
@media (max-width:880px){#primaryMenu.menu{display:flex;flex-wrap:wrap;gap:8px 10px;flex:1 1 100%;order:2;padding:.4rem 0;overflow:visible;white-space:normal;max-width:100%}}
@media (max-width:880px){#primaryMenu.menu a{height:32px;padding:0 .5rem;border-radius:7px}}
@media (min-width:881px){#primaryMenu.menu{display:flex;flex-wrap:wrap}}
@media (max-width:640px){.foot{flex-direction:column}}
@media (max-width:640px){.foot-left{order:2}}
@media (max-width:640px){
    .foot-right{order:1;}
    /* .foot-right > button{margin-left:5px!important;} */
}
@media (max-width:420px){.menu a{height:30px;padding:0 .45rem}}


/* === Tool icons === */
.tool-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--iconBtn),1fr));gap:.5rem}
.toolbar-compact .tool-icons .btn-icon,.toolbar-compact .toolgroup .btn-row .btn-icon{width:var(--iconBtn);height:var(--iconBtn);padding:0;border-radius:12px;background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:transform .08s ease,box-shadow .18s ease,background .15s ease,color .15s ease,border-color .15s ease}
.toolbar-compact .tool-icons .btn-icon:hover,.toolbar-compact .toolgroup .btn-row .btn-icon:hover{transform:translateY(-1px);background:rgba(0,0,0,.035)}
html[data-theme="dark"] .toolbar-compact .tool-icons .btn-icon:hover,html[data-theme="dark"] .toolbar-compact .toolgroup .btn-row .btn-icon:hover{background:rgba(255,255,255,.06)}
.toolbar-compact .tool-icons .btn-icon.is-active,.toolbar-compact .tool-icons .btn-icon[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg);box-shadow:0 0 0 2px rgba(0,0,0,.10) inset,0 2px 10px rgba(0,0,0,.12)}
html[data-theme="dark"] .toolbar-compact .tool-icons .btn-icon.is-active,html[data-theme="dark"] .toolbar-compact .tool-icons .btn-icon[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(255,255,255,.12) inset,0 2px 10px rgba(0,0,0,.25)}
.toolbar-compact .toolgroup .btn-row .btn-icon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(99,102,241,.45)}
@media (min-width:1400px){:root{--iconBtn:44px;--iconSize:22px}}
.tool-icons .btn-icon{width:var(--iconBtn);height:var(--iconBtn)}
.tool-icons .btn-icon svg{width:var(--iconSize);height:var(--iconSize);display:block}
.tool-icons .btn-icon svg [stroke]{stroke-width:var(--iconStroke)!important}
.tool-icons [data-tool="pen"] svg path{fill:#000!important;stroke:none!important}
html[data-theme="dark"] .tool-icons [data-tool="pen"] svg path{fill:#fff!important}
.tool-icons .is-active[data-tool="pen"] svg path{fill:currentColor!important;stroke:none!important}
.tools-toggle{display:none;top:var(--topH);z-index:12;margin:.5rem}
.props-close{display:none}
@media (max-width:960px){.tools-toggle{display:inline-flex}}
@media (max-width:960px){.props-panel{position:fixed;left:0;top:var(--topH);width:min(86vw,380px);max-height:calc(100dvh - var(--topH));overflow:auto;transform:translateX(-110%);transition:transform .22s ease;z-index:50;box-shadow:0 12px 32px rgba(0,0,0,.28);border-radius:8px}}
@media (max-width:960px){body.tools-open .props-panel{transform:translateX(0)}}
@media (max-width:960px){.tools-backdrop{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}}
@media (max-width:960px){.tools-backdrop[hidden]{display:none}}
@media (max-width:960px){.props-close{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;position:sticky;z-index:60;width:36px;height:36px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.08);cursor:pointer}}
@media (max-width:960px){.props-close:hover{background:rgba(0,0,0,.04)}}
@media (max-width:960px){html[data-theme="dark"] .props-close:hover{background:rgba(255,255,255,.06)}}
@media (max-width:960px){.props-close svg{width:20px;height:20px;display:block}}
#toolsToggle{line-height:0}

/* === Out actions (copy/download) === */
.out-actions{position:absolute;top:24px;right:24px;display:flex;gap:.4rem;z-index:2}
.out-btn{display:inline-flex;align-items:center;gap:.35rem;height:32px;padding:0 .6rem;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.out-btn:hover{transform:translateY(-1px);background:rgba(0,0,0,.05)}
html[data-theme="dark"] .out-btn:hover{background:rgba(255,255,255,.07)}
.out-btn svg{display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.out-btn .tip{position:absolute;left:50%;top:-6px;transform:translate(-50%,-6px);background:var(--text);color:var(--bg);border-radius:6px;padding:2px 6px;font-size:12px;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .16s ease,transform .16s ease;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.out-btn .tip.in{opacity:1;transform:translate(-50%,-12px)}


/* Make the URL row robust on all widths */
.input-row{
  display:grid !important;
  grid-template-columns: auto 1fr auto; /* label | input grows | button */
  align-items:center;
  gap:.4rem;
  max-width:100%;
}
.input-row > input{ min-width:0; width:100%; } /* allow shrinking */
.input-row > .btn{ white-space:nowrap; }

/* Stack nicely on narrow screens */
@media (max-width:520px){
  .input-row{
    grid-template-columns: 1fr;         /* stack */
  }
  .input-row > .btn{
    width:100%;                          /* full-width button */
    justify-self:start;                  /* or stretch, your call */
  }
}