/* Siam2Dev-UML v2.0.9.19 — Contrast & Surface Hierarchy. UI only; do not recolor diagram SVG. */
:root{
 --ui-surface-1:#10253b;--ui-surface-2:#1b3853;--ui-surface-3:#0a1b2c;--ui-surface-4:#254b68;
 --ui-border-strong:#62809a;--ui-text-strong:#f3f8ff;--ui-text-muted:#c4d6e9;--ui-text-soft:#aabed1;
 --ui-text-on-accent:#061b2b;--ui-warning-bg:#3c3018;--ui-warning-text:#ffe5a0;--ui-danger-bg:#51252e;--ui-danger-text:#ffe1e3;
}
html[data-ui-theme="light"]{
 --ui-surface-1:#ffffff;--ui-surface-2:#eef5fd;--ui-surface-3:#f7faff;--ui-surface-4:#dbeaf9;
 --ui-border-strong:#6889a6;--ui-text-strong:#15324b;--ui-text-muted:#3b5872;--ui-text-soft:#4e6881;
 --ui-text-on-accent:#ffffff;--ui-warning-bg:#fff1ce;--ui-warning-text:#664600;--ui-danger-bg:#fff0f0;--ui-danger-text:#8c2132;
}
html[data-ui-theme="purple"]{
 --ui-surface-1:#252d49;--ui-surface-2:#353e60;--ui-surface-3:#1b233d;--ui-surface-4:#4b5279;
 --ui-border-strong:#a1a8d2;--ui-text-strong:#f7f4ff;--ui-text-muted:#dcd8ee;--ui-text-soft:#c9c5e3;
 --ui-text-on-accent:#1c1733;--ui-warning-bg:#40351e;--ui-warning-text:#ffe9a9;--ui-danger-bg:#512a3c;--ui-danger-text:#ffdae4;
}
html[data-ui-theme="emerald"]{
 --ui-surface-1:#123b35;--ui-surface-2:#1d5046;--ui-surface-3:#092d29;--ui-surface-4:#286658;
 --ui-border-strong:#71ac9b;--ui-text-strong:#effff9;--ui-text-muted:#d2eee4;--ui-text-soft:#b6dbce;
 --ui-text-on-accent:#09291f;--ui-warning-bg:#45391c;--ui-warning-text:#ffecb7;--ui-danger-bg:#552c37;--ui-danger-text:#ffe1e8;
}
/* Layering for application chrome, never apply these to SVG nodes/edges */
html[data-ui-theme] :is(.top,.bottom,.left,.right,.menu-entries,.edge-floating,.editor-context){color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.left,.right,.panel,.project-explorer,.device-network-library){border-color:var(--ui-border)!important}
html[data-ui-theme] :is(.left,.right) :is(.inspector-section,.up-phase,.up-diagram,.up-uml-reference,.project-explorer,.device-network-library,.inspector-help){background-color:var(--ui-surface-1)!important;border-color:var(--ui-border)!important;color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.left,.right) :is(.up-tools .tool,.network-device-tool,.project-tree button,.inspector-mark,.inspector-heading,.field){border-color:var(--ui-border)!important}
html[data-ui-theme] :is(.left,.right,.top,.bottom) :is(small,.size-hint,.inspector-sub,.dev-credit,.tip,.up-phase p){color:var(--ui-text-muted)!important}
html[data-ui-theme] :is(.left,.right,.top) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--ui-surface-3)!important;color:var(--ui-text-strong)!important;border:1px solid var(--ui-border-strong)!important}
html[data-ui-theme] :is(.left,.right,.top) :is(input,select,textarea)::placeholder{color:var(--ui-text-soft)!important;opacity:1}
html[data-ui-theme] :is(.left,.right,.top) button:disabled{opacity:.52!important;cursor:not-allowed!important}
/* Dialog hierarchy: correct the global rule that made all dialog descendants dark while leaving hard-coded pale text. */
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog){background:var(--ui-surface-1)!important;color:var(--ui-text-strong)!important;border:1px solid var(--ui-border-strong)!important;box-shadow:0 20px 55px var(--ui-shadow)!important}
html[data-ui-theme] :is(.practice-shell,.practice-body,.anal-body,.teach-body){background:var(--ui-surface-1)!important;color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.practice-header,.anal-head,.teach-head){background:var(--ui-surface-3)!important;color:var(--ui-text-strong)!important;border-bottom:1px solid var(--ui-border-strong)!important}
html[data-ui-theme] :is(.practice-header,.anal-head,.teach-head) :is(h2,h3,button){color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.practice-section,.anal-kpis article,.teach-result){background:var(--ui-surface-2)!important;color:var(--ui-text-strong)!important;border:1px solid var(--ui-border-strong)!important}
html[data-ui-theme] :is(.practice-section,.anal-kpis article,.teach-result) :is(h2,h3,h4,strong,p,span,small,label,li,ol,ul,div){color:var(--ui-text-strong)!important}
html[data-ui-theme] .anal-kpis strong{font-size:clamp(20px,2.2vw,27px)!important;font-weight:800!important;color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.anal-kpis article,.practice-rubric-row,.teach-score){color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.practice-rubric-row,.teach-score){border-color:var(--ui-border)!important}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(select,input:not([type=checkbox]),textarea){background:var(--ui-surface-3)!important;color:var(--ui-text-strong)!important;border:1px solid var(--ui-border-strong)!important;min-width:0}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(input,textarea)::placeholder{color:var(--ui-text-soft)!important;opacity:1}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(button){color:var(--ui-text-strong)!important;background:var(--ui-surface-4)!important;border:1px solid var(--ui-border-strong)!important}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(#practiceRun){background:var(--ui-accent)!important;color:var(--ui-text-on-accent)!important}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(button:disabled){opacity:.5!important}
html[data-ui-theme] .anal-track{background:var(--ui-surface-3)!important}
html[data-ui-theme] .anal-bar{background:var(--ui-accent)!important}
html[data-ui-theme] .teach-warning{color:var(--ui-warning-text)!important;background:var(--ui-warning-bg)!important}
/* Other dialogs inherit same hierarchy but do not recolor their embedded SVG diagrams */
html[data-ui-theme] dialog:not(.s2d-welcome):not(.appearance-dialog) :is(.layout-preview-content,.validation-issue,.integrity-issue){background:var(--ui-surface-2)!important;color:var(--ui-text-strong)!important;border-color:var(--ui-border)!important}
html[data-ui-theme] :is(.appearance-dialog,.s2d-welcome) :is(button,input,select):focus-visible{outline:3px solid var(--ui-focus)!important;outline-offset:2px}
html[data-ui-theme] :is(.s2d-welcome,.appearance-dialog) :is(small,p,label){color:var(--ui-text-muted)!important}
html[data-ui-theme] :is(.edge-floating,.editor-context,.menu-entries,.sheet-menu){background:var(--ui-surface-1)!important;border:1px solid var(--ui-border-strong)!important;box-shadow:0 12px 30px var(--ui-shadow)!important}
html[data-ui-theme] :is(.edge-floating,.editor-context,.menu-entries,.sheet-menu) :is(button){background:var(--ui-surface-2)!important;color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.edge-floating,.editor-context,.menu-entries,.sheet-menu) :is(button):hover{background:var(--ui-surface-4)!important}
/* Keep canvas ink and node fills unaffected; chrome/minimap only */
html[data-ui-theme] .minimap{border-color:var(--ui-border-strong)!important}
@media(max-width:760px){html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog){width:calc(100vw - 18px)!important;max-height:calc(100dvh - 20px)!important}html[data-ui-theme] :is(.practice-body,.anal-body,.teach-body){max-height:calc(100dvh - 120px);overflow-y:auto}html[data-ui-theme] .anal-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}