.studio-shell { font-family: var(--font-ui); }
.studio-shell .topbar { background: var(--n-950); border-bottom: 1px solid var(--n-800); }
.studio-shell button,.studio-shell .button { border-radius: var(--control-radius); transition: background-color .14s ease,border-color .14s ease,box-shadow .14s ease; }
.studio-shell button:active { filter: brightness(.94); }
.studio-shell button:focus-visible,.studio-shell a:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 3px; }
.studio-shell .workspace-tabs { background: var(--n-25); }
.studio-shell .sidebar { background: var(--n-50); }
.studio-shell .library-tool { display: grid;grid-template-columns: 48px minmax(0,1fr);gap: 10px;padding: 8px;min-height: 58px;height: auto;text-align: left;border-radius: var(--r-md); }
.studio-shell .library-tool>span:last-child { white-space: normal;overflow-wrap: anywhere;font-size: var(--fs-sm);line-height: 1.4;font-weight: 500; }
.studio-shell .library-entry .library-tool>span:last-child { overflow-wrap: normal;word-break: normal;hyphens: none; }
.studio-shell .library-symbol { width: 48px;font-size: var(--fs-xl); }
.studio-shell .library-symbol svg { width: 48px;max-width: 48px;display: block; }
.studio-shell .plant-library-item { border-radius: var(--r-md);padding-block: 8px; }
.studio-shell .library-tool:hover,.studio-shell .plant-library-item:hover { background: var(--n-100);border-color: var(--n-300); }
.studio-shell dialog { border: 1px solid var(--n-200);border-radius: var(--r-md);box-shadow: var(--sh-3);max-width: calc(100vw - 24px); }
.studio-shell dialog::backdrop { background: color-mix(in srgb, var(--n-900) 40%, transparent);backdrop-filter: blur(5px); }
.studio-shell .dialog-heading { margin-bottom: 16px; }
.studio-shell .dialog-heading h2 { font-size: var(--fs-3xl);letter-spacing: -.6px;line-height: 1.25; }
.studio-shell input,.studio-shell select { border-radius: var(--r-sm); }
.graph-node .ladder-cell[data-timer="true"] .cell-pin { top: 68px;left: -27px;width: 154px;font: var(--fs-2xs)/1.4 var(--font-mono);color: var(--accent-600); }
.graph-node .timer-progress { top: 46px;left: 24px;height: 4px;border-radius: var(--r-xs);background: var(--accent-400);box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-400) 8%, transparent); }
.graph-node .ladder-cell[data-timing="true"] .electrical-symbol { color: var(--warn-ink); }
.graph-node .ladder-cell[data-timing="true"] .timer-progress { background: var(--warn); }
.is-simulating .continuous-board .wire { stroke: var(--n-600);stroke-width: 2.2;transition: stroke .08s linear,stroke-width .08s linear,filter .08s linear; }
.is-simulating .continuous-board .wire.live { stroke: var(--ok);stroke-width: 4;filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ok) 60%, transparent)); }
.graph-node .logic-state { display: none;position: absolute;right: 2px;top: 2px;min-width: 25px;padding: 2px 4px;border: 1px solid var(--n-400);border-radius: var(--r-xs);background: var(--n-50);color: var(--n-700);font: 700 var(--fs-2xs)/1 var(--font-mono);letter-spacing: .04em;text-align: center; }
.graph-node .ladder-cell[data-timer="true"] .logic-state { min-width: 54px; }
.is-simulating .graph-node .logic-state { display: block; }
.is-simulating .graph-node .ladder-cell { background: var(--n-50);color: var(--n-700);box-shadow: inset 0 0 0 1px var(--n-300);transition: background-color .08s linear,color .08s linear,box-shadow .08s linear; }
.is-simulating .graph-node .ladder-cell.activo { background: var(--ok-bg);color: var(--ok-ink);box-shadow: inset 0 0 0 2px var(--ok), 0 0 0 3px color-mix(in srgb, var(--ok) 14%, transparent), var(--sh-2); }
.is-simulating .graph-node .ladder-cell.activo .electrical-symbol { stroke-width: 2.5;filter: drop-shadow(0 0 1px color-mix(in srgb, var(--ok) 33%, transparent)); }
.is-simulating .graph-node .ladder-cell.activo .logic-state { border-color: var(--ok-ink);background: var(--ok-ink);color: var(--n-0); }
.is-simulating .graph-node .ladder-cell.stored-on { background: var(--warn-bg);color: var(--warn-ink);box-shadow: inset 0 0 0 2px var(--warn), 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent); }
.is-simulating .graph-node .ladder-cell.stored-on .logic-state { min-width: 72px;border-color: var(--warn-ink);background: var(--warn);color: var(--n-0); }
.is-simulating .graph-node .ladder-cell.stored-on .electrical-symbol { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--warn) 40%, transparent)); }
.program-credit { color: var(--n-700);font-size: var(--fs-2xs);white-space: nowrap;text-decoration: none; }
.program-credit:hover { color: var(--accent-600);text-decoration: underline; }
@media(max-width:1000px) { .statusbar .program-credit { display: none; } }
@media(max-width:600px) { .studio-shell dialog { padding: 18px;border-radius: var(--r-md); } .studio-shell .dialog-heading h2 {font-size: var(--fs-2xl)} }
@media(prefers-reduced-motion:reduce) { .studio-shell *, .studio-shell *::before,.studio-shell *::after { transition: none !important;animation: none !important; } }
@media(prefers-reduced-transparency:reduce) { .studio-shell dialog::backdrop {backdrop-filter: none} }
.studio-shell .topbar{background: var(--n-950);border-color: var(--n-800)}
.studio-shell .workspace-tabs{background: var(--n-50)}
.studio-shell .sidebar{background: var(--n-50)}
.studio-shell .workspace-tabs button[aria-selected=true]{color: var(--accent-500);background: var(--accent-50);border-color: var(--accent-200)}
.studio-shell :is(button,a):focus-visible{outline-color: var(--accent-500)}
.studio-shell :is(.library-tool,.plant-library-item):hover{background: var(--accent-50);border-color: var(--accent-200)}
.studio-shell {font-size: var(--fs-md);color: var(--ink);font-variant-numeric: tabular-nums}
.studio-shell .topbar {height: 46px;min-height: 46px;flex-basis: 46px;padding-inline: 14px;gap: 12px}
.studio-shell .topbar .brand strong {font-size: var(--fs-lg);letter-spacing: -.3px}
.studio-shell .topbar button {min-height: 32px;padding: 5px 10px;font-size: var(--fs-sm)}
.studio-shell .project-heading input {font-size: var(--fs-md);min-height: 32px;max-width: 360px}
.studio-shell .project-heading #save-state {color: var(--z-muted-dark);font-size: var(--fs-2xs)}
.studio-shell .workspace-tabs {height: 42px;min-height: 42px;flex-basis: 42px;background: var(--n-50);border-bottom: 1px solid var(--line);gap: 6px}
.studio-shell .workspace-tabs button {min-height: 32px;font-size: var(--fs-sm);padding-inline: 9px}
.studio-shell .view-tabs button.active {background: var(--accent-50);border-color: var(--accent-200);color: var(--accent-600);font-weight: 600}
.studio-shell .sidebar {background: var(--n-25);border-right: 1px solid var(--line)}
.studio-shell .plant-library-item,.studio-shell .library-tool {min-height: 66px;padding: 9px 6px;gap: 8px;border-radius: var(--r-sm)}
.studio-shell .plant-library-item {grid-template-columns: 36px minmax(0,1fr)}
.studio-shell .plant-library-item .component-icon,.studio-shell .plant-library-item .component-icon svg {width: 34px}
.studio-shell .plant-library-item>span:nth-child(2) {font-size: var(--fs-sm);line-height: 1.35;white-space: normal;overflow-wrap: anywhere}
.studio-shell .plant-library-item small {font-size: var(--fs-xs);line-height: 1.4;color: var(--n-600)}
.studio-shell .plant-library-item .drag-grip {display: none}
.studio-shell .library-entry,.studio-shell .plant-library-entry {grid-template-columns: minmax(0,1fr) 30px;gap: 2px}
.studio-shell .library-info {width: 28px;height: 28px;min-height: 28px;align-self: center;border-radius: var(--r-sm);color: var(--accent-500)}
.studio-shell .library-entry.guide-selected,.studio-shell .plant-library-entry.guide-selected {box-shadow: none;background: var(--accent-50);outline: 1px solid var(--accent-200)}
.studio-shell .canvas-toolbar {min-height: 42px;background: var(--n-0);border-bottom: 1px solid var(--line);gap: 6px}
.studio-shell .canvas-toolbar button {min-height: 30px;font-size: var(--fs-sm)}
.studio-shell .statusbar {min-height: 27px;background: var(--n-50);border-top: 1px solid var(--line)}
.studio-shell .inspector {background: var(--n-25)}
.studio-shell :is(input,select,textarea) {border-color: var(--n-400);border-radius: var(--r-sm);caret-color: var(--accent)}
.studio-shell :is(input,textarea)::placeholder {color: var(--n-600);opacity: 1}
.studio-shell ::selection {background: var(--accent-100);color: var(--accent-700)}
.studio-shell :is(button,.button) {transition: background-color var(--ui-fast) ease-out,border-color var(--ui-fast) ease-out}
.studio-shell button:disabled {opacity: .48;cursor: not-allowed}
.studio-shell dialog {border-radius: var(--r-md);box-shadow: var(--sh-3)}
.studio-shell dialog::backdrop {background: color-mix(in srgb, var(--n-900) 40%, transparent);backdrop-filter: none}
@media(max-width:1050px){
  .studio-shell .topbar {gap: 6px;padding-inline: 8px}
  .studio-shell .project-heading #save-state {display: none}
  .studio-shell .workspace-tabs {overflow-x: auto;overflow-y: hidden}
  .studio-shell .workspace-tabs>* {flex-shrink: 0}
}
@media(max-width:650px){
  .studio-shell .topbar {height: auto;min-height: 46px;flex-basis: auto;flex-wrap: wrap;padding-block: 5px}
  .studio-shell .topbar button,.studio-shell .workspace-tabs button {min-height: 40px}
  .studio-shell .workspace-tabs {height: 48px;min-height: 48px;flex-basis: 48px}
  .studio-shell .canvas-toolbar {min-height: 42px}
  .studio-shell .canvas-toolbar button {min-height: 36px}
}
@media(prefers-reduced-motion:reduce){.studio-shell :is(button,.button){transition: none}}