/*! © 2026 FXP · fxps.io — the app workspace and its common controls, House.Rev002 (Hostinger.Manager). Loaded after
   house/house.css, before the app's own sheet, by Fractal studio and Game of Life. Cut from Fractal studio Rev052
   (tools/css-split.js), the reference (house-style-app-workspace.md). House colour names only, except the danger
   button's white hover text and the drawer's 35 % black backdrop, kept as they are. The sizes, spacing, radii and motion
   tokens its rules read are defined here. Do not edit a site's copy: ask Hostinger.Manager. */
/* the two base rules the common controls assume (both apps already had them) */
*{ box-sizing:border-box; }
body{ font-variant-numeric:lining-nums tabular-nums; }
:root{
  --fs-title:1.1875rem;
  --fs-body:1.0625rem;
  --fs-meta:.9375rem; --icon-md:16px;

  --sp-1:.205rem;
  --sp-2:.41rem;
  --sp-3:.615rem;
  --sp-4:.82rem;
  --radius-sm:0; --radius-pill:999px;
  --radius-control:0; --radius-card:0;

  --control-h:1.64rem;
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-snap:cubic-bezier(.2,.8,.2,1);
  --dur-fast:120ms; --dur-base:200ms; --topbar-h:66px;
  --flat:0 0 0 0 transparent; --d1:var(--flat); --d2:var(--flat); --bevel:var(--flat);
  --gloss:none; --rail-w:348px; --side-w:318px; }
