@import url("/v01-design.css?v=0.2.0-rc9") layer(sinyara-legacy);
@import url("/v01-shell.css?v=0.2.0-rc9") layer(sinyara-legacy);
@import url("/v01-live.css?v=0.2.0-rc9") layer(sinyara-legacy);

/* SINYARA v0.2 — authoritative compact workspace design contract.
   Scope: authenticated shell and UI chrome. Login and saved monitoring-board geometry stay intact.
   Legacy files retain behavior/layout internals; presentation resolves through this shared scale. */

/* 1. Palettes and density */
#sy-ap:has(.sy-stage){--ws-bg:#fff;--ws-panel:#fff;--ws-soft:#fff;--ws-ink:#174d37;--ws-muted:#174d37;--ws-line:#174d37;--ws-nav:#fff;--ws-active:#174d37;--ws-accent:#174d37;--ws-action-ink:#fff;--ws-link:#174d37;--ws-good:#256343;--ws-warn:#80580b;--ws-bad:#b02e43;--ws-blue-tint:#fff;--ws-purple-tint:#fff;--ws-green-tint:#eaf4ee;--ws-amber-tint:#fff5df;--ws-red-tint:#fbedef;--ui-control:34px;--ui-icon:30px;--ui-row:40px;--ui-radius:6px;--ui-card:8px;--ui-gap:16px;--ui-pad:16px;--ui-font:13px;--ui-small:11px;--ui-rail:64px;--ui-menu:224px;--ui-header:64px;--button-hover-bg:var(--ws-panel);--button-hover-border:var(--ws-ink);--ws-active-ink:#fff}
#sy-ap[data-display-mode=dark]:has(.sy-stage){--ws-bg:#174d37;--ws-panel:#174d37;--ws-soft:#174d37;--ws-ink:#fff;--ws-muted:#fff;--ws-line:#fff;--ws-nav:#174d37;--ws-active:#fff;--ws-accent:#fff;--ws-action-ink:#174d37;--ws-link:#fff;--ws-good:#94d2a5;--ws-warn:#e7ca88;--ws-bad:#f2a9b0;--ws-blue-tint:#174d37;--ws-purple-tint:#174d37;--ws-green-tint:#183b27;--ws-amber-tint:#352f1c;--ws-red-tint:#3b2328;--ws-active-ink:#174d37}
#sy-ap:has(.sy-stage),#sy-ap .sy-stage{--sy-bg:var(--ws-bg);--sy-panel:var(--ws-panel);--sy-ink:var(--ws-ink);--sy-muted:var(--ws-muted);--sy-line:var(--ws-line);--sy-soft:var(--ws-soft);--sy-green:var(--ws-accent);--sy-amber:var(--ws-warn);--sy-red:var(--ws-bad);--theme-panel:var(--ws-panel);--theme-header:var(--ws-panel);--theme-input:var(--ws-panel);--theme-soft:var(--ws-soft);--theme-ink:var(--ws-ink);--theme-muted:var(--ws-muted);--theme-line:var(--ws-line);--theme-blue:var(--ws-link);--theme-purple:var(--ws-muted);--theme-green:var(--ws-good);--theme-amber:var(--ws-warn);--theme-red:var(--ws-bad);--theme-tint-blue:var(--ws-blue-tint);--theme-tint-purple:var(--ws-purple-tint);--theme-tint-green:var(--ws-green-tint);--theme-tint-amber:var(--ws-amber-tint);--theme-tint-red:var(--ws-red-tint);--sy-title-blue:var(--ws-soft);--sy-title-purple:var(--ws-soft);--sy-title-jade:var(--ws-soft);--sy-title-rose:var(--ws-soft);--sy-title-amber:var(--ws-soft);--sy-card-radius:var(--ui-card);--sy-card-shadow:none}
#sy-ap .sy-stage{font:var(--ui-font)/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--ws-bg);color:var(--ws-ink);color-scheme:light}
#sy-ap[data-display-mode=dark] .sy-stage{color-scheme:dark}
#sy-ap .sy-stage :is(h2,h3,h4,p){overflow-wrap:anywhere}
#sy-ap .sy-stage h2{font-size:22px;font-weight:650;letter-spacing:-.025em;line-height:1.3;margin:0}
#sy-ap .sy-stage h3{font-size:13px;font-weight:650;line-height:1.4;letter-spacing:0;margin:0 0 12px}
#sy-ap .sy-stage h4{font-size:12px;font-weight:650;margin:0 0 10px}
#sy-ap .sy-stage .sy-muted{font-size:var(--ui-small);color:var(--ws-muted)}

