/* Studio A — one left inspector, a drawing rail, and an open canvas.
   Only presentation overrides; commands and forms keep their original contracts. */
body.studio {
  --bg: #f7f9fa;
  --panel: #fff;
  --line: #dce3e7;
  --text: #22343d;
  --muted: #74818a;
  --accent: #0e6269;
  --isian: #f6f9fa;
  --isian-terpilih: #e4f0f0;
  --isian-redup: #f3f5f6;
  background: var(--bg);
}
.studio .titlebar {
  min-height: 56px; flex-shrink: 0; gap: 10px; padding: 0 16px;
  background: #fff; color: var(--text); border-bottom: 1px solid var(--line);
}
.studio .brand-mark { width: 36px; height: 30px; flex-shrink: 0; }
.studio .empty-mark { width: 96px; height: 76px; }
.studio .titlebar .merek { font-size: 12px; letter-spacing: .015em; color: #223943; }
.studio .titlebar .merek b { color: var(--accent); margin-left: 2px; }
.studio-project { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: 12px; padding-left: 20px; border-left: 1px solid var(--line); }
.studio-project > span { color: var(--muted); font-size: 11px; }
.studio-project strong { display: block; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
.studio #tab-alur { margin-left: auto; align-items: stretch; flex-shrink: 0; }
.studio #tab-alur button { display: flex; align-items: center; gap: 8px; min-width: 80px; padding: 0 12px; color: #60717a; }
.studio #tab-alur button .ui-icon { width: 18px; height: 18px; }
.studio #tab-alur button.aktif { color: #094e56; border-bottom-color: var(--accent); }
.studio-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.studio-actions .workspace-command { flex-direction: row; min-height: 32px; gap: 7px; }
.studio-actions [data-command="#jalankan"] { margin-right: 12px; padding: 7px 13px; background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 4px; font-size: 12px; }
.studio-actions [data-command="#jalankan"]:hover:not(:disabled) { background: #094e56; }
.studio-actions [data-command="#jalankan"]:disabled { background: #e6eded; border-color: #e6eded; color: #889a9c; }
.studio-actions [data-command="#jalankan"] .ui-icon { color: inherit; width: 17px; height: 17px; }
.studio .studio-icon-command { min-width: 30px; min-height: 30px; padding: 5px; }
.studio-icon-command > span:not(.ui-icon) { display: none; }
.studio .studio-icon-command .ui-icon { width: 18px; height: 18px; color: #617581; }
.studio > header { height: 31px; min-height: 31px; padding: 0 12px; background: #fff; gap: 8px; z-index: 31; }
.studio .menu { gap: 0; flex-shrink: 0; }
.studio .menu > .menu-slot > button { padding: 5px 10px; font-size: 11px; color: #52656f; }
.studio .menu-isi { padding: 5px; border-color: #d5dfe2; box-shadow: 0 7px 24px #18343e1a; }
.studio-menu-actions { display: flex; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--line); }
.studio-menu-actions .workspace-command { flex-direction: row; min-height: 25px; min-width: 28px; }
.studio main { padding: 0; gap: 0; }
.studio-tools { display: flex; flex-direction: column; align-items: center; width: 56px; flex: 0 0 56px; padding: 10px 3px; overflow-y: auto; scrollbar-width: thin; background: #f5f8f9; border-right: 1px solid var(--line); }
.studio-tools #ribbon-draw { border: 0; padding: 0; width: 100%; }
.studio-tools #ribbon-draw .ribbon-caption { display: none; }
.studio-tools #ribbon-draw section { width: 100%; }
.studio-tools #ribbon-draw details { display: block; }
.studio-tools #ribbon-draw .alat { flex-direction: column; gap: 6px; margin: 0; }
.studio-tools #ribbon-draw .alat button { min-width: 0; min-height: 48px; width: 46px; padding: 6px 2px; gap: 3px; font-size: 10px; border-radius: 4px; white-space: normal; }
.studio-tools #ribbon-draw .alat button .ui-icon { color: #536d79; width: 22px; height: 22px; }
.studio-tools #ribbon-draw .alat button.aktif { background: #dceced; border-color: transparent; color: #0d5861; }
.studio-tools #ribbon-draw .alat button.aktif .ui-icon { color: #0d5861; }
.studio-tool-label { line-height: 1.1; }
.studio-tools #sidebar-alih { display: grid; place-items: center; width: 40px; height: 36px; margin-top: auto; padding: 6px; border-color: transparent; background: transparent; color: #536d79; flex-shrink: 0; }
.studio-tools #sidebar-alih:hover { background: var(--isian-terpilih); }
.studio-inspector { display: flex; flex-direction: column; flex: 0 0 auto; width: min(var(--explorer-width), 38vw); min-width: 0; background: #fff; border-right: 1px solid var(--line); overflow: hidden; }
.studio-panel-heading { display: flex; align-items: center; flex: 0 0 40px; padding: 0 16px; font-weight: 600; color: #174b54; border-bottom: 1px solid var(--line); }
.studio #sidebar { flex: 1 1 0; min-height: 0; width: 100%; border: 0; background: #fff; overflow-y: auto; }
.studio #sidebar > section { padding: 12px 16px; border-color: #eef1f3; }
.studio #sidebar .kelompok > summary { color: #2f4752; font-size: 12px; margin-bottom: 8px; }
.studio #sidebar .kisi button { min-height: 29px; padding: 4px 6px 4px 16px; font-size: 12px; border-radius: 3px; gap: 9px; color: #354d59; }
.studio #sidebar .kisi button:hover:not(:disabled) { border-color: transparent; }
.studio #sidebar .kisi button .ui-icon { color: #718691; width: 15px; height: 15px; }
.studio #sidebar .kisi button:disabled { color: #8e9aa7; }
.studio #sidebar .berjarak { color: #8a969e; font-size: 10px; letter-spacing: .08em; margin-top: 16px; }
.studio-tree-group { margin: 3px 0; }
.studio-tree-group > summary { cursor: pointer; display: list-item; padding: 5px 6px 5px 16px; color: #354d59; font-size: 12px; list-style-position: inside; }
.studio-tree-group > .kisi { padding-left: 13px; margin-left: 20px; border-left: 1px solid #e5ebee; }
.studio #properti { flex: 0 1 auto; width: 100%; min-height: 38px; max-height: 43%; border: 0; border-top: 1px solid #d5e0e3; background: #fbfcfd; overflow-y: auto; }
.studio #properti .properti-alih { position: sticky; top: 0; z-index: 3; padding: 8px 16px; min-height: 38px; height: 38px; color: #2f4752; background: #f6f9fa; border-color: #e5ecef; font-size: 12px; writing-mode: horizontal-tb; }
.studio #properti .properti-panah { transform: rotate(90deg); }
.studio #properti > section { padding: 12px 16px; }
.studio #properti-isi:not(:empty) { padding: 12px 16px; background: #fff; }
.studio #properti-isi dl { grid-template-columns: minmax(90px, .85fr) minmax(0, 1fr); }
.studio #properti-isi dd { margin: 0; overflow-wrap: anywhere; }
.studio #properti-isi h2 { color: #476873; font-size: 11px; letter-spacing: .02em; }
.studio #properti .kisi button { padding: 6px; margin: 0; font-size: 11px; min-height: 29px; }
.studio #properti .kisi + .kisi { margin-top: 6px; }
.studio-inspector:not([data-workflow="model"]) #properti { display: none; }
.studio.properti-tertutup #properti { min-height: 38px; max-height: 38px; width: 100%; overflow: hidden; }
.studio.properti-tertutup #properti .properti-alih { height: 38px; writing-mode: horizontal-tb; justify-content: space-between; padding: 8px 16px; }
.studio.properti-tertutup #properti .properti-panah { transform: rotate(-90deg); }
.studio.explorer-collapsed .studio-inspector { width: 0; border: 0; }
.studio.explorer-collapsed .studio-inspector + .dock-splitter { flex-basis: 0; pointer-events: none; }
.studio .dock-splitter { flex-basis: 4px; background: #f7f9fa; }
.studio .dock-splitter:hover, .studio .dock-splitter:focus-visible { background: #95bfc3; }
.studio .workspace-view { border: 0; background: #fff; }
.analysis-monitor { flex: 0 0 auto; padding: 8px 14px; border-bottom: 1px solid #d8e5e8; border-left: 3px solid #14747d; background: #f5fafb; font-size: 11px; }
.analysis-monitor[hidden] { display: none; }
.analysis-monitor-line, .analysis-monitor-progress { display: flex; align-items: center; gap: 12px; min-width: 0; }
.analysis-monitor-line [data-analysis-source] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #68818d; }
.analysis-monitor-line button { flex: 0 0 auto; width: auto; min-width: 50px; padding: 2px 8px; font-size: 10px; }
.analysis-monitor-line strong, .analysis-monitor-line [data-analysis-elapsed] { flex-shrink: 0; white-space: nowrap; }
.analysis-monitor-progress { margin-top: 5px; }
.analysis-monitor-progress [data-analysis-phase] { flex: 1; overflow-wrap: anywhere; }
.analysis-monitor-progress progress { flex: 0 1 150px; width: 150px; min-width: 60px; height: 5px; accent-color: #14747d; }
.analysis-monitor-progress [data-analysis-percent] { min-width: 35px; text-align: right; }
.analysis-monitor details { margin-top: 4px; }
.analysis-monitor summary { color: #597480; cursor: pointer; }
.analysis-monitor ol { list-style: none; margin: 0; padding: 0; max-height: 120px; overflow: auto; }
.analysis-monitor li, .analysis-history-heading { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.analysis-history-heading { margin-top: 5px; font-size: 10px; color: #6d8791; }
.analysis-monitor time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.analysis-monitor [data-analysis-error] { color: #9c3935; margin: 6px 0 0; overflow-wrap: anywhere; }
.analysis-monitor[data-state="failed"], .analysis-monitor[data-state="unavailable"], .analysis-monitor[data-state="stale"] { border-left-color: #b35c46; }
.studio #dlg-recovery { --dialog-width: 500px; }
.recovery-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; gap: 5px; }
.studio .recovery-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 12px; padding: 9px 10px; text-align: left; border: 1px solid #d8e2e8; background: #fbfcfd; }
.recovery-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.recovery-row time { font-size: 10px; color: #65808d; }
.recovery-row span { grid-column: 1 / -1; font-size: 11px; color: #65808d; }
.studio .recovery-row[aria-pressed="true"] { background: #e5f0f1; border-color: #25838c; }
.recovery-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: 100%; }
.recovery-actions button { min-width: 70px; }
.recovery-actions #recovery-delete { margin-right: auto; }
.workspace-status .recovery-status { display: inline-flex; flex: 0 0 auto; width: auto; margin: 0; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 4px; color: #607c84; font-size: 10px; white-space: nowrap; }
.recovery-status .ui-icon { width: 13px; height: 13px; }
.workspace-status .recovery-status.failed { color: #a5382e; }
.recovery-status[hidden], #recovery-resume[hidden] { display: none; }
@media (max-width: 600px) { .recovery-row time { grid-column: 1 / -1; } }
.viewport-layout { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.viewport-layout.is-split > #viewport { flex: 1 1 50%; }
.companion-plan { display: flex; position: relative; flex: 1 1 50%; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border: 0; border-left: 1px solid #cbd8df; }
.companion-toolbar { display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 34px; box-sizing: border-box; background: #f8fbfc; border-bottom: 1px solid #dae4e9; }
.companion-toolbar > span { flex-shrink: 0; font-size: 11px; color: #416576; }
.companion-toolbar select { width: auto; min-width: 60px; flex: 1; height: 25px; padding: 2px 5px; }
.companion-toolbar .companion-kind { flex: 0 0 86px; }
.companion-toolbar button { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; width: 25px; height: 25px; padding: 3px; }
.companion-toolbar .ui-icon { width: 16px; height: 16px; }
.companion-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.companion-canvas canvas:focus-visible { outline: 1px solid #117780; outline-offset: -2px; }
.companion-status { position: absolute; top: 8px; left: 12px; right: 12px; margin: 0; padding: 8px; background: #f8fbfc; color: #375564; font-size: 12px; overflow-wrap: anywhere; pointer-events: none; }
.companion-toolbar .companion-content { flex: 0 1 140px; min-width: 90px; }
.companion-results { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 5px 8px; padding: 7px 8px; border-bottom: 1px solid #dae4e9; background: #f3f8f9; }
.companion-results[hidden] { display: none; }
.companion-results select { min-width: 0; width: 100%; height: 26px; padding: 2px 5px; }
.companion-results label { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; }
.companion-results input { width: auto; margin: 0; }
.companion-result-summary { grid-column: 1 / -1; color: #416576; overflow-wrap: anywhere; }
.companion-results [hidden] { display: none !important; }
.companion-results.is-displacement .companion-output { grid-column: 1 / -1; }
.companion-fiber, .companion-deformation, .companion-legend { grid-column: 1 / -1; }
.companion-deformation { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.companion-deformation .companion-scale { width: 88px; min-width: 0; height: 25px; padding: 2px 5px; }
.companion-legend > :first-child { height: 9px; border: 1px solid #cedce3; }
.companion-legend > :last-child { display: flex; justify-content: space-between; font-size: 10px; color: #416576; }
.companion-mode, .companion-animation { grid-column: 1 / -1; }
.companion-animation { display: flex; align-items: center; gap: 12px; }
.companion-animation button { flex: 0 0 64px; width: 64px; min-width: 64px; padding: 3px 8px; }
.companion-animation input { max-width: 150px; }
#split-view-toggle[aria-pressed="true"] { background: #dcecef; color: #086570; }
.split-divider { flex: 0 0 6px; position: relative; cursor: col-resize; touch-action: none; background: #e5edef; outline: none; z-index: 3; }
.split-divider::after { content: ""; position: absolute; top: calc(50% - 18px); left: 2px; width: 2px; height: 36px; background: #9cb2ba; border-radius: 2px; }
.split-divider:hover, .split-divider:focus-visible { background: #c8e0e3; }
.split-divider:focus-visible { box-shadow: inset 0 0 0 1px #137b84; }
.split-resizing, .split-resizing * { cursor: col-resize !important; user-select: none !important; }
.split-resizing-stacked, .split-resizing-stacked * { cursor: row-resize !important; }
@media (max-width: 1000px) {
  .viewport-layout.is-split { flex-direction: column; }
  .companion-plan { border-left: 0; border-top: 1px solid #cbd8df; }
  .split-divider { cursor: row-resize; }
  .split-divider::after { top: 2px; left: calc(50% - 18px); width: 36px; height: 2px; }
}
.grid-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; }
.grid-annotations line { stroke: #8babbc; stroke-width: .8; }
.grid-annotations ellipse { fill: none; stroke: #799bae; stroke-width: 1; }
.grid-annotations text { fill: #385d70; font: var(--grid-label-size, 11px) 'Segoe UI', sans-serif; }
.studio .grid-label-options { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; }
.studio .grid-label-options > label { margin: 0; }
.studio .grid-label-options > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.studio .viewport-toolbar { height: 40px; padding: 0 12px; gap: 2px; background: #fbfcfd; border-bottom-color: #e2e9ec; }
.studio .viewport-toolbar > .workspace-command { min-height: 28px; padding: 4px 11px; font-size: 11px; border-radius: 3px; }
.studio .viewport-toolbar > .workspace-command.aktif { color: var(--accent); background: #e1eeee; border-color: #c7dfe0; }
.studio .viewport-navigation { gap: 4px; }
.studio .viewport-navigation .ui-icon { color: #68808c; }
.studio .illustrated-command { display: flex; align-items: center; gap: 9px; }
.studio .illustrated-command > .ui-icon { width: 19px; height: 19px; color: #476c78; }
.studio #sidebar .kisi button .ui-icon { width: 19px; height: 19px; color: #476c78; }
.studio .menu-isi .illustrated-command { justify-content: flex-start; }
.studio .menu-isi .illustrated-command > .ui-icon { width: 17px; height: 17px; }
.studio .ui-icon svg { transition: transform 120ms ease, color 120ms ease; transform-origin: center; }
.studio button:hover:not(:disabled) > .ui-icon { color: var(--accent); }
.studio button:hover:not(:disabled) > .ui-icon svg { transform: translateY(-1px); }
.studio button:active:not(:disabled) > .ui-icon svg { transform: scale(.93); }
.studio button:is(.aktif, [aria-pressed="true"]) > .ui-icon { color: var(--accent); }
.studio button:is(.aktif, [aria-pressed="true"]) > .ui-icon svg { stroke-width: 2; }
.studio button:disabled > .ui-icon { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  .studio .ui-icon svg { transition: none; }
  .studio button:hover:not(:disabled) > .ui-icon svg, .studio button:active:not(:disabled) > .ui-icon svg { transform: none; }
}
.studio .bar-tampak-bungkus { left: 13px; top: 12px; }
.studio .bar-tampak-tab { color: #71858f; border-color: #dde5e9; background: #ffffffeb; }
.studio .workspace-status { min-height: 31px; padding: 3px 12px; gap: 14px; background: #fff; color: #657983; border-top-color: var(--line); }
.studio .workspace-status #health { margin-left: 0; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.studio-counts { white-space: nowrap; font-size: 10px; color: #748690; }
.studio-load-case { display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.studio-load-case label { margin: 0; font-size: 11px; white-space: nowrap; }
.studio-load-case select { width: 118px; min-height: 25px; margin: 0; padding: 2px 7px; font-size: 11px; border-color: #d7e1e5; }
.studio dialog .studio-load-case { display: block; padding: 0 0 12px; border: 0; }
.studio dialog .studio-load-case select { width: 100%; }
.studio .mengambang, body.studio.properti-tertutup .mengambang { right: 18px; bottom: 48px; }
.studio #panel-member {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 158px);
  box-sizing: border-box; overflow: auto; padding: 12px 14px; border-radius: 8px;
  box-shadow: 0 10px 32px #233b4824; color: var(--text);
}
.studio #panel-member[hidden], .studio #panel-member [hidden] { display: none; }
.studio #panel-member .member-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  position: static; min-height: 0; padding: 0 0 6px; margin: 0;
  color: var(--text); background: none; border-bottom: 1px solid var(--line);
}
.studio #panel-member h3 { font-size: 13px; line-height: 1.4; margin: 0 0 3px; }
.studio #panel-member .member-heading > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.studio #sm-elemen { font-size: 17px; font-weight: 600; color: #165966; margin: 0; overflow-wrap: anywhere; }
.studio #sm-tutup { width: 28px; height: 28px; flex: 0 0 28px; padding: 0; font-size: 20px; }
.studio .member-source { margin: 6px 0; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; color: #56707d; }
.studio #sm-length { font-size: 10px; margin: 4px 0; }
.studio .member-controls { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.studio #panel-member label { display: flex; flex-direction: column; min-width: 0; gap: 4px; margin: 0; font-size: 11px; color: #617682; }
.studio #panel-member button { margin: 0; }
.studio #panel-member :is(select, input[type=number]) { width: 100%; min-width: 0; box-sizing: border-box; height: 30px; margin: 0; }
.studio #sm-grafik { height: 168px; background: white; border: 1px solid #e2e9ed; box-sizing: border-box; margin: 8px 0; cursor: crosshair; }
.studio #panel-member:not([data-state=ready]) #sm-grafik { display: none; }
.studio #sm-status { padding: 18px 12px; background: #f2f6f8; border-radius: 4px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.studio #panel-member[data-state=error] #sm-status { background: #fff4ef; color: #954f31; }
.studio .member-extrema { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.studio .member-extrema button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border: 1px solid #e0e8ec; background: #f8fafb; text-align: left; }
.studio .member-extrema button:hover { border-color: #6aabb0; background: #eff7f7; }
.studio .member-extrema span { font-size: 10px; color: #667e88; }
.studio .member-extrema strong { font-size: 12px; color: #284d5d; font-variant-numeric: tabular-nums; }
.studio .member-station { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 16px; margin-top: 8px; align-items: end; }
.studio #sm-slider { width: 100%; height: 30px; margin: 0; accent-color: #126c86; }
.studio .member-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.studio .member-readings > div { padding: 5px 8px; background: #f5f8fa; min-width: 0; border-radius: 3px; }
.studio .member-readings > div:first-child { grid-column: 1 / -1; display: flex; gap: 8px; background: none; padding: 0 0 3px; }
.studio .member-readings .is-active { background: #e7f2f3; }
.studio .member-readings dt { font-size: 10px; color: #68808a; }
.studio .member-readings dd { font-size: 11px; margin: 2px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.studio .member-notes { font-size: 10px; color: #70808b; line-height: 1.5; }
.studio .member-notes summary { cursor: pointer; }
.studio .member-actions { display: flex; gap: 8px; border-top: 1px solid var(--line); padding: 8px 0; margin-top: 8px; position: sticky; bottom: -12px; background: #fff; }
.studio .member-actions button { flex: 1; font-size: 11px; min-height: 30px; }
.studio .workspace-empty { background: #f8fafb; }
.studio .workspace-empty h1 { color: #27444f; letter-spacing: .04em; }
.studio #empty-actions .workspace-command:first-child { color: #0e6269; border-color: #aeced1; background: #eaf3f3; }
.studio #jalankan:not(:disabled) { background: var(--accent); border-color: var(--accent); }

/* Analysis cases fit the inspector; secondary details sit below the case name. */
.studio .analysis-case-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.studio .analysis-case-actions button { width: 100%; margin: 0; min-height: 29px; }
.studio .analysis-case-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; scrollbar-width: thin; }
.studio #tabel-kasus-jalan { table-layout: fixed; width: 100%; }
.studio #tabel-kasus-jalan :is(th, td) { text-align: left; padding: 8px 10px; white-space: normal; overflow-wrap: anywhere; }
.studio #tabel-kasus-jalan :is(th, td):first-child { width: 42px; padding: 8px 5px; text-align: center; vertical-align: top; }
.studio #tabel-kasus-jalan th { font-weight: 500; background: #f2f6f7; z-index: 1; }
.studio #tabel-kasus-jalan tbody tr { background: #fff; }
.studio #tabel-kasus-jalan tbody tr:hover { background: #f4f9f9; }
.studio #tabel-kasus-jalan tr:last-child td { border-bottom: 0; }
.studio #tabel-kasus-jalan input { display: block; width: 14px; height: 14px; margin: 2px auto; cursor: pointer; }
.studio .analysis-case-name { display: block; color: var(--text); font-weight: 500; line-height: 1.4; }
.studio .analysis-case-type, .studio .analysis-case-combinations { display: block; margin-top: 2px; font-size: 11px; color: #687b85; line-height: 1.4; }
.studio .analysis-case-combinations strong { color: #9a5318; font-weight: 600; }

/* Slim modeless windows: proportions follow the task, with scroll inside the body.
   Small forms sit at the left edge of the canvas, leaving its centre visible. */
.studio dialog.app-dialog { --dialog-width: 420px; max-height: min(680px, calc(100dvh - 120px)); inset: 105px auto auto max(74px, calc(var(--explorer-width) + 66px)); margin: 0; border-radius: 5px; border-color: #bdccd1; font-size: 12px; box-shadow: 0 12px 36px #173d4c26, 0 2px 7px #173d4c12; }
.studio dialog.app-dialog[data-dialog-size="compact"] { --dialog-width: 320px; }
.studio dialog.app-dialog[data-dialog-size="form"] { --dialog-width: 400px; }
.studio dialog.app-dialog[data-dialog-size="wide"] { --dialog-width: 600px; }
.studio dialog.app-dialog[data-dialog-size="workspace"] { --dialog-width: 700px; }
.studio dialog.app-dialog[data-dialog-size="table"] { --dialog-width: 900px; }
.studio :is(#dlg-section-data, #dlg-material-data) { --dialog-width: 640px; }
.studio #dlg-grid { --dialog-width: 480px; }
.studio :is(#dlg-tumpuan, #dlg-replikasi-opsi) { --dialog-width: 330px; }
.studio dialog.app-dialog:is([data-dialog-size="workspace"], [data-dialog-size="table"]) { left: 50%; margin-left: calc(-1 * min(var(--dialog-width), calc(100vw - 24px)) / 2); }
.studio dialog.app-dialog .dialog-titlebar { min-height: 38px; background: #f5f9fa; }
.studio dialog.app-dialog .dialog-titlebar h3 { padding: 9px 15px; font-size: 12px; color: #2d4b56; }
.studio dialog.app-dialog .dialog-body { padding: 12px 15px 15px; }
.studio dialog.app-dialog .dialog-footer { padding: 9px 15px; background: #f8fafb; gap: 8px; }
.studio dialog.app-dialog .dialog-footer button { width: auto; min-width: 76px; min-height: 29px; padding: 5px 12px; margin: 0; }
.studio dialog.app-dialog .dialog-footer > .kisi { display: contents; }
.studio dialog.app-dialog button { min-height: 29px; padding: 5px 10px; margin-top: 10px; border-radius: 3px; }
.studio dialog.app-dialog .dialog-dismiss { margin: 0; min-width: 34px; min-height: 34px; padding: 5px; }
.studio dialog.app-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-height: 30px; padding: 5px 8px; margin-top: 4px; font-size: 12px; border-color: #c4d1d7; }
.studio dialog.app-dialog label { margin-top: 10px; font-size: 11px; }
.studio dialog.app-dialog label[data-dialog-label] { font-size: 12px; gap: 7px; margin-top: 8px; }
.studio dialog.app-dialog fieldset { padding: 8px 11px 12px; margin-top: 12px; border-color: #dbe4e8; }
.studio dialog.app-dialog fieldset:first-child { margin-top: 0; }
.studio dialog.app-dialog legend { font-size: 11px; }
.studio dialog.app-dialog :is(.baris-dua, .baris-tiga, .baris-empat, .kolom-dua) { gap: 8px 12px; }
.studio dialog.app-dialog .kisi button { margin-top: 0; }
.studio dialog.app-dialog .dialog-body .kisi:not(:first-child) { margin-top: 12px; }
.studio dialog.app-dialog :is(td, th) { padding: 6px 8px; }
.studio dialog.app-dialog .dialog-primary:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.studio dialog.app-dialog .dialog-primary:hover:not(:disabled) { background: #094e56; }
.studio dialog.app-dialog.panel-gambar { left: auto; right: 16px; top: 105px; --dialog-width: 300px; margin: 0; }
.studio dialog.app-dialog select[size] { height: auto; min-height: 110px; max-height: 190px; }
.studio .section-preview { height: 212px; }
.studio .section-preview svg { height: 210px; }

/* Size forms by their working content, not by the longest hidden tab. */
.studio :is(#dlg-pelat, #dlg-divide) { --dialog-width: 420px; }
.studio :is(#dlg-al-titik, #dlg-al-merata) { --dialog-width: 500px; }
.studio :is(#dlg-opsi-tampak, #dlg-mass-source) { --dialog-width: 500px; }
.studio :is(#dlg-shell-data, #dlg-section-rebar) { --dialog-width: 560px; }
.studio :is(#dlg-grid-data, #dlg-fungsi-rsa) { --dialog-width: 680px; }
.studio #dlg-kasus { --dialog-width: 580px; }
.studio #dlg-kombinasi { --dialog-width: 680px; }
.studio dialog.app-dialog { container-type: inline-size; }
.studio dialog.app-dialog .tab { justify-content: flex-start; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.studio dialog.app-dialog .tab button { margin-top: 0; padding: 5px 9px; }
.studio dialog.app-dialog .dialog-body > label:first-child { margin-top: 0; }
.studio dialog.app-dialog :is(.dialog-body > label, .dialog-body > section > label, [data-pelat-medan] > label) > input[type="number"] { max-width: 160px; }
.studio #rep-opsi-jumlah { margin: 6px 0 0; font-size: 11px; }
.studio #rep-opsi-buka { display: block; }
.studio :is(#dlg-section-pengali, #dlg-shell-pengali, #dlg-material-desain) .baris-empat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio :is(#dlg-section-pengali, #dlg-shell-pengali, #dlg-material-desain) label { align-self: end; }
.studio #dlg-mass-source .baris-tiga:has(#ms-id) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.studio #dlg-mass-source .baris-tiga:has(#ms-geser) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio #dlg-mass-source label:has(#ms-geser) { grid-column: 1 / -1; }
.studio #dlg-mass-source .baris-tiga:has(#ms-pola) { grid-template-columns: minmax(0, 1fr) 86px auto; }
/* Reflow against the window itself, including on a wide desktop screen. */
@container (max-width: 460px) {
  .studio dialog.app-dialog .baris-empat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio dialog.app-dialog .dialog-property-columns { grid-template-columns: minmax(0, 1fr); }
  .studio dialog.app-dialog .dialog-combination-sections { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 360px) {
  .studio dialog.app-dialog .baris-tiga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio dialog.app-dialog .kolom-dua { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1150px) {
  .studio .titlebar { padding: 0 10px; gap: 8px; }
  .studio-project { padding-left: 12px; margin-left: 4px; gap: 7px; }
  .studio-project strong { max-width: 135px; }
  .studio #tab-alur button { min-width: 65px; padding: 0 9px; }
  .studio-actions [data-command="#jalankan"] { margin-right: 4px; padding: 6px 10px; }
  .studio-counts { display: none; }
}
@media (max-width: 900px) {
  .studio .titlebar .merek { font-size: 11px; }
  .studio-project > span, .studio #tab-alur .ui-icon { display: none; }
  .studio-project strong { max-width: 90px; }
  .studio-actions [data-command="#model-baru"] { display: none; }
  .studio #tab-alur button { min-width: 52px; padding: 0 7px; font-size: 11px; }
  .studio .menu > .menu-slot > button { padding: 5px 7px; }
  .studio .studio-menu-actions { padding-left: 4px; }
  .studio-inspector { width: min(var(--explorer-width), 32vw); }
  .studio .workspace-status #health { display: none; }
  .studio dialog.app-dialog { left: 50%; margin-left: calc(-1 * min(var(--dialog-width), calc(100vw - 24px)) / 2); }
  .studio dialog.app-dialog.panel-gambar { left: auto; right: 12px; margin-left: 0; }
}
@media (max-width: 700px) {
  .studio .titlebar { flex-wrap: wrap; min-height: 78px; }
  .studio-project { margin-right: auto; }
  .studio #tab-alur { order: 2; margin-left: 0; height: 30px; }
  .studio-actions { margin-left: auto; }
  .studio .menu > .menu-slot > button { padding: 5px 4px; font-size: 10px; }
  .studio-menu-actions { display: none; }
  .studio-inspector { width: min(var(--explorer-width), 40vw); }
  .studio #sidebar > section, .studio #properti > section { padding: 9px; }
  .studio .viewport-toolbar { padding: 0 5px; height: auto; min-height: 40px; }
  .studio .viewport-navigation { margin-left: auto; }
  .studio .studio-load-case label { display: none; }
  .studio dialog.app-dialog { top: 120px; max-height: calc(100dvh - 140px); }
}

.studio #panel-beban summary .ui-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 8px; color: var(--accent); }

/* Selection inspector: compact, readable values and the canonical Assign actions. */
/* Explorer command search remains outside the scrolling tree. */
.studio .result-context { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; padding: 10px 14px; border-bottom: 1px solid #d6e5e7; border-left: 3px solid var(--accent); background: #f3f8f9; }
.studio .result-context[hidden] { display: none; }
.studio .result-context-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; min-width: 0; }
.studio .result-context-heading strong { color: #24515c; font-size: 12px; font-weight: 600; }
.studio [data-result-status] { color: #6b7c84; font-size: 10px; }
.studio .result-context[data-state="error"] [data-result-status], .studio .result-context-stale [data-result-status] { color: #975b16; }
.studio .result-context-source { grid-column: 1; grid-row: 2; min-width: 0; color: #3d5964; font-size: 11px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio .result-context-details { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; font-size: 10px; color: #70858d; font-variant-numeric: tabular-nums; }
.studio .result-context-details:empty { display: none; }
.studio .result-context-actions { grid-column: 2; grid-row: 1 / 4; display: flex; align-items: center; gap: 5px; }
.studio .result-context-actions button { width: auto; min-height: 27px; margin: 0; padding: 4px 9px; font-size: 10px; white-space: nowrap; }
@media (max-width: 900px) {
  .studio .result-context { padding: 8px 10px; gap: 5px 8px; }
  .studio .result-context-actions { flex-direction: column; justify-content: center; align-items: stretch; }
}

.studio .explorer-search { flex: 0 0 auto; padding: 10px 12px 7px; border-bottom: 1px solid #e8eef0; }
.studio-inspector:not([data-workflow="model"]) .explorer-search { display: none; }
.studio .explorer-search-field { display: flex; align-items: center; gap: 6px; border: 1px solid #d4e0e4; border-radius: 4px; padding: 0 7px; background: #fafcfc; }
.studio .explorer-search-field:focus-within { border-color: var(--accent); outline: 2px solid #0e626914; }
.studio .explorer-search-field > .ui-icon { width: 15px; height: 15px; flex-shrink: 0; color: #789099; }
.studio #explorer-query { width: 100%; min-width: 0; margin: 0; padding: 7px 0; height: 32px; border: 0; outline: 0; box-shadow: none; background: transparent; font-size: 11px; }
.studio #explorer-query::-webkit-search-cancel-button { display: none; }
.studio #explorer-search-clear { flex: 0 0 23px; width: 23px; margin: 0; padding: 0 3px; min-height: 23px; border: 0; font-size: 17px; color: #617a84; background: transparent; }
.studio .explorer-tree-actions { display: flex; justify-content: space-between; margin-top: 5px; }
.studio .explorer-tree-actions button { min-height: 22px; margin: 0; padding: 2px 3px; border: 0; background: transparent; font-size: 10px; color: #6b808a; }
.studio .explorer-tree-actions button:hover { color: var(--accent); }
.studio .explorer-searching .explorer-tree-actions { visibility: hidden; }
.studio .explorer-searching #sidebar > section[data-milik-tab="model"] { display: none; }
.studio #explorer-search-results { padding: 8px; }
.studio #explorer-search-count { margin: 3px 5px 9px; font-size: 10px; color: #778b93; }
.studio #explorer-search-list { display: flex; flex-direction: column; gap: 3px; }
.studio #explorer-search-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 47px; padding: 7px 9px; margin: 0; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 4px; }
.studio #explorer-search-list button:hover:not(:disabled), .studio #explorer-search-list button:focus-visible { background: #eef6f6; border-color: #c9dfe1; }
.studio #explorer-search-list button > .ui-icon { width: 19px; height: 19px; flex: 0 0 19px; color: #537580; }
.studio #explorer-search-list button > span:not(.ui-icon) { min-width: 0; }
.studio #explorer-search-list button span span { display: block; font-size: 12px; overflow-wrap: anywhere; }
.studio #explorer-search-list small { display: block; margin-top: 3px; font-size: 10px; color: #809199; overflow-wrap: anywhere; }
.studio #explorer-search-list button:disabled { opacity: .5; }
.studio #remember-layout::before { content: '✓'; display: inline-block; width: 19px; color: var(--accent); }
.studio #remember-layout[aria-checked="false"]::before { visibility: hidden; }

.studio .selection-empty { margin: 0; color: #73848c; font-size: 11px; line-height: 1.6; }
.studio #properti:has(.selection-group) { max-height: 60%; }
.studio.properti-tertutup #properti:has(.selection-group) { max-height: 38px; }
.studio .selection-count { margin: 0 0 8px; color: #627984; font-size: 10px; }
.studio .selection-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-bottom: 8px; }
.studio .selection-heading .selection-count { flex: 1 1 140px; margin: 0; line-height: 1.6; }
.studio .selection-heading button { width: auto; min-height: 25px; margin: 0; padding: 3px 7px; font-size: 10px; }
.studio .selection-group h2 .ui-icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.studio .selection-identities { margin: 5px 0 8px; font-size: 10px; color: #637780; }
.studio .selection-identities p { max-height: 80px; overflow: auto; overflow-wrap: anywhere; margin: 6px 0; }
.studio #properti-isi .selection-group dd { min-width: 0; overflow-wrap: anywhere; }
.studio .selection-group + .selection-group { margin-top: 16px; padding-top: 10px; border-top: 1px solid #dce6e9; }
.studio #properti-isi .selection-group h2 { margin: 0 0 5px; font-size: 12px; font-weight: 600; color: #204653; overflow-wrap: anywhere; }
.studio #properti-isi .selection-group dt, .studio #properti-isi .selection-group dd { padding: 5px 0; font-size: 11px; }
.studio #properti-isi .selection-group dt { color: #6a7c86; }
.studio #properti-isi .selection-group dd { font-variant-numeric: tabular-nums; }
.studio .selection-mixed { color: #77848a; font-style: italic; }
.studio .selection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.studio .selection-actions button { min-width: 0; margin: 0; padding: 5px 7px; min-height: 28px; font-size: 11px; white-space: normal; }

/* Modeless drawing palette is in layout flow; it never covers model geometry. */
.studio dialog.drawing-toolbar {
  position: static; inset: auto; transform: none; box-sizing: border-box;
  width: 100%; min-width: 0; max-width: none; height: auto; max-height: 180px;
  margin: 0; padding: 9px 14px; border: 0; border-bottom: 1px solid #cddfe2;
  border-radius: 0; box-shadow: none; background: #f3f8f9; color: #284c58;
  flex: 0 0 auto; overflow: auto; z-index: auto;
}
.studio dialog.drawing-toolbar[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.studio dialog.drawing-toolbar:not([open]) { display: none; }
.studio .drawing-toolbar h3 { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 11px; cursor: default; }
.studio .drawing-toolbar h3 .ui-icon { width: 16px; height: 16px; color: var(--accent); }
.studio .drawing-toolbar [data-alat-gambar] { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.studio .drawing-toolbar [hidden] { display: none !important; }
.studio .drawing-toolbar label { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 95px; flex: 1 1 100px; max-width: 220px; color: #637780; font-size: 10px; }
.studio .drawing-toolbar label:has(select[id^="prop-"]) { flex-basis: 170px; }
.studio .drawing-toolbar input, .studio .drawing-toolbar select { margin: 0; box-sizing: border-box; min-width: 0; width: 100%; height: 29px; min-height: 29px; padding: 4px 7px; font-size: 11px; background: #fff; }
.studio .drawing-toolbar > .tutup { grid-column: 3; grid-row: 1; position: static; float: none; width: auto; margin: 0; min-height: 25px; padding: 3px 10px; font-size: 11px; }
.studio .drawing-context { grid-column: 2; grid-row: 1; display: flex; gap: 12px; justify-content: flex-end; min-width: 0; color: #687e87; font-size: 10px; }
.studio .drawing-context span { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .studio dialog.drawing-toolbar { padding: 8px; gap: 6px 8px; }
  .studio .drawing-context { flex-direction: column; gap: 1px; }
}
/* Result-table tools wrap inside the existing compact dialog. */
.result-table-filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px;
  padding: 10px 0; border-top: 1px solid #dce6eb;
}
.result-table-filters[hidden] { display: none; }
.studio .result-table-filters label { flex: 1 1 130px; min-width: 0; margin: 0; }
.studio .result-table-filters :is(input, select) { width: 100%; margin: 4px 0 0; }
.studio .result-table-filters > button { flex: 0 0 auto; margin: 0; height: 30px; }
.studio #hasil-tabel :is(th, td) { text-align: center; }
.studio #hasil-tabel tbody tr:not(.table-spacer) td { padding: 1px 9px; }
.studio #hasil-tabel .table-spacer td { padding: 0; border: 0; }
.studio #hasil-tabel th { padding: 0; }
.studio #hasil-tabel th button {
  width: 100%; min-height: 25px; margin: 0; padding: 4px 9px; border: 0; border-radius: 0;
  background: transparent; color: inherit; text-align: center; white-space: nowrap;
  font: inherit; cursor: pointer;
}
.studio #hasil-tabel th button:hover { background: #dfedf0; }
.studio #hasil-tabel th button:focus-visible { outline: 2px solid #087f8c; outline-offset: -2px; }
.studio #hasil-tabel.pin-first-column tr:not(.table-spacer) > :first-child {
  position: sticky; left: 0; z-index: 1; background: #f3f7f9;
  border-right: 1px solid #cadbe2;
}
.studio #hasil-tabel.pin-first-column thead tr:not(.table-spacer) > :first-child { z-index: 3; background: #e7eff3; }
.studio #hasil-tabel.pin-second-column tr:not(.table-spacer) > :nth-child(2) {
  position: sticky; left: var(--first-column-width); z-index: 1;
  background: #f3f7f9; border-right: 1px solid #cadbe2;
}
.studio #hasil-tabel.pin-second-column thead tr:not(.table-spacer) > :nth-child(2) {
  z-index: 3; background: #e7eff3;
}
.studio #hasil-tabel .result-row-selectable { cursor: pointer; }
.studio #hasil-tabel.windowed-table tr.result-row-selectable:hover > td { background: #eaf3f5; }
.studio #hasil-tabel.windowed-table tr.result-row-selectable[aria-selected="true"] > td { background: #d9ecee; color: #124d58; }
.studio #hasil-tabel tbody tr[aria-rowindex]:focus-visible { outline: 2px solid #087f8c; outline-offset: -2px; }
.studio #hasil-tabel tbody tr[aria-rowindex]:focus-visible > td { box-shadow: inset 0 1px #087f8c, inset 0 -1px #087f8c; }
.selection-hover { position: absolute; pointer-events: none; overflow: hidden; z-index: 4; }
.selection-hover path { fill: none; stroke: #008faa; stroke-width: 3; stroke-linecap: round; }
.selection-hover.is-selected path { stroke-width: 5; stroke-opacity: .55; }
.selection-tip { position: absolute; z-index: 8; pointer-events: none; background: #fff; color: #244354; border: 1px solid #bfd3d8; border-left: 3px solid #008faa; border-radius: 4px; padding: 7px 10px; box-shadow: 0 3px 12px #172f431a; font-size: 11px; max-width: 240px; overflow-wrap: anywhere; }
.selection-tip small { display: block; margin-top: 3px; color: #597482; }
.selection-tip small:empty { display: none; }
.selection-picker { position: absolute; z-index: 30; width: 230px; max-width: calc(100% - 8px); max-height: min(320px, calc(100% - 8px)); display: flex; flex-direction: column; background: #fff; color: #244354; border: 1px solid #aac6cc; border-radius: 5px; box-shadow: 0 6px 24px #172f4326; font-size: 12px; }
.selection-picker[hidden], .selection-tip[hidden] { display: none; }
.selection-picker header { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-bottom: 1px solid #dce7eb; }
.selection-picker header button { border: 0; background: transparent; padding: 2px 6px; margin: 0; width: auto; }
.selection-picker-list { overflow: auto; padding: 4px; min-height: 0; }
.selection-picker-list button { display: block; width: 100%; text-align: left; padding: 7px 26px 7px 10px; margin: 0; border: 1px solid transparent; background: transparent; border-radius: 3px; color: inherit; overflow-wrap: anywhere; position: relative; }
.selection-picker-list button:hover, .selection-picker-list button:focus-visible { background: #eaf6f8; border-color: #9bcdd5; outline: none; }
.selection-picker-list button[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 8px; color: #996507; }
.work-status { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; font-size: 10px; }
.work-status[hidden] { display: none; }
.work-status > span { white-space: nowrap; color: #60747d; }
.work-status > span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #8999a1; margin-right: 5px; vertical-align: middle; }
.work-status [data-save-state="dirty"], .work-status [data-analysis-state="stale"] { color: #895b17; }
.work-status [data-save-state="dirty"]::before, .work-status [data-analysis-state="stale"]::before { background: #b37d29; }
.work-status [data-analysis-state="current"]::before { background: #2c857c; }
.work-status [data-analysis-state="running"]::before { background: #27869b; }
.work-status [data-analysis-state="failed"], .work-status [data-analysis-state="unavailable"] { color: #a33b36; }
.work-status [data-analysis-state="failed"]::before, .work-status [data-analysis-state="unavailable"]::before { background: #a33b36; }
@media (max-width: 1000px) {
  .studio .workspace-status { flex-wrap: wrap; column-gap: 10px; row-gap: 3px; }
}