/* Webtick Developer Tools — task-specific workspace layer (v4.39.1) */
/* Widen the PAGE CONTAINER, not the child tool. A child wider than the theme's
   1200px container creates layout overflow even when visually re-centered. */
.container.wt-dev-page-container{
  width:min(calc(100% - 24px),1880px)!important;
  max-width:none!important;
}
.webtick-page-content-section>.container:has(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md){
  width:min(calc(100% - 24px),1880px)!important;
  max-width:none!important;
}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md){
  --dev-bg:#0b0f14;--dev-panel:#111720;--dev-panel2:#161d27;--dev-line:#26303d;--dev-text:#dce6f2;--dev-muted:#8795a8;--dev-accent:#7c6cff;--dev-font-size:13px;
  box-sizing:border-box;min-width:0!important;width:100%!important;position:relative;left:auto!important;transform:none!important;margin-inline:auto!important;
}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md),
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md) *{box-sizing:border-box}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md) :where(section,main,aside,div,form,nav,article,header,footer,label){min-width:0}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md) :where(input,textarea,select,iframe,pre,table){max-width:100%;min-width:0}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md) :where(code,pre){overflow-wrap:anywhere}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md) textarea{font-size:var(--dev-font-size)!important;tab-size:2}

/* Shared utility bar ONLY for code-centric workspaces. */
.wt-dev-idebar{direction:rtl;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;background:#0f141c;border:1px solid #252e3a;border-radius:10px;margin:0 0 8px;color:#aeb9c8;box-shadow:0 8px 24px rgba(2,6,23,.1)}
.wt-dev-idebar__group{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}.wt-dev-idebar button{border:1px solid #2d3745;background:#171e28;color:#dbe5f2;border-radius:7px;padding:6px 9px;font:700 11px/1.2 inherit;cursor:pointer}.wt-dev-idebar button:hover{border-color:#776cff;background:#1d2431}.wt-dev-idebar .wt-dev-focus-btn{background:#6758e8;border-color:#6758e8;color:#fff}.wt-dev-idebar__label,.wt-dev-font-label{font-size:10px;color:#77869a}.wt-dev-idebar code{direction:ltr;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#8fa1b8}

body.wt-dev-focus-open{overflow:hidden!important}
body.wt-dev-focus-open .wt-dev-focus-root{position:fixed!important;inset:8px!important;transform:none!important;width:auto!important;max-width:none!important;height:auto!important;overflow:auto!important;z-index:2147483000!important;background:#090d12!important;border:1px solid #26303b;border-radius:14px;padding:8px!important;box-shadow:0 30px 100px rgba(0,0,0,.5)}
body.wt-dev-focus-open .wt-dev-focus-root :where(.wt-devlab-hero,.wt-jsonstudio-hero,.whs-hero,.csss-hero,.wt-regex-hero,.wt-md-hero){display:none!important}
body.wt-dev-focus-open .wt-dev-focus-root .wt-dev-idebar{position:sticky;top:0;z-index:1000;margin-bottom:6px}
body.wt-dev-focus-open .wt-dev-focus-root .wt-dev-focus-btn{background:#b42318;border-color:#b42318}

/* 1) Frontend Lab — full IDE. Editor + rendered app are the product. */
.wt-devlab{max-width:1880px!important}
.wt-devlab .wt-devlab-hero{padding:18px 22px!important;margin-bottom:8px!important;border-radius:14px!important}
.wt-devlab .wt-devlab-hero h1{font-size:clamp(25px,2.1vw,36px)!important;margin-block:4px!important}.wt-devlab .wt-devlab-hero p{font-size:13px!important;line-height:1.75!important}
.wt-devlab .wt-devlab-workspace{height:clamp(650px,78vh,980px)!important;min-height:620px!important;grid-template-columns:minmax(0,var(--lab-editor,44%)) 7px minmax(0,1fr)!important}
.wt-devlab .wt-devlab-editor-pane,.wt-devlab .wt-devlab-preview-pane{min-width:0!important}
.wt-devlab .wt-devlab-lower{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr)!important;gap:8px!important;margin-top:8px!important}
.wt-devlab .wt-devlab-bottom-grid{gap:8px!important;margin-top:8px!important}.wt-devlab .wt-devlab-panel{border-radius:12px!important;padding:12px!important}
body.wt-dev-focus-open .wt-devlab .wt-devlab-workspace{height:calc(100vh - 92px)!important;min-height:540px!important}

/* 2) JSON Studio — editor + data inspector rail. */
.wt-jsonstudio{max-width:1640px!important}
.wt-jsonstudio .wt-jsonstudio-hero{padding:18px 22px!important;margin-bottom:8px!important;border-radius:14px!important}.wt-jsonstudio .wt-jsonstudio-hero h1{font-size:30px!important;margin:5px 0!important}.wt-jsonstudio .wt-jsonstudio-hero p{font-size:13px!important}
.wt-jsonstudio .wt-jsonstudio-workspace{grid-template-columns:minmax(0,1.75fr) minmax(300px,.62fr)!important;gap:8px!important;align-items:start!important}
.wt-jsonstudio .wt-jsonstudio-editor-pane{min-width:0;border-radius:12px!important;overflow:hidden}.wt-jsonstudio .wt-jsonstudio-editor-wrap{height:clamp(620px,72vh,900px)!important;min-width:0!important}
.wt-jsonstudio .wt-jsonstudio-inspector-pane{position:sticky!important;top:60px!important;max-height:calc(100vh - 74px)!important;overflow:auto!important;border-radius:12px!important;min-width:0!important}
.wt-jsonstudio .wt-jsonstudio-tab{min-height:0!important}.wt-jsonstudio .wt-jsonstudio-tree{max-width:100%;overflow:auto}.wt-jsonstudio .wt-jsonstudio-pathbar{margin-top:8px!important;border-radius:10px!important}
body.wt-dev-focus-open .wt-jsonstudio .wt-jsonstudio-editor-wrap{height:calc(100vh - 95px)!important}.wt-jsonstudio .wt-jsonstudio-notes{margin-top:8px!important}

/* 3) HTML Studio — browser workbench: source and render dominate, inspector is a bottom drawer. */
.wt-htmlstudio{max-width:1740px!important}
.wt-htmlstudio .whs-hero{padding:18px 22px!important;margin-bottom:8px!important;border-radius:14px!important}.wt-htmlstudio .whs-hero h1{font-size:30px!important;margin:5px 0!important}.wt-htmlstudio .whs-hero p{font-size:13px!important}
.wt-htmlstudio .whs-workspace{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;gap:8px!important;align-items:stretch!important}
.wt-htmlstudio .whs-editor-pane,.wt-htmlstudio .whs-preview-pane{min-width:0!important;border-radius:12px!important;overflow:hidden}
.wt-htmlstudio #whsInput,.wt-htmlstudio .whs-preview-stage{height:clamp(610px,70vh,880px)!important;min-height:610px!important}
.wt-htmlstudio .whs-inspector{position:static!important;margin-top:8px!important;border-radius:12px!important;overflow:hidden}.wt-htmlstudio .whs-tabs{position:sticky;top:0;background:#fff;z-index:3}
.wt-htmlstudio .whs-tree{max-width:100%;overflow:auto}.wt-htmlstudio .whs-summary-grid,.wt-htmlstudio .whs-stats-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body.wt-dev-focus-open .wt-htmlstudio #whsInput,body.wt-dev-focus-open .wt-htmlstudio .whs-preview-stage{height:calc(100vh - 105px)!important;min-height:520px!important}

/* 4) CSS Studio — code review workbench. Source dominates; analyzer is a narrow dock. */
.csss{max-width:1660px!important}
.csss .csss-hero{margin:0 0 8px!important}.csss .csss-hero h1{font-size:30px!important}.csss .csss-toolbar{top:6px!important;border-radius:10px!important;padding:7px!important;margin-bottom:8px!important}
.csss .csss-workspace{grid-template-columns:minmax(0,1.85fr) minmax(300px,.58fr)!important;gap:8px!important;align-items:start!important}.csss .csss-editor-card,.csss .csss-side{min-width:0!important;border-radius:12px!important}
.csss #csssInput{height:clamp(610px,70vh,880px)!important;min-height:610px!important;resize:none!important}.csss .csss-side{position:sticky!important;top:58px!important;max-height:calc(100vh - 72px)!important;overflow:auto!important}
.csss .csss-tabs{overflow-x:auto!important;overscroll-behavior-inline:contain}.csss .csss-preview-zone{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)!important;gap:8px!important;margin-top:8px!important}.csss .csss-preview-card,.csss .csss-output-card,.csss .csss-selector-lab{border-radius:12px!important}.csss #csssOutput{min-height:360px!important}
body.wt-dev-focus-open .csss #csssInput{height:calc(100vh - 98px)!important;min-height:520px!important}.csss .csss-lab-row{grid-template-columns:minmax(0,1fr) auto!important}

/* 5) URL Toolkit — command center, deliberately NOT IDE/full-bleed. */
.urlt{max-width:1280px!important}
.urlt .urlt-hero{padding:22px 24px!important;margin-bottom:12px!important;border-radius:18px!important}.urlt .urlt-input-card{position:static!important;border-radius:14px!important}.urlt .urlt-input-row{grid-template-columns:minmax(0,1fr) auto!important}.urlt #urltInput{font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace!important;direction:ltr;text-align:left;min-width:0}
.urlt .urlt-nav{position:sticky!important;top:8px!important;z-index:25!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px!important;padding:6px!important;background:rgba(255,255,255,.96)!important;border:1px solid #e2e8f0;border-radius:12px;overflow:visible!important}.urlt .urlt-nav button{min-width:0!important;white-space:normal!important;padding-inline:7px!important}
.urlt .urlt-panel>.urlt-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.urlt .urlt-table-wrap{overflow:auto;max-width:100%}.urlt .urlt-query-table,.urlt .urlt-diff-table{min-width:720px}.urlt .urlt-output-row,.urlt .urlt-compare-inputs{grid-template-columns:minmax(0,1fr) auto auto!important}.urlt .urlt-compare-inputs{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* 6) Base64 Studio — transform pipeline: source → controls → result. */
.wt-b64{max-width:1500px!important}
.wt-b64 .wt-b64-hero{padding:22px 24px!important;margin-bottom:10px!important;border-radius:18px!important}.wt-b64 .wt-b64-modebar{width:max-content;max-width:100%;margin-inline:auto!important}
.wt-b64 .wt-b64-workspace{grid-template-columns:minmax(0,1fr) minmax(210px,250px) minmax(0,1fr)!important;gap:10px!important;align-items:start!important}.wt-b64 .wt-b64-pane{min-width:0!important}.wt-b64 #wtB64TextInput,.wt-b64 #wtB64TextOutput{height:clamp(500px,60vh,720px)!important;min-height:500px!important;resize:none!important}.wt-b64 .wt-b64-controls{position:sticky!important;top:12px!important;min-width:0!important}.wt-b64 .wt-b64-control-card{padding:12px!important}.wt-b64 .wt-b64-file-grid,.wt-b64 .wt-b64-inspect-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.wt-b64 textarea{overflow:auto}

/* 7) Entity Studio — encode/decode bench: source → compact rule rail → result. */
.wt-entity{max-width:1500px!important}
.wt-entity .wt-entity-hero{padding:22px 24px!important;margin-bottom:10px!important;border-radius:18px!important}.wt-entity .wt-entity-toolbar{position:sticky!important;top:8px!important;z-index:20!important}.wt-entity .wt-entity-workspace{grid-template-columns:minmax(0,1fr) minmax(220px,270px) minmax(0,1fr)!important;gap:10px!important;align-items:start!important}.wt-entity .wt-entity-pane{min-width:0!important}.wt-entity #wtEntityInput,.wt-entity #wtEntityOutput{height:clamp(500px,60vh,720px)!important;min-height:500px!important;resize:none!important}.wt-entity .wt-entity-controls{position:sticky!important;top:70px!important;max-height:calc(100vh - 82px)!important;overflow:auto!important;min-width:0!important}.wt-entity .wt-entity-lab{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)!important;gap:10px!important}.wt-entity .wt-entity-list{max-width:100%;overflow:auto}

/* 8) Regex Lab — regex101-style bench: pattern top, test/result center, diagnostics rail. */
.wt-regex{max-width:1680px!important}
.wt-regex .wt-regex-hero{padding:18px 22px!important;margin-bottom:8px!important;border-radius:14px!important}.wt-regex .wt-regex-hero h1{font-size:30px!important;margin:5px 0!important}.wt-regex .wt-regex-patternbar{position:sticky!important;top:6px!important;z-index:40!important;border-radius:10px!important;grid-template-columns:minmax(0,1fr) auto auto auto!important}.wt-regex .wt-regex-layout{grid-template-columns:minmax(0,1.7fr) minmax(280px,.48fr)!important;gap:8px!important;align-items:start!important}.wt-regex .wt-regex-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"mode mode" "editor result" "replace replace"!important;gap:8px!important;align-items:start}.wt-regex .wt-regex-editor-card{grid-area:editor;min-width:0}.wt-regex .wt-regex-result-card{grid-area:result;min-width:0}.wt-regex .wt-regex-modebar{grid-area:mode;margin:0!important;width:auto!important;justify-content:flex-start}.wt-regex .wt-regex-replacebar{grid-area:replace;margin:0!important}.wt-regex #wtRegexInput,.wt-regex .wt-regex-output{height:clamp(560px,66vh,800px)!important;min-height:560px!important;max-height:none!important;overflow:auto!important}.wt-regex .wt-regex-side{position:sticky!important;top:66px!important;max-height:calc(100vh - 78px)!important;overflow:auto!important}.wt-regex .wt-regex-groups{grid-template-columns:minmax(80px,.3fr) minmax(0,1fr)!important}.wt-regex .wt-regex-notes{margin-top:8px!important}
body.wt-dev-focus-open .wt-regex #wtRegexInput,body.wt-dev-focus-open .wt-regex .wt-regex-output{height:calc(100vh - 112px)!important;min-height:500px!important}

/* 9) Markdown Studio — writer split view. No inspector rail while writing. */
.wt-md{max-width:1580px!important}
.wt-md .wt-md-hero{padding:18px 22px!important;margin-bottom:8px!important;border-radius:14px!important}.wt-md .wt-md-hero h1{font-size:30px!important;margin:5px 0!important}.wt-md .wt-md-toolbar{top:6px!important;border-radius:10px!important;padding:7px!important;margin-bottom:8px!important}.wt-md .wt-md-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:stretch!important}.wt-md .wt-md-editor-card{min-width:0!important;border-radius:12px!important}.wt-md #wtMdInput,.wt-md #wtMdOutput,.wt-md #wtMdPreview{height:clamp(650px,74vh,920px)!important;min-height:650px!important;resize:none!important}.wt-md .wt-md-lower{grid-template-columns:1.25fr .75fr .75fr!important;gap:8px!important;margin-top:8px!important}.wt-md .wt-md-panel,.wt-md .wt-md-guide{border-radius:12px!important}.wt-md .wt-md-guide{margin-top:8px!important}
body.wt-dev-focus-open .wt-md #wtMdInput,body.wt-dev-focus-open .wt-md #wtMdOutput,body.wt-dev-focus-open .wt-md #wtMdPreview{height:calc(100vh - 105px)!important;min-height:520px!important}

/* Keep intentional horizontal scrolling local to code/table surfaces. */
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.wt-b64,.wt-entity,.wt-regex,.wt-md) :where(textarea,pre,code,iframe){max-width:100%}
:where(.wt-jsonstudio,.wt-htmlstudio,.csss,.wt-regex,.wt-md) :where(.wt-jsonstudio-workspace,.whs-workspace,.csss-workspace,.wt-regex-layout,.wt-regex-main,.wt-md-workspace){min-width:0;max-width:100%}
/* Horizontal-overflow guard: fix layout sources, retain intentional scroll only inside code/table surfaces. */
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md){overflow-x:clip}
:where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md) :where(.wt-devlab-toolbar,.wt-devlab-preview-toolbar,.wt-jsonstudio-toolbar,.whs-toolbar,.csss-toolbar,.wt-b64-pane-head,.wt-entity-head,.wt-regex-head,.wt-md-toolbar){max-width:100%;min-width:0;flex-wrap:wrap}