/* 2. Auto-hide shell; expansion overlays content instead of resizing widget boards. */
#sy-ap .sy-stage:has(.sy-nav),#sy-ap .sy-stage:has(.sy-nav)[data-nav-collapsed=true]{--sy-nav-width:var(--ui-rail);--sy-menu-width:var(--ui-rail);--sy-header-height:var(--ui-header)}
#sy-ap .sy-stage:has(.sy-nav)[data-menu-open=true]{--sy-nav-width:var(--ui-rail);--sy-menu-width:var(--ui-menu)}
#sy-ap .sy-stage .sy-header{min-height:var(--ui-header);padding:10px 20px;gap:16px;border-bottom:1px solid var(--ws-line);background:var(--ws-panel);box-shadow:none}
#sy-ap .sy-stage .sy-brand{gap:12px}
#sy-ap .sy-stage .sy-brand img{width:var(--ui-logo,142px);max-height:40px}
#sy-ap .sy-workspace-divider{height:26px;border-left:1px solid var(--ws-line)}
#sy-ap .sy-workspace-breadcrumb{display:grid;gap:1px;white-space:nowrap;color:var(--ws-muted);font-size:9px;line-height:1.35}
#sy-ap .sy-workspace-breadcrumb b{font-size:11px;font-weight:600;color:var(--ws-ink)}
#sy-ap .sy-workspace-version{padding:2px 5px;border:1px solid var(--ws-line);border-radius:4px;font-size:9px;color:var(--ws-muted)}
#sy-ap .sy-stage .sy-header-actions{gap:6px;flex-wrap:nowrap}
#sy-ap .sy-stage .sy-role{font-size:11px;color:var(--ws-muted);max-width:190px}
#sy-ap .sy-stage .sy-workspace-toggle{width:var(--ui-control);padding:6px;justify-content:center;flex:none}
#sy-ap .sy-workspace-toggle svg{width:18px;height:18px}
#sy-ap .sy-stage .sy-nav,#sy-ap .sy-stage[data-menu-open=true] .sy-nav{width:var(--sy-menu-width);padding:16px 10px 12px;gap:16px;background:var(--ws-nav);color:var(--ws-ink);border-right:1px solid var(--ws-line);box-shadow:none;transition:width .15s ease}
#sy-ap .sy-stage[data-menu-open=true] .sy-nav{box-shadow:none}
#sy-ap .sy-workspace-label{display:grid;gap:4px;padding:0 10px 12px;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-workspace-label span,#sy-ap .sy-section-eyebrow{font-size:9px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-muted)}
#sy-ap .sy-workspace-label strong{font-size:12px;font-weight:650}
#sy-ap .sy-nav-groups{display:grid;gap:18px}
#sy-ap .sy-nav-group{display:grid;gap:4px}
#sy-ap .sy-stage .sy-nav-group h3{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ws-muted);margin:0 0 4px;padding:0 10px}
#sy-ap .sy-stage .sy-nav button{min-height:38px;padding:9px 10px;gap:10px;border:1px solid transparent;border-radius:var(--ui-radius);background:transparent;color:var(--ws-muted);font-size:12px;font-weight:500;box-shadow:none}
#sy-ap .sy-stage .sy-nav button svg{width:18px;height:18px;flex:none}
#sy-ap .sy-stage .sy-nav button[aria-current=page]{background:var(--ws-active);color:var(--ws-active-ink);border-color:transparent;font-weight:650;box-shadow:none}
#sy-ap .sy-stage .sy-nav button:enabled:hover{background:var(--ws-active);border-color:transparent;color:var(--ws-active-ink)}
#sy-ap .sy-stage .sy-nav-label{opacity:1;visibility:visible;white-space:nowrap}
#sy-ap .sy-nav-current-dot{width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:auto;flex:none}
#sy-ap .sy-nav-foot{display:flex;gap:8px;align-items:center;border-top:1px solid var(--ws-line);margin-top:auto;padding:12px 8px 0}
#sy-ap .sy-release-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--ui-radius);background:var(--ws-active);color:var(--ws-active-ink);font-size:13px;font-weight:700;flex:none}
#sy-ap .sy-nav-foot>div{display:grid;gap:2px;min-width:0}
#sy-ap .sy-nav-foot strong{font-size:11px}
#sy-ap .sy-stage .sy-nav-foot small{margin:0;font-size:9px;white-space:nowrap;color:var(--ws-muted)}
#sy-ap .sy-stage[data-nav-collapsed=true] .sy-nav :is(.sy-workspace-label,.sy-nav-group h3,.sy-nav-foot>div,.sy-nav-label,.sy-nav-current-dot){display:none}
#sy-ap .sy-stage[data-nav-collapsed=true] .sy-nav button{justify-content:center;padding:9px}
#sy-ap .sy-stage[data-nav-collapsed=true] .sy-nav-foot{padding-inline:8px}
#sy-ap .sy-nav-backdrop{display:none}
#sy-ap .sy-stage .sy-content{width:100%;max-width:none;margin:0;padding:20px;background:var(--ws-bg);min-width:0}
#sy-ap .sy-stage .sy-heading{align-items:center;gap:12px;margin-bottom:18px}
#sy-ap .sy-stage .sy-page-icon{width:36px;height:36px;border:1px solid var(--ws-line);border-radius:var(--ui-card);background:var(--ws-panel);color:var(--ws-muted);box-shadow:none}
#sy-ap .sy-stage .sy-page-icon svg{width:20px;height:20px}
#sy-ap .sy-stage .sy-heading .sy-muted{margin:3px 0 0;font-size:11px}
#sy-ap .sy-stage .sy-page-time{font-size:10px;white-space:nowrap;padding:0;color:var(--ws-muted)}
#sy-ap .sy-stage .sy-footer{margin-top:20px;padding-top:12px;border-top:1px solid var(--ws-line);text-align:left;font-size:10px;color:var(--ws-muted)}

