.tools-page{--tool-line:#33424b;--tool-surface:#11191e;padding-bottom:70px}.tools-hero{position:relative;overflow:hidden;margin-bottom:8px;padding:38px;border:1px solid #29363e;border-radius:28px;background:radial-gradient(circle at 84% 15%,#b8ff001b,transparent 24%),linear-gradient(125deg,#131c21,#0c1216 70%)}.tools-hero:after{content:"";position:absolute;right:11%;top:-90px;width:190px;height:190px;border:1px solid #b8ff0021;border-radius:50%;box-shadow:0 0 0 35px #b8ff0008,0 0 0 70px #b8ff0005;animation:toolOrbit 9s ease-in-out infinite}.tools-hero>div,.tools-hero>aside{position:relative;z-index:1}.tools-hero>aside{border-color:#4a5c38;background:#10191be6;box-shadow:0 18px 50px #0005;backdrop-filter:blur(16px)}
.tools-shell{gap:20px;margin-top:20px}.tools-catalog,.tool-workspace{border-color:#34434c!important;border-radius:22px!important;box-shadow:0 22px 60px #0004}.tools-catalog nav{gap:3px}.tools-catalog nav button{position:relative;min-height:53px;padding:8px 10px;border:1px solid transparent;transition:transform .2s,border-color .2s,background .2s}.tools-catalog nav button:hover{transform:translateX(3px);border-color:#3a4b54}.tools-catalog nav button.active{border-color:#719b3159;background:linear-gradient(90deg,#b8ff0018,transparent);box-shadow:inset 3px 0 var(--lime)}.tools-catalog nav button>i{width:36px;height:36px;border:1px solid #3b4952;border-radius:11px;background:#1b252b;color:#9aa7af;transition:.2s}.tools-catalog nav button.active>i{border-color:var(--lime);background:var(--lime);color:#111;box-shadow:0 7px 20px #b8ff0028}.tools-catalog nav button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tools-catalog nav button u{display:grid;place-items:center;color:#65737c}.tools-catalog nav button u svg{width:13px}
.tool-workspace>header{min-height:105px;gap:14px;padding:20px 25px;background:radial-gradient(circle at 92% 0,#b8ff0013,transparent 42%),linear-gradient(110deg,#172127,#11181d)}.tool-workspace>header>.tool-heading-icon{width:48px;height:48px;display:grid;place-items:center;flex:none;margin-right:0;border:1px solid #668c2d;border-radius:14px;background:#b8ff0010;color:var(--lime)}.tool-heading-icon:empty{display:none!important}.tool-heading-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tool-workspace>header>.tool-heading-icon+div{margin-right:auto}
.tool-upload{overflow:hidden;transition:.25s}.tool-upload:before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:#b8ff0009;filter:blur(18px);animation:toolFloat 7s ease-in-out infinite;pointer-events:none}.tool-upload.dragging{box-shadow:inset 0 0 0 2px var(--lime)}.tool-upload [data-empty-preview]>i{position:relative;animation:toolUpload 3s ease-in-out infinite}.tool-upload [data-empty-preview]>i:after{content:"";position:absolute;inset:-8px;border:1px solid #b8ff0028;border-radius:28px;animation:toolPulse 2.4s ease-out infinite}.tool-upload canvas{position:relative;background-color:#11181d;background-image:linear-gradient(45deg,#1d272d 25%,transparent 25%),linear-gradient(-45deg,#1d272d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1d272d 75%),linear-gradient(-45deg,transparent 75%,#1d272d 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;animation:toolCanvasIn .35s ease-out}.tool-file-meta button{display:flex;align-items:center;gap:5px;cursor:pointer}.tool-file-meta button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
.tool-controls{gap:16px;padding:25px}.tool-controls label>span{font-size:8px;letter-spacing:.05em}.tool-controls label small{color:#687680;font-size:7px;font-weight:500;line-height:1.45}.tool-controls select,.tool-controls input:not([type=range]){height:43px;transition:.2s}.tool-controls select:focus,.tool-controls input:focus{border-color:#88b937;box-shadow:0 0 0 3px #b8ff000c;outline:0}.tool-control-intro{display:flex;align-items:center;gap:11px;margin-bottom:4px;padding:13px;border:1px solid #36464f;border-radius:14px;background:linear-gradient(110deg,#1a252b,#121a1f)}.tool-control-intro>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#b8ff0013;color:var(--lime)}.tool-control-intro svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}.tool-control-intro b,.tool-control-intro small{display:block}.tool-control-intro b{font-size:10px}.tool-control-intro small{margin-top:3px;color:#74828b;font-size:7px}.tool-segments{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.tool-segments button{height:42px;border:1px solid #3b4a53;border-radius:10px;background:#0c1216;color:#aab5bc;font-weight:900;cursor:pointer;transition:.2s}.tool-segments button:hover,.tool-segments button.active{border-color:#85b333;background:#b8ff0012;color:#dcff88;transform:translateY(-1px)}.tool-controls output{justify-self:end;margin-top:-4px;padding:3px 7px;border-radius:6px;background:#222d34;color:#c7d0d5;font-size:7px}
.tool-workspace>footer>button{display:flex;align-items:center;justify-content:center;gap:11px;min-width:180px;transition:.2s}.tool-workspace>footer>button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 28px #b8ff0028}.tool-workspace>footer>button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-dimensions{display:grid;grid-template-columns:1fr 25px 1fr;align-items:center;gap:6px;padding:11px;border:1px solid #34444d;border-radius:13px;background:#0d1418}.tool-dimensions span{display:grid;gap:3px}.tool-dimensions span:last-child{text-align:right}.tool-dimensions small{color:#66757e;font-size:6px;font-weight:900;letter-spacing:.12em}.tool-dimensions b{color:#e7ecef;font-size:9px}.tool-dimensions svg{width:18px;fill:none;stroke:var(--lime);stroke-width:1.8}.tool-pick-background{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid #3a4a53;border-radius:13px;background:#0d1418;color:#dce3e6;text-align:left;cursor:pointer;transition:.2s}.tool-pick-background:hover,.tool-pick-background.active{border-color:#91c332;background:#b8ff000c;box-shadow:0 0 0 3px #b8ff0008}.tool-pick-background>svg{width:22px;height:22px;fill:none;stroke:var(--lime);stroke-width:1.7}.tool-pick-background span{display:grid;gap:3px}.tool-pick-background b{font-size:9px}.tool-pick-background small{color:#74828b;font-size:7px}.tool-pick-background.active small{color:#cfff72}.tool-helper{margin:0;padding:9px 11px;border-left:2px solid #5e727e;background:#ffffff03;color:#74828b!important;font-size:7px!important}.tool-upload:has(+.tool-controls .tool-pick-background.active) canvas{cursor:crosshair}.bg-pick-marker[hidden]{display:none!important}.bg-pick-marker{position:absolute;z-index:6;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #fff;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #111b,0 0 18px #b8ff00;pointer-events:none;animation:bgMarkerIn .22s ease-out}.bg-pick-marker:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#17200e}@keyframes bgMarkerIn{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
.tool-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tool-presets button{height:36px;border:1px solid #394851;border-radius:9px;background:#0d1418;color:#8e9aa2;font-size:8px;font-weight:850;cursor:pointer;transition:.18s}.tool-presets button:hover,.tool-presets button.active{border-color:#84b230;background:#b8ff0010;color:#dbff88;transform:translateY(-1px)}
.tool-apply-background{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:43px;border:0;border-radius:11px;background:var(--lime);color:#10150b;font-size:9px;font-weight:900;cursor:pointer;box-shadow:0 10px 25px #b8ff0017;transition:.2s}.tool-apply-background:hover{transform:translateY(-2px);box-shadow:0 14px 30px #b8ff002b}.tool-apply-background svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tool-export-progress[hidden]{display:none!important}.tool-export-progress{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:#080d10c7;backdrop-filter:blur(8px);animation:toolCanvasIn .2s ease-out}.tool-workspace{position:relative}.tool-export-progress>div{width:min(360px,calc(100% - 40px));display:grid;grid-template-columns:1fr auto;gap:8px;padding:22px;border:1px solid #4b5c65;border-radius:18px;background:linear-gradient(145deg,#192329,#10171b);box-shadow:0 25px 80px #000b}.tool-export-progress span{grid-column:1/-1;height:7px;overflow:hidden;border-radius:99px;background:#28343b}.tool-export-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#79b500,var(--lime));box-shadow:0 0 15px #b8ff0066;transition:width .25s ease}.tool-export-progress b{font-size:10px}.tool-export-progress small{color:var(--lime);font-size:9px;font-weight:900}
@keyframes toolOrbit{50%{transform:translateY(18px) scale(1.05)}}@keyframes toolFloat{50%{transform:translate(55px,-30px)}}@keyframes toolUpload{50%{transform:translateY(-5px);box-shadow:0 12px 32px #b8ff0018}}@keyframes toolPulse{70%,100%{transform:scale(1.18);opacity:0}}@keyframes toolCanvasIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.tools-hero:after,.tool-upload:before,.tool-upload [data-empty-preview]>i,.tool-upload [data-empty-preview]>i:after,.tool-upload canvas{animation:none!important}}@media(max-width:650px){.tools-hero{padding:26px 22px;border-radius:21px}.tools-hero:after{opacity:.5}.tool-workspace>header{display:grid;grid-template-columns:auto 1fr}.tool-workspace>header>span{grid-column:1/-1}.tool-controls{padding:18px}}
.tool-controls label:has(input[name="color"]){display:none!important}.tools-catalog{scrollbar-width:thin;scrollbar-color:#789c35 #11191e}.tools-catalog::-webkit-scrollbar{width:8px}.tools-catalog::-webkit-scrollbar-track{margin:8px 0;border-radius:99px;background:#11191e}.tools-catalog::-webkit-scrollbar-thumb{border:2px solid #11191e;border-radius:99px;background:linear-gradient(#8fbe38,#4f6929)}.tools-catalog::-webkit-scrollbar-thumb:hover{background:var(--lime)}.tools-catalog>header{gap:12px;padding:17px;background:radial-gradient(circle at 100% 0,#b8ff0010,transparent 40%),linear-gradient(145deg,#172127,#11181d)}.tools-catalog>header>div{display:flex;align-items:center;gap:10px}.tools-catalog>header>div>i{width:36px;height:36px;display:grid;place-items:center;flex:none;border:1px solid #66892d;border-radius:11px;background:#b8ff000d;color:var(--lime)}.tools-catalog>header>div>i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.tools-catalog>header>div span{display:grid;gap:3px}.tools-catalog>header>div small{color:#72808a;font-size:6px;font-weight:900;letter-spacing:.15em}.tools-catalog>header>div b{font-size:12px}.tools-catalog>header>p{margin:0;color:#6d7a83;font-size:7px;line-height:1.45}.tools-catalog>header label{margin-top:0;padding-right:7px}.tools-catalog>header kbd{padding:3px 5px;border:1px solid #394750;border-radius:5px;background:#1b242a;color:#66747d;font:600 6px inherit}.tools-catalog nav button span b{display:flex;align-items:center;gap:5px}.tools-catalog nav button mark{padding:2px 4px;border:1px solid #99cb3a55;border-radius:5px;background:#b8ff0015;color:#cfff70;font-size:5px;font-weight:950;letter-spacing:.08em}.tools-catalog nav button.active mark{border-color:#17200d33;background:#17200d;color:#26350d}
.tools-catalog>header{position:relative;gap:9px;padding:20px 17px 17px;border-bottom-color:#36454e;background:radial-gradient(circle at 92% 8%,#b8ff0018,transparent 34%),linear-gradient(155deg,#19242a,#10171b 72%)}.tools-catalog>header:before{content:"";position:absolute;left:17px;right:17px;bottom:0;height:1px;background:linear-gradient(90deg,var(--lime),#b8ff0015,transparent)}.tools-catalog>header>div{gap:11px}.tools-catalog>header>div>i{width:40px;height:40px;border-color:#83af3366;border-radius:13px;background:linear-gradient(145deg,#b8ff0018,#b8ff0007);box-shadow:inset 0 1px #ffffff0d,0 8px 18px #0003}.tools-catalog>header>div>i svg{width:19px}.tools-catalog>header>div small{color:#91a0a9;font-size:5.5px;letter-spacing:.18em}.tools-catalog>header>div b{font-size:13px;letter-spacing:-.015em}.tools-catalog>header>p{margin:1px 0 3px;padding-left:51px;color:#6f7d86;font-size:6.5px}.tools-catalog>header label{position:relative;height:43px;margin-top:4px;padding:0 8px 0 13px;border-color:#40515b;border-radius:13px;background:#0b1115;box-shadow:inset 0 1px #ffffff05,0 7px 18px #0002;transition:border-color .2s,box-shadow .2s,background .2s}.tools-catalog>header label:focus-within{border-color:#86b532;background:#0d1517;box-shadow:0 0 0 3px #b8ff000c,0 10px 22px #0003}.tools-catalog>header label>svg{width:16px;color:#74828b;stroke:currentColor;transition:.2s}.tools-catalog>header label:focus-within>svg{color:var(--lime)}.tools-catalog>header input{font-size:9px}.tools-catalog>header input::placeholder{color:#56636c}.tools-catalog>header kbd{min-width:29px;padding:5px 6px;border-color:#34434c;border-radius:7px;background:#172027;color:#7d8991;text-align:center;box-shadow:inset 0 1px #ffffff08}.tools-catalog nav button mark,.tools-catalog nav button.active mark{border-color:#9dd136;background:#b8ff00;color:#142006;text-shadow:none;box-shadow:0 0 10px #b8ff0038}.tools-catalog nav button.active mark{border-color:#dfff8e;background:#d7ff70;color:#111b05}
.tools-catalog>header kbd{display:none!important}.tools-catalog>header label{padding-right:13px}.tools-hero{min-height:0;padding:27px 31px 29px;border-radius:23px;align-items:center}.tools-hero h1{max-width:820px;margin:7px 0 11px;font-size:clamp(36px,4.65vw,61px);line-height:.93}.tools-hero>div>p:last-child{max-width:600px;margin:0;font-size:10px;line-height:1.5}.tools-hero>aside{min-width:185px;padding:16px 18px;border-radius:16px;background:radial-gradient(circle at 100% 0,#b8ff0019,transparent 48%),#10191bdb}.tools-hero>aside b{font-size:31px;line-height:1}.tools-hero>aside span{margin-top:5px;font-size:8px}.tools-hero>aside small{margin-top:6px;font-size:6px;line-height:1.35}.tools-hero:after{right:14%;top:-120px;width:170px;height:170px;opacity:.72}@media(max-width:650px){.tools-hero{padding:23px 20px}.tools-hero h1{font-size:clamp(34px,12vw,49px)}.tools-hero>aside{min-width:0}}
/* Hover e seleção possuem leituras diferentes para não parecer seleção dupla. */
.tool-segments button:hover:not(.active){border-color:#3b4a53!important;background:#0c1216!important;color:#aab5bc!important;box-shadow:none!important;transform:none!important}
.tool-presets button:hover:not(.active){border-color:#394851!important;background:#0d1418!important;color:#8e9aa2!important;box-shadow:none!important;transform:none!important}
.tool-segments button.active,.tool-presets button.active{border-color:#85b333!important;background:#b8ff0012!important;color:#dcff88!important;box-shadow:inset 0 0 0 1px #b8ff0012!important;transform:none!important}