.tools-page { background:#F7F9FC; color:#333; padding:28px 0 52px; }
.tools-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:24px; }
.tools-breadcrumb { margin:0 0 8px; color:#68738b; font-size:12px; }
.tools-heading h1 { margin:0; color:#102A7E; font-size:28px; line-height:1.3; }
.tools-local { display:inline-flex; align-items:center; gap:7px; color:#387360; font-size:12px; white-space:nowrap; }
.tool-icon { display:inline-block; flex:0 0 18px; width:18px; height:18px; background:currentColor; mask:center/contain no-repeat var(--tool-icon); -webkit-mask:center/contain no-repeat var(--tool-icon); }
.tools-layout { display:grid; grid-template-columns:188px minmax(0,1fr); gap:28px; min-height:580px; }
.tools-nav { border-right:1px solid #dce3ee; padding-right:18px; display:flex; flex-direction:column; gap:6px; align-self:start; position:sticky; top:104px; }
.tools-nav a { min-height:46px; padding:10px 12px; display:flex; align-items:center; gap:10px; border-radius:8px; font-size:14px; color:#57627a; white-space:nowrap; }
.tools-nav a:hover { color:#17369E; background:#E9EEF5; }
.tools-nav a[aria-current=page] { color:#17369E; background:#e6edff; font-weight:600; }
.tool-panel { min-width:0; }
.tool-panel[hidden], .tools-page [hidden] { display:none !important; }
.tool-title { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.tool-title h2 { margin:0; font-size:20px; line-height:1.4; }
.tool-title > .tool-icon { width:22px; height:22px; flex-basis:22px; color:#244BBE; }
.tool-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-bottom:16px; }
.tool-controls label, .tool-prompt-fields label, .tool-image-settings > label { display:flex; align-items:center; gap:8px; font-size:13px; color:#57627a; }
.tools-page input, .tools-page select, .tools-page textarea { border:1px solid #ccd6e6; border-radius:8px; background:#fff; color:#333; padding:8px 10px; font:inherit; max-width:100%; }
.tools-page select { min-height:38px; }
.tools-page input[type=checkbox], .tools-page input[type=radio] { accent-color:#17369E; width:16px; height:16px; padding:0; flex-shrink:0; }
.tools-page input[type=color] { width:38px; height:32px; padding:3px; }
.tool-segmented { display:flex; gap:0; border:1px solid #ccd6e6; border-radius:8px; padding:0; margin:0; min-width:0; overflow:hidden; }
.tool-segmented label { position:relative; padding:7px 12px; cursor:pointer; color:#57627a; background:#fff; }
.tool-segmented input { position:absolute; opacity:0; width:1px !important; height:1px !important; }
.tool-segmented label:has(input:checked) { background:#17369E; color:#fff; }
.tool-segmented label:has(input:focus-visible) { outline:2px solid #F5A000; outline-offset:-3px; }
.tool-segmented legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tool-editors { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid #ccd6e6; background:#fff; border-radius:8px; overflow:hidden; }
.tool-editor { min-width:0; }
.tool-editor + .tool-editor { border-left:1px solid #dce3ee; }
.tool-editor-header { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid #E9EEF5; }
.tool-editor-header label { font-size:13px; font-weight:600; color:#102A7E; }
.tool-editor-actions { display:flex; align-items:center; gap:4px; }
.tools-page .tool-icon-button { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:#57627a; cursor:pointer; }
.tools-page .tool-icon-button:hover:not(:disabled) { color:#17369E; background:#edf2fc; }
.tools-page .tool-editor textarea { display:block; width:100%; min-height:360px; resize:vertical; border:0; border-radius:0; font:13px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; padding:16px; tab-size:2; overflow-wrap:normal; white-space:pre; }
.tool-editor textarea[readonly] { background:#fbfcfe; }
.tool-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.tools-page .tool-run, .tools-page .tool-cancel { min-height:40px; padding:9px 16px; display:inline-flex; justify-content:center; align-items:center; gap:8px; border-radius:8px; border:1px solid #17369E; background:#17369E; color:#fff; cursor:pointer; font-size:13px; font-weight:600; }
.tools-page .tool-run:hover:not(:disabled) { background:#102A7E; }
.tools-page .tool-cancel { background:#fff; color:#57627a; border-color:#ccd6e6; }
.tools-page button:disabled { opacity:.42; cursor:not-allowed; }
.tools-page :is(button,input,select,textarea,a):focus-visible { outline:2px solid #244BBE; outline-offset:3px; }
.tools-page .tool-editor textarea:focus-visible { outline-offset:-3px; }
.tool-status { min-height:24px; margin:12px 0 0; color:#68738b; font-size:12px; overflow-wrap:anywhere; }
.tool-status[data-error=true] { color:#b3343c; }
.tool-stats { margin-left:auto; font-size:12px; color:#68738b; }
.tool-prompt-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.tool-prompt-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tool-prompt-fields label { display:grid; gap:6px; min-width:0; }
.tool-prompt-fields label:nth-child(n+2) { grid-column:1/-1; }
.tool-prompt-fields textarea { width:100%; min-height:76px; resize:vertical; font-size:13px; }
.tool-prompt-fields > label:first-child { grid-column:1/-1; }
.tool-prompt-layout .tool-editor { border:1px solid #ccd6e6; border-radius:8px; background:#fff; overflow:hidden; }
.tool-prompt-layout .tool-editor textarea { min-height:620px; }
.tool-image-select { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid #dce3ee; }
.tool-image-select input { font-size:13px; width:min(100%,360px); }
.tool-image-settings { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin:20px 0; }
.tool-image-settings input[type=number] { width:90px; }
.tool-image-settings input[type=range] { width:110px; padding:0; accent-color:#17369E; }
.tool-image-previews { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.tool-image-previews figure { margin:0; min-width:0; }
.tool-image-previews figcaption { display:flex; min-height:32px; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:#102A7E; }
.tool-image-previews figcaption small { color:#68738b; font-size:11px; }
.tool-image-stage { height:300px; display:grid; place-items:center; background:#E9EEF5; border:1px solid #dce3ee; border-radius:8px; overflow:hidden; color:#8a97b0; }
.tool-image-stage > .tool-icon { width:38px; height:38px; }
.tool-image-stage img { max-width:100%; max-height:100%; object-fit:contain; }
@media(max-width:1080px) { .tools-layout { grid-template-columns:160px minmax(0,1fr); gap:20px; } .tools-nav { padding-right:12px; } }
@media(max-width:850px) {
  .tools-heading { padding-bottom:20px; }.tools-heading h1 { font-size:25px; }
  .tools-layout { grid-template-columns:minmax(0,1fr); gap:22px; }
  .tools-nav { position:static; border-right:0; border-bottom:1px solid #dce3ee; padding:0 0 10px; flex-direction:row; overflow-x:auto; gap:4px; }
  .tools-nav a { padding:8px 10px; font-size:13px; min-height:42px; }
}
@media(max-width:600px) {
  .tools-page { padding-top:22px; }.tools-local { font-size:11px; }
  .tool-editors, .tool-prompt-layout, .tool-image-previews { grid-template-columns:minmax(0,1fr); }
  .tool-editor + .tool-editor { border-left:0; border-top:1px solid #dce3ee; }
  .tools-page .tool-editor textarea { min-height:240px; }
  .tool-controls { gap:10px 14px; }.tool-controls label { font-size:12px; }
  .tool-title h2 { font-size:19px; }.tool-image-stage { height:250px; }
  .tool-stats { margin-left:0; width:100%; }.tool-image-settings { gap:12px; }
  .tool-image-select { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .tool-image-select > label { grid-row:1; grid-column:1; }
  .tool-image-select > button { grid-row:1; grid-column:2; }
  .tool-image-select > input { grid-row:2; grid-column:1/-1; width:100%; }
  .tool-image-select > .tool-stats { grid-row:3; grid-column:1/-1; }
}