/* 3. One control scale; checkbox/radio/color and saved monitoring controls remain specialized. */
#sy-ap:has(.sy-stage) :is(.sy-button,.ap-dialog-actions button,.sr-segments button,.sr-generate){min-height:var(--ui-control);padding:7px 11px;border:1px solid var(--ws-line);border-radius:var(--ui-radius);background:var(--ws-panel);color:var(--ws-ink);font:500 12px/1.4 system-ui,sans-serif;box-shadow:none;display:inline-flex;align-items:center;gap:6px;justify-content:center}
#sy-ap:has(.sy-stage) :is(.sy-button,.sr-segments button):enabled:hover{background:var(--ws-active);border-color:var(--ws-muted);color:var(--ws-active-ink);box-shadow:none}
#sy-ap:has(.sy-stage) :is(.sy-button[aria-pressed=true],.sr-segments button[aria-pressed=true],.sr-ranges button[aria-pressed=true]){background:var(--ws-active);color:var(--ws-active-ink);border-color:var(--ws-line);box-shadow:none}
#sy-ap:has(.sy-stage) :is(.sy-button.sy-primary,button[type=submit],.sr-generate,.sy-review-request,.mr-color-save){background:var(--ws-accent);color:var(--ws-action-ink);border-color:var(--ws-accent)}
#sy-ap:has(.sy-stage) :is(.sy-button.sy-primary,button[type=submit],.sr-generate,.sy-review-request):enabled:hover{background:var(--ws-accent);color:var(--ws-action-ink);filter:none}
#sy-ap:has(.sy-stage) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]){width:100%;min-width:0;min-height:var(--ui-control);padding:7px 10px;box-sizing:border-box;border:1px solid var(--ws-line);border-radius:var(--ui-radius);background:var(--ws-panel);color:var(--ws-ink);font:400 var(--ui-font)/1.4 system-ui,sans-serif;box-shadow:none}
#sy-ap:has(.sy-stage) textarea{min-height:88px;resize:vertical}
#sy-ap:has(.sy-stage) :is(input,textarea)::placeholder{color:var(--ws-muted);opacity:1}
#sy-ap:has(.sy-stage) :is(input[type=checkbox],input[type=radio]){width:15px;height:15px;accent-color:var(--ws-accent);flex:none;margin:0}
#sy-ap:has(.sy-stage) :is(button,input,select,textarea,a,summary):focus-visible{outline:2px solid var(--ws-link);outline-offset:3px}
#sy-ap .sy-stage .sy-inline{gap:8px;align-items:center}
#sy-ap .sy-stage .sy-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-bottom:16px}
#sy-ap:has(.sy-stage) form label:not(.ap-check){font-size:12px;font-weight:500;color:var(--ws-muted)}
#sy-ap:has(.sy-stage) .ap-check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:400;color:var(--ws-ink)}
#sy-ap:has(.sy-stage) fieldset{min-width:0;border:1px solid var(--ws-line);border-radius:var(--ui-radius);padding:12px;margin:0}
#sy-ap:has(.sy-stage) legend{font-size:11px;font-weight:600;padding-inline:4px;color:var(--ws-muted)}

/* 4. Shared surfaces and dense, readable data tables. */
#sy-ap .sy-stage :is(.sy-panel,.sy-overview-box,.sy-account-review,.sr-card,.ap-stat,.sy-metric){padding:var(--ui-pad);margin-bottom:16px;border:1px solid var(--ws-line);border-radius:var(--ui-card);background:var(--ws-panel);color:var(--ws-ink);box-shadow:none;min-width:0}
#sy-ap .sy-stage :is(.sy-panel,.sr-card) >h3{display:flex;align-items:center;gap:8px;min-height:32px;margin:0 0 12px;padding:0 0 10px;border:0;border-bottom:1px solid var(--ws-line);border-radius:0;background:transparent;color:var(--ws-ink);font-size:13px;font-weight:650;line-height:1.4}
#sy-ap .sy-stage :is(.sy-panel,.sr-card)>h3 svg{width:16px;height:16px;color:var(--ws-muted);flex:none}
#sy-ap .sy-stage .sy-panel .sy-panel{margin-bottom:12px;box-shadow:none}
#sy-ap .sy-stage .sy-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--ws-line);border-radius:var(--ui-radius)}
#sy-ap .sy-stage table{width:100%;border-collapse:collapse;table-layout:auto;font-size:12px;line-height:1.45}
#sy-ap .sy-stage :is(th,td){padding:6px 12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-stage th{height:36px;font-size:10px;font-weight:650;letter-spacing:.025em;background:var(--ws-soft);color:var(--ws-muted);white-space:nowrap}
#sy-ap .sy-stage td{height:var(--ui-row);color:var(--ws-ink);overflow-wrap:anywhere}
#sy-ap .sy-stage tbody tr:last-child td{border-bottom:0}
#sy-ap .sy-stage tbody tr:hover{background:var(--ws-soft)}
#sy-ap .sy-stage .sy-table-wrap td:last-child:has(:is(button,.sy-button)){width:1%;white-space:nowrap}
#sy-ap .sy-stage .sy-admin-table :is(th,td):first-child{min-width:140px}
#sy-ap .sy-stage td .sy-button{min-height:30px;padding:5px 9px;font-size:11px}
#sy-ap .sy-stage .sy-num{font-variant-numeric:tabular-nums;white-space:nowrap}
#sy-ap:has(.sy-stage) .sy-tag{min-height:22px;padding:3px 7px;border-radius:4px;font-size:10px;line-height:1.3;font-weight:500}
#sy-ap:has(.sy-stage) .sy-tag:not(.sy-warning):not(.sy-danger):not(.sy-success):not(.sy-good):not([class*=sy-state]):not([class*=sy-device]){background:var(--ws-soft);color:var(--ws-muted)}

