.tool-hero{background:linear-gradient(125deg,#f2f7ff 0%,#f8fbff 53%,#e4f9f5 100%);padding:66px 0 61px;border-top:1px solid #ebf0f8}
.tool-hero h1{font-size:clamp(41px,5vw,69px);line-height:1.1;letter-spacing:-3px;margin:19px 0;max-width:1050px}
.tool-lead{max-width:810px;font-size:clamp(17px,1.9vw,20px);line-height:1.65;color:#50627e;margin:0 0 22px}
.tool-trust{display:flex;flex-wrap:wrap;gap:12px 23px;color:#397f77;font-size:12px;font-weight:750}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;margin-top:42px;margin-bottom:64px;align-items:start}
.tool-panel{background:#fff;border:1px solid #dfe8f4;border-radius:19px;padding:29px;box-shadow:0 9px 36px #1a397b0a;min-width:0}
.tool-panel-head h2{font-size:30px;letter-spacing:-1.3px;margin:7px 0}
.tool-panel-head p{font-size:13px;line-height:1.7;color:#61758f;margin:0 0 22px}
.tool-step{font-size:11px;letter-spacing:1.4px;font-weight:800;color:#2563eb}
#prompt-form{display:flex;flex-direction:column}
#prompt-form>label{font-size:13px;font-weight:740;color:#213855;margin:15px 0 7px}
.optional{color:#708098;font-size:11px;font-weight:500;margin-left:4px}
#prompt-form input,#prompt-form textarea,#prompt-form select,#generated-prompt{display:block;width:100%;border:1px solid #d8e4f3;border-radius:11px;padding:14px;font-size:13px;line-height:1.62;background:#fbfdff;color:#142b4a;font-family:inherit}
#prompt-form textarea{min-height:142px;resize:vertical}
#prompt-form textarea::placeholder,#prompt-form input::placeholder{color:#8898ad}
#prompt-form input:focus,#prompt-form textarea:focus,#prompt-form select:focus,#generated-prompt:focus{outline:2px solid #2563eb;outline-offset:2px}
.field-note{font-size:11px;color:#71829a;line-height:1.6;margin-top:7px}
.tool-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:23px}
.tool-actions .button{min-height:47px;white-space:normal}
.tool-actions .outline{border:1px solid #d8e4f3}
.tool-results{position:sticky;top:24px}
.output-placeholder{border:1px dashed #b7cced;border-radius:14px;min-height:320px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;padding:35px;text-align:center;background:#f6f9ff}
.output-placeholder[hidden],#output-wrap[hidden]{display:none}
.output-placeholder strong{font-size:18px}
.output-placeholder p{max-width:260px;color:#647891;font-size:13px;line-height:1.7}
.output-symbol{font-size:38px;color:#2563eb}
#generated-prompt{background:#f7faff;min-height:390px;max-height:700px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.7}
.output-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:15px}
.output-actions .button{min-height:46px}
#copy-message{font-size:12px;font-weight:700;color:#0c8b69}
.tool-warning{font-size:12px;color:#566b87;line-height:1.65;padding:14px 0 0}
.tool-details{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding-bottom:80px}
.tool-details>div{background:#f7fbff;border-radius:14px;border:1px solid #e5edf7;padding:22px}
.tool-details h2{font-size:18px;line-height:1.3;letter-spacing:-.4px;margin:11px 0 7px}
.tool-details p{font-size:13px;line-height:1.7;color:#60748f;margin:0}
.tool-detail-num{color:#2563eb;font-size:11px;font-weight:830;letter-spacing:1.5px}
.tool-bottom{display:flex;justify-content:space-between;align-items:center;gap:28px;background:linear-gradient(110deg,#eafaff,#f1fbff 52%,#e9f9f5);border:1px solid #e1eaf5;border-radius:20px;padding-block:35px;margin-bottom:75px}
.tool-bottom h2{font-size:clamp(25px,2.5vw,34px);line-height:1.2;letter-spacing:-1px;margin:11px 0}
.tool-bottom p{font-size:13px;color:#60738d;line-height:1.7;max-width:680px;margin:0}
.tool-bottom .button{flex-shrink:0;white-space:normal;text-align:center}
@media(max-width:900px){.tool-layout{grid-template-columns:1fr}.tool-results{position:static}.tool-details{grid-template-columns:1fr;gap:12px}.tool-bottom{flex-direction:column;align-items:stretch}}
@media(max-width:550px){.tool-hero{padding:39px 0 44px}.tool-hero h1{letter-spacing:-1.8px}.tool-panel{padding:19px}.tool-panel-head h2{font-size:25px}.tool-layout{padding-inline:18px;margin-top:25px}.tool-bottom{padding-block:25px}.tool-bottom .button{align-self:stretch}.tool-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}