.mono{ font-family:var(--font); font-variant-numeric:lining-nums tabular-nums; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:var(--control-h);
  background:var(--paper-2); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:var(--radius-control);
  font:inherit; font-size:var(--fs-body); font-weight:500; line-height:1;
  padding:0 .8rem; cursor:pointer; user-select:none; white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease-snap),
             color var(--dur-fast) var(--ease-snap),
             background-color var(--dur-fast) var(--ease-snap);
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn:active{ transform:translateY(.5px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn svg{ width:var(--icon-md); height:var(--icon-md); }
.btn.is-on, .btn[aria-pressed="true"]{
  background:var(--accent); color:var(--on-accent);
  border-color:var(--accent); font-weight:600; }
.btn-primary{ background:var(--accent); color:var(--on-accent);
  border-color:var(--accent); font-weight:600; }
.btn-primary:hover{ color:var(--on-accent);
  border-color:var(--accent); filter:brightness(1.08); }
.btn-danger{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 55%, var(--rule-strong)); }
.btn-danger:hover{ background:var(--bad); color:#fff; border-color:var(--bad); }
.btn-icon{ width:var(--control-h); padding:0; }
.seg{ display:inline-flex; align-items:stretch; height:var(--control-h);
  background:var(--paper-2); border-radius:var(--radius-control);
  box-shadow:inset 0 0 0 1px var(--rule-strong); overflow:hidden; }
.seg>button{
  appearance:none; flex:1 1 auto;   
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; white-space:nowrap;
  color:var(--ink-2); font:inherit; font-size:var(--fs-body); font-weight:500;
  padding:0 .85rem;
  transition:color var(--dur-fast) var(--ease-snap),
             background-color var(--dur-fast) var(--ease-snap); }
.seg>button:not(:first-child){
  box-shadow:inset 1px 0 0 var(--rule); }
.seg>button:hover{ color:var(--ink); }
.seg>button.is-on, .seg>[aria-selected="true"]{
  background:var(--accent); color:var(--on-accent); font-weight:600; box-shadow:none; }
.input, .select, .textarea{
  width:100%; background:var(--paper-2); color:var(--ink);
  border:1px solid var(--rule-strong); border-radius:var(--radius-control);
  font:inherit; font-size:var(--fs-body); line-height:1.3;
  transition:border-color var(--dur-fast) var(--ease-snap),
             box-shadow var(--dur-fast) var(--ease-snap); }
.input, .select{ height:var(--control-h); padding:0 .65rem; }
.textarea{ min-height:5rem; padding:.5rem .65rem; resize:vertical; }
.input::placeholder, .textarea::placeholder{ color:var(--muted); }
.input:hover, .select:hover, .textarea:hover{ border-color:var(--ink-2); }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled{ opacity:.5; cursor:not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"]{
  border-color:var(--bad);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
.select{ appearance:none; padding-right:1.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:12px; }
input[type="checkbox"], input[type="radio"], input[type="range"]{ accent-color:var(--accent); }
input[type="range"]{ width:100%; height:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.3rem; }
.field>label, .label{ font-size:var(--fs-meta); font-weight:600;
  color:var(--ink-2); text-transform:none; letter-spacing:0; }
.field-row{ display:flex; gap:.5rem; align-items:center; }
.switch{ position:relative; display:inline-flex; align-items:center; gap:.55rem;
  cursor:pointer; font-size:var(--fs-body); }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{ width:2.4rem; height:1.3rem; border-radius:var(--radius-pill);
  background:var(--paper-2); border:1px solid var(--rule-strong); position:relative;
  transition:background-color var(--dur-base) var(--ease-snap),
             border-color var(--dur-base) var(--ease-snap); flex:none; }
.switch .track::after{ content:''; position:absolute; top:50%; left:2px;
  width:.95rem; height:.95rem; border-radius:50%; transform:translateY(-50%);
  background:var(--ink-2); box-shadow:var(--d1);
  transition:left var(--dur-base) var(--ease-snap),
             background-color var(--dur-base) var(--ease-snap); }
.switch input:checked+.track{ background:var(--accent); border-color:var(--accent); }
.switch input:checked+.track::after{ left:calc(100% - 1.05rem); background:var(--on-accent); }
.switch input:focus-visible+.track{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.panel{
  background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius-card); box-shadow:var(--d2), var(--bevel);
  background-image:var(--gloss); overflow:hidden; }
.badge{ display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--fs-meta); font-weight:600; line-height:1;
  padding:.3rem .55rem; background:var(--paper-2);
  border:1px solid var(--rule-strong); border-radius:var(--radius-sm); color:var(--ink-2); }
.badge.good{ color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, transparent);
  background:color-mix(in srgb, var(--good) 14%, transparent); }
.badge.info{ color:var(--info); border-color:color-mix(in srgb, var(--info) 45%, transparent);
  background:color-mix(in srgb, var(--info) 14%, transparent); }
[data-tip]{ position:relative; }
[data-tip]::after{ position:absolute; z-index:60;
  left:50%; bottom:calc(100% + 6px); transform:translateX(-50%) translateY(4px);
  background:var(--accent); color:var(--on-accent); font-size:var(--fs-meta); font-weight:600;
  white-space:nowrap; padding:.3rem .5rem; border-radius:var(--radius-sm);
  box-shadow:var(--d2); opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
[data-tip]:hover::after, [data-tip]:focus-visible::after{
  opacity:1; transform:translateX(-50%) translateY(0); }
[data-tip-pos="bottom"]::after{ bottom:auto; top:calc(100% + 6px); }
.app{ position:relative; display:grid; height:100vh; height:100dvh;
  grid-template-columns:var(--side-w) 1fr;   
  transition:grid-template-columns var(--dur-base) var(--ease-snap); --head-h:var(--topbar-h); }
.app.resizing{ transition:none; }
.app-sidebar{ grid-area:side; overflow:hidden; background:var(--paper);
  border-right:1px solid var(--rule); display:flex; flex-direction:column; }
.nav{ padding:var(--sp-3) var(--sp-2); display:flex; flex-direction:column; gap:1px;
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-left:calc(var(--run-x) - .4rem - .165rem); }
.tree, .tree-children{ list-style:none; margin:0; padding:0; }
.tree-row{ display:flex; align-items:center; gap:.3rem; width:100%; box-sizing:border-box;
  cursor:pointer; text-decoration:none; color:var(--ink-2); font-weight:500; border-radius:var(--radius-control); user-select:none;  
  transition:color var(--dur-fast) var(--ease-snap), background-color var(--dur-fast) var(--ease-snap); }
.tree-row:hover{ color:var(--ink); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.tree-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.tree-twist{ flex:none; width:.95rem; height:.75rem; display:grid; place-items:center;
  color:var(--muted); transition:transform var(--dur-fast) var(--ease-snap); }
.tree-twist svg{ width:.62rem; height:.62rem; }
.tree-node.is-open>.tree-row .tree-twist{ transform:rotate(90deg); }
.tree-leaf>.tree-row .tree-twist{ visibility:hidden; }
.tree-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-search{ flex:none; padding:var(--sp-2,8px) var(--sp-3,12px); display:flex; gap:.3rem;
  border-bottom:1px solid var(--rule); align-items:center; padding-left:var(--run-x); }
.nav-search-input{ flex:1; min-width:0; box-sizing:border-box; line-height:1.4;
  padding:.28rem .5rem; border-radius:var(--radius-control); border:1px solid var(--rule);
  background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
.nav-search-input::placeholder{ color:var(--muted); }
.nav-search-input:focus-visible{ outline:2px solid var(--accent); outline-offset:-1px; }
.tree-empty{ list-style:none; padding:.5rem .8rem; color:var(--muted); font-size:var(--fs-meta); }
.tree-children{ display:none; margin-left:.85rem; padding-left:.5rem;
  border-left:1px solid var(--rule); }
.tree-node.is-open>.tree-children{ display:block; }
.tree-row.is-on, .tree-row.is-on:hover{ color:var(--on-accent);
  background:var(--accent); }
.app-topbar{ grid-area:top; display:flex; gap:.6rem;
  padding:0 var(--sp-4); background:var(--paper); border-bottom:1px solid var(--rule); row-gap:var(--sp-2); backdrop-filter:none; -webkit-backdrop-filter:none; }
.app-topbar .spacer{ flex:1; }
.app-topbar h1, .app-title{ margin:0; font-size:var(--fs-title); font-weight:600; }
.app-main{ grid-area:main; overflow:auto; min-height:0; padding:0; }
.app-resize{ position:absolute; bottom:0; left:var(--side-w);
  width:10px; transform:translateX(-5px); z-index:45; cursor:col-resize;
  touch-action:none; }
.app-resize::after{ content:''; position:absolute; top:0; bottom:0; left:50%;
  width:2px; transform:translateX(-1px); background:transparent;
  transition:background-color var(--dur-fast) var(--ease-snap); }
.app-resize:hover::after, .app.resizing .app-resize::after{ background:var(--accent); }
@media (max-width:820px){
.app{ grid-template-columns:0 1fr; }
.app.side-open{ grid-template-columns:0 1fr; }
.app-resize{ display:none; } }
.row{ display:flex; gap:var(--sp-3); align-items:center; }
.row.wrap{ flex-wrap:wrap; }
.col{ display:flex; flex-direction:column; gap:var(--sp-3); }
.stack>*+*{ margin-top:var(--sp-3); }
.grid{ display:grid; gap:var(--sp-4); }
.grid.auto{ grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
.spacer{ flex:1; }
.muted{ color:var(--ink-2); }
.dim{ color:var(--muted); }
.divider{ height:1px; background:var(--rule); margin:var(--sp-4) 0; border:0; }
.section-title{ margin:0 0 var(--sp-3); }
.fs-meta   { font-size:var(--fs-meta);    }
.workspace{ display:flex; gap:0; height:100%; min-height:0; }
.rail{ order:1; width:var(--rw, var(--rail-w,348px)); flex:0 0 var(--rw, var(--rail-w,348px)); min-height:0; display:flex; flex-direction:column;
  overflow:hidden auto; background:var(--paper); border-right:1px solid var(--rule); font-size:var(--fs-meta); position:relative; }
.rail-resize{ position:absolute; top:0; bottom:0; width:9px; z-index:6; cursor:col-resize; touch-action:none; }
.rail[data-side="left"]>.rail-resize{ right:-1px; }
.rail[data-side="right"]>.rail-resize{ left:-1px; }
.rail-resize::after{ content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:transparent; transition:background-color var(--dur-fast) var(--ease-snap); }
.rail-resize:hover::after, .rail-resize.dragging::after{ background:var(--accent); }
.acc-sec{ border-bottom:1px solid var(--rule); }
.acc-head{ width:100%; display:flex; align-items:center; gap:8px; padding:9px 11px;
  background:transparent; border:0; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.acc-head:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.acc-ico, .acc-chev{ display:inline-flex; color:var(--muted); flex:none; }
.acc-name{ flex:1; text-align:left; }
.acc-chev{ transition:transform .15s ease; }
.acc-sec.open>.acc-head, .acc-sec.open>.acc-head .acc-ico, .acc-sec.open>.acc-head .acc-chev{ color:var(--accent); }
.acc-sec.open>.acc-head .acc-chev{ transform:rotate(90deg); }
.acc-body{ display:none; }
.acc-sec.open>.acc-body{ display:block; }
.param-v{ cursor:pointer; }
.param-v:hover{ color:var(--accent); }
.acc-body{ font-size:var(--fs-meta); }
.acc-body .switch, .acc-body .select, .acc-body select, .acc-body input, .acc-body button, .acc-body textarea, .acc-body .btn{ font-size:var(--fs-meta); }
.acc-body .field{ gap:2px; }
.acc-body .stack{ gap:var(--sp-2); }
.acc-body .divider{ margin:var(--sp-1) 0; }
.tree-cat{ margin-left:auto; padding-left:.5rem; white-space:nowrap; }
.tree-be{ white-space:nowrap; }
[data-tip]::after{ content:none !important; }
.tip-portal{ position:fixed; z-index:2147483600; max-width:min(20rem,90vw); pointer-events:none;
  background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:600;
  padding:.375em .64em; border-radius:var(--radius-sm);
  white-space:normal; line-height:1.4; opacity:0; transform:translateY(3px);
  transition:opacity var(--dur-fast,.12s) ease, transform var(--dur-fast,.12s) ease; }
.tip-portal.on{ opacity:1; transform:translateY(0); }
.select option{ background:var(--paper); color:var(--ink); }
@media (max-width:1000px) and (min-height:501px), (max-width:1000px) and (orientation:portrait){
.workspace{ flex-direction:column; }
.rail{ order:2; width:auto; flex:none; max-height:55vh; border-right:none; border-top:1px solid var(--rule); } }
.section-title{
  text-transform:none; font-variant-caps:small-caps; letter-spacing:.05em;
  font-size:var(--fs-title); font-weight:600; color:var(--accent); }
.acc-head{ font-variant-caps:small-caps; letter-spacing:.05em; font-size:var(--fs-title); }
.acc-sec.open{ background:transparent; border-left:0; }
.acc-sec.open>.acc-head{ box-shadow:inset 0 1px 0 var(--accent); }
.input:focus, .select:focus, .textarea:focus{ box-shadow:none; }
.workspace>.rail{
  --fs-body:.8125rem;
  --fs-meta:.75rem;
  --fs-title:.9375rem;
  --control-h:1.375rem;
  line-height:1.45;
}
.workspace>.rail input[type="range"]{ height:1.1rem; }
.workspace>.rail .switch .track{ width:2rem; height:1.1rem; }
.workspace>.rail .switch .track::after{ width:.75rem; height:.75rem; }
.workspace>.rail .switch input:checked+.track::after{ left:calc(100% - .85rem); }
.workspace>.rail .acc-head{ padding:7px 11px; }
@media (max-width:820px){
.app.side-open .app-sidebar{ position:fixed; z-index:60; top:0; bottom:0; left:0; width:min(85vw, 320px);
    box-shadow:0 0 24px rgba(0,0,0,.35); }
.app.side-open::after{ content:''; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.35); } }
@media (max-width:820px), (max-height:500px){
.app-topbar{ gap:4px; padding:6px; min-width:0; }
.app-topbar .spacer{ display:none; }
.app-title{ flex:1 1 auto; font-size:1rem; }
.app-topbar .btn{ flex:none; } }
@media (max-width:1000px) and (min-height:501px), (max-width:1000px) and (orientation:portrait){
.workspace>.rail{ flex:1 1 auto; min-height:0; max-height:none; }
.rail-resize{ display:none; } }
.workspace>.rail .switch{ display:flex; width:fit-content; max-width:100%; }
.rail-tools{ position:sticky; top:0; z-index:5; flex:none; display:flex; align-items:center; gap:4px;
  padding:7px 11px; background:var(--paper); border-bottom:1px solid var(--rule); height:var(--tools-h); }
.rail-tools .rail-tool{ flex:none; width:32px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-meta); }
.rail-tools-sep{ flex:none; width:1px; height:20px; background:var(--rule); margin:0 6px; }
.app{ --run-top:34px; --run-x:24px;
  grid-template-rows:auto auto minmax(0,1fr); }
@media (max-width:480px){
.app{ --run-top:20px; --run-x:16px; } }
.rail-tools .rail-list{ display:none; }
@media (max-width:820px){
.rail-tools button.rail-list{ display:inline-flex; }
.rail-tools span.rail-list{ display:block; } }
@media screen and (max-width:759.98px){
.app{ height:calc(100vh - var(--fx-bar-h, 0px)); height:calc(100dvh - var(--fx-bar-h, 0px)); }
.app.side-open .app-sidebar{ top:var(--fx-bar-h, 0px); } }
@media screen and (min-width:760px) and (max-width:820px){
.app.side-open .app-sidebar{ left:var(--fx-rail-w, 0px); } }
.app-topbar{ height:var(--head-h); min-height:0; flex-wrap:nowrap; }
.app-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:820px), (max-height:500px){
.app{ --head-h:48px; } }
.app-sidebar{ --fs-body:.8125rem; --fs-meta:.75rem; --fs-title:.9375rem; line-height:1.45; }
.tree{ font-size:var(--fs-body); }
.tree-row{ line-height:1.45; padding:.1rem .4rem; }
.tree-leaf>.tree-row{ font-weight:400; }
.tree-row.is-on, .tree-row.is-on:hover{ font-weight:600; }
.tree-node:not(.tree-leaf)>.tree-row{ padding:.3rem .4rem; font-size:var(--fs-title); font-weight:600;
  font-variant-caps:small-caps; letter-spacing:.05em; }
.tree-be, .tree-cat{ font-size:var(--fs-meta); font-weight:400; font-variant-caps:normal; letter-spacing:0; }
.nav-search-input{ font-size:var(--fs-body); }
.app{ --tools-h:43px; grid-template-areas:"run run" "top top" "side main"; }
.nav-search{ height:var(--tools-h); }
.app-resize{ top:calc(var(--run-top) + 13px * 1.6 + 6px + var(--head-h)); }
.tree-node:not(.tree-leaf)>.tree-row, .tree-node:not(.tree-leaf)>.tree-row:hover{ color:var(--ink); }
.tree-node.is-open:not(.tree-leaf)>.tree-row, .tree-node.is-open:not(.tree-leaf)>.tree-row:hover{ color:var(--accent); }
.tree-node:not(.tree-leaf)>.tree-row .tree-twist{ color:var(--muted); }
.tree-node.is-open:not(.tree-leaf)>.tree-row .tree-twist{ color:var(--accent); }
.tree-be, .tree-be-WebGPU, .tree-be-WebGL, .tree-be-CPU, .tree-cat{ color:var(--muted); opacity:1; }
.tb-status{ flex:0 0 auto; display:flex; align-items:baseline; white-space:nowrap; overflow:hidden;
  font-size:var(--fs-meta); font-style:italic; color:var(--ink-2); }
.tb-status>span+span::before{ content:'–'; color:var(--muted); margin:0 1.1rem; }
@media (max-width:820px), (max-height:500px){
.tb-status{ flex:0 1 auto; min-width:0; font-size:.6875rem; }
.tb-status .muted{ display:none; }
.tb-status>span+span::before{ margin:0 .45rem; } }
@media (max-width:480px){
.app-topbar{ height:auto; min-height:var(--head-h); flex-wrap:wrap; row-gap:0; }
.app-title{ flex:1 1 100%; }
.tb-status{ flex:1 1 100%; justify-content:flex-end; } }
@media screen and (min-width:760px){
.app{ --run-top:24px; --run-x:24px; } }
.app-topbar{ padding-left:var(--run-x); padding-right:var(--run-x); }
.app-topbar{ align-items:baseline; padding-top:16px; padding-bottom:0; }
@media (max-width:480px){
.app-topbar{ padding-top:16px; padding-bottom:6px; } }
.tb-status .sb-v{ display:inline-block; text-align:right; white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; }
.tb-status .sb-l{ display:inline-block; text-align:left; }
@media (max-width:820px), (max-height:500px){
.tb-status .sb-l{ display:none; } }
@media (min-width:821px) and (max-width:1060px){
.tb-status .muted{ display:none; } }