/* 5. Shared subsection navigation and structured detail rows. */
#sy-ap .sy-subworkspace{display:grid;grid-template-columns:164px minmax(0,1fr);gap:20px;align-items:start;border:0;padding:0;background:transparent}
#sy-ap .sy-subworkspace-nav{position:sticky;top:calc(var(--sy-header-height) + 16px);padding:4px 0}
#sy-ap .sy-subworkspace-nav>.sy-section-eyebrow{display:block;padding:0 10px;margin-bottom:10px}
#sy-ap .sy-stage .sy-folder-tabs{display:flex;gap:4px;align-items:center;padding:4px;margin:0 0 14px;border:1px solid var(--ws-line);border-radius:var(--ui-radius);background:var(--ws-panel);overflow-x:auto}
#sy-ap .sy-stage .sy-folder-tabs>.sy-button{justify-content:flex-start;background:transparent;color:var(--ws-muted);border:1px solid transparent;padding:7px 10px;min-height:32px;white-space:nowrap;font-size:12px}
#sy-ap .sy-stage .sy-folder-tabs>.sy-button[aria-pressed=true]{background:var(--ws-active);color:var(--ws-active-ink);border-color:transparent;font-weight:600}
#sy-ap .sy-stage .sy-subworkspace-nav .sy-folder-tabs{display:grid;gap:4px;padding:0;border:0;background:transparent;overflow:visible}
#sy-ap .sy-stage .sy-subworkspace-nav .sy-folder-tabs>.sy-button{white-space:normal;text-align:left}
#sy-ap .sy-stage .sy-tabbed-body{padding:0;border:0;background:transparent;box-shadow:none;min-width:0}
#sy-ap .sy-subworkspace-content{min-width:0}
#sy-ap .sy-subsection-heading{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-subsection-heading>.sy-section-eyebrow{display:none}
#sy-ap .sy-stage .sy-subsection-heading h3{font-size:18px;font-weight:650;margin:0;border:0;padding:0;background:none;color:var(--ws-ink)}
#sy-ap .sy-subsection-heading p{font-size:11px;color:var(--ws-muted);margin:4px 0 0}
#sy-ap .sy-stage :is(.sy-subworkspace-content,.ap-device-content) .sy-form-grid:not(form .sy-form-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
#sy-ap .sy-stage :is(.sy-subworkspace-content,.ap-device-content) .sy-form-grid:not(form .sy-form-grid)>label{display:grid;gap:5px;padding:10px 0;border-bottom:1px solid var(--ws-line);font-size:11px;color:var(--ws-muted)}
#sy-ap .sy-stage .ap-read-field{display:block;padding:0;border:0;background:transparent;color:var(--ws-ink);font-size:13px;font-weight:500}
#sy-ap .sy-profile-summary{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-profile-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--ui-card);background:var(--ws-active);color:var(--ws-active-ink);font-size:17px;font-weight:650}
#sy-ap .sy-profile-summary strong{font-size:14px}
#sy-ap .sy-profile-summary p{font-size:11px;margin:3px 0 0;color:var(--ws-muted)}
#sy-ap .sy-stage [data-notification-form]{display:grid;gap:0}
#sy-ap .sy-stage [data-notification-form] .ap-check{padding:12px 0;margin:0;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-stage [data-notification-form]>button{justify-self:end;margin-top:14px}
#sy-ap .sy-theme-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}
#sy-ap .sy-stage .sy-theme-preview{display:grid;gap:7px;padding:12px;border:1px solid var(--ws-line);border-radius:var(--ui-card);background:var(--ws-panel);color:var(--ws-ink);text-align:left}
#sy-ap .sy-stage .sy-theme-preview[aria-pressed=true]{padding:11px;border:2px solid var(--ws-link);background:var(--ws-panel);color:var(--ws-ink)}
#sy-ap .sy-theme-preview strong{font-size:12px}#sy-ap .sy-theme-preview small{font-size:11px;color:var(--ws-muted)}
#sy-ap .sy-theme-miniature{display:flex;gap:8px;height:90px;padding:10px;border:1px solid #174d37;border-radius:4px;background:#fff;margin-bottom:3px}
#sy-ap .sy-theme-miniature>i{width:20px;border-radius:3px;background:#fff;border:1px solid #174d37}
#sy-ap .sy-theme-miniature>span{display:grid;flex:1;grid-template-columns:1fr 1fr;gap:6px}
#sy-ap .sy-theme-miniature b{grid-column:1/-1;height:10px;background:#174d37;border-radius:2px}
#sy-ap .sy-theme-miniature em{background:#fff;border:1px solid #174d37;border-radius:3px}
#sy-ap .sy-theme-miniature[data-preview=dark]{background:#174d37;border-color:#fff}
#sy-ap .sy-theme-miniature[data-preview=dark]>i{background:#174d37;border-color:#fff}
#sy-ap .sy-theme-miniature[data-preview=dark] b{background:#fff}
#sy-ap .sy-theme-miniature[data-preview=dark] em{background:#174d37;border-color:#fff}