@media(max-width:1280px){
  .wt-devlab .wt-devlab-workspace{grid-template-columns:minmax(0,43%) 6px minmax(0,57%)!important}
  .wt-jsonstudio .wt-jsonstudio-workspace,.csss .csss-workspace,.wt-regex .wt-regex-layout{grid-template-columns:minmax(0,1fr) minmax(280px,.52fr)!important}
  .wt-b64 .wt-b64-workspace,.wt-entity .wt-entity-workspace{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr)!important}
}
@media(max-width:1040px){
  .container.wt-dev-page-container{width:calc(100% - 16px)!important}
  :where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md){width:100%!important}
  .wt-jsonstudio .wt-jsonstudio-workspace,.wt-htmlstudio .whs-workspace,.csss .csss-workspace,.wt-regex .wt-regex-layout,.wt-md .wt-md-workspace{grid-template-columns:1fr!important}
  .wt-jsonstudio .wt-jsonstudio-inspector-pane,.csss .csss-side,.wt-regex .wt-regex-side{position:static!important;max-height:none!important}
  .wt-b64 .wt-b64-workspace,.wt-entity .wt-entity-workspace{grid-template-columns:1fr!important}.wt-b64 .wt-b64-controls,.wt-entity .wt-entity-controls{position:static!important;max-height:none!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .wt-regex .wt-regex-main{grid-template-columns:1fr!important;grid-template-areas:"mode" "editor" "result" "replace"!important}
  .urlt .urlt-nav{grid-template-columns:repeat(3,minmax(0,1fr))!important;position:static!important}.urlt .urlt-panel>.urlt-grid,.wt-b64 .wt-b64-file-grid,.wt-b64 .wt-b64-inspect-grid,.wt-entity .wt-entity-lab,.wt-md .wt-md-lower,.csss .csss-preview-zone{grid-template-columns:1fr!important}
  .wt-htmlstudio .whs-summary-grid,.wt-htmlstudio .whs-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .container.wt-dev-page-container{width:calc(100% - 12px)!important}
  :where(.wt-devlab,.wt-jsonstudio,.wt-htmlstudio,.csss,.urlt,.wt-b64,.wt-entity,.wt-regex,.wt-md){width:100%!important;overflow-x:hidden}
  .wt-dev-idebar{position:static!important}.wt-dev-idebar__label,.wt-dev-idebar code,.wt-dev-font-label{display:none}
  .wt-devlab .wt-devlab-workspace{display:block!important;height:auto!important;min-height:0!important}.wt-devlab .wt-devlab-splitter{display:none!important}.wt-devlab .wt-devlab-editor-pane,.wt-devlab .wt-devlab-preview-pane{min-height:520px}
  .wt-b64 .wt-b64-controls,.wt-entity .wt-entity-controls{grid-template-columns:1fr!important}
  .urlt .urlt-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}.urlt .urlt-input-row,.urlt .urlt-output-row,.urlt .urlt-compare-inputs{grid-template-columns:1fr!important}
  .wt-htmlstudio .whs-summary-grid,.wt-htmlstudio .whs-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wt-regex .wt-regex-patternbar{grid-template-columns:1fr 1fr!important}.wt-regex .wt-regex-patternbox{grid-column:1/-1}
  .wt-md #wtMdInput,.wt-md #wtMdOutput,.wt-md #wtMdPreview,.wt-jsonstudio .wt-jsonstudio-editor-wrap,.wt-htmlstudio #whsInput,.wt-htmlstudio .whs-preview-stage,.csss #csssInput,.wt-b64 #wtB64TextInput,.wt-b64 #wtB64TextOutput,.wt-entity #wtEntityInput,.wt-entity #wtEntityOutput,.wt-regex #wtRegexInput,.wt-regex .wt-regex-output{height:auto!important;min-height:420px!important}
}
/* Text-bearing transform tools preserve natural bidi for source text. */
.wt-b64 #wtB64TextInput,.wt-entity #wtEntityInput{direction:initial!important;text-align:start!important;unicode-bidi:plaintext}