/* TASK 035: family workspaces promote real controls and outputs in place. */
.app-workflow-root{--app-workflow-accent:var(--blue);--app-workflow-tint:var(--blue-soft);min-width:0}
.app-workflow-root[data-app-workspace=file]{--app-workflow-accent:#3473c5;--app-workflow-tint:#eff6ff}
.app-workflow-root[data-app-workspace=visual-editor]{--app-workflow-accent:#7356ce;--app-workflow-tint:#f4f0ff}
.app-workflow-root[data-app-workspace=text]{--app-workflow-accent:#a56d35;--app-workflow-tint:#fbf5ed}
.app-workflow-root[data-app-workspace=developer]{--app-workflow-accent:#4c72b8;--app-workflow-tint:#eef3fb}
.app-workflow-root[data-app-workspace=converter]{--app-workflow-accent:#198f91;--app-workflow-tint:#eaf8f7}
.app-workflow-root[data-app-workspace=generator]{--app-workflow-accent:#c25e8c;--app-workflow-tint:#fff1f7}
.app-workflow-root[data-app-workspace=video]{--app-workflow-accent:#bd4d79;--app-workflow-tint:#fff0f5}
.app-workflow-root[data-app-workspace=calculator]{--app-workflow-accent:#3469e8;--app-workflow-tint:#edf3ff}
.app-workflow-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:start;gap:16px}
.app-input-panel,.app-result-panel{min-width:0;align-self:start;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 5px 18px rgba(24,43,78,.045)}
.app-input-panel{grid-column:1;display:grid;align-content:start;gap:13px;padding:16px}
.app-result-panel{grid-column:2;padding:16px;background:linear-gradient(155deg,var(--app-workflow-tint),var(--surface) 65%)}
.app-workflow-layout>.app-workflow-primary-action{grid-column:1/-1;justify-self:start}
.app-workflow-field{min-width:0}
.app-workflow-field label,.app-workflow-field .lbl{display:block;margin-bottom:7px;color:#596a82;font-size:12px;font-weight:700}
.app-workflow-field input:not([type=file]),.app-workflow-field select,.app-workflow-field textarea{max-width:100%;border-color:#dce4ef;border-radius:9px;background:#fbfcfe}
.app-workflow-field textarea,.app-editor-field textarea{min-height:180px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.app-upload-field{padding:15px;border:1.5px dashed color-mix(in srgb,var(--app-workflow-accent) 38%,#dfe6f0);border-radius:12px;background:var(--app-workflow-tint)}
.app-file-input{max-width:100%;min-height:40px;color:#65758a;font-size:12px}
.app-workflow-primary-action{min-height:44px;padding:0 18px;border:1px solid var(--app-workflow-accent);border-radius:10px;background:var(--app-workflow-accent);color:#fff;font-weight:750;box-shadow:0 5px 13px color-mix(in srgb,var(--app-workflow-accent) 20%,transparent);cursor:pointer}
.app-workflow-primary-action:hover{filter:brightness(1.06);transform:translateY(-1px)}
.app-workflow-secondary-action,.app-workflow-download-action{min-height:40px;border-radius:9px}
.app-workflow-result{min-width:0;max-width:100%;overflow-wrap:anywhere}
.app-workflow-result pre,.app-result-panel pre{max-width:100%;max-height:480px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:9px}
.app-result-panel canvas,.app-result-panel img,.app-result-panel video,.app-result-panel iframe{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:10px}
.app-result-panel canvas{background-color:#fff;background-image:linear-gradient(45deg,#edf0f5 25%,transparent 25%),linear-gradient(-45deg,#edf0f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf0f5 75%),linear-gradient(-45deg,transparent 75%,#edf0f5 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}
.app-workflow-root[data-app-workspace=visual-editor] .app-result-panel{min-height:240px}
.app-workflow-root[data-app-workspace=visual-editor] .app-workflow-field input[type=range]{accent-color:var(--app-workflow-accent)}
@media(max-width:767px){.app-workflow-layout{grid-template-columns:minmax(0,1fr);gap:12px}.app-input-panel,.app-result-panel{grid-column:1;padding:14px}.app-workflow-layout>.app-workflow-primary-action{width:100%;justify-self:stretch}.app-workflow-root[data-app-workspace=visual-editor] .app-result-panel{min-height:190px}.app-workflow-field textarea,.app-editor-field textarea{min-height:150px}}