/* 6. Page adapters: shared density, deliberate column proportions, no decorative watermarks. */
#sy-ap .sy-stage :is(.ap-metrics,.sy-metrics,.sy-vm-resource-grid){display:grid;gap:var(--ui-gap);margin:0 0 16px;align-items:stretch}
#sy-ap .sy-stage .ap-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
#sy-ap .sy-stage :is(.sy-metrics,.sy-vm-resource-grid){grid-template-columns:repeat(4,minmax(0,1fr))}
#sy-ap .sy-stage :is(.ap-stat,.sy-metric){margin:0;min-height:106px;text-align:left}
#sy-ap .sy-stage :is(.ap-stat,.sy-metric) strong{font-size:24px;line-height:1.2;color:var(--ws-ink);letter-spacing:-.025em;margin:7px 0}
#sy-ap .sy-stage .ap-stat :is(span,small){color:var(--ws-muted);font-size:11px}
#sy-ap .sy-stage :is(.ap-main-grid,.sy-columns){display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:var(--ui-gap);align-items:start}
#sy-ap .sy-stage .sy-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ui-gap);align-items:stretch}
#sy-ap .sy-stage .sy-overview-box{display:flex;flex-direction:column;margin:0;min-height:0}
#sy-ap .sy-stage .sy-overview-title{display:flex;align-items:center;gap:8px;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--ws-line);background:transparent}
#sy-ap .sy-stage .sy-overview-title h3{margin:0;font-size:13px;color:var(--ws-ink)}
#sy-ap .sy-stage .sy-overview-icon{width:26px;height:26px;background:var(--ws-soft);color:var(--ws-muted);border:1px solid var(--ws-line);border-radius:5px}
#sy-ap .sy-stage .sy-overview-body{flex:1;padding:0}
#sy-ap .sy-stage .sy-overview-link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;min-height:32px;padding:8px 0 0;background:transparent;border:0;border-top:1px solid var(--ws-line);border-radius:0;font-size:11px;color:var(--ws-ink)}
#sy-ap .sy-stage .sy-overview-row{padding:8px 0;font-size:12px;border-color:var(--ws-line)}
#sy-ap .sy-stage .sy-compact-figure strong{font-size:24px;color:var(--ws-ink)}
#sy-ap .sy-stage .ap-device-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:var(--ui-gap);align-items:start}
#sy-ap .sy-stage .ap-device-content{padding-top:12px}
#sy-ap .sy-stage .ap-router-row{padding:9px 0;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-stage .ap-router-row.ap-selected{background:var(--ws-active);border-color:var(--ws-line);border-radius:var(--ui-radius)}
#sy-ap .sy-stage .ap-router-select{font-size:12px;color:var(--ws-ink);padding:6px 8px}
#sy-ap .sy-stage .ap-router-select span{font-size:11px;color:var(--ws-muted)}
#sy-ap .sy-stage .sy-panel:has(>.ap-context){padding:12px;margin-bottom:16px;background:var(--ws-panel)}
#sy-ap .sy-stage .ap-context{display:flex;gap:12px;flex-wrap:wrap;align-items:end;background:transparent;padding:0}
#sy-ap .sy-stage .ap-context>label{display:grid;gap:5px;flex:1 1 150px;min-width:140px;font-size:10px;font-weight:500;color:var(--ws-muted)}
#sy-ap .sy-stage .ap-context select{height:var(--ui-control)}
#sy-ap .sy-stage .ap-claim-filters{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:16px}
#sy-ap .sy-stage .ap-claim-filters>label{min-width:140px;flex:1;font-size:11px;color:var(--ws-muted)}
#sy-ap .sy-stage .sr-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--ui-gap);margin:0;align-items:start}
#sy-ap .sy-stage :is(.sr-main,.sr-side){display:flex;flex-direction:column;gap:var(--ui-gap);min-width:0}
#sy-ap .sy-stage .sr-card{margin:0;padding:var(--ui-pad);--sr-ink:var(--ws-muted);--sr-tint:var(--ws-panel);--sr-end:var(--ws-panel);background:var(--ws-panel);border-color:var(--ws-line)}
#sy-ap .sy-stage .sr-card-body{padding:0;font-size:12px}
#sy-ap .sy-stage :is(.sr-watermark,.mr-context-watermarks:before,.mr-context-watermarks:after){display:none}
#sy-ap .sy-stage .sr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-gap)}
#sy-ap .sy-stage :is(.sr-ranges,.sr-router-tools,.sr-segments){display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
#sy-ap .sy-stage .sr-router-tools input[type=search]{flex:1 1 180px}
#sy-ap .sy-stage .sr-router-list{max-height:240px;overflow:auto;border:1px solid var(--ws-line);border-radius:var(--ui-radius)}
#sy-ap .sy-stage .sr-router-list>label{display:flex;gap:8px;align-items:center;padding:9px 10px;min-height:36px;border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-stage .sr-field{font-size:11px;font-weight:500;gap:5px}
#sy-ap .sy-stage .sr-side{position:sticky;top:calc(var(--sy-header-height) + 16px)}
#sy-ap .sy-stage .sr-side dl>div{grid-template-columns:90px minmax(0,1fr);gap:12px}
#sy-ap .sy-stage .sr-generate{width:100%;min-height:var(--ui-control);font-size:12px;margin:12px 0 8px}
#sy-ap .sy-stage .sy-vm-resource[data-resource]{--vm-card-tint:var(--ws-panel);--vm-card-border:var(--ws-line);--vm-card-icon:var(--ws-muted);background:var(--ws-panel);border-color:var(--ws-line);padding:16px;gap:12px}
#sy-ap .sy-stage .sy-vm-resource strong{font-size:24px;margin:7px 0}

