/* Siam2Dev UML v2.0.7.1 — cohesive modern UI layer. UI ONLY; SVG and project state untouched. */
:root{--bg:#0a1220;--sidebar:#111e31;--line:#31465f;--ink:#edf5ff;--muted:#adc2d8;--accent:#4cc7e8;--s2d-blue:#138ac2;--s2d-cyan:#35c8dd;--s2d-radius:12px;--s2d-shadow:0 14px 38px rgba(1,9,22,.28)}
html,body{width:100%;min-width:0;max-width:100%;overflow:hidden}
body,button,input,textarea,select,summary,dialog{font-family:'Sarabun','Inter','Noto Sans Thai',system-ui,sans-serif!important}
body{font-size:13.5px;line-height:1.52;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
button,summary,a,input,select{ -webkit-tap-highlight-color:transparent }
button{transition:background-color .16s,border-color .16s,transform .16s,box-shadow .16s;border-radius:9px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #42cce9!important;outline-offset:2px}
.app{width:100%!important;max-width:100%!important;height:100dvh!important;min-height:0!important;overflow:hidden!important;grid-template-rows:auto minmax(0,1fr) minmax(39px,auto) minmax(34px,auto)!important}
/* Toolbar: balanced controls, consistent sizing, no horizontal page overflow */
.top{background:linear-gradient(108deg,#0d1b30,#132b45 62%,#10253d)!important;border-bottom:1px solid #32516e!important;box-shadow:0 3px 14px #04132655!important;padding:9px 14px!important;gap:7px!important;display:flex!important;align-items:center!important;align-content:center!important;flex-wrap:wrap!important;min-height:60px!important;max-height:min(29dvh,185px)!important;overflow-y:auto!important;overflow-x:clip!important;scrollbar-width:thin;z-index:30!important}
.top>.brand{display:inline-flex!important;align-items:center;gap:8px;min-width:160px!important;max-width:255px;flex:0 0 auto;margin-right:7px!important}
.top>.brand .site-wordmark{font-weight:750!important;letter-spacing:-.035em;font-size:17px!important}
.top>.brand .site-logo{height:34px!important;max-height:34px!important;max-width:90px;object-fit:contain}
.top>button,.top .menu-drop summary{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:6px 10px!important;font-size:12px!important;font-weight:600;white-space:nowrap;border-color:#365979;background:#193651;color:#e9f5ff}
.top>button:hover,.top .menu-drop summary:hover{background:#25557b;border-color:#5c9cbf;filter:none!important}
.top button.active,.top #practiceOpenBtn{background:#0f7396;border-color:#2c9fca;color:#fff}
.top #welcomeOpenBtn,.top #helpModalBtn{background:#1e354d}
.top .workshop-menus{display:flex;align-items:center;gap:5px;max-width:100%;min-width:0;flex:0 1 auto;flex-wrap:wrap}
.top .workshop-menus .menu-drop{position:relative;min-width:0}
.top .menu-drop .menu-entries{z-index:200;max-height:min(65dvh,460px);overflow:auto;box-shadow:var(--s2d-shadow);border-radius:11px}
.top>#filename{flex:1 1 150px!important;min-width:110px!important;max-width:235px!important;background:#081a2e!important;color:#f2f8ff!important;border:1px solid #4b6580!important;border-radius:9px;padding:8px 11px!important;min-height:35px}
.top #zoomLabel{font-size:12px;color:#d8f6ff;font-weight:700;padding:3px 6px}
.top .autosave-state{font-size:11px;padding:7px 9px;max-width:145px;min-height:34px}
/* Main structure: generous drawing space with bounded responsive side columns */
.layout{width:100%;min-width:0;min-height:0;overflow:hidden!important;grid-template-columns:clamp(240px,var(--left-size,278px),320px) 5px minmax(0,1fr) 5px clamp(254px,var(--inspector-width,280px),325px)!important;background:#eaf1f9}
.layout>.left,.layout>.right{min-height:0;min-width:0;scrollbar-width:thin;background:linear-gradient(180deg,#14253b,#102036)!important}
.layout>.left{border-right:1px solid #38516b!important;padding:0 10px 16px!important}
.layout>.right{border-left:1px solid #39516c!important;padding:16px 14px 20px!important;overflow:auto}
.layout>.sidebar-resizer,.layout>.inspector-resizer{background:#263e58!important;width:5px!important;min-width:5px!important}
.layout>.sidebar-resizer:hover,.layout>.inspector-resizer:hover{background:#1eabd4!important}
.layout>.work{grid-column:3;min-width:0!important;min-height:0!important;overflow:auto!important;background:#f4f8fd!important}
.layout>.work .workspace{max-width:none} /* retain editor coordinate system */
.left-tab-bar{background:#102138!important;border-bottom:1px solid #3a5570;padding:10px 0!important;gap:5px}
.left-tab-button{font-size:12px!important;font-weight:650!important;min-height:38px;border-radius:9px!important}
.left-tab-button[aria-selected='true']{background:#0b8eb6!important;border-color:#5bd7ed!important;color:#fff!important}
.left-tab-pane{min-width:0}
.up-brand{padding:13px 8px 14px!important}.up-brand h3{font-size:17px!important;line-height:1.35}
.up-brand p{font-size:12px!important;line-height:1.6}
.up-phase{background:#172d46!important;border:1px solid #395773!important;border-radius:12px!important;margin-bottom:11px!important}
.up-phase>summary{padding:12px!important;min-height:56px}
.up-phase>summary strong{font-size:13px!important}.up-phase>summary small{font-size:11.5px!important}
.up-phase-body{padding:11px!important}.up-diagram{padding:11px!important;background:#1b344e!important}
.up-diagram-head b{font-size:12px!important}.up-diagram p{font-size:11.5px!important}
.up-tools .tool{min-height:44px;padding:10px!important;font-size:12px!important;border-radius:9px}
.up-tools .tool span{font-size:12px!important}.up-tools .tool small{font-size:10.5px!important}
.project-search-wrap input,.right input,.right textarea,.right select{font-size:13px!important}
.right .inspector-heading h3{font-size:17px!important;letter-spacing:0;line-height:1.35}
.right .inspector-sub{font-size:12px!important}.right .field{font-size:12px!important}
.right .inspector-section{margin:17px 0 10px!important}
/* Sheets and status are independent horizontal regions, not sources of global overflow */
.sheets-bar{width:100%;max-width:100%;min-width:0;min-height:40px!important;gap:7px!important;padding:5px 12px!important;background:#12273e!important;overflow:hidden}
.sheets-strip{min-width:0;flex:1;overflow-x:auto!important;overflow-y:hidden;scrollbar-width:thin}
.sheets-strip .sheet-tab{min-height:30px;max-width:200px;border-radius:9px 9px 3px 3px!important}
.bottom{width:100%;max-width:100%;min-width:0;min-height:34px!important;padding:6px 12px!important;gap:10px!important;flex-wrap:nowrap!important;align-items:center!important;background:#0e1e32!important;overflow:hidden!important}
.bottom #status{flex:1 1 130px;min-width:65px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.bottom .site-metrics{flex:0 1 auto;min-width:0;gap:6px;white-space:nowrap;overflow:hidden}
.bottom .dev-credit{min-width:0;max-width:235px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
.bottom #versionPill,.version-pill{flex:none!important;white-space:nowrap!important;visibility:visible!important;font-size:11px!important;line-height:1.35}
/* dialogs: coordinated typography and real viewport limits */
dialog:not([open]){display:none}dialog[open]{max-height:calc(100dvh - 24px)!important;max-width:calc(100vw - 24px)!important}
.welcome-shell,.learning-shell,.practice-shell{max-height:calc(100dvh - 26px);max-width:calc(100vw - 26px);overflow:auto}
.welcome-content,.learning-content,.practice-body{min-width:0;max-width:100%}
.welcome-content>*,.learning-content>*,.practice-body>*{min-width:0}
/* laptop: hide inspector to maximize diagram, maintain existing drawer mechanism */
@media(max-width:1199px){.layout{grid-template-columns:clamp(210px,var(--left-size,248px),275px) 5px minmax(0,1fr) 0 0!important}.layout>.right,.layout>.inspector-resizer{display:none!important}.layout>.work{grid-column:3!important}.responsive-inspector-btn{display:inline-flex!important}.top>.brand{min-width:145px!important}.bottom .dev-credit{max-width:170px}}
@media(max-width:820px){.layout{grid-template-columns:215px 5px minmax(0,1fr) 0 0!important}.top{padding:7px 9px!important;gap:5px!important}.top>.brand{min-width:130px!important}.top>.brand .site-wordmark{font-size:15px!important}.top>button,.top .menu-drop summary{min-height:32px;padding:5px 8px!important;font-size:11.5px!important}.bottom .dev-credit{display:none}.bottom .site-metrics{font-size:10px}}
/* phones: Canvas owns available space, panels are true drawers; never horizontally scroll body */
@media(max-width:760px){.app{grid-template-rows:auto minmax(0,1fr) 42px 34px!important}.top{max-height:min(30dvh,178px)!important;overflow-y:auto!important;align-content:start;justify-content:flex-start!important;gap:5px!important}.top>.brand{order:0!important;flex:1 1 140px!important;min-width:120px!important}.top #mobileBtn,.top #responsiveInspectorBtn{order:1!important;display:inline-flex!important}.top .workshop-menus{order:2!important;flex:1 1 100%!important;max-width:100%;overflow:visible}.top>#filename{order:3!important;flex:1 1 120px!important;max-width:none!important}.top #selectBtn,.top #connectBtn,.top #zoomLabel,.top #autosaveState{order:3!important}.top #practiceOpenBtn,.top #welcomeOpenBtn,.top #helpModalBtn,.top #focusModeBtn,.top #minimapToggle{order:4!important}.top #panelsBtn{display:none!important}.layout,.app.hide-inspector .layout,.app.focus-mode .layout{grid-template-columns:minmax(0,1fr)!important}.layout>.work,.app.focus-mode .layout>.work{grid-column:1!important;grid-row:1!important}.layout>.left{display:none!important}.layout>.sidebar-resizer,.layout>.inspector-resizer{display:none!important}.app.responsive-sidebar-open:not(.focus-mode) .layout>.left{display:block!important;position:fixed!important;top:0!important;bottom:0!important;left:0!important;width:min(340px,88vw)!important;max-width:88vw!important;z-index:160!important;overflow:auto!important;padding:60px 10px 16px!important;box-shadow:15px 0 40px #0009}.app.responsive-inspector-open .layout>.right{display:block!important;position:fixed!important;top:0!important;right:0!important;bottom:0!important;width:min(370px,90vw)!important;max-width:90vw!important;z-index:160!important;overflow:auto!important;padding:66px 14px 22px!important;box-shadow:-15px 0 40px #0009}.app.responsive-sidebar-open .workspace-backdrop,.app.responsive-inspector-open .workspace-backdrop{display:block!important;position:fixed!important;inset:0!important;background:#030b16a3!important;z-index:155!important}.sheets-bar{min-height:42px!important;padding:4px 6px!important}.bottom{min-height:34px!important;padding:4px 8px!important;gap:5px!important}.bottom #status{display:none!important}.bottom .site-metrics{flex:1 1 auto;min-width:0;white-space:nowrap}.bottom #versionPill{margin-left:auto}.minimap{max-width:108px!important;max-height:80px!important}.welcome-content,.learning-content{display:block!important}.welcome-content>*,.learning-content>*{width:100%;max-width:100%}.learning-cases{max-height:180px;overflow:auto}.practice-selects{display:grid!important;grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:430px){.top>.brand .site-logo{display:none!important}.top>.brand .site-wordmark{font-size:14px!important}.top #autosaveState{display:none}.top .workshop-menus{gap:3px}.top .menu-drop summary{font-size:11px!important;padding:5px 6px!important}.bottom .dev-credit,.bottom .site-metrics small,.bottom .site-metrics span:nth-child(2){display:none!important}.bottom #versionPill{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}