/* Tool UI palette. These tokens affect interface surfaces, never generated files. */
.site-shell[data-page-type=tool]{--tool-surface:#151521;--tool-panel:#1d1b2c;--tool-input:#10101b;--tool-action:#30263f;--tool-action-hover:#423153;--tool-border:#80718f;--tool-text:#f5f2ff;--tool-muted:#c3b9d1;--tool-accent:#bd9cef;--tool-primary:#7950c7;--tool-primary-border:#b18be9;--content:var(--tool-surface);--link:#cbb2f4;--border:var(--tool-border)}
.site-shell[data-page-type=tool] #content{background:var(--tool-surface);border-radius:16px;box-shadow:inset 0 0 0 1px #393247,0 16px 48px #0002}
.site-shell[data-page-type=tool] .tool-guide,.site-shell[data-page-type=tool] .tool-feedback{background:var(--tool-panel);border-color:var(--tool-border);color:var(--tool-text)}
.site-shell[data-page-type=tool] .tool-guide :is(p,li),.site-shell[data-page-type=tool] .tool-feedback p{color:var(--tool-muted)}
.site-shell[data-page-type=tool] .tool-guide pre{background:var(--tool-input);border-color:var(--tool-border);color:var(--tool-text)}
.site-shell[data-page-type=tool] .tool-feedback :is(input,textarea,select){background:var(--tool-input);border-color:var(--tool-border);color:var(--tool-text)}
.site-shell[data-page-type=tool] .tool-feedback button{background:var(--tool-primary);border-color:var(--tool-primary-border);color:#fff}
.site-shell[data-page-type=tool] #main-content :is(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:var(--tool-accent)}
.site-shell[data-page-type=tool] .tw-page{color:var(--tool-text);background:linear-gradient(135deg,#252035,var(--tool-surface))}
.site-shell[data-page-type=tool] :is(.tw-intro,.tw-stats){color:var(--tool-muted)}
.site-shell[data-page-type=tool] .tw-page label{color:#e3d7f5}
.site-shell[data-page-type=tool] .color-workbench .tool-section{background:var(--tool-panel);border-color:var(--tool-border)}
.site-shell[data-page-type=tool] .image-effects-tool{background:linear-gradient(135deg,#252035,var(--tool-surface));border-color:var(--tool-border)}
.site-shell[data-page-type=tool] .image-effects-tool .controls-panel{background:var(--tool-panel);border-color:var(--tool-border)}
.site-shell[data-page-type=tool] .image-effects-tool .filter-group-header{background:var(--tool-action)}
.site-shell[data-page-type=tool] :is(.case-heading,.json-heading)>span{color:#f6cd63}
.site-shell[data-page-type=tool] .char-preview{background:var(--tool-input);border-color:var(--tool-border);color:var(--tool-muted)}
.site-shell[data-page-type=tool] :is(.tw-page .tw-primary,.case-converter-page .case-primary,.random-password-page #generateBtn,.passphrase-generator-page #generateBtn,.fake-name-generator-page #generateBtn){background:var(--tool-primary);border-color:var(--tool-primary-border);color:#fff}
.site-shell[data-page-type=tool] :is(.tw-page .tw-primary,.case-converter-page .case-primary,.random-password-page #generateBtn,.passphrase-generator-page #generateBtn,.fake-name-generator-page #generateBtn):hover:not(:disabled){background:#8557d2}
.site-shell[data-page-type=tool] :is(.random-password-page,.passphrase-generator-page,.fake-name-generator-page) button{min-height:44px;border-radius:9px}
.site-shell[data-page-type=tool] :is(.random-password-page,.passphrase-generator-page,.fake-name-generator-page) :is(select,input[type=text],input[type=password],input[type=number]){min-height:44px;border-radius:9px}
.site-shell[data-page-type=tool] :is(.random-password-page,.passphrase-generator-page,.fake-name-generator-page) :is(button,input,select,textarea):focus-visible{outline:3px solid #d3baff;outline-offset:3px}
/* Give desktop tools enough space for controls and a useful preview. */
@media(min-width:1000px){.site-shell[data-page-type=tool] #main-content{width:calc(100% - 64px);max-width:1440px}.site-shell[data-page-type=tool] :is(.gs-page,.gmk-page,.gv-page){margin-block:12px;padding:24px}.site-shell[data-page-type=tool] :is(.gs-page,.gmk-page,.gv-page)>.tw-intro{margin-block:8px 14px}}
@media(min-width:1000px){.site-shell[data-page-type=tool] #main-content{padding-top:16px}.site-shell[data-page-type=tool] :is(.gs-page,.gmk-page,.gv-page)>.tw-intro{max-width:none;line-height:1.55}.site-shell[data-page-type=tool] :is(.gs-page,.gmk-page,.gv-page)>h1{margin-bottom:10px}}

/* Desktop workspace: use the available width and keep page scrolling predictable. */
@media(min-width:1000px){
 .site-shell[data-page-type=tool] :is(.tw-page,.md-page,.rx-page,.json-formatter-page,.csv-json-page,.text-compare-page){max-width:1360px;margin:12px auto}
 .site-shell[data-page-type=tool] :is(.tw-grid,.md-workspace,.rx-workspace){grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 .site-shell[data-page-type=tool] .tw-grid>*{min-width:0}
 .site-shell[data-page-type=tool] :is(.md-heading,.rx-heading){text-align:left;margin-bottom:16px}
 .site-shell[data-page-type=tool] :is(.md-heading,.rx-heading) h1{margin-block:8px}
 .site-shell[data-page-type=tool] .md-controls{padding:12px 16px;border:1px solid var(--tool-border);border-radius:12px;background:var(--tool-panel);gap:10px 16px}
 .site-shell[data-page-type=tool] .md-controls label{margin:0}
 .site-shell[data-page-type=tool] .md-card>.md-actions{margin:0 0 14px}
 .site-shell[data-page-type=tool] :is(.md-page #mdInput,.md-preview iframe){height:clamp(320px,52vh,600px);min-height:320px}
 .site-shell[data-page-type=tool] :is(.ar-results,.svg-preview,.pn-preview,.pw-preview){max-height:none;overflow:visible;position:static}
}

/* Remaining workspaces follow the same desktop width; small screens retain each tool's layout. */
@media(min-width:1000px){
 .site-shell[data-page-type=tool] :is(.lf-page,.background-remover-page,.fv-page,.fc-page,.image-effects-tool,.image-pixelator-page,.irc-page,.image-to-pdf-page,.ocr-page,.js-minifier-page,.pm-page,.po-page,.pdf-text-page,.qr-page,.case-converter-page,.ts-page,.url-page,.word-counter-page,.random-password-page,.passphrase-generator-page){max-width:1360px}
 .site-shell[data-page-type=tool] :is(.fc-workspace,.ocr-grid,.url-editors,.ts-workspace){grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-shell[data-page-type=tool] :is(.qr-workspace,.pm-workspace,.fv-workspace){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .site-shell[data-page-type=tool] :is(.fc-workspace,.ocr-grid,.url-editors,.ts-workspace,.qr-workspace,.pm-workspace,.fv-workspace)>*{min-width:0}
 .site-shell[data-page-type=tool] .fv-workspace>.fv-card:last-child{position:static}
 .site-shell[data-page-type=tool] .generator-workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start;margin:20px 0}
 .site-shell[data-page-type=tool] :is(.generator-settings,.generator-results){min-width:0}
 .site-shell[data-page-type=tool] .generator-settings .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0}
 .site-shell[data-page-type=tool] .generator-settings .control-group{min-width:0}
 .site-shell[data-page-type=tool] .generator-results{padding:20px;background:var(--tool-panel);border:1px solid var(--tool-border);border-radius:14px}
 .site-shell[data-page-type=tool] .generator-results .copy-controls{justify-content:flex-start;margin:0 0 20px;gap:10px}
}
.site-shell[data-page-type=tool] .generator-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.site-shell[data-page-type=tool] .generator-actions #generateBtn{width:auto;flex:1;padding:12px 18px}