/* 7. Dialog system: one form width, explicit wide content, consistent footer. */
#sy-ap:has(.sy-stage) :is(dialog.ap-dialog,dialog.sy-dialog,dialog.sy-popup){width:min(680px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;padding:20px;border:1px solid var(--ws-line);border-radius:10px;background:var(--ws-panel);color:var(--ws-ink);box-shadow:none;font:var(--ui-font)/1.5 system-ui,sans-serif}
#sy-ap:has(.sy-stage) :is(dialog.ap-chat-dialog,dialog:has(.sy-admin-table),dialog:has([data-local-form=configure])){width:min(920px,calc(100vw - 32px))}
#sy-ap:has(.sy-stage) dialog::backdrop{background:#174d37}
#sy-ap:has(.sy-stage) :is(.sy-popup-header,.ap-dialog>header){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 14px;margin:0 0 16px;border-bottom:1px solid var(--ws-line);border-radius:0;background:transparent;color:var(--ws-ink)}
#sy-ap:has(.sy-stage) :is(dialog h3,.sy-popup-header h3){font-size:15px;font-weight:650;background:transparent;color:var(--ws-ink);margin:0}
#sy-ap:has(.sy-stage) :is(.sy-popup-glyph,.sy-popup-label,.sy-popup-glyph svg){background:transparent;color:var(--ws-muted)}
#sy-ap:has(.sy-stage) dialog .sy-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-bottom:16px}
#sy-ap:has(.sy-stage) dialog label:not(.ap-check){display:grid;gap:6px;min-width:0;font-size:12px;font-weight:500}
#sy-ap:has(.sy-stage) .ap-dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:14px 0 0;margin:18px 0 0;border-top:1px solid var(--ws-line);background:transparent}

/* 8. Compatibility adapters: neutral decorative chrome; retain evidence colors and board geometry. */
#sy-ap:has(.sy-stage) :is(.wp-card,.wp-card[data-picker-metric]){--wp-color:var(--ws-muted);--wp-fill:var(--ws-panel);--wp-border:var(--ws-line);background:var(--ws-panel);border-color:var(--ws-line);box-shadow:none;padding:16px;border-radius:var(--ui-card)}
#sy-ap:has(.sy-stage) :is(.wp-icon,.mr-router-picture:not(.mr-has-photo)){background:var(--ws-soft);color:var(--ws-muted);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage) :is(.wp-info>[role=tooltip],.wp-availability>[role=tooltip],.sy-device-balloon,.sy-field-help,.mr-color-floating,.mr-color-handle){background:var(--ws-panel);color:var(--ws-ink);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage) .sy-admin-table{--review-ink:var(--ws-ink);--review-start:var(--ws-accent);--review-end:var(--ws-accent);--review-head:var(--ws-soft);--review-light:var(--ws-soft)}
#sy-ap:has(.sy-stage) .sy-admin-table th{background:var(--ws-soft);color:var(--ws-muted)}
#sy-ap:has(.sy-stage) button.sy-button[data-button-function]{--action-bg:var(--ws-panel);--action-border:var(--ws-line);--action-ink:var(--ws-ink);box-shadow:none}
#sy-ap:has(.sy-stage) button.sy-button[data-button-function=confirm]{--action-bg:var(--ws-accent);--action-border:var(--ws-accent);--action-ink:var(--ws-action-ink)}
#sy-ap:has(.sy-stage) button.sy-button[data-button-function=danger]{--action-ink:var(--ws-ink)}
#sy-ap:has(.sy-stage) .sy-order-decision [data-decision-tone]{background:var(--ws-panel);color:var(--ws-ink);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage) .sy-order-decision [data-decision-tone=REJECTED]{color:var(--ws-ink)}
#sy-ap:has(.sy-stage) .ap-device-tabs [data-device-tab]{--device-tab-bg:var(--ws-panel);--device-tab-ink:var(--ws-muted);--device-tab-line:var(--ws-line)}
#sy-ap:has(.sy-stage) .ap-device-tabs button[role=tab]{min-height:32px;padding:7px 10px;border:1px solid var(--ws-line);border-radius:var(--ui-radius);background:var(--ws-panel);color:var(--ws-muted);font-size:12px}
#sy-ap:has(.sy-stage) .ap-device-tabs button[role=tab][aria-selected=true]{background:var(--ws-active);color:var(--ws-active-ink);border:1px solid var(--ws-line);box-shadow:inset 0 -2px var(--ws-muted)}
#sy-ap:has(.sy-stage) :is(.sy-capacity-input,.sy-order-decision textarea,.ap-topology,.ap-topology[data-topology-mode]){background:var(--ws-panel);border-color:var(--ws-line);color:var(--ws-ink)}
#sy-ap:has(.sy-stage) :is([data-topology-part],[data-product-mode]){color:var(--ws-muted)}
#sy-ap:has(.sy-stage) :is(.mr-widget,.mr-all-widget)>header{background:var(--ws-panel);color:var(--ws-ink);border-color:var(--ws-line);box-shadow:none}
#sy-ap:has(.sy-stage) .mr-widget>header>strong svg{color:var(--ws-muted)}
#sy-ap:has(.sy-stage) .mr-widget .sy-button{width:var(--widget-control-size,28px);height:var(--widget-control-size,28px);min-height:var(--widget-control-size,28px);padding:5px;border-radius:5px;font-size:11px}
#sy-ap:has(.sy-stage) .mr-noc-surface,#sy-ap:has(.sy-stage) .mr-noc-surface[data-monitor-theme=dark]{--noc-bg:var(--ws-bg);--noc-card:var(--ws-panel);--noc-head:var(--ws-soft);--noc-line:var(--ws-line);--noc-ink:var(--ws-ink);--noc-muted:var(--ws-muted);background:var(--ws-bg);color:var(--ws-ink);border-color:var(--ws-line);padding:12px;border-radius:var(--ui-card)}
#sy-ap .sy-stage .sy-content:has(.mr-noc-surface){background:var(--ws-bg);color:var(--ws-ink)}
#sy-ap:has(.sy-stage) .mr-rank-track>i{background:var(--ws-muted)}
#sy-ap:has(.sy-stage)[data-display-mode] .sy-stage .mr-identity-controls{--identity-blue:var(--ws-muted);--identity-purple:var(--ws-muted);--identity-teal:var(--ws-muted);--identity-amber:var(--ws-muted);background:var(--ws-panel);color:var(--ws-ink);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage)[data-display-mode] .sy-stage .mr-identity-controls :is(.mr-monitor-home,.mr-selected-period,.mr-light-accent){background:var(--ws-soft);color:var(--ws-ink);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage)[data-display-mode] .sy-stage .mr-inline-menu:not(.mr-layout-menu)>.mr-inline-menu-panel{background:var(--ws-panel);border-color:var(--ws-line);color:var(--ws-ink)}
#sy-ap:has(.sy-stage) :is(.mr-calendar-grid>button[aria-pressed=true],.mr-alarm-tabs [aria-pressed=true]){background:var(--ws-active);color:var(--ws-active-ink);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage) .sy-chart-tooltip{background:var(--ws-panel);color:var(--ws-ink);border-color:var(--ws-line)}
#sy-ap:has(.sy-stage) .mr-color-default{background:var(--ws-panel);color:var(--ws-ink);border:1px solid var(--ws-line)}

