/* Shared workspace: image upload, tool settings and export. */
.tool-workspace{background:#10171b}
.tool-workspace>header{min-height:116px;padding:24px 28px;background:linear-gradient(115deg,#182228,#121b1f);border-bottom-color:#2c393f}
.tool-workspace h2{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.035em;line-height:1.15;margin:6px 0 8px}
.tool-workspace>header p{font-size:12px;line-height:1.5;color:#9aa8ae}
.tool-workspace>header .eyebrow{font-size:9px;letter-spacing:.18em;color:#b5c78f}
.tool-stage{grid-template-columns:minmax(0,1fr) minmax(280px,340px);min-height:460px;padding:22px;gap:22px;background:#10171b}
.tool-upload{min-height:414px;border:1px dashed #495b60;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#b8ff0007,transparent 65%),#0d1417;cursor:pointer;padding:28px;transition:border-color .2s,background-color .2s}
.tool-upload:before{display:none}
.tool-upload:hover,.tool-upload.dragging{border-color:#97c449;background-color:#131e1a}
.tool-upload [data-empty-preview]{position:relative;max-width:360px;gap:0}
.tool-upload [data-empty-preview]>i{width:64px;height:64px;margin-bottom:22px;border:1px solid #b8ff0033;border-radius:18px;background:#b8ff000c;animation:none;box-shadow:0 8px 24px #0002}
.tool-upload [data-empty-preview]>i:after{display:none}
.tool-upload [data-empty-preview] b{font-size:21px;line-height:1.3;letter-spacing:-.025em;color:#edf2f1}
.tool-upload [data-empty-preview] span{max-width:285px;font-size:12px;line-height:1.7;margin-top:10px;color:#98a6ad}
.tool-upload [data-empty-preview] small{font-size:10px;letter-spacing:.04em;color:#829197;margin-top:18px}
.tool-upload-action{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:24px;padding:0 23px;border:1px solid #b8ff0055;border-radius:11px;background:#b8ff00;color:#17200c;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 5px 18px #b8ff0010}
.tool-upload-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tool-upload-action:focus-within{outline:2px solid #e0ff9b;outline-offset:4px}
.tool-settings{display:flex;flex-direction:column;min-width:0;padding:20px;border:1px solid #2e3c42;border-radius:18px;background:#151e23}
.tool-settings-heading{display:flex;align-items:center;gap:11px;padding-bottom:20px;border-bottom:1px solid #2d3a40}
.tool-step{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #42523b;border-radius:10px;background:#b8ff0009;color:#c5e991;font-size:10px;font-weight:800}
.tool-settings h3{margin:0;font-size:14px;letter-spacing:-.02em;color:#edf1f2}
.tool-settings-heading p{margin:5px 0 0;color:#90a0a7;font-size:10px;line-height:1.5}
.tool-settings .tool-controls{padding:22px 0;gap:20px;background:transparent;max-height:none;overflow:visible}
.tool-settings .tool-controls label,.tool-settings .tool-controls label>span{font-size:11px;letter-spacing:0;color:#b7c3c9;line-height:1.5}
.tool-settings .tool-controls label small{font-size:10px;line-height:1.6;color:#91a0a7}
.tool-settings .tool-controls select,.tool-settings .tool-controls input:not([type=range]){min-height:46px;font-size:12px;border-color:#3c4d54;border-radius:11px;background:#0e161a}
.tool-settings .tool-controls input[type=range]{min-height:22px;cursor:pointer}
.tool-settings .tool-controls output{font-size:10px;padding:4px 8px}
.tool-settings .tool-controls>p{font-size:12px;line-height:1.7;color:#a1afb6}
.tool-settings-note{display:flex;gap:10px;align-items:flex-start;margin-top:auto;padding-top:20px;border-top:1px solid #2d3a40}
.tool-settings-note svg{width:18px;height:18px;flex:none;fill:none;stroke:#a2ba7d;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tool-settings-note span{display:grid;gap:5px}.tool-settings-note b{font-size:10px;color:#becbc6;font-weight:600}.tool-settings-note small{font-size:10px;color:#8b9b9f;line-height:1.5}
.tool-workspace>footer{gap:18px;padding:18px 24px;background:#131c20;border-top-color:#2e3c42}
.tool-workspace>footer b{font-size:11px;line-height:1.5}.tool-workspace>footer small{font-size:10px;line-height:1.6;color:#8e9da4}
.tool-workspace>footer>button{min-height:46px;font-size:12px;border-radius:11px;padding:12px 22px}
.tool-workspace>footer>button:disabled{opacity:1;background:#28352a;color:#96a28b;cursor:not-allowed}
.tool-upload:has(canvas:not([hidden])){border-style:solid;cursor:default}
.tool-upload:has(.tool-pick-background.active) canvas{cursor:crosshair}
.tool-stage:has(.tool-pick-background.active) canvas{cursor:crosshair}
.tool-file-meta span,.tool-file-meta button{font-size:11px}
@media(min-width:651px) and (max-width:1100px){.tool-stage{grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:16px;padding:16px}.tool-upload{padding:20px}.tool-upload [data-empty-preview] b{font-size:18px}.tool-settings{padding:16px}}
@media(max-width:650px){.tool-workspace>header{padding:20px 18px;min-height:0}.tool-workspace>header p{font-size:12px}.tool-workspace>header .eyebrow{font-size:9px}.tool-stage{display:flex;flex-direction:column;padding:14px;gap:14px;min-height:0}.tool-upload{min-height:310px;padding:24px 18px;border:1px dashed #495b60;border-radius:15px}.tool-upload [data-empty-preview] b{font-size:20px}.tool-upload [data-empty-preview] span{font-size:12px}.tool-upload [data-empty-preview] small{font-size:9px}.tool-settings{order:2;border-radius:15px;padding:18px}.tool-settings .tool-controls{padding:20px 0;gap:18px}.tool-settings .tool-controls select,.tool-settings .tool-controls input:not([type=range]){font-size:16px}.tool-settings-note{padding-top:16px}.tool-workspace>footer{padding:14px;gap:12px}.tool-workspace>footer>div{display:grid}.tool-workspace>footer>button{min-height:48px}}
@media(prefers-reduced-motion:reduce){.tool-upload{transition:none}}

/* Consistent dropdowns across the image tools. */
.tool-select{position:relative;min-width:0}
.tool-select select[hidden]{display:none!important}
.tool-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:46px;padding:12px 14px;border:1px solid #3c4d54;border-radius:11px;background:#0e161a;color:#edf2f3;text-align:left;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s}
.tool-select-trigger:after{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid #9aacae;border-bottom:1.5px solid #9aacae;transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.tool-select-trigger:hover{background:#142024;border-color:#6a805a}
.tool-select-trigger[aria-expanded=true]{border-color:#99be53;box-shadow:0 0 0 3px #b8ff000b}
.tool-select-trigger[aria-expanded=true]:after{transform:rotate(225deg);border-color:#c5e991}
.tool-select-trigger:focus-visible,.tool-select-option:focus-visible{outline:2px solid #c5e991;outline-offset:2px}
.tool-select-menu{position:fixed;z-index:1300;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid #4a5d53;border-radius:13px;background:#182327;box-shadow:0 16px 38px #0008;scrollbar-width:thin;scrollbar-color:#536655 #182327}
.tool-select-menu[hidden]{display:none!important}
.tool-select-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:39px;gap:12px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#bdcacf;text-align:left;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer}
.tool-select-option:hover,.tool-select-option:focus{background:#25332e;color:#f0f6ef}
.tool-select-option[aria-selected=true]{background:#b8ff0012;color:#d4f3a3;font-weight:700}
.tool-select-option[aria-selected=true]:after{content:"✓";color:#b8ff00;font-size:14px}
.tool-select-option:disabled{opacity:.4;cursor:not-allowed}
.tool-select-trigger:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:650px){.tool-select-trigger{min-height:48px;font-size:14px}.tool-select-option{min-height:44px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.tool-select-trigger,.tool-select-trigger:after{transition:none}}

/* Daily usage: a quiet, readable status card. */
.tool-workspace>header>.tool-usage{display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:184px!important;padding:12px 16px!important;border:1px solid #405044!important;border-radius:14px;background:#14201b!important;box-shadow:inset 0 1px 0 #ffffff05!important}
.tool-workspace>header>.tool-usage>i{display:grid;place-items:center;flex:none;width:36px!important;height:36px!important;border:1px solid #a7cd6330;border-radius:10px;background:#b8ff0009;box-shadow:none;color:#bedc91}
.tool-usage>i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool-workspace>header>.tool-usage>span{display:grid;gap:4px}
.tool-workspace>header>.tool-usage>span:before{content:"USO DE HOJE";width:auto;color:#95aa9b;font-size:8px!important;font-weight:700;line-height:1.2;letter-spacing:.12em}
.tool-workspace>header>.tool-usage b{color:#e8f0e6!important;font-size:14px!important;font-weight:700!important;line-height:1.25;letter-spacing:-.02em;text-shadow:none;font-variant-numeric:tabular-nums}
.tool-workspace>header>.tool-usage small{color:#9daf9e!important;font-size:10px!important;font-weight:500;line-height:1.3}
.tool-workspace>header>.tool-usage.is-low{border-color:#796039!important;background:#241f17!important}
.tool-workspace>header>.tool-usage.is-low>i{color:#e4bf79;background:#e4bf790c;border-color:#e4bf792b}
.tool-workspace>header>.tool-usage.is-empty{border-color:#75444c!important;background:#25191e!important}
.tool-workspace>header>.tool-usage.is-empty>i{color:#e9a5af;background:#e9a5af0c;border-color:#e9a5af2b}
@media(max-width:650px){.tool-workspace>header>.tool-usage{min-width:0!important;width:100%;padding:11px 14px!important}.tool-workspace>header>.tool-usage>span{grid-template-columns:1fr auto;flex:1;column-gap:12px;align-items:center}.tool-workspace>header>.tool-usage>span:before{grid-column:1}.tool-workspace>header>.tool-usage b{grid-column:1;grid-row:2}.tool-workspace>header>.tool-usage small{grid-column:2;grid-row:1/3;text-align:right}}