/* Semantic status treatments share the same contrast-aware palette. */
#sy-ap .sy-stage button{font-family:inherit;font-size:12px}
#sy-ap:has(.sy-stage) button.sy-button[data-button-function]{background:var(--action-bg);border-color:var(--action-border);color:var(--action-ink)}
#sy-ap:has(.sy-stage) :is(.sy-tag.sy-warning,.sy-tag.sy-state-revision,.sy-tag.sy-state-submitted,.sy-tag.sy-state-partial,.sy-device-unknown,.wp-missing){background:var(--ws-amber-tint);color:var(--ws-warn)}
#sy-ap:has(.sy-stage) :is(.sy-tag.sy-good,.sy-tag.sy-success,.sy-tag.sy-state-approved,.sy-device-good,.wp-valid){background:var(--ws-green-tint);color:var(--ws-good)}
#sy-ap:has(.sy-stage) :is(.sy-tag.sy-danger,.sy-tag.sy-state-rejected,.sy-device-bad){background:var(--ws-red-tint);color:var(--ws-bad)}

#sy-ap:has(.sy-stage) .sy-calendar24{padding:12px;border:1px solid var(--ws-line);border-radius:var(--ui-card);background:var(--ws-panel);color:var(--ws-ink)}
#sy-ap:has(.sy-stage) .sy-calendar24::before{display:none}
#sy-ap:has(.sy-stage) .sy-calendar24 header{margin:-12px -12px 10px;padding:8px;background:var(--ws-soft);border-bottom:1px solid var(--ws-line)}
#sy-ap .sy-stage .sy-order-options{gap:12px;margin-bottom:16px}
#sy-ap .sy-stage .sy-order-options label{padding:12px;border:1px solid var(--ws-line);border-radius:var(--ui-radius);background:var(--ws-panel);color:var(--ws-ink)}
#sy-ap .sy-stage .sy-order-options label:has(input:checked){background:var(--ws-active);border-color:var(--ws-muted)}

/* Two-tone chrome: UI state is encoded with inversion, weight, border and labels. */
#sy-ap .sy-stage .sy-brand{position:relative;--ui-logo:142px;--ui-logo-offset:calc(var(--ui-control) + 12px)}
#sy-ap .sy-stage .sy-brand img{opacity:0}
#sy-ap .sy-stage .sy-brand::after{content:"";position:absolute;left:var(--ui-logo-offset);top:50%;transform:translateY(-50%);width:var(--ui-logo);height:40px;background:var(--ws-ink);-webkit-mask:url('/sinyara-logo-floating.svg') center/contain no-repeat;mask:url('/sinyara-logo-floating.svg') center/contain no-repeat;mask-mode:alpha;pointer-events:none}
#sy-ap .sy-stage .sy-standalone-brand{--ui-logo-offset:0px}
#sy-ap:has(.sy-stage) :is(button,input,select,textarea):disabled{opacity:1;border-style:dashed;color:var(--ws-ink);-webkit-text-fill-color:var(--ws-ink);background-color:var(--ws-panel)}
#sy-ap:has(.sy-stage) .sy-order-options label:has(input:checked){color:var(--ws-active-ink)}
#sy-ap .sy-stage .ap-router-row.ap-selected{color:var(--ws-active-ink)}
#sy-ap .sy-stage .ap-router-row.ap-selected :is(.ap-router-select,.ap-router-select span){color:var(--ws-active-ink)}
#sy-ap .sy-stage .sr-router-list>label:has(input:checked){background:var(--ws-active);color:var(--ws-active-ink)}

#sy-ap:has(.sy-stage) :is(.sy-popup-close,button[data-close],button[data-dismiss],.mr-color-handle>button){min-height:var(--ui-control);padding:7px 10px;border:1px solid var(--ws-line);border-radius:var(--ui-radius);background:var(--ws-panel);color:var(--ws-ink);box-shadow:none;opacity:1;filter:none}
#sy-ap:has(.sy-stage) a{color:var(--ws-link)}
#sy-ap .sy-stage .ap-router-row.ap-selected .ap-router-select:enabled:hover{background:var(--ws-active);color:var(--ws-active-ink)}

/* 9. Breakpoints are shared across pages, not bespoke per card. */
@media(max-width:1200px){#sy-ap .sy-workspace-breadcrumb,#sy-ap .sy-workspace-divider{display:none}#sy-ap .sy-stage .sy-role{max-width:140px}#sy-ap .sy-stage .sr-layout{grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:1000px){#sy-ap .sy-stage:has(.sy-nav),#sy-ap .sy-stage:has(.sy-nav)[data-menu-open=true],#sy-ap .sy-stage:has(.sy-nav)[data-nav-collapsed=true]{--sy-nav-width:0px;--sy-menu-width:260px}#sy-ap .sy-stage .sy-nav{width:260px;transform:translateX(-100%);transition:transform .15s ease}#sy-ap .sy-stage[data-menu-open=true] .sy-nav{transform:translateX(0)}#sy-ap .sy-stage[data-menu-open=true] .sy-nav-backdrop{display:block;position:fixed;inset:var(--sy-header-height) 0 0;z-index:39;border:0;border-radius:0;background:#174d37}#sy-ap .sy-stage[data-nav-collapsed=true] .sy-nav :is(.sy-workspace-label,.sy-nav-group h3,.sy-nav-foot>div,.sy-nav-label,.sy-nav-current-dot){display:revert}#sy-ap .sy-stage .sy-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#sy-ap .sy-stage .sy-role{display:none}#sy-ap .sy-subworkspace{grid-template-columns:144px minmax(0,1fr);gap:16px}#sy-ap .sy-stage .sr-layout{grid-template-columns:1fr}#sy-ap .sy-stage .sr-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#sy-ap .sy-stage .ap-device-grid{grid-template-columns:208px minmax(0,1fr)}}
@media(max-width:760px){#sy-ap .sy-stage .sy-header{padding:9px 12px;gap:8px;flex-wrap:wrap}#sy-ap .sy-stage .sy-header-actions{margin-left:auto;flex-wrap:wrap;gap:5px}#sy-ap .sy-stage .sy-brand img{width:128px}#sy-ap .sy-workspace-version{display:none}#sy-ap .sy-stage .sy-content{padding:14px}#sy-ap .sy-stage .sy-page-time{white-space:normal;margin-left:0}#sy-ap .sy-subworkspace{grid-template-columns:1fr;gap:8px}#sy-ap .sy-subworkspace-nav{position:static;padding:0}#sy-ap .sy-subworkspace-nav>.sy-section-eyebrow{display:none}#sy-ap .sy-stage .sy-subworkspace-nav .sy-folder-tabs{display:flex;overflow:auto;padding-bottom:4px}#sy-ap .sy-stage .sy-subworkspace-nav .sy-folder-tabs>.sy-button{white-space:nowrap}#sy-ap .sy-stage :is(.sy-form-grid,.sr-two,.ap-device-grid,.ap-main-grid,.sy-columns,.sy-order-options),#sy-ap:has(.sy-stage) dialog .sy-form-grid{grid-template-columns:1fr}#sy-ap .sy-stage :is(.ap-metrics,.sy-metrics,.sy-vm-resource-grid,.sy-overview-grid){grid-template-columns:repeat(2,minmax(0,1fr))}#sy-ap .sy-stage .sy-table-wrap table{min-width:620px}#sy-ap .sy-stage .sr-side{display:flex}#sy-ap:has(.sy-stage) dialog.ap-dialog{padding:16px}#sy-ap .sy-stage :is(.sy-subworkspace-content,.ap-device-content) .sy-form-grid:not(form .sy-form-grid){grid-template-columns:1fr}}
@media(max-width:480px){#sy-ap .sy-theme-gallery{grid-template-columns:1fr}#sy-ap .sy-stage .ap-metrics{grid-template-columns:1fr}#sy-ap .sy-stage h2{font-size:20px}}
@media(pointer:coarse){#sy-ap:has(.sy-stage) :is(.sy-button,input:not([type=checkbox]):not([type=radio]),select){min-height:40px}}
@media(prefers-reduced-motion:reduce){#sy-ap .sy-stage *,#sy-ap .sy-stage *::before,#sy-ap .sy-stage *::after{transition:none;animation:none;scroll-behavior:auto}}

@media(max-width:760px){#sy-ap .sy-stage .sy-brand{--ui-logo:128px}}

#sy-ap:has(.sy-stage) ::selection{background:var(--ws-accent);color:var(--ws-action-ink)}