:root{font-family:var(--font-sans);background:#071117;color:#eaf3f7}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}.hidden{display:none!important}.loginScreen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#15364a,#071117 55%)}.loginCard{width:min(420px,92vw);background:#0c1c25;border:1px solid #274555;border-radius:18px;padding:28px}.loginCard h1{margin:0}.loginCard p,small{color:#8da7b4}.loginCard label,.formGrid label,.toolbar label{display:grid;gap:5px;color:#9fb7c2;font-size:var(--text-body);margin:8px 0}input,select,textarea{width:100%;background:#071820;color:#eef8fb;border:1px solid #315266;border-radius:8px;padding:9px;min-height:40px}textarea{min-height:80px}button{background:#1d607e;color:#fff;border:1px solid #3a7894;border-radius:8px;padding:8px 11px;cursor:pointer}button:hover{filter:brightness(1.12)}button.secondary,.smallBtn{background:#102833}.danger{background:#582929;border-color:#8b4747}.error,.bad{color:#ff9e98}.good{color:#88d5a2}.appShell{display:grid;grid-template-columns:245px 1fr;min-height:100vh}aside{background:#091820;border-right:1px solid #1e3845;padding:13px;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow:auto}.brand{display:flex;justify-content:space-between;padding:8px 5px 14px;font-size:var(--text-section)}.brand span{font-size:var(--text-body);color:#7998a8}.userCard{background:#0d2632;border:1px solid #23495a;border-radius:10px;padding:9px;margin-bottom:8px;font-size:var(--text-body)}.userCard b{display:block;font-size:var(--text-body)}.navBtn{display:block;width:100%;text-align:left;background:transparent;border-color:transparent;color:#abc3ce;margin:1px 0;padding:7px}.navBtn.active{background:#143548;border-color:#2b6078;color:#fff}.logoutBtn{margin-top:auto;background:#2c2020;border-color:#593535}main{min-width:0}header{height:56px;background:#0b1a22;border-bottom:1px solid #1d3642;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:20}.pill{font-size:var(--text-body);padding:5px 8px;border-radius:999px;background:#173d50;border:1px solid #2b637b}.content{padding:18px}.view{display:none}.view.active{display:block}.pageHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.pageHead h2{margin:0}.pageHead p{margin:3px 0 0;color:#7f9cab;font-size:var(--text-body)}.card,.itemCard{background:#0c1e27;border:1px solid #1e3c4a;border-radius:11px;padding:12px;margin-bottom:11px}.metrics,.simpleCardGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin-bottom:12px}.metric{background:#0e2632;border:1px solid #244b5c;border-radius:11px;padding:12px}.metric b{display:block;font-size:var(--text-title)}.metric span{font-size:var(--text-body);color:#8da7b5}.toolbar,.headActions,.quickActions,.rowActions{display:flex;gap:7px;flex-wrap:wrap;align-items:end}.toolbar label{min-width:190px}table{width:100%;border-collapse:collapse;font-size:var(--text-body)}th{text-align:left;color:#7f9fab;border-bottom:1px solid #284653;padding:8px}td{border-bottom:1px solid #15313c;padding:8px;vertical-align:top}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.formGrid .full{grid-column:1/-1}dialog{width:min(780px,94vw);padding:0;border:1px solid #315568;border-radius:14px;background:#0b1b24;color:#eff7fa;box-shadow:0 30px 80px #000a}dialog::backdrop{background:#0009}.modalHead,.modalFoot{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #1f3b48}.modalFoot{border-top:1px solid #1f3b48;border-bottom:0;justify-content:flex-end}#modalBody{padding:10px 14px}.empty{text-align:center;padding:25px;color:#7e9ba9}.sectionTitle{font-weight:var(--weight-semibold);margin:15px 0 7px}.advanced{border-left:3px solid #8a67b1}.planLayout{display:grid;grid-template-columns:220px minmax(0,1fr) 280px;gap:10px}.planCanvasWrap{background:#050f14;border:1px solid #274653;border-radius:11px;padding:7px;overflow:auto;min-height:500px}.planSurface{position:relative;display:inline-block}.planSurface img{width:1000px;display:block}.planMarker{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0d5f7e;border:2px solid #b4e6fa;font-size:9px;font-weight:var(--weight-semibold);cursor:grab;z-index:5}.planMarker.detection{background:#78601c;border-color:#ffd976}.planMarker .label{position:absolute;top:33px;white-space:nowrap;background:#06151ddd;padding:2px 4px;border-radius:4px;font-size:9px}.fov{position:absolute;left:50%;top:50%;width:110px;height:85px;transform-origin:50% 0;clip-path:polygon(50% 0,0 100%,100% 100%);background:#54c2eb22;pointer-events:none;z-index:-1}.pageTabs{display:flex;gap:4px;flex-wrap:wrap}.pageTabs button{font-size:var(--text-small);padding:5px}.pageTabs .active{background:#2a7493}.recognitionRow{display:grid;grid-template-columns:1fr auto auto;gap:5px;align-items:center;border-bottom:1px solid #193642;padding:7px 0;font-size:var(--text-body)}.switchPorts{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:8px}.port{font-size:var(--text-small);padding:4px 1px;background:#0c2b39}.port.trunk{border-color:#9b6dd0}.rackVisual{display:flex;flex-direction:column-reverse;border:2px solid #617582;background:#050b0f;width:300px;margin:10px auto;padding:4px}.rackU{height:24px;border-top:1px solid #273d48;position:relative;font-size:var(--text-small);color:#64828f}.rackDevice{position:absolute;inset:1px 2px;background:#17475d;border:1px solid #3180a2;border-radius:3px;padding:3px;color:#fff;overflow:hidden}.qrImg{width:120px;height:120px;background:white;padding:4px}.permissionGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:5px}.permissionGrid label{font-size:var(--text-body)}.permissionGrid select{min-height:34px}#toast{position:fixed;right:18px;bottom:18px;background:#173d4d;border:1px solid #39738a;padding:9px 12px;border-radius:8px;opacity:0;transition:.2s;pointer-events:none;z-index:100}#toast.show{opacity:1}a{color:#75c5e4}@media(max-width:950px){.appShell{grid-template-columns:190px 1fr}.planLayout{grid-template-columns:1fr}.formGrid{grid-template-columns:1fr}.formGrid .full{grid-column:auto}}@media(max-width:700px){.appShell{display:block}aside{position:relative;height:auto}.navBtn{display:inline-block;width:auto}.content{padding:10px}}

.globalContext{display:flex;align-items:center;gap:7px}.globalContext>span:first-child{font-size:var(--text-small);color:#7995a4;text-transform:uppercase}.globalContext select{max-width:300px;background:#071820;color:#e6f0f5;border:1px solid #285064;border-radius:7px;padding:6px 8px}.liveTimerBadge{background:#113927;border:1px solid #2d8054;border-radius:999px;padding:5px 9px;font-size:var(--text-body);white-space:nowrap}.liveTimerBadge>span{color:#51d77c}.liveTimerBadge b{font-variant-numeric:tabular-nums;margin-left:4px}.bigTimer{font-size:var(--text-title);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;margin:12px 0;color:#b7f2ca}.activeTime{border-color:#2d8054}.checkInBtn{background:#236941!important;border-color:#3c9a61!important}.linkedValue{min-height:39px;display:flex;align-items:center;padding:8px 10px;border:1px solid #244656;border-radius:8px;background:#0a1c25;color:#cce0e8}.projectHero{background:#0d2632;border:1px solid #285064;border-radius:12px;padding:16px;margin-bottom:12px}.projectHero h2{margin:3px 0 8px}.workflowGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px}.workflowGrid button{display:grid;gap:4px;text-align:left;min-height:70px}.workflowGrid button b{font-size:var(--text-title)}.workflowGrid button span{font-size:var(--text-body);color:#a8bdc7}.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.linkedRow{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #18333f;padding:8px 0}.cardHead{display:flex;justify-content:space-between;align-items:center}.planPageBar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.dangerZone{border:1px solid #6d3434;padding:10px;border-radius:8px}@media(max-width:850px){.twoCol{grid-template-columns:1fr}.globalContext>span:first-child{display:none}.globalContext select{max-width:180px}}

/* ===== Plan Studio 2.0 ===== */
.planTopTools{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#0b1d27;border:1px solid #214353;border-radius:10px;padding:8px;margin-bottom:7px;position:sticky;top:61px;z-index:14}
.planPageSelector{display:flex;align-items:center;gap:5px;min-width:360px}.planPageSelector select{min-width:280px;max-width:440px}.iconBtn{font-size:var(--text-section);min-width:34px}
.planSearch{position:relative;display:flex;gap:5px;flex:1;max-width:430px}.planSearch input{min-width:160px}.searchDrop{position:absolute;left:0;right:0;top:44px;background:#081820;border:1px solid #315266;border-radius:9px;box-shadow:0 16px 45px #000b;z-index:50;max-height:300px;overflow:auto}.searchDrop button{width:100%;display:grid;text-align:left;background:transparent;border:0;border-bottom:1px solid #193642;border-radius:0}.searchDrop button span{font-size:var(--text-small);color:#8ba5b2}
.zoomTools{display:flex;align-items:center;gap:4px;white-space:nowrap}.zoomTools span{min-width:42px;text-align:center;font-size:var(--text-body);color:#a9c0cb}.saveState{font-size:var(--text-body);color:#77d99a;white-space:nowrap}.saveState.saving{color:#ffd170}
.planLayerBar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#091920;border:1px solid #193743;border-radius:9px;padding:6px 9px;margin-bottom:8px}.planLayerBar label{display:flex;align-items:center;gap:5px;font-size:var(--text-body);color:#9fb6c0;margin:0}.planLayerBar input[type=checkbox]{width:auto;min-height:auto}.planLayerBar select{min-height:32px;padding:5px;width:auto}
.planWorkspace{display:grid;grid-template-columns:60px minmax(0,1fr) 300px;gap:8px;min-height:650px}
.planRail{display:flex;flex-direction:column;gap:4px;background:#091a22;border:1px solid #1e3b48;border-radius:10px;padding:5px;position:sticky;top:113px;height:calc(100vh - 130px);overflow:auto}.planRail button{min-height:42px;padding:4px;font-size:var(--text-small);display:grid;place-items:center}.planRail button span{font-size:var(--text-small);color:#9db2bd}.planRail button.active{background:#26718f;border-color:#67b8d7}
.planCanvasWrap{background:#030b0f;border:1px solid #274653;border-radius:11px;padding:10px;overflow:auto;height:calc(100vh - 178px);min-height:600px}
#planCanvasSizer{position:relative}.planSurface{position:relative;display:inline-block;width:1000px;user-select:none}.planSurface img{width:1000px;display:block;pointer-events:none}
.planMarker{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border:0;background:transparent;display:grid;place-items:center;cursor:grab;z-index:8;overflow:visible}.planMarker.selected{z-index:15}.markerCore{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#0d5f7e;border:2px solid #b4e6fa;font-size:var(--text-small);font-weight:var(--weight-semibold);box-shadow:0 1px 7px #000b;z-index:4}.planMarker.detection .markerCore{background:#735b14;border-color:#ffd768}.planMarker.selected .markerCore{outline:3px solid #fff7;outline-offset:2px}
.planMarker .label{position:absolute;top:37px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#05151ddd;border:1px solid #284957;padding:2px 5px;border-radius:4px;font-size:9px;z-index:6;pointer-events:none}
.cameraFov{position:absolute;left:50%;top:50%;overflow:visible;transform-origin:50% 50%;pointer-events:none;z-index:1}.cameraFov path{fill:#46c6f22a;stroke:#5bd1f0aa;stroke-width:2}
.planMarker.detection .cameraFov path{fill:#f0be3920;stroke:#e5bd4a99}
.rotateHandle{position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#effcff;color:#0b3546;border:2px solid #2780a2;font-size:var(--text-body);cursor:crosshair;z-index:10;touch-action:none}
.planInspector{height:calc(100vh - 178px);overflow:auto;padding:0;background:transparent;border:0;position:sticky;top:113px}.planInspector .card{margin-bottom:8px}.inspectorCard label{display:grid;gap:4px;font-size:var(--text-body);color:#9eb6c0;margin:9px 0}.inspectorCard input[type=range]{padding:0;min-height:18px}.fovPresets{display:flex;gap:4px}.fovPresets button{padding:4px 7px;font-size:var(--text-small)}.inspectorLinks{border-top:1px solid #1d3a47;border-bottom:1px solid #1d3a47;padding:7px 0;margin:8px 0;font-size:var(--text-body)}.recognitionActions{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:7px}.recognitionActions button{font-size:var(--text-small);padding:5px}.recognitionItem{width:100%;display:grid;text-align:left;background:#0a202a;border:1px solid #173744;margin:3px 0;padding:6px}.recognitionItem span{font-size:var(--text-small);color:#8ca5b0}.recognitionItem.active{border-color:#ffd768;background:#3a3215}.goodBtn{background:#205f3d!important;border-color:#3f9867!important}
@media(max-width:1100px){.planWorkspace{grid-template-columns:52px minmax(0,1fr)}.planInspector{grid-column:1/-1;height:auto;position:relative;top:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.planTopTools{flex-wrap:wrap}.planPageSelector{min-width:260px}.planPageSelector select{min-width:210px}.planCanvasWrap{height:70vh}}
@media(max-width:700px){.planWorkspace{grid-template-columns:1fr}.planRail{height:auto;position:relative;top:0;flex-direction:row;overflow:auto}.planRail button{min-width:52px}.planInspector{display:block}.planTopTools{position:relative;top:0}.planPageSelector{width:100%;min-width:0}.planPageSelector select{min-width:0;flex:1}}

.recognitionProgressOverlay{position:fixed;inset:0;background:#02070bcc;display:none;align-items:center;justify-content:center;z-index:10000;padding:20px}.recognitionProgressOverlay.show{display:flex}.recognitionProgressCard{width:min(620px,94vw);background:#0b1e28;border:1px solid #356277;border-radius:14px;padding:18px;box-shadow:0 24px 80px #000}.recognitionPercent{font-size:var(--text-title);color:#8ee7b0;font-variant-numeric:tabular-nums}.recognitionProgressTrack{height:18px;background:#061219;border:1px solid #254757;border-radius:999px;overflow:hidden;margin:14px 0}.recognitionProgressTrack>div{height:100%;background:linear-gradient(90deg,#1d6e90,#36a96b);transition:width .3s ease}.recognitionProgressMeta{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-body);color:#a8bdc7;margin-top:7px}.recognitionDone{margin-top:14px;border-top:1px solid #264652;padding-top:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;color:#91e0ae}

.planTrainingBanner{display:flex;align-items:center;gap:8px;background:#2e2609;border:1px solid #a88320;color:#f4df91;border-radius:9px;padding:8px 10px;margin-bottom:8px;font-size:var(--text-body)}.planTrainingBanner button{margin-left:auto}.trainingMode{cursor:crosshair!important}.trainingSelection{position:absolute;border:2px dashed #ffdd62;background:#ffdd6220;z-index:60;pointer-events:none;box-shadow:0 0 0 1px #0008}.trainingHelp{background:#0a1b23;border:1px solid #254554;padding:10px;border-radius:8px;color:#a9c0cb}

.planMarker.positionReview .markerCore{background:#6b5617;border-color:#f5d76b;color:#fff;font-size:13px}.planMarker.positionReview .cameraFov{display:none}.positionWarning{margin:8px 0;padding:8px;border-radius:7px;background:#332a0b;border:1px solid #8b7424;color:#f2dc86;font-size:var(--text-small);line-height:1.35}.recognitionPageProgress{display:grid;gap:4px;margin-top:9px;font-size:var(--text-small);color:#a8bdc7}.recognitionPageProgress>div{height:7px;background:#061219;border-radius:999px;overflow:hidden;border:1px solid #244554}.recognitionPageProgress i{display:block;height:100%;background:#3aa66c;transition:width .3s ease}

.recognitionBulkBar{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:8px 0;padding:7px;background:#071820;border:1px solid #214351;border-radius:8px}.recognitionBulkBar label{display:flex;align-items:center;gap:4px;font-size:var(--text-small)}.recognitionBulkBar span{font-size:var(--text-small);color:#9ec0cf;margin-right:auto}.recognitionBulkBar .danger{background:#742c32;border-color:#a94750}.recognitionBulkBar .danger.ghost{background:transparent;color:#ef9aa1}.recognitionSelectRow{display:grid;grid-template-columns:20px 1fr;gap:4px;align-items:center}.recognitionSelectRow.bulkSelected{background:#153342;border-radius:7px}.recognitionCheck{width:14px;height:14px}.recognitionSelectRow .recognitionItem{width:100%}

/* ===== v2.5 Field Workspace UI ===== */
.planTopTools.v25{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;background:#0a1a22;border:1px solid #1f3c49;border-radius:8px;box-shadow:none;position:sticky;top:60px;z-index:25}.planContextGroup{display:flex;align-items:center;gap:8px;min-width:0}.projectCrumb{display:grid;gap:1px;padding-right:8px;border-right:1px solid #23424f;min-width:140px}.projectCrumb small{font-size:var(--text-small);color:#6f8c99}.projectCrumb b{font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.planCommandGroup{display:flex;align-items:center;gap:5px}.planTopTools.v25 button{padding:6px 9px;font-size:var(--text-small)}.planTopTools.v25 .planPageSelector{min-width:260px}.planTopTools.v25 .planPageSelector select{min-width:220px}
.planWorkspace{grid-template-columns:54px minmax(0,1fr) 280px!important;gap:7px}.planRail.v25{position:relative;top:0;height:calc(100vh - 175px);overflow:visible;border-radius:8px;padding:4px}.planRail.v25>button{min-height:46px;border-radius:6px;background:#0a1a22;border:1px solid transparent}.planRail.v25>button:hover,.planRail.v25>button.active{background:#123443;border-color:#2a6076}.planToolFlyout{position:absolute;left:58px;top:0;width:220px;background:#0b1e27;border:1px solid #2b5263;border-radius:9px;box-shadow:0 15px 40px #0009;z-index:70;padding:8px}.planToolFlyout:empty{display:none}.flyoutTitle{font-size:var(--text-body);font-weight:var(--weight-semibold);margin-bottom:6px}.deviceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.deviceGrid button{font-size:var(--text-small);padding:7px 3px}.flyoutHint{font-size:var(--text-small);line-height:1.4;color:#9fb5bf}
.planLayerBar.v25{display:flex;align-items:center;gap:5px;padding:5px 7px;background:#07161d;border-radius:7px}.planLayerBar.v25 .layerGroupTitle{font-size:var(--text-small);font-weight:var(--weight-semibold);color:#668794;text-transform:uppercase;margin-right:2px}.planLayerBar.v25 button,.planLayerBar.v25 label{font-size:var(--text-small);padding:4px 6px;border-radius:5px}.planLayerBar.v25 button span,.planLayerBar.v25 label span{opacity:.7;margin-left:3px}.planLayerBar.v25 button.active{background:#17465a}
.planCanvasWrap{border-radius:8px!important;padding:6px!important;background:#03090d!important;height:calc(100vh - 205px)!important;min-height:560px!important}.planInspector{height:calc(100vh - 205px)!important;top:0!important}.planInspector .card{border-radius:8px;padding:10px}.recognitionQueue.v25{padding:9px}.recognitionSummary{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:6px 0 8px}.recognitionSummary span{background:#081820;border:1px solid #183642;border-radius:6px;padding:6px;font-size:var(--text-small);color:#8ea8b4}.recognitionSummary b{font-size:var(--text-body);color:#d7eef7;display:block}
.planMarker.positionReview{width:12px;height:12px}.planMarker.positionReview .markerCore{width:10px;height:10px;border-radius:50%;font-size:0;background:#e1ac2e;border:1px solid #ffe298;box-shadow:0 0 0 2px #2f2508aa}.planMarker.positionReview .label{display:none}.planMarker.positionReview.selected .label{display:block}.planMarker.positionReview.selected .markerCore{width:18px;height:18px}
.planStatusBar{height:28px;display:flex;align-items:center;gap:14px;padding:0 10px;background:#07161d;border:1px solid #1d3945;border-radius:7px;margin-top:6px;font-size:var(--text-small);color:#8ba3ad}.planStatusBar span:last-child{margin-left:auto}
@media(max-width:1100px){.planWorkspace{grid-template-columns:50px minmax(0,1fr)!important}.planInspector{grid-column:1/-1;height:auto!important}.planTopTools.v25{position:relative;top:0;flex-wrap:wrap}.projectCrumb{min-width:110px}}

/* ===== v2.6 Plan Studio UX ===== */
.brand{position:relative}.brand #sidebarToggle{margin-left:auto;padding:2px 7px;font-size:13px}.navSection{font-size:var(--text-small);letter-spacing:.12em;color:#587582;padding:11px 9px 4px;font-weight:var(--weight-semibold)}
body.compactNav #appShell>aside{width:58px;min-width:58px}body.compactNav #appShell>aside .brand b,body.compactNav #appShell>aside .brand>span,body.compactNav #userCard,body.compactNav .navSection,body.compactNav .navBtn{font-size:0}body.compactNav #appShell>aside .navBtn{height:34px;overflow:hidden}body.compactNav #appShell>aside .navBtn:before{content:"•";font-size:16px}body.compactNav #logoutBtn{font-size:0}body.compactNav #logoutBtn:before{content:"↪";font-size:16px}
.planWorkspace{grid-template-columns:104px minmax(0,1fr) 292px!important}.planWorkspace:has(.planInspector.collapsed){grid-template-columns:104px minmax(0,1fr)!important}
.planRail.v26{background:#071820;border:1px solid #1e3c49;border-radius:8px;padding:5px;height:calc(100vh - 205px);overflow:auto;position:relative}.planRail.v26 .selectTool{width:100%;min-height:42px;margin-bottom:5px;display:flex;align-items:center;justify-content:center;gap:6px}.selectArrow{font-size:18px}
.toolGroup{border-top:1px solid #16333f;padding-top:6px;margin-top:6px}.toolGroup small{display:block;font-size:var(--text-small);letter-spacing:.09em;color:#65848f;margin:0 2px 5px}.symbolGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.symbolTool{height:44px!important;padding:3px!important;display:grid!important;grid-template-rows:25px 10px;place-items:center;background:#0a2029!important;border:1px solid #183c4b!important}.symbolTool svg{width:25px;height:25px;fill:none;stroke:#b6dbe8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.symbolTool span{font-size:var(--text-small)!important;color:#9db9c4!important}.symbolTool:hover{background:#123442!important}.symbolTool.active{background:#1d6079!important;border-color:#67bedf!important}.utilityTools{display:grid;grid-template-columns:1fr 1fr;gap:4px}.utilityTools small{grid-column:1/-1}.utilityTools button{min-height:36px;padding:3px;font-size:var(--text-body)}.utilityTools button span{font-size:var(--text-small);margin-left:3px}
.planLayerBar.v26{display:flex;align-items:center;gap:5px;padding:5px 7px;background:#07161d;border:1px solid #17333f;border-radius:7px;margin-bottom:6px}.planLayerBar.v26 button,.planLayerBar.v26 label{font-size:var(--text-small);padding:4px 7px}.planLayerBar.v26 button.active{background:#1b556c;border-color:#347e99}.layerDivider{width:1px;height:18px;background:#264450}.inspectorToggle{margin-left:auto}.planInspector.collapsed{display:none}
.planCanvasWrap{overscroll-behavior:contain;scrollbar-gutter:stable}.planStatusBar{position:sticky;bottom:0;z-index:15;background:#071820ef}
.recognitionProgressOverlay{inset:auto 18px 18px auto;background:transparent;display:none;align-items:flex-end;justify-content:flex-end;padding:0;pointer-events:none}.recognitionProgressOverlay.show{display:flex}.recognitionProgressCard{width:min(520px,calc(100vw - 36px));padding:12px;border-radius:10px;pointer-events:auto;box-shadow:0 14px 45px #000c}.recognitionPercent{font-size:var(--text-title)}.recognitionProgressTrack{height:10px;margin:9px 0}.recognitionErrorList{max-height:180px;overflow:auto;margin-top:8px;display:grid;gap:5px}.recognitionErrorRow{display:grid;gap:2px;background:#251114;border:1px solid #6f3038;padding:7px;border-radius:6px}.recognitionErrorRow b{font-size:var(--text-small);color:#ffb2b8}.recognitionErrorRow span{font-size:var(--text-small);color:#e2b3b8;word-break:break-word}.recognitionDone.errorState{color:#ff9ca6}.recognitionDone.warningState{color:#f4d274}
@media(max-width:1250px){.planWorkspace{grid-template-columns:92px minmax(0,1fr) 260px!important}.planWorkspace:has(.planInspector.collapsed){grid-template-columns:92px minmax(0,1fr)!important}}

/* ===== v2.7 Guided Project Workflow ===== */
.workflowRibbon{padding:6px 12px 0;background:#07141b;border-bottom:1px solid #17333f}.workflowRibbon.hidden{display:none}
.workflowTrack{display:flex;gap:4px;align-items:stretch;overflow-x:auto;padding-bottom:5px}.workflowTrack button{border:1px solid #1c3b48;background:#0a2029;color:#89aab7;border-radius:6px;min-width:82px;padding:5px 8px;display:flex;gap:5px;align-items:center;justify-content:center}.workflowTrack button span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#153642;font-size:var(--text-small)}.workflowTrack button b{font-size:var(--text-small)}.workflowTrack button.active{background:#174c61;border-color:#4a9dbb;color:#e7f8ff}.workflowOverview{min-width:70px!important;font-size:var(--text-small);font-weight:var(--weight-semibold)}.workflowContext{display:flex;gap:9px;align-items:center;padding:3px 2px 6px;color:#6f909d;font-size:var(--text-small)}.workflowContext b{color:#bcdbe6}.workflowContext span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workflowHero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:12px;align-items:stretch}.nextStepCard{background:#0d2c38;border:1px solid #31718a;border-radius:9px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}.nextStepCard small{grid-column:1/-1;color:#62bddc;font-size:var(--text-small);letter-spacing:.12em}.nextStepCard b{font-size:var(--text-body)}.nextStepCard span{font-size:var(--text-small);color:#93b1bc}.nextStepCard button{grid-column:2;grid-row:2/4;align-self:stretch;padding:0 16px}
.guidedWorkflow{display:grid;gap:7px;margin:10px 0}.workflowPhaseCard{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;background:#091a22;border:1px solid #1b3743;border-radius:9px;padding:9px 10px;position:relative}.workflowPhaseCard.done{border-color:#245d4c}.workflowPhaseCard.next{border-color:#438eab;background:#0b2530;box-shadow:0 0 0 1px #438eab33 inset}.phaseNumber{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#173743;color:#9ec4d1;font-weight:var(--weight-semibold)}.workflowPhaseCard.done .phaseNumber{background:#174b3c;color:#9de2c6}.workflowPhaseCard.next .phaseNumber{background:#1d647d;color:white}.phaseMain small{font-size:var(--text-small);letter-spacing:.1em;color:#64838f}.phaseMain h3{font-size:var(--text-body);margin:2px 0}.phaseMain p{font-size:var(--text-small);color:#8aa6b0;margin:2px 0 5px}.phaseMetrics{display:flex;flex-wrap:wrap;gap:5px}.phaseMetrics span{font-size:var(--text-small);background:#061318;border:1px solid #16333f;border-radius:5px;padding:3px 6px;color:#7797a3}.phaseMetrics b{color:#d9eef5}.phaseOpen{min-width:86px}
.workflowPageFooter{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:14px 0 2px;padding:8px;background:#081920;border:1px solid #1a3743;border-radius:8px;position:sticky;bottom:4px;z-index:20;box-shadow:0 5px 20px #0007}.workflowPageFooter>div{text-align:center;display:grid}.workflowPageFooter small{font-size:var(--text-small);color:#627f8b;letter-spacing:.1em}.workflowPageFooter b{font-size:var(--text-small)}.workflowPageFooter button:first-child{justify-self:start}.workflowPageFooter button:last-child{justify-self:end}
#mainNav .workflowHome{background:#0d2a35;border-color:#275c70}
@media(max-width:1000px){.workflowHero{grid-template-columns:1fr}.nextStepCard{grid-template-columns:1fr auto}.workflowPhaseCard{grid-template-columns:34px minmax(0,1fr)}.phaseOpen{grid-column:2;justify-self:start}.workflowTrack button{min-width:66px}.workflowTrack button b{font-size:var(--text-small)}}

/* v2.7.1 mouse navigation */
.planCanvasWrap{cursor:default}
.planCanvasWrap.panning{cursor:grabbing!important;user-select:none}
.planCanvasWrap.panning *{cursor:grabbing!important}

/* ===== v2.7.3 resizable plan symbols ===== */
.planMarker .markerCore{transform:scale(var(--marker-scale,.75));transform-origin:center;transition:transform .08s ease}
.planMarker .label{top:calc(20px + 24px * var(--marker-scale,.75))}
.resizeHandle{position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:4px;display:grid;place-items:center;background:#effcff;color:#0b3546;border:2px solid #2780a2;font-size:9px;cursor:nwse-resize;z-index:11;touch-action:none}
.sizePresets{display:flex;gap:4px;flex-wrap:wrap;margin-top:-4px;margin-bottom:7px}.sizePresets button{padding:4px 7px;font-size:var(--text-small)}

/* ===== v2.7.5 training + filtered recognition ===== */
.planRecognitionHead{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.trainPrimary{background:#6a4c9d!important;border-color:#a88bdd!important;color:#fff!important;font-weight:var(--weight-semibold)}
.recognitionTypePicker{display:flex;align-items:center;gap:5px;background:#0b2029;border:1px solid #214453;border-radius:7px;padding:3px 6px;margin:0!important}
.recognitionTypePicker span{font-size:var(--text-small);color:#7fa0ad;text-transform:uppercase;letter-spacing:.08em}
.recognitionTypePicker select{min-width:105px;padding:5px 7px;font-size:var(--text-small)}
.trainRail{border-color:#8a70bb!important}.trainRail span{color:#c6b1ee!important}

/* ===== v2.7.6 recognition cleanup ===== */
.planMarker.positionReview.selected{display:grid!important}
.planMarker.positionReview.selected .markerCore{box-shadow:0 0 0 3px #ffd45a88}

/* ===== v2.7.11 Plan UI / Fullscreen / Space Reclaim ===== */

/* smaller default visual fallback */
.planMarker .markerCore{transform:scale(var(--marker-scale,.55))}
.planMarker .label{top:calc(16px + 22px * var(--marker-scale,.55))}

/* menu collapse must truly return the space to the plan */
.planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 292px!important}
.planWorkspace.inspectorCollapsed{grid-template-columns:104px minmax(0,1fr)!important}
.planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
.planRail.collapsed{display:none!important}
.planInspector.collapsed{display:none!important}

.planViewActions{margin-left:auto;display:flex;gap:5px;align-items:center}
.focusBtn,.fullScreenBtn{font-weight:var(--weight-semibold)}

/* Focus Plan hides app chrome and lets Plan Studio own the window */
body.planFocusMode #appShell>aside{display:none!important}
body.planFocusMode #appShell>main>header{display:none!important}
body.planFocusMode #workflowRibbon{display:none!important}
body.planFocusMode #appShell>main{width:100vw!important;max-width:none!important}
body.planFocusMode #plans{padding:4px!important}
body.planFocusMode #plans>.sectionHead{display:none!important}
body.planFocusMode #plansBody{height:calc(100vh - 8px)!important}
body.planFocusMode .planTopTools{top:0!important}
body.planFocusMode .planCanvasWrap{height:calc(100vh - 122px)!important;min-height:0!important}
body.planFocusMode .planRail.v26,
body.planFocusMode .planInspector{height:calc(100vh - 122px)!important}

/* Native browser fullscreen */
#plans:fullscreen{background:#041017;padding:6px;overflow:hidden}
#plans:fullscreen .sectionHead{display:none!important}
#plans:fullscreen #plansBody{height:calc(100vh - 12px)!important}
#plans:fullscreen .planTopTools{top:0!important}
#plans:fullscreen .planCanvasWrap{height:calc(100vh - 122px)!important;min-height:0!important}
#plans:fullscreen .planRail.v26,
#plans:fullscreen .planInspector{height:calc(100vh - 122px)!important}

/* Inspector action hierarchy */
.inspectorActionGroup{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid #1d3d49}
.inspectorActionGroup .primaryAction{grid-column:1/-1;min-height:36px}
.inspectorActionGroup .subtleDanger{background:#3a1d22;border-color:#6e3138}
.inspectorActionGroup button{font-size:var(--text-small)}

/* Recognition controls grouped by purpose */
.recognitionControlSection{border:1px solid #1d3b47;border-radius:8px;padding:7px;margin:7px 0;background:#071820}
.recognitionSectionTitle{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:.08em;color:#7898a4;text-transform:uppercase;margin-bottom:6px}
.recognitionSectionTitle span{font-size:var(--text-small);color:#9cb6c0;text-transform:none;letter-spacing:0}
.recognitionActionGrid,.bulkActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.selectionRow{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.selectionRow label{margin:0;font-size:var(--text-small)}
.recognitionActionGrid button,.bulkActionGrid button,.selectionRow button{font-size:var(--text-small);padding:6px 7px}
.recognitionActionGrid .trainPrimary{background:#5f438f!important;border-color:#9a7bcc!important}

/* Larger plan canvas when controls hidden */
@media(min-width:1251px){
  .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 292px!important}
  .planWorkspace.inspectorCollapsed{grid-template-columns:104px minmax(0,1fr)!important}
  .planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
}

/* ===== v2.7.12 centered plan viewport ===== */
.planCanvasWrap{position:relative}
#planCanvasSizer{margin:auto;position:relative}
.planCanvasWrap:has(#planCanvasSizer){display:block}
.planMarker.positionReview{display:grid!important}

/* ===== v2.7.13 confirm actual symbol position ===== */
.planConfirmBanner{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:6px 0;background:#2a2410;border:1px solid #9a7d27;border-radius:8px;color:#ffeaa0;font-size:var(--text-small)}
.planConfirmBanner button{margin-left:auto}
.planWorkspace:has(+ .planConfirmBanner), .planConfirmBanner + .planWorkspace .planCanvasWrap{cursor:crosshair}

/* ===== v2.7.14 synchronized symbol + label sizing ===== */
.planMarker .label{
  font-size:calc(9px * var(--label-scale,.55));
  line-height:1.05;
  padding:calc(3px * var(--label-scale,.55)) calc(5px * var(--label-scale,.55));
  border-radius:calc(4px * var(--label-scale,.55));
  top:calc(14px + 28px * var(--label-scale,.55));
  transform:translateX(-50%);
  transform-origin:top center;
  white-space:nowrap;
}
.planMarker.selected .label{font-weight:var(--weight-semibold)}
.cameraDirectionHint{
  grid-column:1/-1;
  padding:7px 8px;
  border:1px solid #806c2a;
  background:#2a2410;
  color:#ffe89b;
  border-radius:6px;
  font-size:var(--text-small);
  margin-bottom:3px;
}

/* ===== v2.7.15 draggable label positioning ===== */
.planMarker .label{
  left:50%;
  top:calc(14px + 28px * var(--label-scale,.55));
  transform:translate(
    calc(-50% + var(--label-x,0px)),
    var(--label-y,0px)
  );
  cursor:grab;
  touch-action:none;
  user-select:none;
  z-index:14;
}
.planMarker .label:active{cursor:grabbing}
.labelPositionTools{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 7px;
  align-items:center;
  padding:6px 0 8px;
  margin-bottom:3px;
  border-bottom:1px solid #18333e;
}
.labelPositionTools span{font-size:var(--text-small);font-weight:var(--weight-semibold);color:#9eb9c4}
.labelPositionTools small{grid-column:1/-1;font-size:var(--text-small);color:#6f8d99}
.labelPositionTools button{font-size:var(--text-small);padding:5px 7px}

/* ===== v2.7.16 plan-device workspace ===== */
.relatedWorkspaceBtn{background:#17495d!important;border-color:#347994!important}
.deviceWorkspace{display:grid;gap:10px;min-width:min(860px,85vw)}
.deviceWorkspaceNotice{display:grid;gap:2px;padding:9px 10px;border:1px solid #3b7c55;background:#0f2c20;border-radius:8px}
.deviceWorkspaceNotice span{font-size:var(--text-small);color:#9bc5aa}
.deviceWorkspaceHero{display:flex;justify-content:space-between;align-items:center;border:1px solid #1e3d49;background:#081b23;border-radius:9px;padding:10px}
.deviceWorkspaceHero small{font-size:var(--text-small);color:#658691}.deviceWorkspaceHero h3{margin:2px 0;font-size:var(--text-section)}.deviceWorkspaceHero span{font-size:var(--text-small);color:#93adb6}
.deviceWorkspaceTabs{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px}.deviceWorkspaceTabs button{white-space:nowrap;font-size:var(--text-small)}.deviceWorkspaceTabs .active{background:#19566e}
.deviceWorkspaceGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:55vh;overflow:auto}.relationCard{margin:0!important}.relationCard h3{font-size:var(--text-body)}
.deviceRelRow{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #17313b}.deviceRelRow:last-child{border-bottom:0}.deviceRelRow>div{display:grid}.deviceRelRow small,.deviceRelSummary small{font-size:var(--text-small);color:#75939e}.deviceRelSummary{display:grid;gap:3px;padding:5px 0}.empty.mini{font-size:var(--text-small);padding:8px 0}
.deviceWorkspaceFooter{display:flex;justify-content:flex-end;gap:6px;border-top:1px solid #17323d;padding-top:8px}
@media(max-width:800px){.deviceWorkspace{min-width:0}.deviceWorkspaceGrid{grid-template-columns:1fr}}

/* ===== v2.8.0 workflow + CRUD cleanup ===== */
#modal{max-width:min(980px,94vw)}
#modalForm{max-height:90vh;overflow:hidden;display:flex;flex-direction:column}
#modalBody{overflow:auto;min-height:0}
#modal .modalFoot{flex:0 0 auto}
.moduleManageBar{display:flex;align-items:end;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:12;margin-bottom:8px}
.moduleSearch{flex:1;min-width:220px;margin:0}
.moduleSelectionTools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.moduleSelectionTools span{font-size:var(--text-small);color:#8eabb6;min-width:70px;text-align:center}
.moduleTableCard{overflow:auto;padding:0!important}
.moduleTableCard table{margin:0}
.moduleTableCard th{position:sticky;top:0;background:#0b222b;z-index:2}
.rowActionGroup{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.rowActionGroup .danger.ghost{background:#35191e;border-color:#71313a}
.relatedFilterBanner{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 9px;background:#112c38;border:1px solid #2a6378;border-radius:7px}
.relatedFilterBanner b{font-size:var(--text-small)}.relatedFilterBanner span{font-size:var(--text-small);color:#90aeb9;flex:1}
.deviceWorkspace{min-width:min(900px,86vw)}
.deviceWorkspaceHero{align-items:flex-start}
.deviceWorkspaceHero>div:first-child{display:grid;gap:3px}
.deviceQuickNav{display:grid;grid-template-columns:repeat(6,minmax(95px,1fr));gap:5px}
.deviceQuickNav button{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#0b2631;border-color:#285365;padding:7px 9px}
.deviceQuickNav b{min-width:19px;height:19px;display:grid;place-items:center;border-radius:10px;background:#173d4d;font-size:var(--text-small)}
.deviceWorkspaceGrid{grid-template-columns:1fr 1fr;gap:8px;max-height:58vh}
.relationCard{background:#081b23;border:1px solid #1e3c48;border-radius:9px;padding:10px}
.relationHead{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #17343f;padding-bottom:7px;margin-bottom:6px}
.relationHead small{font-size:var(--text-small);letter-spacing:.1em;color:#607f8b}
.relationHead h3{margin:2px 0 0;font-size:var(--text-body)}
.deviceRelSummary button{justify-self:start;margin-top:5px}
@media(max-width:900px){.moduleManageBar{align-items:stretch;flex-direction:column}.moduleSelectionTools{justify-content:flex-start}.deviceQuickNav{grid-template-columns:repeat(3,1fr)}.deviceWorkspaceGrid{grid-template-columns:1fr}}

/* ===== v2.8.1 checkbox + related-filter fixes ===== */
input[type="checkbox"],
input[type="radio"]{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  max-width:16px!important;
  padding:0!important;
  margin:0 6px 0 0!important;
  vertical-align:middle;
  accent-color:#2f8db2;
  box-sizing:border-box;
}
td input[type="checkbox"],
th input[type="checkbox"]{
  display:inline-block;
}
.moduleTableCard td:first-child,
.moduleTableCard th:first-child{
  width:72px;
  text-align:center;
}
.moduleTableCard td:first-child input[type="checkbox"]{
  margin:0!important;
}
.relatedFilterBanner{
  border-color:#a3772e;
  background:#2b2412;
}
.relatedFilterBanner b{color:#ffd98a}

/* ===== v2.8.2 responsive Device Workspace ===== */
#modal{
  width:min(980px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100vh - 24px)!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#modal::backdrop{background:#0009}
#modalForm{
  width:100%!important;
  max-width:100%!important;
  max-height:calc(100vh - 24px)!important;
  overflow:hidden!important;
}
#modalBody{
  width:100%!important;
  max-width:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
#modalBody>*{max-width:100%!important;box-sizing:border-box!important}

.deviceWorkspace{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.deviceWorkspaceHero{
  width:100%;
  min-width:0;
  gap:10px;
}
.deviceWorkspaceHero>div:first-child{min-width:0;overflow:hidden}
.deviceWorkspaceHero h3,
.deviceWorkspaceHero span{overflow-wrap:anywhere}
.deviceWorkspaceHero .rowActionGroup{flex:0 0 auto}

.deviceQuickNav{
  width:100%;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important;
  overflow:hidden!important;
}
.deviceQuickNav button{
  min-width:0!important;
  width:100%;
}

.deviceWorkspaceGrid{
  width:100%;
  min-width:0;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.relationCard{
  min-width:0!important;
  overflow:hidden!important;
}
.relationHead{min-width:0}
.relationHead>div:first-child{min-width:0}
.deviceRelRow{min-width:0}
.deviceRelRow>div:first-child{min-width:0;overflow:hidden}
.deviceRelRow b,
.deviceRelRow small,
.deviceRelSummary b,
.deviceRelSummary span,
.deviceRelSummary small{
  overflow-wrap:anywhere;
  word-break:break-word;
}

#modal .modalFoot{
  width:100%;
  box-sizing:border-box;
  position:sticky;
  bottom:0;
  background:#081820;
  border-top:1px solid #1b3944;
}

@media(max-width:900px){
  #modal{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100vh - 12px)!important;
  }
  #modalForm{max-height:calc(100vh - 12px)!important}
  .deviceWorkspaceGrid{grid-template-columns:1fr!important}
  .deviceQuickNav{grid-template-columns:repeat(auto-fit,minmax(95px,1fr))!important}
}
@media(max-width:560px){
  .deviceWorkspaceHero{flex-direction:column;align-items:stretch}
  .deviceWorkspaceHero .rowActionGroup{width:100%}
  .deviceWorkspaceHero .rowActionGroup button{flex:1}
  .deviceQuickNav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ===== IntegratorOS v3.0 project-first shell ===== */
:root{
  --v3-panel:#081a22;
  --v3-panel2:#0b222c;
  --v3-line:#1f4251;
  --v3-muted:#7695a2;
  --v3-accent:#2c7f9f;
}
.brand span{font-size:var(--text-small)!important;background:#173b4b;border-radius:10px;padding:2px 6px}
.navSection{margin-top:13px!important;color:#587a88!important;letter-spacing:.12em!important}
.navBtn{border-radius:7px!important;margin:1px 5px!important;padding:8px 10px!important}
.navBtn.active{background:#123b4d!important;border:1px solid #2d6a82!important}
.workflowHome{font-weight:var(--weight-semibold)}

.workflowRibbon{padding:0!important;background:#06161d!important;border-bottom:1px solid #183540!important}
.projectCommandBar{display:grid;grid-template-columns:minmax(180px,260px) auto minmax(0,1fr);gap:10px;align-items:center;padding:7px 12px}
.projectCommandIdentity{display:grid;min-width:0}
.projectCommandIdentity small{font-size:var(--text-small);letter-spacing:.12em;color:#5e7e8b}
.projectCommandIdentity b{font-size:var(--text-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projectPhaseTrack,.projectQuickTabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.projectPhaseTrack button,.projectQuickTabs button{font-size:var(--text-small);padding:6px 8px;background:#0a2029;border-color:#1d4555}
.projectPhaseTrack button span{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#153a48;margin-right:4px}
.projectPhaseTrack button.active,.projectQuickTabs button.active{background:#23627b;border-color:#65acc7}

.projectCommandHero{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:12px;padding:16px;border:1px solid var(--v3-line);background:#091c25;border-radius:12px;margin-bottom:10px}
.projectCommandHero small,.projectNextAction small{font-size:var(--text-small);letter-spacing:.12em;color:var(--v3-muted)}
.projectCommandHero h2{font-size:var(--text-title);margin:4px 0}
.heroMeta{display:flex;gap:6px;flex-wrap:wrap}.heroMeta span{background:#102f3c;border:1px solid #204b5c;border-radius:12px;padding:4px 7px;font-size:var(--text-small)}
.projectNextAction{display:grid;gap:5px;padding:11px;background:#102c37;border:1px solid #2b5c6e;border-radius:9px}.projectNextAction b{font-size:var(--text-section)}.projectNextAction span{font-size:var(--text-small);color:#9db4bc}.projectNextAction button{justify-self:start}

.projectKpis{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:7px;margin-bottom:10px}
.projectKpis button{display:grid;text-align:left;gap:4px;background:#0a2029;border:1px solid #1c4050;padding:10px}.projectKpis small{font-size:var(--text-small);color:#688995}.projectKpis b{font-size:var(--text-section)}

.operatingPhases{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.operatingPhase{display:grid;grid-template-columns:36px 1fr;border:1px solid var(--v3-line);background:#071820;border-radius:10px;overflow:hidden}
.phaseNumber{display:grid;place-items:center;background:#0d2b37;font-size:var(--text-section);font-weight:var(--weight-semibold);color:#74bad5}
.phaseBody{padding:10px}.phaseHead{display:flex;justify-content:space-between;gap:8px}.phaseHead h3{margin:0 0 3px;font-size:var(--text-body)}.phaseHead p{margin:0;font-size:var(--text-small);color:#7f9ba6}.phaseHead button{align-self:start}
.phaseLinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:5px;margin-top:9px}.phaseLinks button{display:flex;justify-content:space-between;background:#0c2732;border-color:#204655;font-size:var(--text-small)}.phaseLinks b{font-size:var(--text-small)}
.projectRelationshipCard{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:12px;border:1px dashed #2a6377;border-radius:10px;background:#0b2029}.projectRelationshipCard small{font-size:var(--text-small);color:#658793}.projectRelationshipCard h3{margin:2px 0}.projectRelationshipCard p{margin:0;color:#86a1ab;font-size:var(--text-small)}

.workspaceAdminGrid{display:grid;grid-template-columns:1.2fr .8fr 1.4fr;gap:8px;margin-bottom:8px}
.workspaceIdentityCard,.seatCard,.saasCard{margin:0!important}.workspaceIdentityCard h3,.seatCard h3,.saasCard h3{margin:4px 0}.workspacePlanBadge{display:inline-block;background:#173d4c;border:1px solid #2c6377;border-radius:10px;padding:3px 7px;font-size:var(--text-small)}
.adminUsersCard{overflow:auto}

.projectEmptyState{display:grid;justify-items:start;gap:8px;padding:30px;border:1px dashed #2a5261;background:#071820;border-radius:12px}.projectEmptyState h2,.projectEmptyState p{margin:0}.projectEmptyState p{max-width:620px;color:#88a3ad}

@media(max-width:1200px){
 .projectCommandBar{grid-template-columns:1fr}.projectCommandIdentity{display:none}
 .projectKpis{grid-template-columns:repeat(3,1fr)}
 .workspaceAdminGrid{grid-template-columns:1fr}
}
@media(max-width:800px){
 .operatingPhases{grid-template-columns:1fr}
 .projectCommandHero{grid-template-columns:1fr}
 .projectKpis{grid-template-columns:repeat(2,1fr)}
}

/* ===== v3.0.2 compact sidebar repair ===== */
body.compactNav .appShell{grid-template-columns:58px minmax(0,1fr)!important}
body.compactNav aside{
  width:58px!important;min-width:58px!important;max-width:58px!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:none!important;border-right:1px solid #173844!important
}
body.compactNav aside::-webkit-scrollbar{display:none!important}
body.compactNav aside .brand{
  height:58px;padding:6px 4px!important;display:grid!important;
  justify-items:center!important;align-content:start!important;gap:4px!important
}
body.compactNav aside .brand>b{display:none!important}
body.compactNav aside .brand>span{display:block!important;font-size:var(--text-small)!important;padding:2px 5px!important}
body.compactNav #sidebarToggle{
  display:grid!important;place-items:center!important;width:34px!important;min-width:34px!important;
  height:34px!important;padding:0!important;font-size:22px!important;line-height:1!important;
  border-radius:9px!important;background:#164f67!important;border:1px solid #2f7893!important;
  margin:0 auto!important
}
body.compactNav .userCard,
body.compactNav .navSection,
body.compactNav #logoutBtn{display:none!important}
body.compactNav #mainNav{padding:3px 0!important;overflow:visible!important}
body.compactNav .navBtn{
  width:42px!important;min-width:42px!important;max-width:42px!important;
  height:42px!important;min-height:42px!important;margin:3px auto!important;padding:0!important;
  overflow:hidden!important;text-indent:-9999px!important;position:relative!important;
  border-radius:9px!important
}
body.compactNav .navBtn::before{
  content:attr(data-icon);text-indent:0!important;position:absolute!important;inset:0!important;
  display:grid!important;place-items:center!important;font-size:16px!important;color:#b9d5df!important
}
body.compactNav .navBtn.active::before{color:#fff!important}
body.compactNav main{min-width:0!important}
body.compactNav .content{padding-left:14px!important}
body.compactNav aside::after{display:none!important}

/* ===== v3.0.3 compact rail + Plan Studio inspector layout ===== */

/* Compact navigation uses explicit short glyph/labels from HTML. */
body.compactNav .navBtn::before{
  content:attr(data-icon)!important;
  font-family:inherit!important;
  font-size:11px!important;
  font-weight:var(--weight-semibold)!important;
  letter-spacing:0!important;
  color:#b9d5df!important;
}
body.compactNav .navBtn.active::before{color:#fff!important}
body.compactNav .navBtn{
  border:1px solid transparent!important;
}
body.compactNav .navBtn.active{
  background:#15465b!important;
  border-color:#2f7893!important;
}
body.compactNav #sidebarToggle{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto!important;
}
body.compactNav aside{
  overscroll-behavior:contain;
}

/* Keep Plan Studio within the available viewport in both sidebar states. */
#plans,
#plansBody,
.planWorkspace,
.planCanvasWrap,
.planInspector{
  min-width:0!important;
  box-sizing:border-box!important;
}
.planWorkspace{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:96px minmax(0,1fr) minmax(280px,320px)!important;
  overflow:hidden!important;
}
.planCanvasWrap{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
}
.planInspector{
  width:100%!important;
  min-width:280px!important;
  max-width:320px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.planInspector .card,
.inspectorCard,
.recognitionPanel{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.planInspector p,
.planInspector small,
.planInspector label,
.planInspector span{
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.planInspector button,
.planInspector input,
.planInspector select{
  max-width:100%!important;
}

/* Hidden columns truly return their space to the plan. */
.planWorkspace.railCollapsed{
  grid-template-columns:minmax(0,1fr) minmax(280px,320px)!important;
}
.planWorkspace.inspectorCollapsed{
  grid-template-columns:96px minmax(0,1fr)!important;
}
.planWorkspace.railCollapsed.inspectorCollapsed{
  grid-template-columns:minmax(0,1fr)!important;
}

/* Compact app sidebar must not change Plan Studio proportions. */
body.compactNav #plansBody{
  width:100%!important;
  max-width:100%!important;
}
body.compactNav .planWorkspace{
  grid-template-columns:96px minmax(0,1fr) minmax(280px,320px)!important;
}
body.compactNav .planWorkspace.railCollapsed{
  grid-template-columns:minmax(0,1fr) minmax(280px,320px)!important;
}
body.compactNav .planWorkspace.inspectorCollapsed{
  grid-template-columns:96px minmax(0,1fr)!important;
}
body.compactNav .planWorkspace.railCollapsed.inspectorCollapsed{
  grid-template-columns:minmax(0,1fr)!important;
}

/* At smaller browser widths stack Inspector instead of crushing it. */
@media(max-width:1180px){
  .planWorkspace,
  body.compactNav .planWorkspace{
    grid-template-columns:80px minmax(0,1fr)!important;
  }
  .planInspector{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    position:relative!important;
    top:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .planWorkspace.railCollapsed,
  body.compactNav .planWorkspace.railCollapsed{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .planWorkspace.inspectorCollapsed,
  body.compactNav .planWorkspace.inspectorCollapsed{
    grid-template-columns:80px minmax(0,1fr)!important;
  }
  .planWorkspace.railCollapsed.inspectorCollapsed,
  body.compactNav .planWorkspace.railCollapsed.inspectorCollapsed{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* ===== v3.0.4 Project A-Z Guide ===== */
.guideHero{display:grid;grid-template-columns:1fr 280px;gap:12px;padding:16px;border:1px solid #214653;background:#091d25;border-radius:12px;margin-bottom:10px}
.guideHero small{font-size:var(--text-small);letter-spacing:.12em;color:#71909d}.guideHero h2{margin:4px 0;font-size:var(--text-title)}.guideHero p{margin:0;color:#8aa3ad}
.guideProgressCard{display:grid;gap:7px;padding:10px;border-radius:9px;background:#0e2a35;border:1px solid #2c5d70}.guideProgressCard b{font-size:var(--text-section)}.guideProgressTrack{height:10px;background:#06151b;border:1px solid #244957;border-radius:999px;overflow:hidden}.guideProgressTrack span{display:block;height:100%;background:#3ea7cc;transition:width .2s}
.guidePhaseNav{display:flex;gap:6px;position:sticky;top:4px;z-index:12;padding:6px;background:#06171ee8;border:1px solid #163a47;border-radius:9px;margin-bottom:10px}.guidePhaseNav button{flex:1;font-size:var(--text-small)}
.guideSteps{display:grid;gap:12px}.guidePhaseBlock{border:1px solid #1d4050;border-radius:11px;background:#071920;overflow:hidden}.guidePhaseHead{display:flex;gap:9px;align-items:center;padding:10px 12px;background:#0b2732;border-bottom:1px solid #1e4352}.guidePhaseHead>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#1c5368;font-weight:var(--weight-semibold)}.guidePhaseHead h3{margin:0;font-size:var(--text-body)}.guidePhaseHead p{margin:1px 0 0;font-size:var(--text-small);color:#7d9aa6}
.guideStep{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 12px;border-bottom:1px solid #16333e}.guideStep:last-child{border-bottom:0}.guideStep.done{background:#0b281d}.guideStepNumber{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#113744;color:#9ad5e9;font-weight:var(--weight-semibold)}.guideStep.done .guideStepNumber{background:#1e5d3e;color:#b8f2cc}
.guideStepTitle{display:flex;justify-content:space-between;gap:8px}.guideStepTitle h4{margin:0;font-size:var(--text-body)}.guideStepTitle p{margin:3px 0 0;font-size:var(--text-small);color:#78949f}.guideChecklist{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.guideChecklist span{font-size:var(--text-small);padding:3px 6px;border:1px solid #204654;background:#0a222b;border-radius:10px;color:#9bb4bd}
.guideDone{display:flex!important;align-items:center!important;gap:5px!important;font-size:var(--text-small)!important;margin:3px 0!important;white-space:nowrap}.guideDone input{margin:0!important}
.guideRuleCard{margin-top:12px;padding:14px;border:1px dashed #3e7182;border-radius:10px;background:#0b2029}.guideRuleCard h3{margin:0 0 4px}.guideRuleCard p{margin:0;color:#90a8b1}
@media(max-width:800px){.guideHero{grid-template-columns:1fr}.guideStep{grid-template-columns:30px 1fr}.guideDone{grid-column:2}.guideStepTitle{flex-direction:column}.guideStepTitle button{align-self:start}}

/* ===== v3.0.5 Plan Studio inspector flex-layout repair ===== */

/*
  Plan Studio previously accumulated several grid-template overrides for:
  normal sidebar, compact sidebar, hidden tools, hidden inspector and responsive
  layouts. In compact mode those rules could disagree and leave the Inspector
  squeezed to a thin strip.

  The three workspace regions now use one predictable flex layout:
  Tools = fixed width
  Canvas = takes remaining space
  Inspector = fixed usable width
*/
#plansBody{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}

.planWorkspace,
body.compactNav .planWorkspace{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  grid-template-columns:none!important;
}

.planWorkspace .planRail{
  flex:0 0 96px!important;
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
}

.planWorkspace .planCanvasWrap{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}

.planWorkspace .planInspector{
  flex:0 0 310px!important;
  width:310px!important;
  min-width:310px!important;
  max-width:310px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

/* Hidden panels return all of their width to the drawing. */
.planWorkspace.railCollapsed .planRail{
  display:none!important;
}
.planWorkspace.inspectorCollapsed .planInspector{
  display:none!important;
}

/* Ensure Inspector content always uses the entire 310px panel. */
.planWorkspace .planInspector > .card,
.planWorkspace .planInspector .inspectorCard,
.planWorkspace .planInspector .recognitionQueue{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.planWorkspace .planInspector .empty{
  width:auto!important;
  max-width:100%!important;
  padding:22px 10px!important;
}

.planWorkspace .planInspector p,
.planWorkspace .planInspector small,
.planWorkspace .planInspector label,
.planWorkspace .planInspector span,
.planWorkspace .planInspector div{
  min-width:0;
}

.planWorkspace .planInspector p,
.planWorkspace .planInspector small{
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

/* Compact application sidebar only changes the app navigation width.
   It no longer changes the internal Plan Studio column calculation. */
body.compactNav #plans,
body.compactNav #plansBody{
  width:100%!important;
  max-width:100%!important;
}

/* Narrow screens: keep Tools + Canvas on first row and Inspector full-width below. */
@media(max-width:1050px){
  .planWorkspace,
  body.compactNav .planWorkspace{
    flex-wrap:wrap!important;
  }

  .planWorkspace .planRail{
    flex:0 0 80px!important;
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
  }

  .planWorkspace .planCanvasWrap{
    flex:1 1 calc(100% - 88px)!important;
  }

  .planWorkspace .planInspector{
    flex:1 0 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    position:relative!important;
    top:0!important;
  }

  .planWorkspace.railCollapsed .planCanvasWrap{
    flex-basis:100%!important;
  }
}

/* ===== v3.0.6 global scrollbar design ===== */

/* Firefox */
*{
  scrollbar-width:thin;
  scrollbar-color:#3c6f82 #07171d;
}

/* Chromium / Edge */
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:#07171d;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#315f71,#224858);
  border:2px solid #07171d;
  border-radius:999px;
  min-height:34px;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#4b8aa2,#2d6377);
}
*::-webkit-scrollbar-corner{
  background:#07171d;
}

/* Main navigation is intentionally cleaner than data/content scrollers. */
body:not(.compactNav) aside{
  scrollbar-width:thin!important;
  scrollbar-color:#315f71 #091820!important;
}
body:not(.compactNav) aside::-webkit-scrollbar{
  width:7px!important;
}
body:not(.compactNav) aside::-webkit-scrollbar-track{
  background:#091820!important;
}
body:not(.compactNav) aside::-webkit-scrollbar-thumb{
  background:#315f71!important;
  border:1px solid #091820!important;
}

/* Tables, modals, plan inspector/canvas use the product scrollbar. */
.moduleTableCard,
#modalBody,
.planCanvasWrap,
.planInspector,
.recognitionQueue{
  scrollbar-gutter:stable;
}

/* ===== Plan Studio edge panel handles ===== */
.planWorkspace{
  position:relative!important;
}

.planPanelHandle{
  position:absolute!important;
  z-index:60!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  width:24px!important;
  min-width:24px!important;
  height:92px!important;
  padding:4px 2px!important;
  border-radius:8px!important;
  background:#123a4a!important;
  border:1px solid #2f7088!important;
  box-shadow:0 4px 16px #0008!important;
  color:#d8f2fb!important;
  writing-mode:vertical-rl!important;
  text-orientation:mixed!important;
  cursor:pointer!important;
  opacity:.92!important;
}
.planPanelHandle:hover{
  background:#1a5369!important;
  border-color:#58a6c2!important;
  opacity:1!important;
}
.planPanelHandle span{
  writing-mode:horizontal-tb!important;
  font-size:var(--text-section)!important;
  line-height:1!important;
  font-weight:var(--weight-semibold)!important;
}
.planPanelHandle small{
  font-size:var(--text-small)!important;
  letter-spacing:.12em!important;
  color:#b9d6e1!important;
}

/* Tools handle hugs the tools rail edge; when hidden it stays on left edge. */
.toolsPanelHandle{
  left:96px!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}
.planWorkspace.railCollapsed .toolsPanelHandle{
  left:0!important;
  transform:translate(0,-50%)!important;
  border-radius:0 8px 8px 0!important;
}

/* Inspector handle hugs the inspector edge; when hidden it stays on right edge. */
.inspectorPanelHandle{
  right:310px!important;
  top:50%!important;
  transform:translate(50%,-50%)!important;
}
.planWorkspace.inspectorCollapsed .inspectorPanelHandle{
  right:0!important;
  transform:translate(0,-50%)!important;
  border-radius:8px 0 0 8px!important;
}

/* Handles remain visible in focus/fullscreen mode. */
body.planFocusMode .planPanelHandle,
#plans:fullscreen .planPanelHandle{
  z-index:80!important;
}

/* On narrow layouts the inspector stacks; use horizontal mini handle. */
@media(max-width:1050px){
  .inspectorPanelHandle{
    right:8px!important;
    top:auto!important;
    bottom:8px!important;
    transform:none!important;
    height:34px!important;
    width:96px!important;
    writing-mode:horizontal-tb!important;
    border-radius:8px!important;
  }
  .inspectorPanelHandle small{
    writing-mode:horizontal-tb!important;
  }
  .toolsPanelHandle{
    top:70px!important;
    transform:translate(-50%,0)!important;
  }
  .planWorkspace.railCollapsed .toolsPanelHandle{
    transform:none!important;
  }
}

/* ===== v3.0.7 compact page heads / remove dead space ===== */

/* All pages: reduce header whitespace and keep actions aligned with title. */
.pageHead{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  margin-bottom:8px!important;
  min-height:0!important;
}
.pageHead>div:first-child{
  min-width:0!important;
}
.pageHead h2{
  margin:0!important;
  line-height:1.05!important;
  font-size:var(--text-title)!important;
}
.pageHead p{
  margin:2px 0 0!important;
  line-height:1.25!important;
  font-size:var(--text-small)!important;
  max-width:900px!important;
}
.pageHead>div:last-child{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}

/* Plan Studio: keep title + recognition actions in one compact row. */
#plans .pageHead{
  padding:0!important;
  margin:0 0 6px!important;
}
#plans .pageHead h2{
  font-size:var(--text-section)!important;
}
#plans .pageHead p{
  font-size:var(--text-small)!important;
  max-width:760px!important;
}
#plansActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
#plansActions button,
#plansActions select{
  min-height:34px!important;
}

/* Remove unnecessary top/bottom air around major page content. */
.content{
  padding-top:12px!important;
}
.view.active{
  padding-top:0!important;
}
.card:first-child,
.itemCard:first-child{
  margin-top:0!important;
}

/* Simple list pages should begin immediately under the compact title row. */
.moduleManageBar{
  margin-top:0!important;
}

/* Project Guide / Workspace also use tighter headers. */
#guide .pageHead,
#workspace .pageHead,
#dashboard .pageHead{
  margin-bottom:8px!important;
}

/* At smaller widths, stack cleanly without creating a large blank band. */
@media(max-width:900px){
  .pageHead{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .pageHead>div:last-child{
    justify-content:flex-start!important;
  }
  #plansActions{
    justify-content:flex-start!important;
  }
}

/* ===== v3.0.8 Plan Studio header gap fix ===== */

/*
  Force Plan Studio into one continuous vertical flow.
  The previous generic page-head rules still left an oversized row between
  the Plan Studio heading/actions and the actual Plan Studio toolbar.
*/
#plans.view.active{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  min-height:0!important;
}

#plans .pageHead{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:42px!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
  margin:0 0 5px!important;
}

#plans .pageHead>div:first-child{
  align-self:center!important;
  padding:0!important;
  margin:0!important;
}

#plans .pageHead h2{
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  font-size:var(--text-section)!important;
}

#plans .pageHead p{
  margin:2px 0 0!important;
  padding:0!important;
  line-height:1.15!important;
  font-size:var(--text-small)!important;
}

#plansActions,
#plansActions .headActions,
#plansActions .planRecognitionHead{
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  height:auto!important;
  align-self:center!important;
}

#plansBody{
  flex:1 1 auto!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  width:100%!important;
}

/* First Plan Studio toolbar starts immediately below the heading. */
#plansBody>.planTopTools{
  margin-top:0!important;
}

/* Avoid a generic content rule inserting extra space around Plan Studio. */
.content:has(#plans.view.active){
  padding-top:8px!important;
}

/* Smaller screens stack title/actions tightly, still without a dead band. */
@media(max-width:900px){
  #plans .pageHead{
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin-bottom:5px!important;
  }
  #plansActions,
  #plansActions .headActions,
  #plansActions .planRecognitionHead{
    justify-content:flex-start!important;
  }
}

/* ===== v3.0.9 Plan Studio dead-space removal ===== */

/* Plan Studio now renders its own compact command header. */
#plans>.pageHead{
  display:none!important;
}

#plans.view.active{
  display:block!important;
  margin:0!important;
  padding:0!important;
}

#plansBody{
  display:block!important;
  margin:0!important;
  padding:0!important;
}

/* New first row: title on left, main actions on right. */
.planStudioCommandHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:5px 0 6px;
  margin:0;
  min-height:0;
}
.planStudioTitle{
  min-width:0;
}
.planStudioTitle h2{
  margin:0;
  padding:0;
  font-size:var(--text-section);
  line-height:1;
}
.planStudioTitle p{
  margin:2px 0 0;
  padding:0;
  font-size:var(--text-small);
  line-height:1.15;
  color:#7694a0;
}
.planStudioPrimaryActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.planStudioPrimaryActions button{
  min-height:34px;
}
.planStudioPrimaryActions .recognitionTypePicker{
  min-height:34px;
  box-sizing:border-box;
}

/* Toolbar starts directly after command header. */
#plansBody>.planTopTools{
  margin-top:0!important;
  top:0!important;
}

/* Critical: old relative rail inherited top:113px from legacy .planRail.
   Reset it so the tools begin at the top of the workspace. */
.planWorkspace .planRail,
.planRail.v26{
  top:0!important;
  margin-top:0!important;
  transform:none!important;
}

/* Keep workspace immediately under its controls. */
.planLayerBar{
  margin-top:0!important;
}
.planWorkspace{
  margin-top:0!important;
}

/* Tighter overall Plan Studio vertical rhythm. */
#plans .planTopTools.v25{
  margin-bottom:5px!important;
}
#plans .planLayerBar.v26{
  margin-bottom:5px!important;
}

/* Responsive header: stack without adding dead height. */
@media(max-width:900px){
  .planStudioCommandHeader{
    grid-template-columns:1fr;
    gap:5px;
  }
  .planStudioPrimaryActions{
    justify-content:flex-start;
  }
}

/* ===== v3.0.10 draggable device labels repair ===== */

/* Legacy Plan Studio CSS set pointer-events:none on labels.
   That prevented the label drag handler from ever receiving the mouse event. */
.planMarker .label,
.planMarker .draggableLabel{
  pointer-events:auto!important;
  cursor:grab!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  z-index:30!important;
}

.planMarker .label:hover,
.planMarker .draggableLabel:hover{
  border-color:#5aa5bf!important;
  box-shadow:0 0 0 2px #2c708744!important;
}

.planMarker .label.dragging,
.planMarker .draggableLabel.dragging{
  cursor:grabbing!important;
  border-color:#8fdcf5!important;
  box-shadow:0 0 0 3px #3d9fbe55!important;
}

/* Keep label movement independent from symbol/FOV movement. */
.planMarker:has(.label.dragging){
  cursor:default!important;
}

/* Selected labels get a clearer affordance that they can be moved. */
.planMarker.selected .label::after{
  content:'';
  position:absolute;
  inset:-4px;
  border:1px dashed #65abc355;
  border-radius:5px;
  pointer-events:none;
}

/* ===== v3.0.11 stable viewport + scaled resize handle ===== */

/* Resizer uses same symbol scale so it stays visually proportional. */
.resizeHandle{
  width:clamp(8px,calc(16px * var(--handle-scale,.55)),22px)!important;
  height:clamp(8px,calc(16px * var(--handle-scale,.55)),22px)!important;
  margin:
    calc(-0.5 * clamp(8px,calc(16px * var(--handle-scale,.55)),22px))
    0 0
    calc(-0.5 * clamp(8px,calc(16px * var(--handle-scale,.55)),22px))!important;
  border-width:clamp(1px,calc(2px * var(--handle-scale,.55)),2px)!important;
  border-radius:clamp(2px,calc(4px * var(--handle-scale,.55)),5px)!important;
  font-size:clamp(6px,calc(9px * var(--handle-scale,.55)),11px)!important;
  line-height:1!important;
}

/* Keep enough mouse target without making the visible icon oversized. */
.resizeHandle::after{
  content:'';
  position:absolute;
  inset:-6px;
}

/* ===== v3.0.12 label leader lines ===== */

.planMarker .labelLeader{
  position:absolute;
  left:50%;
  top:50%;
  height:1px;
  transform-origin:0 50%;
  pointer-events:none;
  z-index:5;
  background:#72a9bb88;
  opacity:.45;
}

/* When a label is manually moved away from its default position,
   make the relationship clearer. */
.planMarker .labelLeader.moved{
  height:1.5px;
  opacity:.9;
  background:#67c8e8cc;
}

/* Keep the line behind both the symbol and label. */
.planMarker .markerCore{z-index:8!important}
.planMarker .label{z-index:30!important}

/* Selected objects make the leader easier to inspect. */
.planMarker.selected .labelLeader{
  opacity:1;
  box-shadow:0 0 3px #4bbde366;
}

/* Detection leader uses recognition color so it is easy to distinguish. */
.planMarker.detection .labelLeader{
  background:#d7b94d99;
}
.planMarker.detection .labelLeader.moved{
  background:#e6c759dd;
}

/* ===== v3.0.13 proportional rotation handle + arrow leaders ===== */

/* Camera rotation handle now scales symmetrically with the symbol. */
.rotateHandle{
  width:clamp(8px,calc(18px * var(--handle-scale,.55)),24px)!important;
  height:clamp(8px,calc(18px * var(--handle-scale,.55)),24px)!important;
  margin:
    calc(-0.5 * clamp(8px,calc(18px * var(--handle-scale,.55)),24px))
    0 0
    calc(-0.5 * clamp(8px,calc(18px * var(--handle-scale,.55)),24px))!important;
  border-width:clamp(1px,calc(2px * var(--handle-scale,.55)),2px)!important;
  font-size:clamp(6px,calc(11px * var(--handle-scale,.55)),13px)!important;
  line-height:1!important;
}

/* Keep the visible rotation control small while preserving an easy mouse target. */
.rotateHandle::after{
  content:'';
  position:absolute;
  inset:-6px;
}

/* Leader line is now a subtle arrow pointing to the label.
   Use a muted blue-teal distinct from the camera FOV cyan. */
.planMarker .labelLeader{
  background:#4d8396cc!important;
  height:1.5px!important;
  opacity:.72!important;
  overflow:visible!important;
}

/* Arrowhead at the label end. It overlaps slightly beneath the label border
   so there is no visual gap between the arrow and label. */
.planMarker .labelLeader::after{
  content:'';
  position:absolute;
  right:-1px;
  top:50%;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:7px solid #4d8396;
  transform:translateY(-50%);
  pointer-events:none;
}

/* Moved labels get a clearer relationship without competing with FOV color. */
.planMarker .labelLeader.moved{
  background:#66a9bfdd!important;
  opacity:.95!important;
}
.planMarker .labelLeader.moved::after{
  border-left-color:#66a9bf!important;
}

/* Selected device: brighter arrow for editing. */
.planMarker.selected .labelLeader{
  background:#8bd7ec!important;
}
.planMarker.selected .labelLeader::after{
  border-left-color:#8bd7ec!important;
}

/* Recognition proposals stay amber so they remain distinct from real devices. */
.planMarker.detection .labelLeader{
  background:#b89a42cc!important;
}
.planMarker.detection .labelLeader::after{
  border-left-color:#b89a42!important;
}
.planMarker.detection.selected .labelLeader{
  background:#e0c45ddd!important;
}
.planMarker.detection.selected .labelLeader::after{
  border-left-color:#e0c45d!important;
}

/* ===== v3.0.14 smart edge-to-edge label arrows ===== */

/* Geometry is now calculated from the actual rendered symbol and label boxes.
   Do not force the old center-based anchor. */
.planMarker .labelLeader{
  left:0!important;
  top:0!important;
  transform-origin:0 50%!important;
  min-width:0!important;
}

/* Slightly smaller arrowhead now that it lands exactly on the label edge. */
.planMarker .labelLeader::after{
  right:-1px!important;
  border-top-width:3px!important;
  border-bottom-width:3px!important;
  border-left-width:6px!important;
}

/* Arrow remains behind the text label. */
.planMarker .labelLeader{
  z-index:12!important;
}
.planMarker .label{
  z-index:30!important;
}

/* ===== v3.0.15 local device label arrows ===== */

/*
  Leader arrows now live entirely in the planMarker's local coordinate system.
  No getBoundingClientRect(), viewport coordinates, scroll position or zoom
  conversion is used. Therefore zoom/pan/Fit/fullscreen cannot stretch them.
*/
.planMarker .labelLeader{
  position:absolute!important;
  transform-origin:0 50%!important;
  pointer-events:none!important;
  overflow:visible!important;
  z-index:12!important;
}

/* Pending recognition proposals intentionally do not draw leader arrows. */
.planMarker.detection .labelLeader{
  display:none!important;
}

/* Real device arrows: subdued slate/teal, distinct from camera FOV cyan. */
.planMarker:not(.detection) .labelLeader{
  background:#587d89cc!important;
}
.planMarker:not(.detection) .labelLeader::after{
  border-left-color:#587d89!important;
}
.planMarker:not(.detection) .labelLeader.moved{
  background:#6f9eacdd!important;
}
.planMarker:not(.detection) .labelLeader.moved::after{
  border-left-color:#6f9eac!important;
}
.planMarker:not(.detection).selected .labelLeader{
  background:#91c7d5!important;
}
.planMarker:not(.detection).selected .labelLeader::after{
  border-left-color:#91c7d5!important;
}

/* ===== v3.0.16 unified scalable device annotation ===== */

/*
  One Symbol Size now controls the whole device annotation:
  symbol + label + leader arrow + rotation handle + resize handle.
*/
.planMarker{
  --annotation-scale:var(--marker-scale,.55);
}

/* Label is now part of the same scalable visual system as the symbol. */
.planMarker .label{
  font-size:clamp(5.5px,calc(9px * var(--annotation-scale,.55)),13px)!important;
  padding:
    clamp(1px,calc(2px * var(--annotation-scale,.55)),3px)
    clamp(2px,calc(5px * var(--annotation-scale,.55)),7px)!important;
  border-radius:clamp(2px,calc(4px * var(--annotation-scale,.55)),5px)!important;
  border-width:1px!important;
}

/* Rotation and resize controls scale together with the device. */
.planMarker .rotateHandle{
  width:clamp(7px,calc(16px * var(--annotation-scale,.55)),22px)!important;
  height:clamp(7px,calc(16px * var(--annotation-scale,.55)),22px)!important;
  margin:
    calc(-0.5 * clamp(7px,calc(16px * var(--annotation-scale,.55)),22px))
    0 0
    calc(-0.5 * clamp(7px,calc(16px * var(--annotation-scale,.55)),22px))!important;
  font-size:clamp(5px,calc(9px * var(--annotation-scale,.55)),12px)!important;
  border-width:clamp(1px,calc(1.5px * var(--annotation-scale,.55)),2px)!important;
}

.planMarker .resizeHandle{
  width:clamp(7px,calc(14px * var(--annotation-scale,.55)),20px)!important;
  height:clamp(7px,calc(14px * var(--annotation-scale,.55)),20px)!important;
  margin:
    calc(-0.5 * clamp(7px,calc(14px * var(--annotation-scale,.55)),20px))
    0 0
    calc(-0.5 * clamp(7px,calc(14px * var(--annotation-scale,.55)),20px))!important;
  font-size:clamp(5px,calc(8px * var(--annotation-scale,.55)),10px)!important;
  border-width:clamp(1px,calc(1.5px * var(--annotation-scale,.55)),2px)!important;
}

/* Leader is intentionally subtle and scales with the same Symbol Size. */
.planMarker:not(.detection) .labelLeader{
  height:clamp(.55px,calc(1px * var(--annotation-scale,.55)),1.25px)!important;
  opacity:.72!important;
  background:#6d8790cc!important;
  box-shadow:none!important;
}

.planMarker:not(.detection) .labelLeader::after{
  border-top-width:clamp(2px,calc(3px * var(--annotation-scale,.55)),4px)!important;
  border-bottom-width:clamp(2px,calc(3px * var(--annotation-scale,.55)),4px)!important;
  border-left-width:clamp(3px,calc(5px * var(--annotation-scale,.55)),6px)!important;
  border-left-color:#6d8790!important;
}

.planMarker:not(.detection).selected .labelLeader{
  background:#8fb0bbdd!important;
  opacity:.9!important;
}
.planMarker:not(.detection).selected .labelLeader::after{
  border-left-color:#8fb0bb!important;
}

/* FOV keeps a readable technical line independent of Symbol Size.
   It stays visually behind the annotation group. */
.planMarker .cameraFov{
  z-index:1!important;
}
.planMarker .cameraFov path{
  stroke-width:1.35!important;
  vector-effect:non-scaling-stroke;
}

/* Device annotation itself stays above the FOV. */
.planMarker .markerCore{z-index:20!important}
.planMarker .label{z-index:30!important}
.planMarker .rotateHandle,
.planMarker .resizeHandle{z-index:35!important}

/* If the label is near the symbol there is no arrow at all; JS hides it. */
.planMarker .labelLeader[style*="display: none"]{
  pointer-events:none!important;
}

/* ===== v3.1 Connected Field Workflow + professional visual system ===== */
:root{
 --bg:#0b1220;--surface:#111b2e;--surface2:#162238;--line:#2a3953;--text:#e7edf7;--muted:#91a0b8;
 --primary:#3b82f6;--primary2:#2563eb;--accent:#8b5cf6;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--cyan:#06b6d4;--closed:#64748b;
}
body,#appShell>main{background:var(--bg)!important;color:var(--text)}
#appShell>aside,.topbar,.workflowRibbon,.planTopTools,.planLayerBar.v26,.planStatusBar{background:#0d1727!important;border-color:var(--line)!important}
.card,.relationCard,.itemCard,.deviceWorkspaceHero,.recognitionControlSection,.guidedWorkflow .workflowPhaseCard{background:var(--surface)!important;border-color:var(--line)!important}
button{background:#18304b;border-color:#35506f;color:#e8f1ff}button:hover{background:#21415f;border-color:#4d7197}.primaryAction,.goodBtn{background:var(--primary2)!important;border-color:#60a5fa!important}.trainPrimary{background:#6d4cc7!important;border-color:#a78bfa!important}.danger{background:#5a2028!important;border-color:#a53b49!important}
input,select,textarea{background:#0d1727!important;border-color:#34455f!important;color:var(--text)!important}
.statusBadge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;border:1px solid #40506a;background:#182236;color:#cbd5e1;font-size:var(--text-small);font-weight:var(--weight-semibold);white-space:nowrap}
.statusNew{--status-color:#3b82f6}.statusAssigned{--status-color:#06b6d4}.statusProgress{--status-color:#8b5cf6}.statusWaiting{--status-color:#f59e0b}.statusBlocked{--status-color:#ef4444}.statusCompleted{--status-color:#22c55e}.statusClosed{--status-color:#64748b}
.statusBadge.statusNew,.statusBadge.statusAssigned,.statusBadge.statusProgress,.statusBadge.statusWaiting,.statusBadge.statusBlocked,.statusBadge.statusCompleted,.statusBadge.statusClosed{border-color:var(--status-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--status-color) 30%,transparent)}
.planMarker.statusNew .markerCore,.planMarker.statusAssigned .markerCore,.planMarker.statusProgress .markerCore,.planMarker.statusWaiting .markerCore,.planMarker.statusBlocked .markerCore,.planMarker.statusCompleted .markerCore,.planMarker.statusClosed .markerCore{box-shadow:0 0 0 calc(3px * var(--annotation-scale,.55)) var(--status-color),0 2px 8px #0008!important}
.planMarker.statusBlocked .markerCore{animation:blockedPulse 1.5s ease-in-out infinite}@keyframes blockedPulse{50%{box-shadow:0 0 0 calc(6px * var(--annotation-scale,.55)) #ef444455,0 0 0 calc(3px * var(--annotation-scale,.55)) #ef4444!important}}
.connectedWorkspace{min-width:min(960px,88vw);max-width:100%;gap:8px}.connectedHero{padding:12px 14px}.connectedHero h3{font-size:var(--text-section)}.heroStatus{display:flex;align-items:center}.fieldQuickActions{display:grid;grid-template-columns:repeat(6,minmax(90px,1fr));gap:6px;padding:8px;background:#0d1727;border:1px solid var(--line);border-radius:9px}.fieldQuickActions button{min-height:38px;font-weight:var(--weight-semibold)}.warningAction{background:#4b3210!important;border-color:#9a6714!important}.contextStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}.contextStrip span{display:grid;gap:2px;padding:7px 9px;background:#0f1a2c;font-size:var(--text-small);color:#c5d0e2}.contextStrip b{font-size:var(--text-small);color:#7f91ab;text-transform:uppercase;letter-spacing:.08em}.compactQuickNav{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.compactQuickNav button{display:flex;justify-content:space-between}.compactQuickNav b{background:#263a55;border-radius:99px;padding:1px 5px}.connectedGrid{max-height:48vh}.evidenceGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.evidenceGrid a{display:grid;padding:7px;background:#0d1727;border:1px solid #2d405c;border-radius:6px;color:#dbeafe;text-decoration:none}.evidenceGrid small{color:#8191aa;font-size:var(--text-small);margin-top:2px}
@media(max-width:900px){.fieldQuickActions{grid-template-columns:repeat(3,1fr)}.contextStrip{grid-template-columns:1fr 1fr}.compactQuickNav{grid-template-columns:repeat(3,1fr)}}

/* ===== v3.1.1 field evidence + plan status repair ===== */

/* Work status needs to remain readable even on a 35-55% plan symbol. */
.planMarker.statusNew .markerCore,
.planMarker.statusAssigned .markerCore,
.planMarker.statusProgress .markerCore,
.planMarker.statusWaiting .markerCore,
.planMarker.statusCompleted .markerCore,
.planMarker.statusClosed .markerCore{
  box-shadow:
    0 0 0 clamp(3px,calc(5px * var(--annotation-scale,.55)),6px) var(--status-color),
    0 0 0 clamp(5px,calc(8px * var(--annotation-scale,.55)),9px) color-mix(in srgb,var(--status-color) 22%,transparent),
    0 2px 8px #0009!important;
}

/* Issue is a separate signal from installation progress. */
.planMarker .issueFlag{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(calc(15px * var(--annotation-scale,.55)),calc(-18px * var(--annotation-scale,.55)));
  width:clamp(9px,calc(15px * var(--annotation-scale,.55)),18px);
  height:clamp(9px,calc(15px * var(--annotation-scale,.55)),18px);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  border:2px solid #fff;
  font-size:clamp(6px,calc(9px * var(--annotation-scale,.55)),10px);
  font-weight:var(--weight-semibold);
  line-height:1;
  z-index:45;
  box-shadow:0 1px 5px #0009;
  pointer-events:none;
}

/* Hero can show work progress and unresolved issue at the same time. */
.heroStatus{gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Camera / upload chooser. */
.evidenceCaptureActions{
  display:grid!important;
  grid-template-columns:auto auto minmax(120px,1fr);
  gap:7px;
  align-items:center;
  padding:10px;
  border:1px solid #31445f;
  border-radius:9px;
  background:#101a2c;
}
.hiddenEvidenceInput{display:none!important}
.evidenceCaptureActions .cameraAction{
  background:#2563eb!important;
  border-color:#60a5fa!important;
  font-weight:var(--weight-semibold);
}
#evidenceFileName{
  color:#9fb0c8;
  font-size:var(--text-small);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.evidenceContextNote{
  padding:8px 10px;
  border-radius:7px;
  background:#111c2f;
  border:1px solid #283b56;
  color:#91a2bb;
  font-size:var(--text-small);
}
@media(max-width:650px){
  .evidenceCaptureActions{grid-template-columns:1fr 1fr}
  #evidenceFileName{grid-column:1/-1}
}

/* ===== v3.2 real blocker workflow + notifications ===== */

/* A blocker owns the visible plan state until resolved. */
.planMarker.statusBlocked .markerCore{
  box-shadow:
    0 0 0 clamp(4px,calc(6px * var(--annotation-scale,.55)),7px) #ef4444,
    0 0 0 clamp(7px,calc(11px * var(--annotation-scale,.55)),13px) #ef444433,
    0 2px 8px #000a!important;
}
.planMarker.statusCompleted .markerCore{
  box-shadow:
    0 0 0 clamp(4px,calc(6px * var(--annotation-scale,.55)),7px) #22c55e,
    0 0 0 clamp(7px,calc(10px * var(--annotation-scale,.55)),12px) #22c55e33,
    0 2px 8px #0009!important;
}

/* Blocked quick action is intentionally non-actionable. */
.fieldQuickActions .blockedAction,
.fieldQuickActions .blockedAction:disabled{
  background:#531d25!important;
  border-color:#ef4444!important;
  color:#fecaca!important;
  opacity:1!important;
  cursor:not-allowed!important;
}

/* Issue workspace */
.issueRelationCard{grid-column:1/-1}
.issueRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  padding:10px;
  border-top:1px solid #263a55;
  background:#121b2b;
}
.issueRow:first-of-type{border-top:0}
.issueRow:not(.resolved){box-shadow:inset 3px 0 #ef4444}
.issueRow.resolved{box-shadow:inset 3px 0 #22c55e;opacity:.82}
.issueIdentity{display:grid;gap:4px;min-width:0}
.issueIdentity>b{font-size:var(--text-body)}
.issueIdentity>small{display:flex;gap:5px;align-items:center;color:#9badc6}
.issueIdentity p{margin:2px 0;font-size:var(--text-small);color:#c4cee0}
.issueIdentity .issueResolution{color:#9fe0b6}
.blockerRule,.resolutionRule{
  padding:9px 11px;border-radius:8px;background:#231b20;border:1px solid #65313a;color:#d7b2b8;font-size:var(--text-small)}
.resolutionRule{background:#13221b;border-color:#285b3d;color:#a8d8b8}

/* Notification bell */
.notificationBell{
  position:relative!important;
  width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;
  display:grid!important;place-items:center!important;border-radius:10px!important;
  background:#132238!important;border:1px solid #324b6b!important
}
.notificationBell.hasUnread{border-color:#60a5fa!important;box-shadow:0 0 0 2px #2563eb33}
.notificationBell b{
  position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:99px;background:#ef4444;color:white;font-size:var(--text-small);border:2px solid #0b1220
}
.notificationList{display:grid;gap:7px;min-width:min(620px,80vw)}
.notificationTools{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;border-bottom:1px solid #2b3c56}
.notificationItem{
  width:100%!important;display:grid!important;grid-template-columns:10px minmax(0,1fr)!important;
  text-align:left!important;gap:8px!important;padding:10px!important;background:#121d2f!important;border:1px solid #2a3d58!important
}
.notificationItem.unread{background:#132642!important;border-color:#3c6693!important}
.notificationItem .notificationDot{width:7px;height:7px;border-radius:50%;background:#64748b;margin-top:4px}
.notificationItem.unread .notificationDot{background:#60a5fa;box-shadow:0 0 0 3px #60a5fa22}
.notificationItem div{display:grid;gap:3px}.notificationItem b{font-size:var(--text-small)}.notificationItem p{margin:0;font-size:var(--text-small);color:#b3bfd2}.notificationItem small{font-size:var(--text-small);color:#778ba8}

@media(max-width:700px){
  .issueRow{grid-template-columns:1fr}
  .notificationList{min-width:0}
}

/* ===== v3.2.1 in-app evidence viewer ===== */
.evidenceGrid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  gap:7px!important;
}
.evidenceCard{
  display:grid!important;
  grid-template-rows:92px auto!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-align:left!important;
  border:1px solid #2d405c!important;
  background:#0d1727!important;
  border-radius:8px!important;
}
.evidenceCard:hover{
  border-color:#5c82ad!important;
  background:#12223a!important;
}
.evidenceThumb{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:92px!important;
  overflow:hidden!important;
  background:#08111e!important;
  border-bottom:1px solid #2d405c!important;
}
.evidenceThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.evidenceThumb.pdf b,
.evidenceThumb.file b{
  font-size:var(--text-section)!important;
  color:#b8c8dc!important;
}
.evidenceCardText{
  display:grid!important;
  gap:3px!important;
  padding:7px 8px!important;
  min-width:0!important;
}
.evidenceCardText b{
  font-size:var(--text-small)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.evidenceCardText small{
  font-size:var(--text-small)!important;
  color:#8191aa!important;
}
.evidenceViewer{
  width:min(1100px,84vw)!important;
  height:min(76vh,820px)!important;
  display:grid!important;
  place-items:center!important;
  background:#07111d!important;
  border:1px solid #2c405d!important;
  border-radius:10px!important;
  overflow:hidden!important;
}
.evidenceViewer.imageViewer img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#050a11!important;
}
.evidenceViewer.pdfViewer iframe{
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:white!important;
}
.unsupportedViewer{
  align-content:center!important;
  gap:12px!important;
  padding:30px!important;
  text-align:center!important;
}
@media(max-width:700px){
  .evidenceViewer{
    width:calc(100vw - 34px)!important;
    height:72vh!important;
  }
  .evidenceGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ===== v3.2.2 global Device Workspace field/card polish ===== */

.deviceWorkspace.connectedWorkspace{
  display:grid!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
}
.connectedHero{
  padding:12px 14px!important;
  border-radius:10px!important;
  background:#0f1a2d!important;
  border:1px solid #314762!important;
}
.connectedHero h3{font-size:var(--text-section)!important;margin:2px 0!important}
.connectedHero small,.connectedHero span{color:#9eb0c8!important}

.fieldQuickActions{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:7px!important;
}
.fieldQuickActions button{
  min-width:0!important;
  min-height:38px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border-radius:8px!important;
}

.contextStrip{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid #2a3e5a!important;
  border-radius:9px!important;
  background:#101a2c!important;
}
.contextStrip span{
  min-width:0!important;
  padding:9px 10px!important;
}
.contextStrip span:not(:last-child){border-right:1px solid #2a3e5a!important}
.contextStrip b{
  display:block!important;
  margin-bottom:2px!important;
  font-size:var(--text-small)!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  color:#7187a5!important;
}

.compactQuickNav{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:6px!important;
}
.compactQuickNav button{
  min-width:0!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  border-radius:8px!important;
  padding:7px 9px!important;
}
.compactQuickNav button b{
  min-width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:#1c304b!important;
  color:#dbe9f7!important;
  font-size:var(--text-small)!important;
}

.connectedGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.connectedGrid .relationCard{
  min-width:0!important;
  min-height:190px!important;
  padding:12px!important;
  border:1px solid #2a3e5a!important;
  border-radius:10px!important;
  background:#111b2d!important;
  overflow:hidden!important;
}
.connectedGrid .relationCard:hover{
  border-color:#3d5878!important;
}
.connectedGrid .issueRelationCard{
  grid-column:1/-1!important;
  min-height:auto!important;
}
.relationHead{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:9px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #273b55!important;
}
.relationHead small{
  display:block!important;
  font-size:var(--text-small)!important;
  letter-spacing:.1em!important;
  color:#6f86a5!important;
  margin-bottom:2px!important;
}
.relationHead h3{
  margin:0!important;
  font-size:var(--text-body)!important;
}
.relationHead button{
  min-height:32px!important;
  border-radius:7px!important;
}

.deviceRelRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:9px 0!important;
  border-bottom:1px solid #22364e!important;
}
.deviceRelRow:last-child{border-bottom:0!important}
.deviceRelRow b{font-size:var(--text-small)!important}
.deviceRelRow small{display:block!important;margin-top:3px!important;color:#8fa2bd!important}

.deviceRelSummary{
  display:grid!important;
  gap:5px!important;
  align-content:start!important;
}
.deviceRelSummary>b{font-size:var(--text-body)!important}
.deviceRelSummary>span{font-size:var(--text-body)!important}
.deviceRelSummary>small{font-size:var(--text-small)!important;color:#879ab6!important}
.deviceRelSummary button{justify-self:start!important;margin-top:5px!important}

.connectedGrid .empty.mini{
  min-height:90px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  color:#71839e!important;
  font-size:var(--text-small)!important;
}

/* Evidence section */
.relationCard:has(.evidenceGrid){min-height:275px!important}
.evidenceGrid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr))!important;
  gap:10px!important;
  padding-top:2px!important;
}
.evidenceCard{
  position:relative!important;
  display:grid!important;
  grid-template-rows:125px auto!important;
  min-height:185px!important;
  width:100%!important;
  padding:0!important;
  border-radius:10px!important;
  overflow:hidden!important;
  text-align:left!important;
  background:#0b1524!important;
  border:1px solid #2b405d!important;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease!important;
}
.evidenceCard:hover{
  transform:translateY(-1px)!important;
  border-color:#5d83ad!important;
  box-shadow:0 7px 18px #0005!important;
}
.evidenceThumb{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:125px!important;
  overflow:hidden!important;
  background:#07101b!important;
  border-bottom:1px solid #2b405d!important;
}
.evidenceThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.evidenceTypePill{
  position:absolute!important;
  left:7px!important;
  bottom:7px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  background:#08111dde!important;
  border:1px solid #4b6584!important;
  color:#e2edf8!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
}
.evidenceCardText{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"title action" "time action"!important;
  align-items:center!important;
  gap:3px 8px!important;
  padding:9px 10px!important;
}
.evidenceCardText b{
  grid-area:title!important;
  font-size:var(--text-small)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.evidenceCardText small{
  grid-area:time!important;
  font-size:var(--text-small)!important;
  color:#8598b4!important;
}
.evidenceCardText em{
  grid-area:action!important;
  font-style:normal!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  color:#8fc6ff!important;
}

/* Make all modal form fields consistent and easier to scan */
.formGrid label{
  display:grid!important;
  gap:5px!important;
  font-size:var(--text-small)!important;
  color:#91a4bf!important;
}
.formGrid input,
.formGrid select,
.formGrid textarea{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  border-radius:8px!important;
  min-height:38px!important;
  padding:8px 10px!important;
  background:#0c1626!important;
  border:1px solid #314661!important;
}
.formGrid textarea{min-height:90px!important;resize:vertical!important}
.formGrid input:focus,
.formGrid select:focus,
.formGrid textarea:focus{
  outline:none!important;
  border-color:#5b8fca!important;
  box-shadow:0 0 0 2px #2563eb22!important;
}

/* Responsive workspace */
@media(max-width:900px){
  .fieldQuickActions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .contextStrip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .contextStrip span:nth-child(2){border-right:0!important}
  .compactQuickNav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .connectedGrid{grid-template-columns:1fr!important}
  .connectedGrid .issueRelationCard{grid-column:1!important}
}
@media(max-width:600px){
  .fieldQuickActions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .contextStrip{grid-template-columns:1fr!important}
  .contextStrip span{border-right:0!important;border-bottom:1px solid #2a3e5a!important}
  .contextStrip span:last-child{border-bottom:0!important}
  .compactQuickNav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .evidenceGrid{grid-template-columns:1fr!important}
}

/* ===== v3.3 global evidence + one-click plan popup + symbol lock ===== */
#plansBody{position:relative!important}
.planSymbolPopup{position:absolute!important;z-index:80!important;width:235px!important;padding:10px!important;border:1px solid #476384!important;border-radius:10px!important;background:#0c1727f5!important;box-shadow:0 12px 34px #0009,0 0 0 1px #6da6e01a inset!important;backdrop-filter:blur(8px)!important}
.planSymbolPopupHead{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:8px!important;padding-bottom:8px!important;border-bottom:1px solid #2a3d56!important}
.planSymbolPopupHead div{display:grid!important;gap:2px!important}.planSymbolPopupHead b{font-size:var(--text-body)!important}.planSymbolPopupHead small{font-size:var(--text-small)!important;color:#8ea2bd!important}.planSymbolPopupHead>button{width:25px!important;height:25px!important;padding:0!important;min-width:25px!important}
.planSymbolPopupActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;padding-top:8px!important}.planSymbolPopupActions button{min-height:32px!important;font-size:var(--text-small)!important}
.planPopupHint{display:block!important;padding-top:7px!important;color:#8396b1!important;line-height:1.35!important}.lockBtn{border-color:#4f6b8d!important;background:#17253a!important;color:#dbe8f6!important}.unlockBtn{border-color:#e4a11b!important;background:#402c09!important;color:#ffd987!important}
.markerLockBadge{position:absolute!important;right:calc(-16px * var(--annotation-scale,.55))!important;bottom:calc(-16px * var(--annotation-scale,.55))!important;width:calc(20px * var(--annotation-scale,.55))!important;height:calc(20px * var(--annotation-scale,.55))!important;min-width:11px!important;min-height:11px!important;display:grid!important;place-items:center!important;border-radius:999px!important;background:#102033!important;border:1px solid #6786aa!important;font-size:calc(9px * var(--annotation-scale,.55))!important;box-shadow:0 2px 5px #0008!important;pointer-events:none!important}
.planMarker.markerLocked .rotateHandle,.planMarker.markerLocked .resizeHandle{display:none!important}.planMarker.markerLocked .markerCore,.planMarker.markerLocked .draggableLabel{cursor:pointer!important}

.entityEvidenceHead{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important;padding:0 0 10px!important;border-bottom:1px solid #293d57!important;margin-bottom:10px!important}
.globalEvidenceGrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:10px!important;width:min(950px,78vw)!important;max-height:65vh!important;overflow:auto!important;padding-right:4px!important}

#modal .evidencePreviewOverlay{position:absolute!important;inset:0!important;z-index:999!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;background:#07111df7!important;border-radius:inherit!important;overflow:hidden!important}
.evidencePreviewTop{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;border-bottom:1px solid #2d435f!important;background:#0d1b2c!important}
.evidencePreviewTop button{min-height:32px!important}.evidencePreviewTop b{font-size:var(--text-small)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.evidencePreviewOverlay .evidenceViewer{width:100%!important;height:100%!important;border:0!important;border-radius:0!important}

@media(max-width:700px){.planSymbolPopup{width:205px!important}.globalEvidenceGrid{width:calc(100vw - 54px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){.globalEvidenceGrid{grid-template-columns:1fr!important}}

/* ===== v3.3.2 clean symbol lock indicator ===== */
.markerLockBadge{
  right:calc(-7px * var(--annotation-scale,.55))!important;
  bottom:calc(-7px * var(--annotation-scale,.55))!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:clamp(7px,calc(11px * var(--annotation-scale,.55)),11px)!important;
  line-height:1!important;
  filter:drop-shadow(0 1px 1px #000b)!important;
  pointer-events:none!important;
}

/* ===== v3.3.3 lock icon attached to marker core ===== */
.planMarker .markerCore{
  position:relative!important;
}
.planMarker .markerCore .markerLockBadge{
  position:absolute!important;
  right:-1px!important;
  bottom:-1px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:7px!important;
  line-height:1!important;
  transform:none!important;
  filter:drop-shadow(0 1px 1px #000b)!important;
  pointer-events:none!important;
  z-index:5!important;
}

/* ===== v3.3.5 full-image viewer, independent from modal size ===== */
body > .evidencePreviewOverlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:100000!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  background:#050b13f8!important;
  overflow:hidden!important;
}

body > .evidencePreviewOverlay .evidencePreviewTop{
  min-height:52px!important;
  padding:9px 14px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  border-bottom:1px solid #2d435f!important;
  background:#0d1b2c!important;
}

body > .evidencePreviewOverlay .evidenceViewer{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  box-sizing:border-box!important;
  padding:14px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  border:0!important;
  border-radius:0!important;
  background:#050b13!important;
}

body > .evidencePreviewOverlay .evidenceViewer.imageViewer img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:auto!important;
  flex:0 1 auto!important;
  background:#050b13!important;
}

body > .evidencePreviewOverlay .evidenceViewer.pdfViewer iframe{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
}

@media(max-width:700px){
  body > .evidencePreviewOverlay .evidenceViewer{
    padding:6px!important;
  }
}

/* ===== v3.3.6 responsive auto-sizing ===== */

/*
  Fluid sizing: adapts automatically to the actual browser/device viewport.
  Desktop remains spacious; tablets and phones progressively compact/reflow.
*/
:root{
  --ui-gap:clamp(6px,0.8vw,12px);
  --ui-pad:clamp(8px,1vw,16px);
  --ui-font:clamp(12px,0.78vw,14px);
  --ui-small:clamp(10px,0.66vw,12px);
  --ui-button-h:clamp(36px,4.2vh,42px);
}

html,body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-size:var(--ui-font);
}

.content{
  min-width:0!important;
  padding:clamp(8px,1.2vw,18px)!important;
}

.card,.itemCard,.relationCard{
  min-width:0!important;
}

button,
input,
select,
textarea{
  max-width:100%;
  box-sizing:border-box;
}

button{
  min-height:var(--ui-button-h);
}

img,video,canvas,iframe{
  max-width:100%;
}

/* Tables can scroll horizontally instead of forcing the whole page wider. */
.view .card:has(table),
.moduleTableWrap{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
table{
  min-width:max-content;
}

/* Fluid generic forms */
.formGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.formGrid label{
  min-width:0!important;
}

/* Device workspace uses available width automatically. */
.deviceWorkspace.connectedWorkspace,
.deviceWorkspace{
  width:min(100%,1200px)!important;
  max-width:100%!important;
  min-width:0!important;
}
.connectedGrid{
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important;
}
.fieldQuickActions{
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
}
.contextStrip{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
}
.compactQuickNav{
  grid-template-columns:repeat(auto-fit,minmax(115px,1fr))!important;
}
.evidenceGrid,
.globalEvidenceGrid{
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))!important;
}

/* Modal automatically fits the device. */
dialog,
#modal{
  width:min(980px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  margin:auto!important;
}
#modalForm{
  max-height:calc(100dvh - 24px)!important;
}
#modalBody{
  min-width:0!important;
  max-width:100%!important;
}

/* Full evidence viewer always fits current screen orientation. */
body > .evidencePreviewOverlay{
  width:100vw!important;
  height:100dvh!important;
}
body > .evidencePreviewOverlay .evidenceViewer{
  padding:clamp(6px,1.2vw,16px)!important;
}
body > .evidencePreviewOverlay .evidenceViewer.imageViewer img{
  max-width:100%!important;
  max-height:100%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Plan Studio adapts without changing the plan's own coordinate system. */
.planWorkspace{
  min-width:0!important;
}
.planCanvasWrap{
  min-width:0!important;
  width:100%!important;
}

/* Tablet */
@media(max-width:1000px){
  .formGrid{
    grid-template-columns:1fr!important;
  }
  .formGrid .full{
    grid-column:auto!important;
  }

  .moduleManageBar,
  .pageHead{
    flex-wrap:wrap!important;
  }

  .moduleSearch{
    min-width:min(100%,260px)!important;
    flex:1 1 240px!important;
  }

  .moduleSelectionTools{
    flex:1 1 100%!important;
  }

  .planWorkspace{
    grid-template-columns:56px minmax(0,1fr)!important;
  }
  .planInspector{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    position:relative!important;
  }
}

/* Phone */
@media(max-width:700px){
  :root{
    --ui-font:14px;
    --ui-small:12px;
    --ui-button-h:42px;
  }

  /* Avoid browser auto-zoom on form focus. */
  input,select,textarea{
    font-size:var(--text-section)!important;
  }

  .content{
    padding:8px!important;
  }

  .pageHead{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:8px!important;
  }

  .headActions,
  .toolbar,
  .quickActions,
  .rowActions,
  .moduleSelectionTools{
    width:100%!important;
    gap:6px!important;
  }

  .headActions button,
  .toolbar button,
  .quickActions button{
    flex:1 1 auto!important;
  }

  .fieldQuickActions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .contextStrip{
    grid-template-columns:1fr!important;
  }

  .compactQuickNav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .connectedGrid{
    grid-template-columns:1fr!important;
  }

  .connectedGrid .issueRelationCard{
    grid-column:auto!important;
  }

  .evidenceGrid,
  .globalEvidenceGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }

  dialog,
  #modal{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    border-radius:10px!important;
  }

  #modalForm{
    max-height:calc(100dvh - 12px)!important;
  }

  .modalHead,.modalFoot{
    padding:10px!important;
  }

  #modalBody{
    padding:8px 10px!important;
  }

  .planWorkspace{
    grid-template-columns:1fr!important;
    overflow:visible!important;
  }

  .planRail{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:flex!important;
    flex-direction:row!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    width:100%!important;
  }

  .planRail button{
    flex:0 0 auto!important;
    min-width:58px!important;
  }

  .planInspector{
    display:block!important;
    width:100%!important;
  }

  .planCanvasWrap{
    height:65dvh!important;
    min-height:420px!important;
    padding:4px!important;
  }

  .planPageSelector{
    width:100%!important;
    min-width:0!important;
  }

  .planPageSelector select{
    min-width:0!important;
    flex:1!important;
  }

  .planSymbolPopup{
    width:min(220px,calc(100vw - 30px))!important;
  }

  body > .evidencePreviewOverlay .evidencePreviewTop{
    padding:8px!important;
  }
}

/* Small phones */
@media(max-width:430px){
  .fieldQuickActions,
  .compactQuickNav,
  .evidenceGrid,
  .globalEvidenceGrid{
    grid-template-columns:1fr!important;
  }

  .moduleSelectionTools button{
    flex:1 1 calc(50% - 6px)!important;
  }

  .deviceRelRow{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }

  .deviceRelRow .rowActionGroup{
    width:100%!important;
  }

  .deviceRelRow .rowActionGroup button{
    flex:1!important;
  }
}

/* Landscape phones: preserve usable vertical room. */
@media(max-height:520px) and (orientation:landscape){
  dialog,#modal{
    max-height:calc(100dvh - 8px)!important;
  }
  #modalForm{
    max-height:calc(100dvh - 8px)!important;
  }
  .planCanvasWrap{
    height:72dvh!important;
    min-height:280px!important;
  }
  body > .evidencePreviewOverlay .evidencePreviewTop{
    min-height:42px!important;
  }
}

/* ===== v3.3.7 evidence thumbnail + fullscreen layering fix ===== */

/* Evidence list should look like a gallery of compact cards, not one giant image. */
.globalEvidenceGrid,
.evidenceGrid{
  grid-template-columns:repeat(auto-fill,minmax(170px,220px))!important;
  justify-content:start!important;
  align-items:start!important;
  gap:10px!important;
}

.globalEvidenceGrid .evidenceCard,
.evidenceGrid .evidenceCard{
  width:100%!important;
  max-width:220px!important;
  min-height:0!important;
  grid-template-rows:110px auto!important;
}

.globalEvidenceGrid .evidenceThumb,
.evidenceGrid .evidenceThumb{
  height:110px!important;
  min-height:110px!important;
  max-height:110px!important;
}

.globalEvidenceGrid .evidenceThumb img,
.evidenceGrid .evidenceThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Evidence modal itself should not become unnecessarily huge. */
#modal:has(.globalEvidenceGrid){
  width:min(760px,calc(100vw - 24px))!important;
}
#modal:has(.globalEvidenceGrid) #modalBody{
  max-height:70dvh!important;
}

/*
  Full viewer must live above the dialog AND its ::backdrop.
  A normal dialog is in the browser top layer, so a body-level fixed div can
  still appear behind it. Promote the viewer by using its own full-screen dialog.
*/
dialog#evidenceViewerDialog{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#050b13!important;
  color:#eaf2fb!important;
  overflow:hidden!important;
}
dialog#evidenceViewerDialog::backdrop{
  background:#02060bee!important;
}
dialog#evidenceViewerDialog .evidencePreviewOverlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  background:#050b13!important;
}
dialog#evidenceViewerDialog .evidencePreviewTop{
  min-height:50px!important;
  padding:8px 12px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  border-bottom:1px solid #2d435f!important;
  background:#0d1b2c!important;
}
dialog#evidenceViewerDialog .evidenceViewer{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:10px!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  background:#050b13!important;
}
dialog#evidenceViewerDialog .evidenceViewer.imageViewer img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}
dialog#evidenceViewerDialog .evidenceViewer.pdfViewer iframe{
  width:100%!important;
  height:100%!important;
  border:0!important;
}

@media(max-width:700px){
  .globalEvidenceGrid,
  .evidenceGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .globalEvidenceGrid .evidenceCard,
  .evidenceGrid .evidenceCard{
    max-width:none!important;
    grid-template-rows:95px auto!important;
  }
  .globalEvidenceGrid .evidenceThumb,
  .evidenceGrid .evidenceThumb{
    height:95px!important;
    min-height:95px!important;
    max-height:95px!important;
  }
  dialog#evidenceViewerDialog .evidenceViewer{
    padding:4px!important;
  }
}
@media(max-width:420px){
  .globalEvidenceGrid,
  .evidenceGrid{
    grid-template-columns:1fr 1fr!important;
  }
}

/* ===== v3.4.0 mobile-first Plan Studio ===== */
.mobilePlanTopBar,.mobilePlanDock,.mobileToolsSheet{display:none}

@media(max-width:1100px){
  body.mobilePlanStudio{overflow:hidden!important;overscroll-behavior:none!important}
  body.mobilePlanStudio #appShell{display:block!important;min-height:100dvh!important}
  body.mobilePlanStudio #appShell>aside,
  body.mobilePlanStudio main>header,
  body.mobilePlanStudio #workflowRibbon,
  body.mobilePlanStudio #plans>.pageHead{display:none!important}

  body.mobilePlanStudio main,
  body.mobilePlanStudio .content,
  body.mobilePlanStudio #plans,
  body.mobilePlanStudio #plansBody{
    width:100vw!important;max-width:100vw!important;height:100dvh!important;min-height:0!important;
    margin:0!important;padding:0!important;overflow:hidden!important
  }

  body.mobilePlanStudio .desktopPlanControls{display:none!important}

  .mobilePlanTopBar{
    height:48px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 52px!important;
    align-items:center!important;gap:6px!important;padding:5px 7px!important;box-sizing:border-box!important;
    background:#0c1727!important;border-bottom:1px solid #2a3f5a!important;position:relative!important;z-index:150!important
  }
  .mobilePlanTopBar button{min-height:38px!important;height:38px!important;padding:5px 8px!important}
  .mobilePlanTopBar select{width:100%!important;min-width:0!important;height:38px!important;font-size:var(--text-body)!important}

  body.mobilePlanStudio .planWorkspace{
    display:block!important;width:100vw!important;height:calc(100dvh - 48px)!important;min-height:0!important;
    overflow:hidden!important;position:relative!important
  }
  body.mobilePlanStudio .planCanvasWrap{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:auto!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:none!important;background:#050b12!important
  }
  body.mobilePlanStudio #planCanvasSizer{min-width:100%!important;min-height:100%!important}

  body.mobilePlanStudio .planWorkspace>.planRail,
  body.mobilePlanStudio .planPanelHandle{display:none!important}

  body.mobilePlanStudio .planInspector{
    display:block!important;position:fixed!important;left:8px!important;right:8px!important;bottom:62px!important;top:auto!important;
    width:auto!important;min-width:0!important;max-width:none!important;height:min(58dvh,560px)!important;max-height:min(58dvh,560px)!important;
    padding:8px!important;overflow:auto!important;transform:translateY(calc(100% + 85px))!important;
    transition:transform .18s ease!important;background:#0b1625f7!important;border:1px solid #38516e!important;border-radius:14px!important;
    box-shadow:0 18px 50px #000c!important;z-index:220!important;backdrop-filter:blur(10px)!important
  }
  body.mobilePlanStudio .planInspector.mobileSheetOpen{transform:translateY(0)!important}
  body.mobilePlanStudio .planInspector .card{margin-bottom:8px!important}

  .mobileToolsSheet{
    display:block!important;position:fixed!important;left:8px!important;right:8px!important;bottom:62px!important;
    max-height:55dvh!important;padding:8px!important;background:#0b1625f7!important;border:1px solid #38516e!important;border-radius:14px!important;
    box-shadow:0 18px 50px #000c!important;z-index:221!important;transform:translateY(calc(100% + 85px))!important;
    transition:transform .18s ease!important;overflow:auto!important;backdrop-filter:blur(10px)!important
  }
  .mobileToolsSheet.mobileSheetOpen{transform:translateY(0)!important}
  .mobileSheetHead{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:2px 2px 8px!important;border-bottom:1px solid #2c405a!important;margin-bottom:7px!important}
  .mobileToolsSheet .planRail{
    display:grid!important;position:static!important;width:100%!important;height:auto!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;padding:0!important;overflow:visible!important;border:0!important;background:transparent!important
  }
  .mobileToolsSheet .planRail button{min-width:0!important;min-height:52px!important;font-size:var(--text-small)!important}

  .mobilePlanDock{
    display:grid!important;grid-template-columns:56px 1fr 56px 1fr 1.25fr!important;gap:5px!important;
    position:fixed!important;left:7px!important;right:7px!important;bottom:7px!important;z-index:230!important;
    padding:5px!important;border:1px solid #38516e!important;border-radius:13px!important;background:#0c1727ee!important;
    box-shadow:0 8px 28px #000b!important;backdrop-filter:blur(10px)!important
  }
  .mobilePlanDock button{height:44px!important;min-height:44px!important;padding:5px!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
  .mobilePlanDock button.active{background:#245b82!important;border-color:#6aa7d5!important}

  body.mobilePlanStudio .planSymbolPopup{
    position:fixed!important;left:10px!important;right:10px!important;bottom:64px!important;top:auto!important;
    width:auto!important;max-width:none!important;z-index:240!important
  }
  body.mobilePlanStudio .planSymbolPopupActions button{min-height:42px!important;font-size:var(--text-body)!important}
  body.mobilePlanStudio .planStatusBar{display:none!important}
  body.mobilePlanStudio .recognitionQueue{margin-top:7px!important}

  .mobilePlanMenuGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .mobilePlanMenuGrid button{min-height:58px!important}
}

@media(max-width:430px){
  .mobileToolsSheet .planRail{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .mobilePlanDock{grid-template-columns:50px 1fr 50px 1fr 1.2fr!important}
}

@media(max-height:520px) and (orientation:landscape){
  body.mobilePlanStudio .planInspector,.mobileToolsSheet{max-height:62dvh!important;height:62dvh!important}
}

/* ===== v3.5.2 device task roll-up / workspace polish ===== */
.taskRelationCard{display:flex;flex-direction:column;gap:8px}
.taskRelationCard .relationHead{margin-bottom:0}
.taskCountText{font-size:var(--text-body);font-weight:var(--weight-semibold);color:#8fa9ba;margin-left:6px}
.taskRollup{
  background:#0a1a24;border:1px solid #203c4b;border-radius:10px;padding:9px 10px;margin:0 0 2px
}
.taskRollup>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--text-body);color:#9bb2c0}
.taskProgressTrack{height:7px;background:#07141c;border-radius:999px;overflow:hidden;margin-top:7px;border:1px solid #193442}
.taskProgressTrack i{display:block;height:100%;background:linear-gradient(90deg,#2878b7,#37b87a);border-radius:999px}
.deviceTaskItem{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  background:#0b1d28;border:1px solid #203d4c;border-radius:10px;padding:10px 11px
}
.deviceTaskItem.done{background:#0a201d;border-color:#24544a}
.deviceTaskMain{min-width:0;display:flex;flex-direction:column;gap:5px}
.deviceTaskMain b{font-size:var(--text-body);white-space:normal;overflow-wrap:anywhere}
.deviceTaskMain small{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.deviceTaskActions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.deviceTaskActions button{min-height:34px;padding:6px 10px}
.connectedWorkspace .issueRelationCard{grid-column:1/-1}
.connectedWorkspace .taskRelationCard{min-height:0}
@media(max-width:760px){
  .deviceTaskItem{grid-template-columns:1fr}
  .deviceTaskActions{justify-content:flex-start}
}

/* ===== v3.5.3 task list visibility fix ===== */
.connectedWorkspace .taskRelationCard{
  grid-column:1/-1;
  align-self:start;
  overflow:visible!important;
}
.taskRelationCard .deviceTaskList{
  display:grid;
  gap:8px;
  max-height:270px;
  overflow:auto;
  padding-right:3px;
}
.taskRelationCard .deviceTaskList::-webkit-scrollbar{width:7px}
.taskRelationCard .deviceTaskList::-webkit-scrollbar-thumb{background:#315268;border-radius:999px}
.taskRelationCard .deviceTaskList::-webkit-scrollbar-track{background:#0a1720}
.deviceTaskItem{min-height:58px}
@media(max-width:760px){
  .taskRelationCard .deviceTaskList{max-height:42vh}
}

/* ===== v3.5.4 compact task card with dedicated scroll ===== */
.connectedWorkspace .taskRelationCard{
  grid-column:auto!important;
  align-self:stretch!important;
  overflow:hidden!important;
  min-height:0!important;
  max-height:260px!important;
}

.taskRelationCard .taskRollup{
  flex:0 0 auto;
}

.deviceTaskListWrap{
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:4px;
  overflow:hidden;
}

.taskRelationCard .deviceTaskList{
  display:grid!important;
  gap:7px!important;
  max-height:132px!important;
  min-height:0!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  padding-right:5px!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain;
}

.taskRelationCard .deviceTaskList::-webkit-scrollbar{
  width:8px!important;
}
.taskRelationCard .deviceTaskList::-webkit-scrollbar-thumb{
  background:#3c6279!important;
  border-radius:999px!important;
}
.taskRelationCard .deviceTaskList::-webkit-scrollbar-track{
  background:#07141c!important;
  border-radius:999px!important;
}

.taskScrollHint{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:16px;
  padding:0 7px;
  font-size:var(--text-small);
  color:#7f9eae;
  letter-spacing:.03em;
}

.deviceTaskItem{
  min-height:56px!important;
  padding:8px 9px!important;
}
.deviceTaskActions button{
  min-height:31px!important;
  padding:5px 8px!important;
}

@media(max-width:760px){
  .connectedWorkspace .taskRelationCard{
    max-height:300px!important;
  }
  .taskRelationCard .deviceTaskList{
    max-height:156px!important;
  }
}

/* ===== v3.5.5 compact task sizing cleanup ===== */
.connectedWorkspace .taskRelationCard{
  max-height:220px!important;
  padding:10px!important;
  gap:6px!important;
}

.taskRelationCard .relationHead{
  min-height:34px!important;
  padding-bottom:5px!important;
  border-bottom:1px solid #203846!important;
}

.taskRelationCard .relationHead h3{
  margin:1px 0 0!important;
}

.taskRelationCard .taskRollup{
  margin:0!important;
  padding:6px 8px!important;
  border-radius:8px!important;
  min-height:0!important;
}

.taskRollup>div:first-child{
  font-size:var(--text-small)!important;
  line-height:1.15!important;
}

.taskProgressTrack{
  height:4px!important;
  margin-top:5px!important;
  border-width:1px!important;
}

.deviceTaskListWrap{
  min-height:0!important;
  gap:2px!important;
}

.taskRelationCard .deviceTaskList{
  max-height:92px!important;
  padding-right:4px!important;
  gap:5px!important;
}

.taskRelationCard .deviceTaskList::-webkit-scrollbar{
  width:6px!important;
}

.deviceTaskItem{
  min-height:42px!important;
  padding:6px 7px!important;
  gap:6px!important;
  border-radius:8px!important;
}

.deviceTaskMain{
  gap:3px!important;
}

.deviceTaskMain b{
  font-size:var(--text-small)!important;
  line-height:1.2!important;
}

.deviceTaskMain small{
  font-size:var(--text-small)!important;
}

.deviceTaskActions{
  gap:4px!important;
}

.deviceTaskActions button{
  min-height:27px!important;
  padding:3px 7px!important;
  font-size:var(--text-small)!important;
}

.taskScrollHint{
  min-height:12px!important;
  padding:0 4px!important;
  font-size:var(--text-small)!important;
  line-height:1!important;
}

@media(max-width:760px){
  .connectedWorkspace .taskRelationCard{
    max-height:240px!important;
  }
  .taskRelationCard .deviceTaskList{
    max-height:108px!important;
  }
}

/* ===== v3.5.6 fluid / responsive task-card sizing ===== */
.taskRelationCard{
  --task-font-xs:clamp(7px,.62vw,8px);
  --task-font-sm:clamp(8px,.72vw,9px);
  --task-font-md:clamp(9px,.82vw,10px);
  --task-title-size:clamp(10px,.94vw,12px);
  --task-gap:clamp(4px,.55vw,6px);
  --task-pad-x:clamp(7px,.7vw,9px);
  --task-pad-y:clamp(5px,.55vw,7px);
}

.connectedWorkspace .taskRelationCard{
  max-height:210px!important;
  padding:8px!important;
  gap:var(--task-gap)!important;
}

.taskRelationCard .relationHead{
  min-height:28px!important;
  padding-bottom:4px!important;
  align-items:center!important;
}

.taskRelationCard .relationHead>div{
  min-width:0!important;
}

.taskRelationCard .relationHead small{
  font-size:var(--task-font-xs)!important;
  line-height:1!important;
}

.taskRelationCard .relationHead h3{
  font-size:var(--task-title-size)!important;
  line-height:1.1!important;
  margin:0!important;
}

.taskRelationCard .taskCountText{
  font-size:var(--task-font-sm)!important;
}

.taskRelationCard .relationHead>button{
  min-height:26px!important;
  height:26px!important;
  padding:2px 9px!important;
  font-size:var(--task-font-sm)!important;
  border-radius:7px!important;
}

.taskRelationCard .taskRollup{
  padding:5px 7px!important;
}

.taskRollup>div:first-child{
  font-size:var(--task-font-sm)!important;
}

.taskProgressTrack{
  height:3px!important;
  margin-top:4px!important;
}

.taskRelationCard .deviceTaskList{
  max-height:90px!important;
  gap:var(--task-gap)!important;
}

.deviceTaskItem{
  min-height:40px!important;
  padding:var(--task-pad-y) var(--task-pad-x)!important;
}

.deviceTaskMain b{
  font-size:var(--task-font-md)!important;
}

.deviceTaskMain small{
  font-size:var(--task-font-xs)!important;
}

.deviceTaskActions button{
  min-height:25px!important;
  height:25px!important;
  padding:2px 7px!important;
  font-size:var(--task-font-sm)!important;
  border-radius:6px!important;
}

.taskScrollHint{
  font-size:var(--task-font-xs)!important;
}

@media(max-width:900px){
  .taskRelationCard{
    --task-font-xs:7px;
    --task-font-sm:8px;
    --task-font-md:9px;
    --task-title-size:10px;
  }
}

@media(max-width:600px){
  .taskRelationCard{
    --task-font-xs:7px;
    --task-font-sm:8px;
    --task-font-md:9px;
    --task-title-size:10px;
  }
  .taskRelationCard .relationHead>button{
    min-width:52px!important;
  }
}

/* ===== v3.5.7 auto-sizing task card ===== */
/* 1-3 tasks: card grows just enough, no scrollbar.
   4+ tasks: card caps and internal scrolling activates. */

.connectedWorkspace .taskRelationCard{
  max-height:none!important;
  overflow:hidden!important;
}

.taskRelationCard .deviceTaskList{
  max-height:none!important;
  overflow-y:visible!important;
  scrollbar-gutter:auto!important;
  padding-right:0!important;
}

.taskRelationCard .taskScrollHint{
  display:none!important;
}

/* Keep the header/progress compact. */
.taskRelationCard .taskRollup{
  padding:4px 7px!important;
}
.taskProgressTrack{
  height:3px!important;
  margin-top:4px!important;
}

/* 1 task */
.connectedWorkspace .taskRelationCard.taskCardCount1{
  min-height:0!important;
}
.taskCount1 .deviceTaskList{
  display:grid!important;
  gap:5px!important;
}

/* 2 tasks */
.connectedWorkspace .taskRelationCard.taskCardCount2{
  min-height:0!important;
}
.taskCount2 .deviceTaskList{
  display:grid!important;
  gap:5px!important;
}

/* 3 tasks */
.connectedWorkspace .taskRelationCard.taskCardCount3{
  min-height:0!important;
}
.taskCount3 .deviceTaskList{
  display:grid!important;
  gap:5px!important;
}

/* 4+ tasks: cap the card and enable internal scroll only here. */
.connectedWorkspace .taskRelationCard.taskCardScrollable{
  max-height:270px!important;
}
.taskScrollable .deviceTaskList{
  max-height:142px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain;
}
.taskScrollable .taskScrollHint{
  display:flex!important;
}
.taskScrollable .deviceTaskList::-webkit-scrollbar{
  width:6px!important;
}
.taskScrollable .deviceTaskList::-webkit-scrollbar-thumb{
  background:#3c6279!important;
  border-radius:999px!important;
}
.taskScrollable .deviceTaskList::-webkit-scrollbar-track{
  background:#07141c!important;
  border-radius:999px!important;
}

/* Slightly tighter task rows to keep 2-3 tasks visually balanced. */
.deviceTaskItem{
  min-height:38px!important;
  padding:5px 7px!important;
}
.deviceTaskActions button{
  min-height:24px!important;
  height:24px!important;
  padding:2px 6px!important;
}

@media(max-width:760px){
  .connectedWorkspace .taskRelationCard.taskCardScrollable{
    max-height:300px!important;
  }
  .taskScrollable .deviceTaskList{
    max-height:165px!important;
  }
}

/* ===== v3.5.8 adaptive task-card growth ===== */
/* Let the Tasks card actually grow with the task count.
   1-4 tasks are fully visible. 5+ uses scrolling. */

.connectedWorkspace .taskRelationCard{
  max-height:none!important;
}

.taskRelationCard .deviceTaskList{
  max-height:none!important;
  overflow-y:visible!important;
}

/* Natural task-count based growth */
.taskCount1 .deviceTaskList{max-height:none!important}
.taskCount2 .deviceTaskList{max-height:none!important}
.taskCount3 .deviceTaskList{max-height:none!important}
.taskCount4 .deviceTaskList{max-height:none!important}

/* 4 tasks should still be fully visible, not clipped into a 2-row viewport */
.connectedWorkspace .taskRelationCard.taskCardCount4{
  max-height:none!important;
}

/* Scroll only when 5 or more tasks exist */
.connectedWorkspace .taskRelationCard.taskCardScrollable{
  max-height:330px!important;
}
.taskScrollable .deviceTaskList{
  max-height:205px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  scrollbar-gutter:stable!important;
}
.taskScrollable .taskScrollHint{
  display:flex!important;
}

/* Slightly increase on phone so 4 rows remain comfortable */
@media(max-width:760px){
  .connectedWorkspace .taskRelationCard.taskCardScrollable{
    max-height:360px!important;
  }
  .taskScrollable .deviceTaskList{
    max-height:230px!important;
  }
}

/* ===== v3.5.9 unified Device Workspace card system ===== */
.connectedWorkspace{
  --ws-card-bg:#0c1a2b;
  --ws-card-border:#263f58;
  --ws-card-radius:10px;
  --ws-card-pad:8px;
  --ws-head-h:30px;
  --ws-label:clamp(7px,.62vw,8px);
  --ws-title:clamp(10px,.9vw,12px);
  --ws-body:clamp(8px,.72vw,10px);
  --ws-btn:clamp(8px,.7vw,9px);
  --ws-row-gap:6px;
}

/* Every relationship card uses the same proportions. */
.connectedWorkspace .relationCard{
  background:var(--ws-card-bg)!important;
  border:1px solid var(--ws-card-border)!important;
  border-radius:var(--ws-card-radius)!important;
  padding:var(--ws-card-pad)!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.connectedWorkspace .relationHead{
  min-height:var(--ws-head-h)!important;
  margin:0 0 6px!important;
  padding:0 0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  border-bottom:1px solid #243a50!important;
}

.connectedWorkspace .relationHead>div{
  min-width:0!important;
}

.connectedWorkspace .relationHead small{
  display:block!important;
  font-size:var(--ws-label)!important;
  line-height:1!important;
  letter-spacing:.09em!important;
  color:#7d97aa!important;
}

.connectedWorkspace .relationHead h3{
  margin:2px 0 0!important;
  font-size:var(--ws-title)!important;
  line-height:1.05!important;
  color:#edf5fb!important;
}

.connectedWorkspace .relationHead>button,
.connectedWorkspace .deviceRelSummary button{
  min-height:26px!important;
  height:26px!important;
  padding:3px 8px!important;
  font-size:var(--ws-btn)!important;
  border-radius:7px!important;
}

.connectedWorkspace .deviceRelSummary{
  gap:3px!important;
  padding:3px 0!important;
  font-size:var(--ws-body)!important;
}

.connectedWorkspace .deviceRelSummary>b{
  font-size:var(--ws-title)!important;
}

.connectedWorkspace .deviceRelSummary small,
.connectedWorkspace .deviceRelRow small{
  font-size:var(--ws-label)!important;
  color:#7e9aac!important;
}

.connectedWorkspace .deviceRelRow{
  min-height:38px!important;
  padding:5px 0!important;
  gap:7px!important;
}

.connectedWorkspace .empty.mini{
  min-height:54px!important;
  padding:8px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  font-size:var(--ws-body)!important;
  color:#819aac!important;
}

/* Keep grid spacing symmetric and predictable. */
.connectedWorkspace .connectedGrid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
}

/* Task card keeps its adaptive 1-4 row behavior. */
.connectedWorkspace .taskRelationCard{
  background:var(--ws-card-bg)!important;
  border-color:var(--ws-card-border)!important;
}

/* Evidence card: smaller, but photo remains clearly visible. */
.connectedWorkspace .evidenceGrid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(112px,132px))!important;
  gap:6px!important;
  align-items:start!important;
  justify-content:start!important;
}

.connectedWorkspace .evidenceCard{
  width:100%!important;
  max-width:132px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:8px!important;
  background:#0a1725!important;
  border:1px solid #2b425b!important;
  text-align:left!important;
}

.connectedWorkspace .evidenceThumb{
  height:70px!important;
  width:100%!important;
}

.connectedWorkspace .evidenceThumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.connectedWorkspace .evidenceTypePill{
  font-size:var(--text-small)!important;
  padding:2px 5px!important;
}

.connectedWorkspace .evidenceCardText{
  padding:5px 6px!important;
  gap:2px!important;
}

.connectedWorkspace .evidenceCardText b{
  font-size:var(--text-small)!important;
  line-height:1.1!important;
}

.connectedWorkspace .evidenceCardText small{
  font-size:var(--text-small)!important;
}

.connectedWorkspace .evidenceCardText em{
  font-size:var(--text-small)!important;
}

/* Product / Network / Testing / Service stay compact but readable. */
.connectedWorkspace .relationCard:not(.taskRelationCard):not(.issueRelationCard){
  min-height:145px!important;
}

.connectedWorkspace .issueRelationCard{
  grid-column:1/-1!important;
}

/* Small screens: one column and let cards size naturally. */
@media(max-width:900px){
  .connectedWorkspace .connectedGrid{
    grid-template-columns:1fr!important;
  }
  .connectedWorkspace .relationCard:not(.taskRelationCard):not(.issueRelationCard){
    min-height:auto!important;
  }
  .connectedWorkspace .evidenceGrid{
    grid-template-columns:repeat(auto-fill,minmax(105px,1fr))!important;
  }
  .connectedWorkspace .evidenceCard{
    max-width:none!important;
  }
  .connectedWorkspace .evidenceThumb{
    height:68px!important;
  }
}

/* ===== v3.5.10 workspace overflow / task visibility correction ===== */

/* The outer grid must never force cards into a shared fixed row height. */
.connectedWorkspace .connectedGrid{
  grid-auto-rows:max-content!important;
  align-items:start!important;
}

/* Undo the generic fixed minimum that distorted content-driven cards. */
.connectedWorkspace .relationCard:not(.issueRelationCard){
  min-height:0!important;
}

/* TASKS: preserve adaptive behavior and make the content area real height.
   1-4 show fully. 5+ gets a usable viewport showing several rows. */
.connectedWorkspace .taskRelationCard{
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  align-self:start!important;
}

.taskRelationCard .deviceTaskListWrap{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}

.taskRelationCard .deviceTaskList{
  height:auto!important;
  min-height:0!important;
}

.connectedWorkspace .taskRelationCard.taskCardScrollable{
  max-height:none!important;
}

.taskScrollable .deviceTaskListWrap{
  overflow:hidden!important;
}

.taskScrollable .deviceTaskList{
  height:150px!important;
  max-height:150px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  scrollbar-gutter:stable!important;
}

.taskScrollable .taskScrollHint{
  display:flex!important;
  flex:0 0 auto!important;
}

/* EVIDENCE: thumbnail/card must remain completely inside Photos & Files. */
.connectedWorkspace .evidenceGrid{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  grid-template-columns:repeat(auto-fill,minmax(105px,120px))!important;
}

.connectedWorkspace .evidenceCard{
  width:120px!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  align-self:start!important;
}

.connectedWorkspace .evidenceThumb{
  width:100%!important;
  height:64px!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.connectedWorkspace .evidenceThumb img{
  display:block!important;
  width:100%!important;
  height:64px!important;
  max-width:100%!important;
  object-fit:cover!important;
}

.connectedWorkspace .evidenceCardText{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.connectedWorkspace .evidenceCardText b,
.connectedWorkspace .evidenceCardText small{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Give normal content cards enough breathing room without forcing all cards tall. */
.connectedWorkspace .relationCard:not(.taskRelationCard):not(.issueRelationCard){
  padding:8px!important;
}

/* On narrow screens cards stack; evidence remains contained. */
@media(max-width:900px){
  .taskScrollable .deviceTaskList{
    height:170px!important;
    max-height:170px!important;
  }
  .connectedWorkspace .evidenceGrid{
    grid-template-columns:repeat(auto-fill,minmax(100px,120px))!important;
  }
}

/* ===== v3.5.11 independent workspace columns ===== */
.connectedWorkspace .deviceWorkspaceFlow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
  max-height:48vh!important;
  overflow:auto!important;
  min-height:0!important;
}

.connectedWorkspace .workspaceColumn{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  min-width:0!important;
  align-self:start!important;
}

.connectedWorkspace .workspaceColumn>.relationCard{
  width:100%!important;
  min-width:0!important;
  align-self:stretch!important;
}

/* Issues stay full width above both independent columns. */
.connectedWorkspace .deviceWorkspaceFlow>.issueRelationCard{
  grid-column:1/-1!important;
}

/* The two columns should not influence each other's vertical card positions. */
.connectedWorkspace .workspaceColumnLeft{
  grid-column:1!important;
}
.connectedWorkspace .workspaceColumnRight{
  grid-column:2!important;
}

/* Old grid sizing no longer applies to Device Workspace flow. */
.connectedWorkspace .connectedGrid{
  display:none!important;
}

@media(max-width:900px){
  .connectedWorkspace .deviceWorkspaceFlow{
    grid-template-columns:1fr!important;
    max-height:52vh!important;
  }
  .connectedWorkspace .workspaceColumnLeft,
  .connectedWorkspace .workspaceColumnRight{
    grid-column:1!important;
  }
}

/* ===== v3.5.12 blocker / independent-column row fix ===== */
/* Explicit grid rows prevent the full-width Issues card from sharing
   the same grid row as the left/right workspace columns. */
.connectedWorkspace .deviceWorkspaceFlow>.issueRelationCard{
  grid-column:1/-1!important;
  grid-row:1!important;
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  align-self:start!important;
  overflow:hidden!important;
}

.connectedWorkspace .deviceWorkspaceFlow>.workspaceColumnLeft{
  grid-column:1!important;
  grid-row:2!important;
}

.connectedWorkspace .deviceWorkspaceFlow>.workspaceColumnRight{
  grid-column:2!important;
  grid-row:2!important;
}

/* When no Issues card exists, columns naturally occupy the first row. */
.connectedWorkspace .deviceWorkspaceFlow>.workspaceColumn:first-child{
  grid-row:auto;
}

/* A resolved blocker remains visible as history, but stays compact. */
.connectedWorkspace .issueRelationCard .issueRow{
  position:relative!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.connectedWorkspace .issueRelationCard .issueIdentity{
  min-width:0!important;
}

.connectedWorkspace .issueRelationCard .issueIdentity p{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

/* Multiple blockers stay contained instead of expanding over the workspace. */
.connectedWorkspace .issueRelationCard{
  max-height:170px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

@media(max-width:900px){
  .connectedWorkspace .deviceWorkspaceFlow>.issueRelationCard{
    grid-column:1!important;
    grid-row:1!important;
  }
  .connectedWorkspace .deviceWorkspaceFlow>.workspaceColumnLeft{
    grid-column:1!important;
    grid-row:2!important;
  }
  .connectedWorkspace .deviceWorkspaceFlow>.workspaceColumnRight{
    grid-column:1!important;
    grid-row:3!important;
  }
}

/* ===== v3.5.13 blocker flow correction ===== */
/* v3.5.12 still allowed the columns to occupy the same visual row in some cases.
   Explicit flow-state classes now remove that ambiguity. */

.connectedWorkspace .deviceWorkspaceFlow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  align-items:start!important;
}

/* WITH issues:
   row 1 = blocker full width
   row 2 = left/right columns */
.connectedWorkspace .deviceWorkspaceFlow.hasIssues{
  grid-template-areas:
    "issues issues"
    "left right"!important;
}

.connectedWorkspace .deviceWorkspaceFlow.hasIssues>.issueRelationCard{
  grid-area:issues!important;
  grid-row:auto!important;
  grid-column:auto!important;
  position:static!important;
  z-index:auto!important;
  margin:0!important;
  align-self:start!important;
}

.connectedWorkspace .deviceWorkspaceFlow.hasIssues>.workspaceColumnLeft{
  grid-area:left!important;
  grid-row:auto!important;
  grid-column:auto!important;
}

.connectedWorkspace .deviceWorkspaceFlow.hasIssues>.workspaceColumnRight{
  grid-area:right!important;
  grid-row:auto!important;
  grid-column:auto!important;
}

/* WITHOUT issues:
   only two independent columns, starting immediately */
.connectedWorkspace .deviceWorkspaceFlow.noIssues{
  grid-template-areas:"left right"!important;
}

.connectedWorkspace .deviceWorkspaceFlow.noIssues>.workspaceColumnLeft{
  grid-area:left!important;
  grid-row:auto!important;
  grid-column:auto!important;
}

.connectedWorkspace .deviceWorkspaceFlow.noIssues>.workspaceColumnRight{
  grid-area:right!important;
  grid-row:auto!important;
  grid-column:auto!important;
}

/* Remove previous row-placement fallback that could override the explicit layout. */
.connectedWorkspace .deviceWorkspaceFlow>.workspaceColumn:first-child{
  grid-row:auto!important;
}

@media(max-width:900px){
  .connectedWorkspace .deviceWorkspaceFlow.hasIssues{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "issues"
      "left"
      "right"!important;
  }
  .connectedWorkspace .deviceWorkspaceFlow.noIssues{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "left"
      "right"!important;
  }
}

/* ===== v3.5.14 sticky blocker dock ===== */
.connectedWorkspace .workspaceBlockerDock{
  position:sticky!important;
  top:0!important;
  z-index:25!important;
  width:100%!important;
  margin:0 0 8px!important;
  background:#07151df2!important;
  backdrop-filter:blur(8px)!important;
}

.connectedWorkspace .workspaceBlockerDock .issueRelationCard{
  width:100%!important;
  max-height:150px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin:0!important;
  box-shadow:0 8px 18px #0005!important;
}

/* The content area below blockers is always two independent columns. */
.connectedWorkspace .deviceWorkspaceFlow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:"left right"!important;
  gap:8px!important;
  align-items:start!important;
  max-height:48vh!important;
  overflow:auto!important;
}

.connectedWorkspace .deviceWorkspaceFlow>.workspaceColumnLeft{
  grid-area:left!important;
  grid-column:auto!important;
  grid-row:auto!important;
}

.connectedWorkspace .deviceWorkspaceFlow>.workspaceColumnRight{
  grid-area:right!important;
  grid-column:auto!important;
  grid-row:auto!important;
}

/* Neutralize older issue-in-grid placement rules. */
.connectedWorkspace .deviceWorkspaceFlow>.issueRelationCard{
  display:none!important;
}

.connectedWorkspace .workspaceBlockerDock .issueRow{
  padding:8px 10px!important;
}
.connectedWorkspace .workspaceBlockerDock .issueIdentity p{
  margin:2px 0!important;
  line-height:1.3!important;
}
.connectedWorkspace .workspaceBlockerDock .relationHead{
  margin-bottom:0!important;
}

@media(max-width:900px){
  .connectedWorkspace .deviceWorkspaceFlow{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "left"
      "right"!important;
    max-height:52vh!important;
  }
}

/* ===== v3.5.15 compact workspace navigation + headers ===== */

/* Relation/navigation strip: thinner, tighter, still touchable. */
.connectedWorkspace .relationTabs{
  gap:5px!important;
}
.connectedWorkspace .relationTab{
  min-height:34px!important;
  height:34px!important;
  padding:3px 8px!important;
  border-radius:7px!important;
  font-size:var(--text-small)!important;
  line-height:1.05!important;
}
.connectedWorkspace .relationTab .count,
.connectedWorkspace .relationTab .badge{
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  font-size:var(--text-small)!important;
}

/* Shared card headers: reduce vertical weight everywhere. */
.connectedWorkspace{
  --ws-head-h:25px!important;
}
.connectedWorkspace .relationHead{
  min-height:25px!important;
  margin-bottom:4px!important;
  padding-bottom:3px!important;
  gap:6px!important;
}
.connectedWorkspace .relationHead small{
  font-size:var(--text-small)!important;
}
.connectedWorkspace .relationHead h3{
  font-size:var(--text-body)!important;
  margin-top:1px!important;
}
.connectedWorkspace .relationHead>button{
  min-height:23px!important;
  height:23px!important;
  padding:2px 7px!important;
  font-size:var(--text-small)!important;
}

/* Task header follows the same compact rhythm. */
.taskRelationCard .relationHead{
  min-height:25px!important;
}

/* Blocker header also stays compact. */
.connectedWorkspace .workspaceBlockerDock .relationHead{
  min-height:25px!important;
  padding:3px 7px!important;
}
.connectedWorkspace .workspaceBlockerDock .relationHead>button{
  min-height:23px!important;
  height:23px!important;
}

/* Mobile: slightly taller for finger targets without returning to bulky desktop sizing. */
@media(max-width:760px){
  .connectedWorkspace .relationTab{
    min-height:38px!important;
    height:38px!important;
    padding:4px 8px!important;
    font-size:var(--text-small)!important;
  }
  .connectedWorkspace .relationHead>button{
    min-height:28px!important;
    height:28px!important;
  }
}

/* ===== v3.6.0 Project-First Shell ===== */
:root{
  --shell-bg:#0a0f14;--shell-panel:#10171f;--shell-line:#27323e;
  --shell-text:#ecf3f8;--shell-muted:#8ea0af;--shell-blue:#2d8cff
}
body,.appShell{background:var(--shell-bg)!important}
#appShell>aside{background:#0c1218!important;border-right:1px solid #202a34!important;padding:10px!important}
.brand{padding:7px 7px 12px!important;align-items:center!important}
.brand b{font-size:var(--text-section)!important}.brand span{font-size:var(--text-small)!important;color:#758796!important}
.userCard{background:#101821!important;border:1px solid #25323d!important;border-radius:9px!important;box-shadow:none!important}
#mainNav{display:flex;flex-direction:column;gap:2px}
.navSection{padding:10px 7px 4px!important;font-size:var(--text-small)!important;color:#627483!important;letter-spacing:.14em!important}
.navBtn{min-height:34px!important;border:0!important;border-radius:8px!important;padding:7px 9px!important;color:#9aabba!important;background:transparent!important}
.navBtn:hover{background:#111b24!important;color:#dce9f3!important}
.navBtn.active{background:#17283a!important;color:#f5f9fc!important;box-shadow:inset 3px 0 var(--shell-blue)!important}
.navBtn.scopeHidden,.navSection.scopeHidden{display:none!important}

main>header{height:52px!important;background:#0d141b!important;border-bottom:1px solid #202a34!important;padding:0 14px!important;gap:10px!important}
.shellCrumb{display:flex;align-items:center;gap:9px;min-width:180px}
.shellCrumb>div{display:grid;gap:1px}
.shellCrumb small{font-size:var(--text-small);color:#6f8190;text-transform:uppercase;letter-spacing:.1em}
.shellCrumb b{font-size:var(--text-body)}
.shellBackBtn{width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;border-radius:8px!important}
.shellHeaderActions{display:flex;align-items:center;gap:8px}
.shellProjectContext{margin-left:auto;margin-right:4px;background:#111a23;border:1px solid #263440;border-radius:9px;padding:4px 7px}
.shellProjectContext span:first-child{font-size:var(--text-small);color:#6f8190}
.shellProjectContext select{min-width:190px!important;height:30px!important;border:0!important;background:#111a23!important}

.projectHomeShell{width:min(1380px,100%);margin:0 auto}
.projectHomeHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:8px 2px 18px}
.projectHomeHead small{font-size:var(--text-small);letter-spacing:.12em;color:#6f8190}
.projectHomeHead h2{margin:3px 0 2px;font-size:var(--text-title);letter-spacing:-.03em}
.projectHomeHead p{margin:0;color:#8799a7;font-size:var(--text-body)}
.projectCardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.projectLaunchCard{min-height:205px!important;padding:0!important;display:grid!important;grid-template-rows:auto 1fr auto auto!important;text-align:left!important;border:1px solid #26333f!important;border-radius:14px!important;background:#111820!important;box-shadow:0 8px 22px #0003!important;overflow:hidden!important;color:#eaf2f8!important}
.projectLaunchCard:hover{border-color:#3a6ea5!important;transform:translateY(-1px);box-shadow:0 12px 30px #0005!important}
.projectLaunchTop{display:flex;justify-content:space-between;align-items:center;padding:11px 12px 0}
.projectStatusDot{width:8px;height:8px;border-radius:50%;background:#35b37e;box-shadow:0 0 0 3px #35b37e22}
.projectLaunchTop small{font-size:var(--text-small);color:#718493}
.projectLaunchMain{padding:14px 12px 10px}
.projectLaunchMain h3{margin:0 0 5px;font-size:var(--text-section);letter-spacing:-.02em}
.projectLaunchMain p{margin:0 0 4px;font-size:var(--text-small);color:#9fb0bd}
.projectLaunchMain span{font-size:var(--text-small);color:#6f8190}
.projectLaunchStats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #23303b;border-bottom:1px solid #23303b}
.projectLaunchStats span{padding:9px 10px;display:grid;gap:2px}.projectLaunchStats span+span{border-left:1px solid #23303b}
.projectLaunchStats b{font-size:var(--text-section)}.projectLaunchStats small{font-size:var(--text-small);color:#768897}
.projectLaunchFoot{display:flex;justify-content:space-between;align-items:center;padding:9px 11px}
.projectLaunchFoot span{font-size:var(--text-small);color:#7791a5}.projectLaunchFoot b{font-size:var(--text-small);color:#79b7ff}

body.projectShellClosed #workflowRibbon{display:none!important}
body.projectShellOpen #mainNav{overflow:auto}
.content{padding:14px!important}.pageHead{margin-bottom:10px!important}
.card,.itemCard{border-color:#26333f!important;border-radius:10px!important;background:#101820!important;box-shadow:none!important}

@media(max-width:900px){
  .projectCardGrid{grid-template-columns:1fr 1fr}
  .shellProjectContext{display:none!important}
}
@media(max-width:640px){
  .projectCardGrid{grid-template-columns:1fr}
  .projectHomeHead h2{font-size:var(--text-title)}
}

/* ===== v3.6.1 collapsible navigation + user layout customization ===== */
.navSection{padding:5px 0 2px!important}
.navSectionToggle{
  width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:7px 7px!important;border:0!important;background:transparent!important;color:#657887!important;
  font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.13em!important;text-transform:uppercase!important;
  box-shadow:none!important
}
.navSectionToggle:hover{color:#b9c8d3!important;background:#111a22!important}
.navSectionToggle b{font-size:var(--text-body)!important;font-weight:var(--weight-regular)!important;color:#6f8798!important}
.navBtn.groupCollapsed{display:none!important}

.layoutToolbar{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.layoutToolbar>span{font-size:var(--text-small);color:#718493;text-transform:uppercase;letter-spacing:.08em}
.layoutToolbar button{height:29px!important;padding:4px 9px!important;border-radius:8px!important;font-size:var(--text-small)!important}
.layoutToolbar button.active{border-color:#3f91d6!important;background:#163451!important}
.layoutToolbar small{font-size:var(--text-small);color:#7990a0}

.layoutUnlocked>.layoutMovable{
  resize:both!important;overflow:auto!important;min-width:220px!important;min-height:130px!important;
  outline:1px dashed #3c8ac7!important;outline-offset:2px!important;cursor:grab
}
.layoutUnlocked>.layoutMovable:active{cursor:grabbing}
.layoutMovable.dragging{opacity:.48!important}
.projectCardGrid.layoutUnlocked{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;align-items:start}
.projectCardGrid.layoutUnlocked>.projectLaunchCard{width:auto;max-width:100%}

.workspaceActionRow{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.workspaceCustomDeck{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:start}
.workspaceCustomDeck>*{grid-column:span 12}
.workspaceCustomDeck.layoutUnlocked>*{resize:both!important;overflow:auto!important;min-width:260px!important;min-height:100px!important;outline:1px dashed #3c8ac7!important;outline-offset:2px!important;cursor:grab}
.workspaceCustomDeck.layoutUnlocked>*:nth-child(n+2){grid-column:span 6}
@media(max-width:900px){
  .workspaceCustomDeck>*{grid-column:span 12!important}
  .layoutToolbar small{display:none}
}

/* ===== v3.6.2 stronger UniFi-inspired design refresh ===== */

/* Global surface language */
:root{
  --u-bg:#f5f7fa;
  --u-bg-dark:#0f1419;
  --u-panel:#ffffff;
  --u-panel-dark:#151b21;
  --u-soft:#eef2f6;
  --u-soft-dark:#1c242c;
  --u-border:#dfe5eb;
  --u-border-dark:#2a333c;
  --u-text:#18212a;
  --u-text-dark:#eef3f7;
  --u-muted:#6f7d89;
  --u-muted-dark:#8f9ca7;
  --u-blue:#1677ff;
  --u-blue-soft:#e8f2ff;
  --u-blue-soft-dark:#16314d;
}

/* App frame */
.unifiShell{
  background:var(--u-bg-dark)!important;
}
.unifiShell>aside{
  background:#11171d!important;
  border-right:1px solid #222b33!important;
  padding:10px 8px!important;
}
.unifiContent{
  background:#0f1419!important;
  padding:18px!important;
}

/* Logo / sidebar identity */
.brand{
  min-height:44px!important;
  padding:5px 7px 12px!important;
  border-bottom:1px solid #202932!important;
  margin-bottom:8px!important;
}
.brand b{
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
  letter-spacing:-.015em!important;
}
.brand span{
  background:#183850!important;
  color:#9fd0ff!important;
  padding:2px 5px!important;
  border-radius:999px!important;
  font-size:var(--text-small)!important;
}
#sidebarToggle{
  border:1px solid #2a3b49!important;
  background:#162532!important;
  color:#c9d8e4!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* User card simplified */
.userCard{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #202932!important;
  border-radius:0!important;
  padding:10px 7px 12px!important;
  margin-bottom:7px!important;
}
.userCard b{font-size:var(--text-body)!important}
.userCard span{color:#7e8b96!important}

/* Sidebar navigation closer to modern UniFi hierarchy */
.unifiNav .navSection{
  margin-top:5px!important;
}
.unifiNav .navSectionToggle{
  color:#6f7e8b!important;
  font-size:var(--text-small)!important;
  padding:6px 8px 4px!important;
}
.unifiNav .navSectionToggle:hover{
  background:transparent!important;
  color:#9aaab7!important;
}
.unifiNav .navBtn{
  min-height:32px!important;
  padding:7px 9px!important;
  margin:1px 0!important;
  border-radius:9px!important;
  color:#aeb9c2!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-regular)!important;
}
.unifiNav .navBtn:hover{
  background:#192128!important;
  color:#f0f4f7!important;
}
.unifiNav .navBtn.active{
  background:#202b35!important;
  color:#ffffff!important;
  box-shadow:none!important;
}
.unifiNav .navBtn.active::before{
  content:'';
  width:3px;
  height:18px;
  border-radius:999px;
  background:#2b8cff;
  margin-right:7px;
  display:inline-block;
  vertical-align:middle;
}

/* Header: flatter, cleaner, less old dashboard-like */
main>header{
  height:54px!important;
  background:#11171d!important;
  border-bottom:1px solid #222b33!important;
  padding:0 16px!important;
}
.shellCrumb small{
  color:#71808c!important;
  font-size:var(--text-small)!important;
}
.shellCrumb b{
  color:#f5f8fa!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
}
.shellBackBtn{
  background:#182028!important;
  border:1px solid #2a343d!important;
  color:#dbe5ec!important;
  box-shadow:none!important;
}
.shellProjectContext{
  background:#171e25!important;
  border:1px solid #2b343d!important;
  border-radius:10px!important;
}
.shellProjectContext select{
  background:#171e25!important;
  color:#eef3f7!important;
  font-size:var(--text-small)!important;
}
.notificationBell{
  background:#182028!important;
  border:1px solid #2a343d!important;
  border-radius:10px!important;
}
#roleBadge{
  background:#1d2a34!important;
  border:1px solid #32424f!important;
  color:#c5d2db!important;
}

/* Page heads */
.pageHead,
.projectHomeHead{
  padding:5px 0 14px!important;
}
.pageHead h2,
.projectHomeHead h2{
  font-size:var(--text-title)!important;
  font-weight:var(--weight-semibold)!important;
  letter-spacing:-.025em!important;
  margin-bottom:3px!important;
}
.pageHead p,
.projectHomeHead p{
  color:#7f8b95!important;
}

/* Project Home: much more UniFi-like tiles */
.projectCardGrid{
  gap:14px!important;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;
}
.projectLaunchCard{
  min-height:190px!important;
  background:#151b21!important;
  border:1px solid #28313a!important;
  border-radius:14px!important;
  box-shadow:none!important;
  transition:border-color .15s ease, background .15s ease, transform .15s ease!important;
}
.projectLaunchCard:hover{
  background:#182028!important;
  border-color:#35536b!important;
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}
.projectLaunchTop{
  padding:13px 14px 0!important;
}
.projectStatusDot{
  width:7px!important;height:7px!important;
  background:#4ec58a!important;
  box-shadow:none!important;
}
.projectLaunchTop small{
  color:#6f7f8b!important;
  font-size:var(--text-small)!important;
  letter-spacing:.03em!important;
}
.projectLaunchMain{
  padding:14px 14px 12px!important;
}
.projectLaunchMain h3{
  font-size:var(--text-section)!important;
  font-weight:var(--weight-semibold)!important;
  color:#f4f7f9!important;
}
.projectLaunchMain p{
  color:#a3afb8!important;
  font-size:var(--text-small)!important;
}
.projectLaunchMain span{
  color:#72818d!important;
}
.projectLaunchStats{
  border-color:#28313a!important;
}
.projectLaunchStats span{
  padding:9px 12px!important;
}
.projectLaunchStats b{
  color:#f2f6f8!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
}
.projectLaunchStats small{
  color:#73818c!important;
  font-size:var(--text-small)!important;
}
.projectLaunchFoot{
  padding:9px 12px!important;
}
.projectLaunchFoot span{
  color:#71808b!important;
}
.projectLaunchFoot b{
  color:#79b9ff!important;
  font-weight:var(--weight-regular)!important;
}

/* Workflow ribbon -> segmented app switcher style */
#workflowRibbon{
  background:#10161c!important;
  border-bottom:1px solid #222b33!important;
  padding:7px 10px!important;
}
.projectCommandBar{
  gap:10px!important;
}
.projectCommandIdentity{
  min-width:230px!important;
}
.projectCommandIdentity small{
  color:#6d7b86!important;
}
.projectCommandIdentity b{
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
}
.projectPhaseTrack,
.projectQuickTabs{
  background:#151c22!important;
  border:1px solid #28323b!important;
  border-radius:10px!important;
  padding:3px!important;
  gap:3px!important;
}
.projectPhaseTrack button,
.projectQuickTabs button{
  min-height:29px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#aab6bf!important;
  box-shadow:none!important;
  font-size:var(--text-small)!important;
  padding:5px 9px!important;
}
.projectPhaseTrack button:hover,
.projectQuickTabs button:hover{
  background:#1e2830!important;
  color:#edf3f7!important;
}
.projectPhaseTrack button.active,
.projectQuickTabs button.active{
  background:#21445d!important;
  color:#ffffff!important;
}

/* Generic cards: flatter and cleaner */
.card,
.itemCard,
.workspaceHero,
.projectGraphCard,
.simpleCardGrid>.itemCard{
  background:#151b21!important;
  border:1px solid #28313a!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
.card:hover,
.itemCard:hover{
  border-color:#33404b!important;
}

/* Workspace stats/cards */
.workspaceHero{
  padding:16px!important;
}
.workspaceHero h2,
.workspaceHero h3{
  font-weight:var(--weight-semibold)!important;
}
.workspaceHero .pill,
.card .pill{
  background:#1d2831!important;
  border:1px solid #34424d!important;
  color:#c7d3dc!important;
}
.workspaceFlowGrid{
  gap:10px!important;
}
.workspaceFlowGrid>.card,
.workspaceFlowGrid>.itemCard{
  min-height:90px!important;
}

/* Buttons */
button,
.btn{
  border-radius:9px!important;
  box-shadow:none!important;
}
button.primary,
.btn.primary{
  background:#1b6fdc!important;
  border-color:#1b6fdc!important;
}
button:not(.navBtn):not(.navSectionToggle):not(.projectLaunchCard):hover{
  filter:brightness(1.06);
}

/* Inputs */
input,select,textarea{
  background:#11171d!important;
  border:1px solid #2b343d!important;
  border-radius:8px!important;
  color:#edf3f7!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#2d83d9!important;
  box-shadow:0 0 0 2px #2d83d922!important;
  outline:none!important;
}

/* Tables */
table{
  border-collapse:separate!important;
  border-spacing:0!important;
}
thead th{
  background:#131a20!important;
  color:#7f8d98!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  border-bottom:1px solid #28313a!important;
}
tbody td{
  border-bottom:1px solid #222b33!important;
}
tbody tr:hover td{
  background:#161e25!important;
}

/* Layout customization controls also restyled */
.layoutToolbar{
  background:#141b21!important;
  border:1px solid #29333c!important;
  border-radius:10px!important;
  padding:4px 6px!important;
}
.layoutToolbar button{
  background:#1a232b!important;
  border:1px solid #2f3d49!important;
  color:#cbd7df!important;
}
.layoutToolbar button.active{
  background:#1b4a6e!important;
  border-color:#2c7db4!important;
}
.layoutUnlocked>.layoutMovable,
.workspaceCustomDeck.layoutUnlocked>*{
  outline:1px dashed #3c84b8!important;
  outline-offset:3px!important;
}

/* More breathing room on desktop */
@media(min-width:1200px){
  .unifiContent{padding:18px 22px!important}
}

/* Mobile */
@media(max-width:720px){
  .unifiContent{padding:10px!important}
  .projectCardGrid{grid-template-columns:1fr!important}
  .projectLaunchCard{min-height:178px!important}
}

/* ===== v3.6.3 targeted readability fix: workflow ribbon only ===== */

/* Keep the overall v3.6.2 visual design, but make the top workflow/navigation
   readable at normal desktop viewing distance. */
#workflowRibbon{
  padding:8px 12px!important;
}

.projectCommandBar{
  min-height:42px!important;
  align-items:center!important;
  gap:12px!important;
}

.projectCommandIdentity{
  min-width:245px!important;
}

.projectCommandIdentity small{
  font-size:var(--text-small)!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
  color:#81919e!important;
}

.projectCommandIdentity b{
  font-size:var(--text-body)!important;
  line-height:1.25!important;
  font-weight:var(--weight-semibold)!important;
  color:#f2f6f9!important;
}

.projectPhaseTrack,
.projectQuickTabs{
  padding:4px!important;
  gap:4px!important;
}

.projectPhaseTrack button,
.projectQuickTabs button{
  min-height:34px!important;
  padding:6px 10px!important;
  font-size:var(--text-small)!important;
  line-height:1.15!important;
  font-weight:var(--weight-semibold)!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  color:#c4cfd7!important;
}

.projectPhaseTrack button.active,
.projectQuickTabs button.active{
  color:#ffffff!important;
  font-weight:var(--weight-semibold)!important;
}

.projectPhaseTrack button span{
  min-width:19px!important;
  height:19px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-right:5px!important;
  border-radius:999px!important;
  font-size:var(--text-small)!important;
  line-height:1!important;
  font-weight:var(--weight-semibold)!important;
}

/* Slightly larger top-bar project selector text, without changing the rest of the app. */
.shellProjectContext select{
  font-size:var(--text-small)!important;
}

/* Do not shrink workflow controls too aggressively on medium screens. */
@media(max-width:1300px){
  .projectPhaseTrack button,
  .projectQuickTabs button{
    font-size:var(--text-small)!important;
    padding:6px 8px!important;
  }
}

@media(max-width:1000px){
  .projectCommandIdentity{
    min-width:190px!important;
  }
  .projectPhaseTrack button,
  .projectQuickTabs button{
    font-size:var(--text-small)!important;
    padding:6px 7px!important;
  }
}

/* ===== v3.6.4 persistent free-layout engine ===== */

.projectCardGrid.freeLayout,
.workspaceCustomDeck.freeLayout{
  display:block!important;
  position:relative!important;
  min-height:180px!important;
}

.projectCardGrid.freeLayout>.layoutMovable,
.workspaceCustomDeck.freeLayout>.layoutMovable{
  position:absolute!important;
  margin:0!important;
  max-width:none!important;
  min-width:220px!important;
  min-height:110px!important;
  resize:none!important;
  overflow:auto!important;
  transition:border-color .12s ease, background .12s ease!important;
}

.projectCardGrid.freeLayout.layoutUnlocked>.layoutMovable,
.workspaceCustomDeck.freeLayout.layoutUnlocked>.layoutMovable{
  outline:1px dashed #4287b7!important;
  outline-offset:3px!important;
  cursor:move!important;
  user-select:none!important;
}

.projectCardGrid.freeLayout>.layoutMovable.dragging,
.workspaceCustomDeck.freeLayout>.layoutMovable.dragging{
  z-index:50!important;
  opacity:.86!important;
  box-shadow:0 12px 30px #0007!important;
}

/* 8-direction resize handles */
.resizeHandle{
  position:absolute!important;
  display:block!important;
  z-index:80!important;
  background:transparent!important;
  touch-action:none!important;
}
.resize-n,.resize-s{
  left:10px!important;right:10px!important;height:10px!important;
}
.resize-n{top:-5px!important;cursor:n-resize!important}
.resize-s{bottom:-5px!important;cursor:s-resize!important}
.resize-e,.resize-w{
  top:10px!important;bottom:10px!important;width:10px!important;
}
.resize-e{right:-5px!important;cursor:e-resize!important}
.resize-w{left:-5px!important;cursor:w-resize!important}
.resize-ne,.resize-nw,.resize-se,.resize-sw{
  width:16px!important;height:16px!important;
}
.resize-ne{right:-6px!important;top:-6px!important;cursor:ne-resize!important}
.resize-nw{left:-6px!important;top:-6px!important;cursor:nw-resize!important}
.resize-se{right:-6px!important;bottom:-6px!important;cursor:se-resize!important}
.resize-sw{left:-6px!important;bottom:-6px!important;cursor:sw-resize!important}

/* Visible corner dots only while unlocked. */
.layoutUnlocked .resize-ne::after,
.layoutUnlocked .resize-nw::after,
.layoutUnlocked .resize-se::after,
.layoutUnlocked .resize-sw::after{
  content:''!important;
  position:absolute!important;
  width:7px!important;height:7px!important;
  border-radius:2px!important;
  background:#3c84b8!important;
  border:1px solid #8dc7ef!important;
}
.layoutUnlocked .resize-ne::after{right:2px!important;top:2px!important}
.layoutUnlocked .resize-nw::after{left:2px!important;top:2px!important}
.layoutUnlocked .resize-se::after{right:2px!important;bottom:2px!important}
.layoutUnlocked .resize-sw::after{left:2px!important;bottom:2px!important}

/* Locked custom layouts retain the exact saved geometry; only editing handles disappear. */
.projectCardGrid.freeLayout:not(.layoutUnlocked)>.layoutMovable,
.workspaceCustomDeck.freeLayout:not(.layoutUnlocked)>.layoutMovable{
  outline:0!important;
  cursor:default!important;
}

/* Avoid old CSS resize rules from v3.6.1 interfering. */
.layoutUnlocked>.layoutMovable,
.workspaceCustomDeck.layoutUnlocked>*{
  resize:none!important;
}

/* ===== v3.6.5 sidebar readability + spacing fix ===== */

/* Overall sidebar spacing */
#appShell>aside{
  padding:8px 8px!important;
}

/* Brand */
.brand{
  min-height:40px!important;
  margin-bottom:4px!important;
  padding:4px 6px 8px!important;
}
.brand b{
  font-size:var(--text-body)!important;
  line-height:1.15!important;
}
.brand span{
  font-size:var(--text-small)!important;
}

/* User identity: readable but compact */
.userCard{
  padding:9px 7px 10px!important;
  margin-bottom:5px!important;
  line-height:1.25!important;
}
.userCard b{
  font-size:var(--text-body)!important;
}
.userCard{
  font-size:var(--text-small)!important;
}
.userCard span{
  font-size:var(--text-small)!important;
}

/* Remove the oversized gaps between category headings */
.unifiNav{
  gap:0!important;
}
.unifiNav .navSection{
  margin:2px 0 0!important;
  padding:0!important;
}

/* Make category labels actually readable */
.unifiNav .navSectionToggle{
  min-height:30px!important;
  padding:6px 7px!important;
  font-size:var(--text-small)!important;
  line-height:1.1!important;
  letter-spacing:.055em!important;
  font-weight:var(--weight-semibold)!important;
  color:#8fa0ad!important;
  border-radius:7px!important;
}
.unifiNav .navSectionToggle:hover{
  background:#171f26!important;
  color:#d5e0e7!important;
}
.unifiNav .navSectionToggle b{
  font-size:var(--text-body)!important;
  line-height:1!important;
  font-weight:var(--weight-regular)!important;
  color:#9cb0be!important;
  margin-left:8px!important;
}

/* Module rows */
.unifiNav .navBtn{
  min-height:34px!important;
  padding:7px 9px!important;
  margin:1px 0!important;
  font-size:var(--text-body)!important;
  line-height:1.2!important;
  font-weight:var(--weight-regular)!important;
  letter-spacing:0!important;
}

/* Active navigation remains clean but obvious */
.unifiNav .navBtn.active{
  background:#202b35!important;
  color:#ffffff!important;
}
.unifiNav .navBtn.active::before{
  width:3px!important;
  height:17px!important;
  margin-right:7px!important;
}

/* Collapsed category rows should not reserve any extra vertical space */
.navBtn.groupCollapsed{
  display:none!important;
}
.navSection.scopeHidden{
  display:none!important;
}

/* Compact nav still usable */
body.compactNav .unifiNav .navSectionToggle{
  min-height:28px!important;
  padding:5px 4px!important;
}
body.compactNav .unifiNav .navSectionToggle span{
  display:none!important;
}
body.compactNav .unifiNav .navSectionToggle b{
  margin:0 auto!important;
}

/* On short screens, keep the sidebar dense enough without making text tiny */
@media(max-height:760px){
  .unifiNav .navSectionToggle{
    min-height:28px!important;
    padding:5px 7px!important;
    font-size:var(--text-small)!important;
  }
  .unifiNav .navBtn{
    min-height:32px!important;
    font-size:var(--text-body)!important;
  }
}

/* ===== v3.6.6 Dark / Light appearance ===== */
.themeToggle{
  width:34px!important;height:34px!important;min-width:34px!important;
  padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:10px!important;background:#182028!important;border:1px solid #2a343d!important;
  color:#dce6ed!important;font-size:15px!important;box-shadow:none!important
}

/* Light mode: inspired by clean network-management interfaces, not copied UI. */
html[data-theme="light"] body,
html[data-theme="light"] .appShell{
  background:#f4f6f8!important;color:#1d2730!important
}
html[data-theme="light"] #appShell>aside{
  background:#ffffff!important;border-right:1px solid #dfe4e8!important
}
html[data-theme="light"] .brand{
  border-bottom-color:#e4e8ec!important;color:#17212a!important
}
html[data-theme="light"] .brand span{
  background:#e7f3ff!important;color:#1768a8!important
}
html[data-theme="light"] #sidebarToggle,
html[data-theme="light"] .themeToggle,
html[data-theme="light"] .notificationBell,
html[data-theme="light"] .shellBackBtn{
  background:#f3f6f8!important;border-color:#d9e0e5!important;color:#3b4a56!important
}
html[data-theme="light"] .userCard{
  border-bottom-color:#e4e8ec!important;color:#26333d!important
}
html[data-theme="light"] .userCard span{color:#687783!important}
html[data-theme="light"] .unifiNav .navSectionToggle{
  color:#657783!important
}
html[data-theme="light"] .unifiNav .navSectionToggle:hover{
  background:#f3f6f8!important;color:#273742!important
}
html[data-theme="light"] .unifiNav .navSectionToggle b{color:#667b89!important}
html[data-theme="light"] .unifiNav .navBtn{
  color:#53636f!important
}
html[data-theme="light"] .unifiNav .navBtn:hover{
  background:#f1f4f6!important;color:#1e2a33!important
}
html[data-theme="light"] .unifiNav .navBtn.active{
  background:#e7f1f9!important;color:#172a38!important
}
html[data-theme="light"] main>header{
  background:#ffffff!important;border-bottom-color:#dfe4e8!important
}
html[data-theme="light"] .shellCrumb small{color:#74838e!important}
html[data-theme="light"] .shellCrumb b{color:#17212a!important}
html[data-theme="light"] .shellProjectContext{
  background:#f6f8fa!important;border-color:#dce2e7!important
}
html[data-theme="light"] .shellProjectContext select{
  background:#f6f8fa!important;color:#26333d!important
}
html[data-theme="light"] #roleBadge{
  background:#eef3f6!important;border-color:#d6dfe5!important;color:#465763!important
}
html[data-theme="light"] .unifiContent{
  background:#f4f6f8!important;color:#1d2730!important
}
html[data-theme="light"] #workflowRibbon{
  background:#ffffff!important;border-bottom-color:#dfe4e8!important
}
html[data-theme="light"] .projectCommandIdentity small{color:#778792!important}
html[data-theme="light"] .projectCommandIdentity b{color:#1c2831!important}
html[data-theme="light"] .projectPhaseTrack,
html[data-theme="light"] .projectQuickTabs{
  background:#f1f4f6!important;border-color:#dbe2e7!important
}
html[data-theme="light"] .projectPhaseTrack button,
html[data-theme="light"] .projectQuickTabs button{
  color:#52636f!important
}
html[data-theme="light"] .projectPhaseTrack button:hover,
html[data-theme="light"] .projectQuickTabs button:hover{
  background:#e7ecef!important;color:#1c2932!important
}
html[data-theme="light"] .projectPhaseTrack button.active,
html[data-theme="light"] .projectQuickTabs button.active{
  background:#dceefa!important;color:#155783!important
}
html[data-theme="light"] .projectLaunchCard,
html[data-theme="light"] .card,
html[data-theme="light"] .itemCard,
html[data-theme="light"] .workspaceHero,
html[data-theme="light"] .projectGraphCard,
html[data-theme="light"] .simpleCardGrid>.itemCard{
  background:#ffffff!important;border-color:#dfe5e9!important;color:#202c35!important
}
html[data-theme="light"] .projectLaunchCard:hover{
  background:#fbfcfd!important;border-color:#a9c8dc!important
}
html[data-theme="light"] .projectLaunchMain h3,
html[data-theme="light"] .projectLaunchStats b{
  color:#17232c!important
}
html[data-theme="light"] .projectLaunchMain p{color:#62727e!important}
html[data-theme="light"] .projectLaunchMain span,
html[data-theme="light"] .projectLaunchTop small,
html[data-theme="light"] .projectLaunchStats small,
html[data-theme="light"] .projectLaunchFoot span{
  color:#768691!important
}
html[data-theme="light"] .projectLaunchStats{
  border-color:#e1e6ea!important
}
html[data-theme="light"] .projectLaunchStats span+span{
  border-left-color:#e1e6ea!important
}
html[data-theme="light"] .projectLaunchFoot b{color:#176ca7!important}
html[data-theme="light"] .pageHead p,
html[data-theme="light"] .projectHomeHead p{color:#6c7b86!important}
html[data-theme="light"] .workspaceHero .pill,
html[data-theme="light"] .card .pill{
  background:#f0f4f7!important;border-color:#d9e2e8!important;color:#475966!important
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#ffffff!important;border-color:#d6dee4!important;color:#202d36!important
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus{
  border-color:#438dcc!important;box-shadow:0 0 0 2px #438dcc1f!important
}
html[data-theme="light"] thead th{
  background:#f4f6f8!important;color:#657580!important;border-bottom-color:#dce3e8!important
}
html[data-theme="light"] tbody td{border-bottom-color:#e4e8eb!important}
html[data-theme="light"] tbody tr:hover td{background:#f7f9fa!important}
html[data-theme="light"] .layoutToolbar{
  background:#ffffff!important;border-color:#dce3e8!important
}
html[data-theme="light"] .layoutToolbar button{
  background:#f2f5f7!important;border-color:#d7dfe5!important;color:#435460!important
}
html[data-theme="light"] .layoutToolbar button.active{
  background:#dceefa!important;border-color:#80b9dc!important;color:#155783!important
}

/* ===== v3.6.7 Projects Home add action ===== */
#projectHomeActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.projectHomeAddBtn{
  min-height:32px!important;
  padding:6px 12px!important;
  border-radius:9px!important;
  background:#1b6fdc!important;
  border:1px solid #2c7fdc!important;
  color:#ffffff!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  box-shadow:none!important;
}
.projectHomeAddBtn:hover{
  background:#247be6!important;
}
html[data-theme="light"] .projectHomeAddBtn{
  background:#1677df!important;
  border-color:#1677df!important;
  color:#ffffff!important;
}

/* =====================================================================
   v3.7.1 SAFE UniFi-inspired shell
   Keeps the working v3.6.7 DOM/layout and overlays a stable 2-level nav.
   ===================================================================== */

.shell371{
  position:relative!important;
  display:block!important;
  min-height:100vh!important;
  background:#f5f7f9!important;
}

/* left rail */
.appRail371{
  position:fixed!important;
  left:0!important;top:0!important;bottom:0!important;
  width:54px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:7px 5px!important;
  background:#f8f9fb!important;
  border-right:1px solid #e1e6ea!important;
  z-index:200!important;
}
.rail371Logo{
  width:34px!important;height:34px!important;min-height:34px!important;
  margin:2px 0 9px!important;padding:0!important;
  border:0!important;border-radius:9px!important;
  background:#e7f2ff!important;color:#1675dc!important;
  font-size:17px!important;font-weight:var(--weight-semibold)!important;
}
.rail371Btn{
  width:42px!important;height:43px!important;min-height:43px!important;
  margin:1px 0!important;padding:4px 2px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;border:0!important;border-radius:9px!important;
  background:transparent!important;color:#687985!important;box-shadow:none!important
}
.rail371Btn span{font-size:var(--text-section)!important;line-height:17px!important}
.rail371Btn small{font-size:var(--text-small)!important;line-height:9px!important;font-weight:var(--weight-semibold)!important}
.rail371Btn:hover{background:#edf1f4!important;color:#273742!important}
.rail371Btn.active{background:#e5f1ff!important;color:#0875df!important}
.rail371Spacer{flex:1!important}

/* existing aside becomes the contextual pane */
.shell371>aside.contextNav371{
  position:fixed!important;
  left:54px!important;top:0!important;bottom:0!important;
  width:220px!important;
  height:100vh!important;
  padding:8px!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  background:#ffffff!important;
  border-right:1px solid #e1e6ea!important;
  z-index:190!important;
}
.contextNav371 .brand{
  min-height:40px!important;
  padding:6px 6px 8px!important;
  margin:0 0 4px!important;
  border-bottom:1px solid #e7ebee!important
}
.contextNav371 .brand b{
  font-size:var(--text-body)!important;color:#1e2c35!important
}
.contextNav371 .brand span{font-size:var(--text-small)!important}
.contextNav371 .userCard{
  padding:8px 6px 10px!important;margin:0 0 4px!important;
  border:0!important;border-bottom:1px solid #e7ebee!important;
  color:#33444f!important;font-size:var(--text-small)!important;line-height:1.25!important
}
.contextNav371 .userCard b{font-size:var(--text-small)!important}
.contextNav371 .userCard span{font-size:var(--text-small)!important;color:#778690!important}
.contextNav371 .navSection{
  margin:3px 0 0!important;padding:0!important
}
.contextNav371 .navSectionToggle{
  min-height:27px!important;padding:5px 6px!important;
  font-size:var(--text-small)!important;letter-spacing:.05em!important;
  color:#7e8e99!important
}
.contextNav371 .navBtn{
  min-height:33px!important;padding:7px 9px!important;margin:1px 0!important;
  border-radius:7px!important;background:transparent!important;
  color:#52636f!important;font-size:var(--text-small)!important}
.contextNav371 .navBtn:hover{background:#f2f5f7!important;color:#25343e!important}
.contextNav371 .navBtn.active{background:#e8f3ff!important;color:#0873d8!important;box-shadow:none!important}
.contextNav371 .navBtn.active::before{display:none!important}
.shell371Hidden{display:none!important}

/* main always starts after rail + context panel */
.shell371>main{
  margin-left:274px!important;
  width:calc(100% - 274px)!important;
  min-width:0!important;
  min-height:100vh!important;
  background:#f5f7f9!important
}
.shell371 main>header{
  height:48px!important;
  padding:0 12px!important;
  background:#ffffff!important;
  border-bottom:1px solid #e1e6ea!important
}
.shell371 .shellCrumb small{font-size:var(--text-small)!important;color:#8997a1!important}
.shell371 .shellCrumb b{font-size:var(--text-body)!important;color:#25343e!important}
.shell371 .shellBackBtn,
.shell371 .themeToggle,
.shell371 .notificationBell{
  width:30px!important;height:30px!important;min-width:30px!important;
  padding:0!important;border-radius:8px!important;
  background:#f4f6f8!important;border:1px solid #dde4e9!important;color:#53646f!important
}
.shell371 .shellProjectContext{
  background:#f7f9fa!important;border:1px solid #e0e5e9!important;
  border-radius:8px!important;padding:2px 6px!important
}
.shell371 .shellProjectContext select{
  height:28px!important;background:#f7f9fa!important;color:#2c3a44!important;font-size:var(--text-small)!important}
.shell371 #roleBadge{
  background:#eff3f6!important;border-color:#dce3e8!important;color:#5d6e79!important
}

/* canvas */
.shell371 .content{
  padding:12px 14px 24px!important;
  background:#f5f7f9!important;
  min-height:calc(100vh - 48px)!important
}
.shell371 .pageHead,
.shell371 .projectHomeHead{
  padding:4px 1px 10px!important;margin:0!important
}
.shell371 .pageHead h2,
.shell371 .projectHomeHead h2{
  font-size:var(--text-section)!important;line-height:1.15!important;font-weight:var(--weight-semibold)!important;color:#1f2d36!important
}
.shell371 .pageHead p,
.shell371 .projectHomeHead p{
  font-size:var(--text-small)!important;color:#75848e!important
}

/* workflow bar */
.shell371 #workflowRibbon{
  background:#ffffff!important;border-bottom:1px solid #e2e7ea!important;
  padding:6px 10px!important
}
.shell371 .projectCommandBar{min-height:36px!important;gap:8px!important}
.shell371 .projectCommandIdentity{min-width:180px!important}
.shell371 .projectCommandIdentity small{font-size:var(--text-small)!important;color:#8997a1!important}
.shell371 .projectCommandIdentity b{font-size:var(--text-small)!important;color:#2b3943!important}
.shell371 .projectPhaseTrack,
.shell371 .projectQuickTabs{
  background:#f1f4f6!important;border:1px solid #e0e5e9!important;border-radius:8px!important;
  padding:2px!important;gap:2px!important
}
.shell371 .projectPhaseTrack button,
.shell371 .projectQuickTabs button{
  min-height:28px!important;padding:5px 8px!important;
  border:0!important;border-radius:6px!important;
  background:transparent!important;color:#586974!important;
  font-size:var(--text-small)!important}
.shell371 .projectPhaseTrack button.active,
.shell371 .projectQuickTabs button.active{
  background:#ffffff!important;color:#0875df!important;
  box-shadow:0 1px 2px #00000010!important
}

/* cards / controls consistent across all pages */
.shell371 .card,
.shell371 .itemCard,
.shell371 .workspaceHero,
.shell371 .projectGraphCard{
  background:#ffffff!important;border:1px solid #e0e5e9!important;border-radius:9px!important;
  box-shadow:none!important;color:#2b3943!important
}
.shell371 .projectCardGrid{
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr))!important;gap:10px!important
}
.shell371 .projectLaunchCard{
  min-height:165px!important;background:#ffffff!important;border:1px solid #dfe5e9!important;
  border-radius:9px!important;color:#283640!important;box-shadow:none!important
}
.shell371 .projectLaunchCard:hover{
  border-color:#a9c8df!important;box-shadow:0 2px 7px #26374610!important
}
.shell371 .projectLaunchMain h3{font-size:var(--text-body)!important;color:#26343d!important}
.shell371 .projectLaunchMain p{font-size:var(--text-small)!important;color:#687984!important}
.shell371 .projectLaunchStats b{font-size:var(--text-body)!important;color:#27343d!important}
.shell371 button:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard){
  border-radius:7px!important;box-shadow:none!important
}
.shell371 input,.shell371 select,.shell371 textarea{
  background:#ffffff!important;border:1px solid #d9e1e6!important;color:#2d3b45!important;
  border-radius:7px!important;font-size:var(--text-small)!important}
.shell371 thead th{
  background:#f7f9fa!important;color:#75848e!important;border-bottom:1px solid #dfe5e9!important;
  font-size:var(--text-small)!important}
.shell371 tbody td{
  border-bottom:1px solid #edf0f2!important;color:#34444f!important;font-size:var(--text-small)!important}

/* dark mode, same geometry */
html[data-theme="dark"] .shell371{background:#0f1419!important}
html[data-theme="dark"] .appRail371{background:#11171d!important;border-right-color:#242d35!important}
html[data-theme="dark"] .rail371Btn{color:#87959f!important}
html[data-theme="dark"] .rail371Btn:hover{background:#1a2229!important;color:#e2e9ee!important}
html[data-theme="dark"] .rail371Btn.active{background:#17314a!important;color:#84c6ff!important}
html[data-theme="dark"] .rail371Logo{background:#16324a!important;color:#83c5ff!important}
html[data-theme="dark"] .shell371>aside.contextNav371{background:#13191f!important;border-right-color:#28313a!important}
html[data-theme="dark"] .contextNav371 .brand{border-bottom-color:#28313a!important}
html[data-theme="dark"] .contextNav371 .brand b{color:#edf3f7!important}
html[data-theme="dark"] .contextNav371 .userCard{border-bottom-color:#28313a!important;color:#dce5eb!important}
html[data-theme="dark"] .contextNav371 .navBtn{color:#aab6bf!important}
html[data-theme="dark"] .contextNav371 .navBtn:hover{background:#1b232a!important;color:#edf3f7!important}
html[data-theme="dark"] .contextNav371 .navBtn.active{background:#1b3347!important;color:#8bc7ff!important}
html[data-theme="dark"] .shell371>main,
html[data-theme="dark"] .shell371 .content{background:#0f1419!important}
html[data-theme="dark"] .shell371 main>header,
html[data-theme="dark"] .shell371 #workflowRibbon{background:#13191f!important;border-color:#28313a!important}
html[data-theme="dark"] .shell371 .shellCrumb b,
html[data-theme="dark"] .shell371 .projectCommandIdentity b,
html[data-theme="dark"] .shell371 .pageHead h2,
html[data-theme="dark"] .shell371 .projectHomeHead h2{color:#eef3f7!important}
html[data-theme="dark"] .shell371 .card,
html[data-theme="dark"] .shell371 .itemCard,
html[data-theme="dark"] .shell371 .workspaceHero,
html[data-theme="dark"] .shell371 .projectGraphCard,
html[data-theme="dark"] .shell371 .projectLaunchCard{
  background:#151b21!important;border-color:#29333c!important;color:#e6edf2!important
}
html[data-theme="dark"] .shell371 input,
html[data-theme="dark"] .shell371 select,
html[data-theme="dark"] .shell371 textarea{
  background:#11171d!important;border-color:#2d3740!important;color:#edf3f7!important
}

/* responsive */
@media(max-width:900px){
  .shell371>aside.contextNav371{width:185px!important}
  .shell371>main{margin-left:239px!important;width:calc(100% - 239px)!important}
  .rail371Btn small{display:none!important}
  .rail371Btn{height:38px!important;min-height:38px!important}
}
@media(max-width:700px){
  .appRail371{width:48px!important}
  .shell371>aside.contextNav371{display:none!important}
  .shell371>main{margin-left:48px!important;width:calc(100% - 48px)!important}
  .shell371 .content{padding:9px!important}
}

/* =====================================================================
   v3.7.2 GLOBAL THEME + WORKSPACE LAYOUT REPAIR
   One token system for every standard module in both light and dark mode.
   ===================================================================== */

:root,
html[data-theme="light"]{
  --ios-bg:#f3f5f7;
  --ios-panel:#ffffff;
  --ios-panel-2:#f7f9fa;
  --ios-panel-3:#eef2f5;
  --ios-border:#dbe2e7;
  --ios-border-strong:#c8d2da;
  --ios-text:#24323c;
  --ios-muted:#6f7f8a;
  --ios-faint:#8f9ca5;
  --ios-accent:#1677e8;
  --ios-accent-soft:#e7f2ff;
  --ios-danger:#b33b48;
  --ios-danger-soft:#fff0f2;
  --ios-success:#23865f;
  --ios-shadow:0 1px 3px rgba(30,45,58,.08);
}
html[data-theme="dark"]{
  --ios-bg:#0f1419;
  --ios-panel:#151b21;
  --ios-panel-2:#192128;
  --ios-panel-3:#202a32;
  --ios-border:#2a343d;
  --ios-border-strong:#3a4650;
  --ios-text:#edf2f5;
  --ios-muted:#9aa7b0;
  --ios-faint:#74838e;
  --ios-accent:#55a8ff;
  --ios-accent-soft:#17344e;
  --ios-danger:#e45c68;
  --ios-danger-soft:#3a1f24;
  --ios-success:#55c18f;
  --ios-shadow:none;
}

/* Main surfaces */
.shell371,
.shell371>main,
.shell371 .content,
.shell371 .view{
  background:var(--ios-bg)!important;
  color:var(--ios-text)!important;
}
.shell371 main>header,
.shell371 #workflowRibbon,
.shell371>aside.contextNav371{
  background:var(--ios-panel)!important;
  border-color:var(--ios-border)!important;
}
.appRail371{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
}

/* Typography - readable consistently everywhere */
.shell371,
.shell371 button,
.shell371 input,
.shell371 select,
.shell371 textarea,
.shell371 table{
  font-family:var(--font-sans)!important;
}
.shell371 .pageHead h2,
.shell371 .projectHomeHead h2{
  color:var(--ios-text)!important;
  font-size:var(--text-section)!important;
  font-weight:var(--weight-semibold)!important;
  letter-spacing:-.018em!important;
}
.shell371 .pageHead p,
.shell371 .projectHomeHead p,
.shell371 small,
.shell371 .hint,
.shell371 .muted{
  color:var(--ios-muted)!important;
}

/* Universal cards/panels */
.shell371 .card,
.shell371 .itemCard,
.shell371 .workspaceHero,
.shell371 .projectGraphCard,
.shell371 .projectCommandHero,
.shell371 .projectRelationshipCard,
.shell371 .operatingPhase,
.shell371 .simpleCard,
.shell371 .panel,
.shell371 .toolbar,
.shell371 .filters,
.shell371 .searchBar,
.shell371 .permissionGrid,
.shell371 .notificationItem,
.shell371 .projectEmptyState{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:10px!important;
  box-shadow:var(--ios-shadow)!important;
}
.shell371 .card *,
.shell371 .itemCard *,
.shell371 .projectCommandHero *,
.shell371 .operatingPhase *,
.shell371 .projectRelationshipCard *{
  border-color:var(--ios-border);
}

/* Buttons - consistent all pages */
.shell371 button:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard){
  min-height:30px!important;
  padding:6px 10px!important;
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:7px!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  line-height:1.1!important;
  box-shadow:none!important;
}
.shell371 button:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard):hover{
  border-color:var(--ios-border-strong)!important;
  background:var(--ios-panel-3)!important;
}
.shell371 button.primary,
.shell371 .primary,
.shell371 .projectHomeAddBtn{
  background:var(--ios-accent)!important;
  border-color:var(--ios-accent)!important;
  color:#fff!important;
}
.shell371 button.danger,
.shell371 .danger,
.shell371 button[onclick*="delete" i],
.shell371 button[onclick*="Delete" i]{
  background:var(--ios-danger-soft)!important;
  border-color:color-mix(in srgb,var(--ios-danger) 45%,var(--ios-border))!important;
  color:var(--ios-danger)!important;
}

/* Inputs/forms */
.shell371 input,
.shell371 select,
.shell371 textarea{
  min-height:32px!important;
  padding:6px 9px!important;
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:7px!important;
  font-size:var(--text-small)!important;
}
.shell371 textarea{min-height:82px!important}
.shell371 input:focus,
.shell371 select:focus,
.shell371 textarea:focus{
  outline:none!important;
  border-color:var(--ios-accent)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ios-accent) 18%,transparent)!important;
}
.shell371 label{
  color:var(--ios-text)!important;
  font-size:var(--text-small)!important;
}

/* Tables/lists */
.shell371 table{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
}
.shell371 thead th{
  background:var(--ios-panel-2)!important;
  color:var(--ios-muted)!important;
  border-color:var(--ios-border)!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
}
.shell371 tbody td{
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
  font-size:var(--text-small)!important;
}
.shell371 tbody tr:hover td{background:var(--ios-panel-2)!important}

/* Modal/dialog */
.shell371 dialog,
dialog#modal{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:12px!important;
  box-shadow:0 18px 60px rgba(0,0,0,.22)!important;
}
.shell371 .modalHead,
.shell371 .modalFoot,
dialog#modal .modalHead,
dialog#modal .modalFoot{
  background:var(--ios-panel)!important;
  border-color:var(--ios-border)!important;
  color:var(--ios-text)!important;
}

/* Navigation */
.contextNav371 .brand b,
.shell371 .shellCrumb b,
.shell371 .projectCommandIdentity b{
  color:var(--ios-text)!important;
}
.contextNav371 .userCard,
.contextNav371 .navBtn,
.contextNav371 .navSectionToggle{
  color:var(--ios-muted)!important;
}
.contextNav371 .navBtn:hover{background:var(--ios-panel-2)!important;color:var(--ios-text)!important}
.contextNav371 .navBtn.active{background:var(--ios-accent-soft)!important;color:var(--ios-accent)!important}
.rail371Btn{color:var(--ios-muted)!important}
.rail371Btn:hover{background:var(--ios-panel-3)!important;color:var(--ios-text)!important}
.rail371Btn.active{background:var(--ios-accent-soft)!important;color:var(--ios-accent)!important}

/* Workflow ribbon */
.shell371 .projectPhaseTrack,
.shell371 .projectQuickTabs{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
}
.shell371 .projectPhaseTrack button,
.shell371 .projectQuickTabs button{
  color:var(--ios-muted)!important;
  background:transparent!important;
  border-color:transparent!important;
}
.shell371 .projectPhaseTrack button.active,
.shell371 .projectQuickTabs button.active{
  color:var(--ios-accent)!important;
  background:var(--ios-panel)!important;
  border-color:var(--ios-border)!important;
}

/* Project cards */
.shell371 .projectLaunchCard{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
}
.shell371 .projectLaunchMain h3,
.shell371 .projectLaunchStats b{color:var(--ios-text)!important}
.shell371 .projectLaunchMain p,
.shell371 .projectLaunchMain span,
.shell371 .projectLaunchStats small{color:var(--ios-muted)!important}

/* Workspace card redesign */
.workspaceDeck372{
  position:relative!important;
  width:100%!important;
  min-height:560px!important;
}
.workspaceDeck372:not(.freeLayout){
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:10px!important;
  min-height:0!important;
}
.workspaceDeck372:not(.freeLayout)>.projectCommandHero{grid-column:1/-1!important}
.workspaceDeck372:not(.freeLayout)>.workspaceKpiCard{grid-column:span 2!important}
.workspaceDeck372:not(.freeLayout)>.operatingPhase{grid-column:span 6!important}
.workspaceDeck372:not(.freeLayout)>.projectRelationshipCard{grid-column:1/-1!important}

.workspaceDeck372>.workspaceKpiCard{
  background:var(--ios-panel)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:9px!important;
  color:var(--ios-text)!important;
  min-height:70px!important;
  padding:10px!important;
}
.workspaceDeck372>.workspaceKpiCard small{display:block!important;font-size:var(--text-small)!important}
.workspaceDeck372>.workspaceKpiCard b{display:block!important;margin-top:3px!important;font-size:var(--text-section)!important;color:var(--ios-text)!important}

/* Ensure free layout actually responds visually */
.workspaceDeck372.freeLayout{
  display:block!important;
  position:relative!important;
}
.workspaceDeck372.freeLayout>.layoutMovable{
  position:absolute!important;
  max-width:none!important;
  margin:0!important;
  resize:none!important;
  overflow:auto!important;
}
.workspaceDeck372.layoutUnlocked>.layoutMovable{
  outline:1px dashed var(--ios-accent)!important;
  outline-offset:3px!important;
  cursor:move!important;
}
.workspaceDeck372.layoutUnlocked>.layoutMovable::before{
  content:'⋮⋮';
  position:absolute;
  right:7px;top:5px;
  color:var(--ios-accent);
  font-size:12px;
  z-index:75;
  pointer-events:none;
}

/* Layout toolbar - much smaller */
.compactLayoutToolbar{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:3px 4px!important;
  min-height:34px!important;
  background:var(--ios-panel)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:8px!important;
}
.compactLayoutToolbar>span{
  padding:0 3px!important;
  font-size:var(--text-small)!important;
  color:var(--ios-muted)!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.compactLayoutToolbar button{
  min-height:26px!important;
  height:26px!important;
  padding:3px 7px!important;
  font-size:var(--text-small)!important;
}
.compactLayoutToolbar small{
  font-size:var(--text-small)!important;
  white-space:nowrap!important;
  padding:0 3px!important;
}
.compactLayoutToolbar .layoutToggle.active{
  background:var(--ios-accent-soft)!important;
  border-color:color-mix(in srgb,var(--ios-accent) 50%,var(--ios-border))!important;
  color:var(--ios-accent)!important;
}

/* Workflow footer no longer becomes a huge dark strip in light mode */
.shell371 .workflowPageFooter{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
  border-radius:9px!important;
}
.shell371 .workflowPageFooter small{color:var(--ios-muted)!important}

/* Back button visible and meaningful */
.shell371 #projectBackBtn{
  width:auto!important;
  min-width:34px!important;
  padding:0 8px!important;
}

/* Mobile / narrower desktop */
@media(max-width:1200px){
  .workspaceDeck372:not(.freeLayout)>.workspaceKpiCard{grid-column:span 4!important}
}
@media(max-width:800px){
  .workspaceDeck372:not(.freeLayout)>.workspaceKpiCard,
  .workspaceDeck372:not(.freeLayout)>.operatingPhase{grid-column:1/-1!important}
  .compactLayoutToolbar small{display:none!important}
}

/* =====================================================================
   v3.7.3 Light-theme normalization + workspace runtime repair
   ===================================================================== */

/* Top workflow: Plan / Prepare / Install / Operate now match the quick tabs. */
.shell371 .projectPhaseTrack button span{
  display:none!important;
}
.shell371 .projectPhaseTrack button,
.shell371 .projectQuickTabs button{
  min-height:30px!important;
  padding:5px 11px!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  border-radius:7px!important;
}

/* -------- PROJECT GUIDE -------- */
html[data-theme="light"] .shell371 #guideBody,
html[data-theme="light"] .shell371 #guide{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .guideHero,
html[data-theme="light"] .shell371 .guideProgressCard,
html[data-theme="light"] .shell371 .guidePhaseNav,
html[data-theme="light"] .shell371 .guidePhaseBlock,
html[data-theme="light"] .shell371 .guideStep,
html[data-theme="light"] .shell371 .guideRuleCard{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
}
html[data-theme="light"] .shell371 .guideHero h2,
html[data-theme="light"] .shell371 .guideHero h3,
html[data-theme="light"] .shell371 .guidePhaseHead h3,
html[data-theme="light"] .shell371 .guideStep h4,
html[data-theme="light"] .shell371 .guideRuleCard h3,
html[data-theme="light"] .shell371 .guideProgressCard b{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .guideHero p,
html[data-theme="light"] .shell371 .guidePhaseHead p,
html[data-theme="light"] .shell371 .guideStep p,
html[data-theme="light"] .shell371 .guideChecklist span,
html[data-theme="light"] .shell371 .guideDone{
  color:var(--ios-muted)!important;
}
html[data-theme="light"] .shell371 .guidePhaseHead{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .guidePhaseHead>span,
html[data-theme="light"] .shell371 .guideStepNumber{
  background:var(--ios-accent-soft)!important;
  color:var(--ios-accent)!important;
  border-color:color-mix(in srgb,var(--ios-accent) 25%,var(--ios-border))!important;
}
html[data-theme="light"] .shell371 .guideChecklist span{
  background:var(--ios-panel-2)!important;
  border:1px solid var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .guideProgressTrack{
  background:var(--ios-panel-3)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .guideProgressTrack span{
  background:var(--ios-accent)!important;
}
html[data-theme="light"] .shell371 .guidePhaseNav button{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
}

/* Dark guide uses the same token system instead of hardcoded old navy. */
html[data-theme="dark"] .shell371 .guideHero,
html[data-theme="dark"] .shell371 .guideProgressCard,
html[data-theme="dark"] .shell371 .guidePhaseNav,
html[data-theme="dark"] .shell371 .guidePhaseBlock,
html[data-theme="dark"] .shell371 .guideStep,
html[data-theme="dark"] .shell371 .guideRuleCard{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="dark"] .shell371 .guidePhaseHead{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="dark"] .shell371 .guideChecklist span{
  background:var(--ios-panel-2)!important;
  color:var(--ios-muted)!important;
  border-color:var(--ios-border)!important;
}

/* -------- PLAN STUDIO -------- */
/* Keep the drawing canvas itself dark for contrast, but all UI chrome follows theme. */
html[data-theme="light"] .shell371 #plans,
html[data-theme="light"] .shell371 #plansBody,
html[data-theme="light"] .shell371 .planWorkspace{
  background:var(--ios-bg)!important;
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .planTopTools,
html[data-theme="light"] .shell371 .planLayerBar,
html[data-theme="light"] .shell371 .planStatusBar,
html[data-theme="light"] .shell371 .planRail,
html[data-theme="light"] .shell371 .planInspector,
html[data-theme="light"] .shell371 .recognitionControlSection,
html[data-theme="light"] .shell371 .recognitionQueue,
html[data-theme="light"] .shell371 .planSymbolPopup,
html[data-theme="light"] .shell371 .planMiniToolbar,
html[data-theme="light"] .shell371 .planToolbar{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
}
html[data-theme="light"] .shell371 .planRailGroup,
html[data-theme="light"] .shell371 .recognitionStat,
html[data-theme="light"] .shell371 .recognitionQueueItem,
html[data-theme="light"] .shell371 .planInspector .card{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .planRail button,
html[data-theme="light"] .shell371 .planTopTools button,
html[data-theme="light"] .shell371 .planLayerBar button,
html[data-theme="light"] .shell371 .planInspector button{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .planRail button:hover,
html[data-theme="light"] .shell371 .planTopTools button:hover,
html[data-theme="light"] .shell371 .planLayerBar button:hover{
  background:var(--ios-panel-3)!important;
}
html[data-theme="light"] .shell371 .planRail button.active,
html[data-theme="light"] .shell371 .planLayerBar button.active{
  background:var(--ios-accent-soft)!important;
  color:var(--ios-accent)!important;
  border-color:color-mix(in srgb,var(--ios-accent) 35%,var(--ios-border))!important;
}
html[data-theme="light"] .shell371 .planInspector h3,
html[data-theme="light"] .shell371 .planInspector h4,
html[data-theme="light"] .shell371 .recognitionControlSection h3,
html[data-theme="light"] .shell371 .recognitionControlSection h4{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .planInspector p,
html[data-theme="light"] .shell371 .planInspector small,
html[data-theme="light"] .shell371 .recognitionControlSection p,
html[data-theme="light"] .shell371 .recognitionControlSection small{
  color:var(--ios-muted)!important;
}
/* Canvas is intentionally neutral-dark in both themes to preserve plan contrast. */
.shell371 .planCanvasWrap{
  background:#111820!important;
  border-color:var(--ios-border)!important;
}

/* Dark Plan Studio also normalized to tokens. */
html[data-theme="dark"] .shell371 .planTopTools,
html[data-theme="dark"] .shell371 .planLayerBar,
html[data-theme="dark"] .shell371 .planStatusBar,
html[data-theme="dark"] .shell371 .planRail,
html[data-theme="dark"] .shell371 .planInspector,
html[data-theme="dark"] .shell371 .recognitionControlSection,
html[data-theme="dark"] .shell371 .recognitionQueue,
html[data-theme="dark"] .shell371 .planSymbolPopup{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}

/* -------- WORKSPACE -------- */
html[data-theme="light"] .shell371 .projectCommandHero,
html[data-theme="light"] .shell371 .workspaceKpiCard,
html[data-theme="light"] .shell371 .operatingPhase,
html[data-theme="light"] .shell371 .projectRelationshipCard{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .projectCommandHero h2,
html[data-theme="light"] .shell371 .operatingPhase h3,
html[data-theme="light"] .shell371 .projectRelationshipCard h3,
html[data-theme="light"] .shell371 .workspaceKpiCard b{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .projectNextAction,
html[data-theme="light"] .shell371 .phaseLinks button{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .heroMeta span,
html[data-theme="light"] .shell371 .phaseNumber{
  background:var(--ios-accent-soft)!important;
  color:var(--ios-accent)!important;
  border-color:var(--ios-border)!important;
}

/* -------- GENERIC MODULE PAGES -------- */
html[data-theme="light"] .shell371 .moduleManageBar,
html[data-theme="light"] .shell371 .moduleSearch,
html[data-theme="light"] .shell371 .moduleSelectionTools,
html[data-theme="light"] .shell371 .simpleCardGrid,
html[data-theme="light"] .shell371 .relationCard,
html[data-theme="light"] .shell371 .deviceWorkspaceHero,
html[data-theme="light"] .shell371 .taskRelationCard,
html[data-theme="light"] .shell371 .taskRollup{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .relationCard,
html[data-theme="light"] .shell371 .taskRollup{
  box-shadow:var(--ios-shadow)!important;
}
html[data-theme="light"] .shell371 .statusBadge,
html[data-theme="light"] .shell371 .pill{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}

/* Keep destructive actions clearly differentiated. */
html[data-theme="light"] .shell371 button.danger,
html[data-theme="light"] .shell371 .danger{
  background:#fff1f2!important;
  color:#a72d3c!important;
  border-color:#e8b7bd!important;
}

/* Light-mode scrollbar treatment */
html[data-theme="light"] .shell371 *{
  scrollbar-color:#c6d0d7 #eef2f5;
}
html[data-theme="dark"] .shell371 *{
  scrollbar-color:#3d4a54 #151b21;
}

/* =====================================================================
   v3.7.4 plan / workspace / project-card cleanup
   ===================================================================== */

/* ---- Header project selector ---- */
.shell371 .shellHeaderActions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}
.shell371 .shellProjectContext{
  min-width:0!important;
  max-width:330px!important;
  height:34px!important;
  display:flex!important;
  align-items:center!important;
}
.shell371 .shellProjectContext>span:first-child{
  flex:0 0 auto!important;
  font-size:var(--text-small)!important;
}
.shell371 .shellProjectContext select{
  min-width:0!important;
  width:205px!important;
  max-width:220px!important;
  height:28px!important;
  padding:4px 7px!important;
}

/* Explicit dark-mode header controls; old white overrides cannot leak through. */
html[data-theme="dark"] .shell371 .shellProjectContext,
html[data-theme="dark"] .shell371 .shellProjectContext select,
html[data-theme="dark"] .shell371 #themeToggle,
html[data-theme="dark"] .shell371 #notificationBell,
html[data-theme="dark"] .shell371 #roleBadge{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}

/* ---- Plan Studio header / recognition picker ---- */
.shell371 .planStudioCommandHeader{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
}
.shell371 .planStudioPrimaryActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.shell371 .recognitionTypePicker{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:32px!important;
  padding:3px 5px!important;
  border-radius:7px!important;
  background:var(--ios-panel-2)!important;
  border:1px solid var(--ios-border)!important;
}
.shell371 .recognitionTypePicker span{
  color:var(--ios-muted)!important;
  font-size:var(--text-small)!important;
}
.shell371 .recognitionTypePicker select{
  width:110px!important;
  min-width:110px!important;
  height:26px!important;
  min-height:26px!important;
  padding:3px 6px!important;
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
}

/* Recognition summary cards were still hard-coded navy in light mode. */
.shell371 .recognitionSummary span{
  background:var(--ios-panel-2)!important;
  border:1px solid var(--ios-border)!important;
  color:var(--ios-muted)!important;
}
.shell371 .recognitionSummary b{color:var(--ios-text)!important}

/* Tool rail: compact, contained and scrollable instead of spilling below the plan. */
.shell371 .planWorkspace{
  grid-template-columns:88px minmax(0,1fr) minmax(280px,310px)!important;
  align-items:stretch!important;
  gap:6px!important;
}
.shell371 .planRail.v26{
  width:88px!important;
  min-width:88px!important;
  max-width:88px!important;
  height:calc(100vh - 250px)!important;
  min-height:430px!important;
  max-height:720px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:5px!important;
  box-sizing:border-box!important;
  scrollbar-width:thin!important;
}
.shell371 .planRail .selectTool{
  min-height:30px!important;
  height:30px!important;
  margin-bottom:4px!important;
}
.shell371 .planRail .toolGroup{
  padding:4px 0!important;
}
.shell371 .planRail .toolGroup>small{
  font-size:var(--text-small)!important;
  margin:0 0 3px!important;
}
.shell371 .planRail .symbolGrid,
.shell371 .planRail .utilityTools{
  gap:4px!important;
}
.shell371 .planRail .symbolGrid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
}
.shell371 .planRail .symbolTool,
.shell371 .planRail .utilityTools button{
  min-width:0!important;
  width:100%!important;
  min-height:43px!important;
  height:43px!important;
  padding:3px!important;
}
.shell371 .planRail .symbolTool svg{
  width:20px!important;height:20px!important;
}
.shell371 .planRail .symbolTool span,
.shell371 .planRail .utilityTools button span{
  font-size:var(--text-small)!important;
}

/* Inspector contained, matching rail/canvas height. */
.shell371 .planInspector{
  min-width:280px!important;
  max-width:310px!important;
  width:310px!important;
  height:calc(100vh - 250px)!important;
  min-height:430px!important;
  max-height:720px!important;
  overflow-y:auto!important;
}

/* ---- Workspace: clean normal state ---- */
.workspaceDeck372:not(.freeLayout){
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:8px!important;
}
.workspaceDeck372:not(.freeLayout)>.projectCommandHero{grid-column:1/-1!important}
.workspaceDeck372:not(.freeLayout)>.workspaceKpiCard{grid-column:span 2!important}
.workspaceDeck372:not(.freeLayout)>.operatingPhase{grid-column:span 6!important}
.workspaceDeck372:not(.freeLayout)>.projectRelationshipCard{grid-column:1/-1!important}

.shell371 .projectCommandHero{
  min-height:96px!important;
  padding:12px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 290px!important;
  gap:12px!important;
  align-items:center!important;
}
.shell371 .projectCommandHero h2{
  margin:2px 0 6px!important;
  font-size:var(--text-section)!important;
  line-height:1.15!important;
}
.shell371 .projectCommandHero>div:first-child>small{
  font-size:var(--text-small)!important;
}
.shell371 .projectNextAction{
  min-height:70px!important;
  padding:9px 10px!important;
}
.shell371 .projectNextAction b{
  font-size:var(--text-body)!important;
}
.shell371 .projectNextAction span{
  font-size:var(--text-small)!important;
}
.workspaceDeck372>.workspaceKpiCard{
  min-height:54px!important;
  height:54px!important;
  padding:7px 9px!important;
}
.workspaceDeck372>.workspaceKpiCard b{
  font-size:var(--text-body)!important;
  margin-top:1px!important;
}
.workspaceDeck372>.workspaceKpiCard small{font-size:var(--text-small)!important}
.shell371 .operatingPhase{
  min-height:112px!important;
  padding:8px!important;
}
.shell371 .operatingPhase h3{font-size:var(--text-body)!important}
.shell371 .operatingPhase p{font-size:var(--text-small)!important;margin:2px 0!important}
.shell371 .phaseLinks button{
  min-height:30px!important;
  padding:4px 7px!important;
}
.shell371 .projectRelationshipCard{
  min-height:58px!important;
  padding:8px 10px!important;
}
.shell371 .projectRelationshipCard h3{font-size:var(--text-body)!important;margin:1px 0!important}
.shell371 .projectRelationshipCard p{font-size:var(--text-small)!important}

/* Unlock mode: explicit move handle and resize points. */
.layoutMoveHandle{
  position:absolute!important;
  left:7px!important;
  top:6px!important;
  z-index:95!important;
  width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:6px!important;
  background:var(--ios-accent)!important;
  color:#fff!important;
  font-size:var(--text-body)!important;
  line-height:1!important;
  cursor:grab!important;
  touch-action:none!important;
  box-shadow:0 1px 4px rgba(0,0,0,.18)!important;
}
.layoutMoveHandle:active{cursor:grabbing!important}
.workspaceDeck372.layoutUnlocked>.layoutMovable,
.projectCardGrid.layoutUnlocked>.layoutMovable{
  outline:1px dashed var(--ios-accent)!important;
  outline-offset:2px!important;
}
.workspaceDeck372.layoutUnlocked>.layoutMovable{
  padding-top:max(30px,inherit)!important;
}

/* Remove stale pseudo drag marker from previous build. */
.workspaceDeck372.layoutUnlocked>.layoutMovable::before{display:none!important}

/* ---- Projects Home visual thumbnails ---- */
.projectThumbGrid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;
  gap:12px!important;
  align-items:start!important;
}
.projectVisualCard{
  display:block!important;
  min-height:240px!important;
  padding:0!important;
  overflow:hidden!important;
  cursor:pointer!important;
  background:var(--ios-panel)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:10px!important;
  color:var(--ios-text)!important;
}
.projectThumb{
  position:relative!important;
  width:100%!important;
  height:170px!important;
  overflow:hidden!important;
  background:var(--ios-panel-3)!important;
}
.projectThumb img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important
}
.projectThumbFallback{
  width:100%!important;height:100%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:var(--text-title)!important;font-weight:var(--weight-semibold)!important;
  color:var(--ios-accent)!important;
  background:var(--ios-accent-soft)!important;
}
.projectThumbShade{
  position:absolute!important;inset:35% 0 0!important;
  background:rgba(0,0,0,0.72)!important;
  pointer-events:none!important;
}
.projectThumbInfo{
  position:absolute!important;
  left:12px!important;right:12px!important;bottom:10px!important;
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.65)!important;
}
.projectThumbInfo small{
  color:#dbe8f2!important;font-size:var(--text-small)!important}
.projectThumbInfo h3{
  margin:2px 0 2px!important;
  color:#fff!important;
  font-size:var(--text-body)!important;
  line-height:1.15!important;
}
.projectThumbInfo p{
  margin:0!important;
  color:#e5edf2!important;
  font-size:var(--text-small)!important;
}
.projectThumbEdit{
  position:absolute!important;
  right:8px!important;top:8px!important;
  z-index:4!important;
  width:30px!important;height:30px!important;min-height:30px!important;
  padding:0!important;
  border-radius:8px!important;
  background:rgba(15,20,25,.78)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.2)!important;
}
.projectVisualCard .projectLaunchStats{
  background:var(--ios-panel)!important;
  border-color:var(--ios-border)!important;
}
.projectVisualCard .projectLaunchFoot{
  background:var(--ios-panel)!important;
}

/* Responsive plan/workspace */
@media(max-width:1180px){
  .shell371 .planWorkspace{
    grid-template-columns:80px minmax(0,1fr)!important;
  }
  .shell371 .planInspector{
    grid-column:1/-1!important;
    width:100%!important;max-width:none!important;
    height:auto!important;max-height:none!important;
  }
  .shell371 .projectCommandHero{
    grid-template-columns:1fr!important;
  }
}

/* =====================================================================
   v3.7.5 automatic layout + remaining theme fixes
   ===================================================================== */

/* Remove manual layout customization completely. */
.layoutToolbar,
.compactLayoutToolbar,
.layoutMoveHandle,
.resizeHandle,
#workspaceLayoutCtl{
  display:none!important;
}
.freeLayout,
.layoutUnlocked,
.workspaceCustomDeck.freeLayout,
.projectCardGrid.freeLayout{
  position:static!important;
  height:auto!important;
}
.layoutMovable{
  position:static!important;
  width:auto!important;
  height:auto!important;
  left:auto!important;
  top:auto!important;
  outline:0!important;
  cursor:default!important;
}

/* Workspace auto layout */
#workspaceBody{
  display:block!important;
}
#workspaceBody>.projectCommandHero{
  margin-bottom:10px!important;
}
#workspaceBody>.projectKpis{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
#workspaceBody>.operatingPhases{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
#workspaceBody>.projectRelationshipCard{
  margin-bottom:8px!important;
}
@media(max-width:1300px){
  #workspaceBody>.projectKpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:850px){
  #workspaceBody>.projectKpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #workspaceBody>.operatingPhases{grid-template-columns:1fr!important}
}

/* Compact workspace hero */
.shell371 .projectCommandHero{
  min-height:92px!important;
  padding:11px 14px!important;
  grid-template-columns:minmax(0,1fr) 280px!important;
}
.shell371 .projectCommandHero h2{
  font-size:var(--text-section)!important;
  margin:2px 0 5px!important;
}
.shell371 .projectNextAction{
  min-height:66px!important;
  padding:8px 10px!important;
}
@media(max-width:900px){
  .shell371 .projectCommandHero{grid-template-columns:1fr!important}
}

/* Light mode plan labels */
html[data-theme="light"] .shell371 .planMarker .label,
html[data-theme="light"] .shell371 .planMarker .markerLabel,
html[data-theme="light"] .shell371 .planMarker .deviceLabel{
  background:#17232c!important;
  color:#fff!important;
  border:1px solid #52626d!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  opacity:1!important;
  text-shadow:none!important;
}
html[data-theme="light"] .shell371 .planMarker.selected .label,
html[data-theme="light"] .shell371 .planMarker.selected .markerLabel,
html[data-theme="light"] .shell371 .planMarker.selected .deviceLabel{
  background:#0875d8!important;
  color:#fff!important;
  border-color:#6db9f0!important;
}

/* Light mode recognition UI */
html[data-theme="light"] .shell371 .recognitionTypePicker,
html[data-theme="light"] .shell371 .recognitionSummary span,
html[data-theme="light"] .shell371 .recognitionControlSection,
html[data-theme="light"] .shell371 .recognitionQueue,
html[data-theme="light"] .shell371 .recognitionSelectRow,
html[data-theme="light"] .shell371 .recognitionItem{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .shell371 .recognitionSummary b,
html[data-theme="light"] .shell371 .recognitionItem b{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .shell371 .recognitionSummary span,
html[data-theme="light"] .shell371 .recognitionItem span,
html[data-theme="light"] .shell371 .recognitionSectionTitle{
  color:var(--ios-muted)!important;
}

/* True light scrollbars */
html[data-theme="light"],
html[data-theme="light"] *{
  scrollbar-color:#b9c5cd #eef2f5!important;
}
html[data-theme="light"] *::-webkit-scrollbar{
  width:9px!important;
  height:9px!important;
}
html[data-theme="light"] *::-webkit-scrollbar-track{
  background:#eef2f5!important;
  border-radius:999px!important;
}
html[data-theme="light"] *::-webkit-scrollbar-thumb{
  background:#b9c5cd!important;
  border:2px solid #eef2f5!important;
  border-radius:999px!important;
}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{
  background:#99a9b4!important;
}
html[data-theme="light"] *::-webkit-scrollbar-corner{
  background:#eef2f5!important;
}

/* Explicit dark scrollbar */
html[data-theme="dark"],
html[data-theme="dark"] *{
  scrollbar-color:#3c4a54 #11171d!important;
}
html[data-theme="dark"] *::-webkit-scrollbar-track{
  background:#11171d!important;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background:#3c4a54!important;
  border:2px solid #11171d!important;
}

/* Keep Plan Studio tool rail contained. */
.shell371 .planRail.v26{
  height:calc(100vh - 250px)!important;
  max-height:720px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

/* Keep project selector stable in dark mode. */
.shell371 .shellProjectContext{
  max-width:330px!important;
  min-width:0!important;
}
.shell371 .shellProjectContext select{
  width:205px!important;
  max-width:220px!important;
  min-width:0!important;
}
html[data-theme="dark"] .shell371 .shellProjectContext,
html[data-theme="dark"] .shell371 .shellProjectContext select{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}

/* =====================================================================
   v3.7.6 Projects action dedupe + Plan Inspector scrollbar fix
   ===================================================================== */

/* Light-mode Plan Studio Inspector scrollbar.
   Target the actual scrolling element directly so legacy global rules cannot win. */
html[data-theme="light"] .shell371 .planInspector{
  scrollbar-color:#b8c5cd #eef2f5!important;
}
html[data-theme="light"] .shell371 .planInspector::-webkit-scrollbar{
  width:9px!important;
  height:9px!important;
}
html[data-theme="light"] .shell371 .planInspector::-webkit-scrollbar-track{
  background:#eef2f5!important;
  border-radius:999px!important;
}
html[data-theme="light"] .shell371 .planInspector::-webkit-scrollbar-thumb{
  background:#b8c5cd!important;
  border:2px solid #eef2f5!important;
  border-radius:999px!important;
  min-height:30px!important;
}
html[data-theme="light"] .shell371 .planInspector::-webkit-scrollbar-thumb:hover{
  background:#98a8b3!important;
}
html[data-theme="light"] .shell371 .planInspector::-webkit-scrollbar-corner{
  background:#eef2f5!important;
}

/* Also cover the recognition queue if it independently scrolls. */
html[data-theme="light"] .shell371 .recognitionQueue{
  scrollbar-color:#b8c5cd #eef2f5!important;
}
html[data-theme="light"] .shell371 .recognitionQueue::-webkit-scrollbar-track{
  background:#eef2f5!important;
}
html[data-theme="light"] .shell371 .recognitionQueue::-webkit-scrollbar-thumb{
  background:#b8c5cd!important;
  border:2px solid #eef2f5!important;
  border-radius:999px!important;
}

/* Dark mode remains explicit. */
html[data-theme="dark"] .shell371 .planInspector{
  scrollbar-color:#3c4a54 #11171d!important;
}
html[data-theme="dark"] .shell371 .planInspector::-webkit-scrollbar-track{
  background:#11171d!important;
}
html[data-theme="dark"] .shell371 .planInspector::-webkit-scrollbar-thumb{
  background:#3c4a54!important;
  border:2px solid #11171d!important;
  border-radius:999px!important;
}

/* =====================================================================
   v3.7.7 contextual sidebar collapse fix
   ===================================================================== */

/* The old compactNav rules from early versions converted menu text into
   blank/placeholder buttons. In the new 2-level shell, collapse should
   simply hide the contextual sidebar and give its width back to the canvas. */
body.compactNav .shell371>aside.contextNav371{
  display:none!important;
}

body.compactNav .shell371>main{
  margin-left:54px!important;
  width:calc(100% - 54px)!important;
}

/* Do not apply any old 58px compact-sidebar placeholder behavior. */
body.compactNav .contextNav371 .brand,
body.compactNav .contextNav371 .userCard,
body.compactNav .contextNav371 #mainNav,
body.compactNav .contextNav371 #logoutBtn{
  display:none!important;
}

/* Keep the global application rail unchanged and fully usable. */
body.compactNav .appRail371{
  width:54px!important;
}
body.compactNav .rail371Btn{
  width:42px!important;
  height:43px!important;
  min-height:43px!important;
}
body.compactNav .rail371Btn small{
  display:block!important;
  font-size:var(--text-small)!important;
}

/* Sidebar toggle remains visible only while the context panel is open.
   Once collapsed, clicking the brand/menu control is not possible because
   the panel is hidden, so expose a small reopen button on the rail. */
body.compactNav .rail371Logo{
  position:relative!important;
}
body.compactNav .rail371Logo::after{
  content:'›'!important;
  position:absolute!important;
  right:-1px!important;
  bottom:-2px!important;
  width:14px!important;
  height:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:5px!important;
  background:var(--ios-accent)!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1!important;
}

/* Narrow screens already hide the context panel; avoid double offsets. */
@media(max-width:700px){
  body.compactNav .shell371>main{
    margin-left:48px!important;
    width:calc(100% - 48px)!important;
  }
  body.compactNav .appRail371{
    width:48px!important;
  }
}

/* =====================================================================
   v3.7.8 Device Workspace light-mode normalization
   ===================================================================== */

/* Modal shell */
html[data-theme="light"] #modal,
html[data-theme="light"] #modalForm,
html[data-theme="light"] #modalBody,
html[data-theme="light"] .deviceWorkspace,
html[data-theme="light"] .connectedWorkspace{
  background:var(--ios-bg)!important;
  color:var(--ios-text)!important;
}

/* Device hero */
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceHero,
html[data-theme="light"] .connectedWorkspace .connectedHero{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
}
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceHero h3,
html[data-theme="light"] .connectedWorkspace .connectedHero h3{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceHero small,
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceHero span,
html[data-theme="light"] .connectedWorkspace .connectedHero small,
html[data-theme="light"] .connectedWorkspace .connectedHero span{
  color:var(--ios-muted)!important;
}

/* Quick actions */
html[data-theme="light"] .connectedWorkspace .fieldQuickActions{
  background:var(--ios-panel)!important;
  border:1px solid var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .fieldQuickActions button{
  background:var(--ios-panel-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .fieldQuickActions .primaryAction,
html[data-theme="light"] .connectedWorkspace .fieldQuickActions .goodBtn{
  background:#1677e8!important;
  color:#fff!important;
  border-color:#1677e8!important;
}
html[data-theme="light"] .connectedWorkspace .fieldQuickActions .warningAction{
  background:#fff7e8!important;
  color:#8a5b00!important;
  border-color:#e4bd69!important;
}
html[data-theme="light"] .connectedWorkspace .fieldQuickActions .blockedAction{
  background:#fff0f2!important;
  color:#a52f3d!important;
  border-color:#e4aeb5!important;
}

/* Context strip */
html[data-theme="light"] .connectedWorkspace .contextStrip{
  background:var(--ios-border)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .contextStrip span{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .contextStrip b{
  color:var(--ios-muted)!important;
}

/* Relationship tabs */
html[data-theme="light"] .connectedWorkspace .compactQuickNav button,
html[data-theme="light"] .connectedWorkspace .deviceQuickNav button{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .compactQuickNav b,
html[data-theme="light"] .connectedWorkspace .deviceQuickNav b{
  background:var(--ios-accent-soft)!important;
  color:var(--ios-accent)!important;
}

/* All relation cards */
html[data-theme="light"] .connectedWorkspace .relationCard,
html[data-theme="light"] .connectedWorkspace .taskRelationCard,
html[data-theme="light"] .connectedWorkspace .issueRelationCard{
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
}
html[data-theme="light"] .connectedWorkspace .relationHead{
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .relationHead h3,
html[data-theme="light"] .connectedWorkspace .relationCard h3{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .relationHead small,
html[data-theme="light"] .connectedWorkspace .relationCard small,
html[data-theme="light"] .connectedWorkspace .empty{
  color:var(--ios-muted)!important;
}

/* Blocker dock */
html[data-theme="light"] .connectedWorkspace .workspaceBlockerDock{
  background:rgba(243,245,247,.96)!important;
  backdrop-filter:blur(8px)!important;
}
html[data-theme="light"] .connectedWorkspace .workspaceBlockerDock .issueRelationCard{
  background:var(--ios-panel)!important;
  border-color:var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
}
html[data-theme="light"] .connectedWorkspace .issueRow{
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .issueIdentity b,
html[data-theme="light"] .connectedWorkspace .issueIdentity p{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .issueResolution{
  color:var(--ios-muted)!important;
}

/* Task rollup / task rows */
html[data-theme="light"] .connectedWorkspace .taskRollup{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .taskRollup>div:first-child{
  color:var(--ios-muted)!important;
}
html[data-theme="light"] .connectedWorkspace .taskProgressTrack{
  background:#e7edf1!important;
  border-color:#d3dce2!important;
}
html[data-theme="light"] .connectedWorkspace .deviceTaskItem{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .deviceTaskItem.done{
  background:#eef9f3!important;
  border-color:#b7dfca!important;
}
html[data-theme="light"] .connectedWorkspace .deviceTaskMain b{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .deviceTaskMain small{
  color:var(--ios-muted)!important;
}

/* Evidence */
html[data-theme="light"] .connectedWorkspace .evidenceGrid a{
  background:var(--ios-panel-2)!important;
  border-color:var(--ios-border)!important;
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .evidenceGrid small{
  color:var(--ios-muted)!important;
}

/* Device relation rows */
html[data-theme="light"] .connectedWorkspace .deviceRelRow{
  border-color:var(--ios-border)!important;
}
html[data-theme="light"] .connectedWorkspace .deviceRelRow b{
  color:var(--ios-text)!important;
}
html[data-theme="light"] .connectedWorkspace .deviceRelRow small,
html[data-theme="light"] .connectedWorkspace .deviceRelSummary small{
  color:var(--ios-muted)!important;
}

/* Device Workspace internal scrollbar */
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceFlow,
html[data-theme="light"] .connectedWorkspace .taskRelationCard .deviceTaskList,
html[data-theme="light"] .connectedWorkspace .workspaceBlockerDock .issueRelationCard{
  scrollbar-color:#b8c5cd #eef2f5!important;
}
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceFlow::-webkit-scrollbar,
html[data-theme="light"] .connectedWorkspace .taskRelationCard .deviceTaskList::-webkit-scrollbar,
html[data-theme="light"] .connectedWorkspace .workspaceBlockerDock .issueRelationCard::-webkit-scrollbar{
  width:9px!important;
  height:9px!important;
}
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceFlow::-webkit-scrollbar-track,
html[data-theme="light"] .connectedWorkspace .taskRelationCard .deviceTaskList::-webkit-scrollbar-track,
html[data-theme="light"] .connectedWorkspace .workspaceBlockerDock .issueRelationCard::-webkit-scrollbar-track{
  background:#eef2f5!important;
}
html[data-theme="light"] .connectedWorkspace .deviceWorkspaceFlow::-webkit-scrollbar-thumb,
html[data-theme="light"] .connectedWorkspace .taskRelationCard .deviceTaskList::-webkit-scrollbar-thumb,
html[data-theme="light"] .connectedWorkspace .workspaceBlockerDock .issueRelationCard::-webkit-scrollbar-thumb{
  background:#b8c5cd!important;
  border:2px solid #eef2f5!important;
  border-radius:999px!important;
}

/* Modal footer */
html[data-theme="light"] #modal .modalFoot{
  background:var(--ios-panel)!important;
  border-color:var(--ios-border)!important;
}

/* =====================================================================
   v3.7.9 Real Rack Design Studio
   ===================================================================== */
.rackStudio{--rack-u:18px;display:grid;gap:10px}.rackStudioTop{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.rackTabs,.rackViewTabs{display:flex;gap:5px;flex-wrap:wrap}.rackTabs button,.rackViewTabs button{background:var(--ios-panel);color:var(--ios-text);border:1px solid var(--ios-border);min-height:34px}.rackTabs button.active,.rackViewTabs button.active{background:var(--ios-text);color:var(--ios-bg);border-color:var(--ios-text)}
.rackStudioGrid{display:grid;grid-template-columns:260px minmax(430px,1.2fr) minmax(230px,.7fr) minmax(240px,.75fr);gap:10px;align-items:start}.rackLibrary,.rackInfoCard,.rackElevationStage{background:var(--ios-panel);border:1px solid var(--ios-border);border-radius:10px;box-shadow:var(--ios-shadow)}.rackLibrary{padding:10px;position:sticky;top:116px}.rackPanelHead{display:flex;align-items:center;justify-content:space-between;gap:8px}.rackPanelHead h3,.rackInfoCard h3{margin:0;font-size:var(--text-body)}.rackPanelHead small{display:block;margin-top:2px}.rackSearch{margin:9px 0;background:var(--ios-panel-2)!important;color:var(--ios-text)!important;border-color:var(--ios-border)!important}.rackFilterRow{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.rackFilterRow button{padding:5px 8px;background:var(--ios-panel-2);color:var(--ios-text);border-color:var(--ios-border)}.rackFilterRow button.active{background:var(--ios-text);color:var(--ios-bg)}.rackLibraryItems{display:grid;gap:5px;max-height:660px;overflow:auto}.rackLibraryItem{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;text-align:left;background:var(--ios-panel-2);color:var(--ios-text);border:1px solid var(--ios-border);padding:7px}.rackLibraryItem span:nth-child(2){min-width:0}.rackLibraryItem b,.rackLibraryItem small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rackLibraryItem small{color:var(--ios-muted)}.rackLibraryItem em{font-style:normal;font-size:var(--text-section)}.rackDeviceThumb{height:25px;border-radius:3px;background:#1c252c;color:#dbe8ef;display:grid;place-items:center;font-size:var(--text-small);border:1px solid #45545d}.rackEmptyMini{padding:18px 8px;text-align:center;color:var(--ios-muted);font-size:var(--text-body)}
.rackElevationStage{padding:10px;min-height:720px}.rackElevationTitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px}.rackElevationTitle h3{margin:2px 0 0;font-size:var(--text-body)}.rackElevationTitle span,.rackElevationTitle small{color:var(--ios-muted);font-size:var(--text-small)}.realRack{width:min(430px,96%);margin:0 auto;background:linear-gradient(90deg,#15191c,#30363a 7%,#171b1e 13%,#171b1e 87%,#30363a 93%,#15191c);border:2px solid #111;border-radius:9px 9px 4px 4px;padding:8px 14px 12px;box-shadow:0 14px 35px #0005,inset 0 0 0 1px #566068}.rackTop{height:48px;background:linear-gradient(#2d3337,#161a1d);border:1px solid #080a0b;border-radius:5px 5px 2px 2px;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:7px 10px}.rackTop b,.rackTop small{display:block}.rackTop small{color:#b8c0c5;font-size:9px}.rackTop strong{background:#1117;border:1px solid #5b646a;padding:5px 7px;border-radius:5px}.rackFrame{position:relative;background:#080b0d;border:1px solid #41494e;padding:5px 25px}.rackRail{position:absolute;top:4px;bottom:4px;width:16px;background:repeating-linear-gradient(to bottom,#444 0 2px,#171a1c 2px 9px);border:1px solid #555}.rackRail.left{left:5px}.rackRail.right{right:5px}.rackUnits{display:flex;flex-direction:column}.realRackU{height:var(--rack-u);position:relative;border-top:1px solid #252c30;background:linear-gradient(90deg,#101416,#151a1d,#101416)}.realRackU:hover{background:#123146}.realRackU .uNum{position:absolute;left:-21px;top:1px;width:15px;text-align:center;color:#aab4ba;font-size:8px;z-index:3}.rackPlaced{position:absolute;left:2px;right:2px;top:0;z-index:4}.rackFace{height:100%;min-height:16px;background:linear-gradient(#30363a,#14181b);border:1px solid #4b555b;border-radius:2px;color:#e9eef1;display:flex;align-items:center;gap:6px;padding:2px 6px;box-shadow:inset 0 1px #687178;overflow:hidden;cursor:grab}.rackFace:hover{outline:1px solid #2d9bf0}.rackGrab{color:#77848c;font-size:var(--text-small)}.rackFaceText{min-width:72px;max-width:125px}.rackFaceText b,.rackFaceText small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rackFaceText b{font-size:8px}.rackFaceText small{font-size:7px;color:#aab5bc}.rackPorts{display:flex;gap:2px;flex:1;justify-content:center}.rackPorts i{width:7px;height:5px;background:#07090a;border:1px solid #59646b;border-radius:1px}.rackPorts i.lit{box-shadow:0 0 3px #40e67b;background:#1f7b42}.rackVents{flex:1;height:8px;background:repeating-linear-gradient(90deg,#090b0c 0 3px,#353c40 3px 4px)}.rackUSize{font-size:var(--text-small);color:#9ca8af;margin-left:auto}.rackFace-network{border-left:3px solid #2488d8}.rackFace-av{border-left:3px solid #8a6be8}.rackFace-security{border-left:3px solid #e2a62d}.rackFace-power{border-left:3px solid #df5555}.rackBase{height:42px;background:linear-gradient(#1e2326,#0e1113);display:flex;align-items:center;justify-content:space-around;border:1px solid #080a0b}.rackBase i{width:30px;height:30px;border-radius:50%;background:repeating-radial-gradient(circle,#0b0d0e 0 2px,#30373b 3px 4px)}
.rackInfoColumn,.rackDeviceColumn{display:grid;gap:10px}.rackInfoCard{padding:11px}.rackInfoCard dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:12px 0 0;font-size:var(--text-body)}.rackInfoCard dt{color:var(--ios-muted)}.rackInfoCard dd{margin:0;color:var(--ios-text);font-weight:var(--weight-semibold)}.rackStatus{background:var(--ios-accent-soft);color:var(--ios-accent);padding:3px 7px;border-radius:999px}.rackSummaryBig{display:flex;align-items:baseline;gap:6px;margin-top:12px}.rackSummaryBig b{font-size:var(--text-title)}.rackSummaryBig span{color:var(--ios-muted);font-size:var(--text-small)}.rackMeter{height:8px;background:var(--ios-panel-2);border-radius:999px;overflow:hidden;margin:9px 0}.rackMeter i{display:block;height:100%;background:#1688e8}.rackDeviceList{display:grid;margin-top:8px}.rackDeviceList button{display:grid;grid-template-columns:42px 30px 1fr auto;align-items:center;gap:7px;background:transparent;color:var(--ios-text);border:0;border-top:1px solid var(--ios-border);border-radius:0;text-align:left;padding:8px 2px}.rackDeviceList button strong{font-size:var(--text-small);color:var(--ios-muted)}.rackDeviceList button span:nth-child(3) b,.rackDeviceList button span:nth-child(3) small{display:block}.rackDeviceList button span:nth-child(3) small{color:var(--ios-muted);font-size:var(--text-small)}.rackDeviceList button em{font-style:normal;font-size:var(--text-small)}.miniRackFace{height:9px;background:#20282d;border:1px solid #4b5961}.rackElevationCard{text-align:center}.rackElevationCard .rackPanelHead{text-align:left}.rackElevationCard>b,.rackElevationCard>small{display:block}.rackMiniElevation{width:80px;height:140px;border:3px solid #20282d;margin:12px auto 7px;padding:4px;display:flex;flex-direction:column;gap:2px}.rackMiniElevation i{flex:1;background:#5c666c}.rackAlternateView{min-height:640px;display:grid;place-items:center;align-content:center;color:var(--ios-muted)}.realRackGhost{width:300px;height:520px;border:10px solid #252c31;background:repeating-linear-gradient(to bottom,#111 0 12px,#30383d 12px 14px);display:grid;place-items:center;color:#aab5bb;font-size:11px}.rackAlternateView p{font-size:var(--text-body)}
html[data-theme="light"] .rackFaceText b,html[data-theme="light"] .rackFaceText small,html[data-theme="light"] .rackUSize{color:#f2f6f8!important}
@media(max-width:1450px){.rackStudioGrid{grid-template-columns:220px minmax(400px,1fr) minmax(220px,.65fr)}.rackDeviceColumn{grid-column:3}.rackInfoColumn{grid-column:3}.rackElevationStage{grid-row:2 / span 2;grid-column:2}.rackLibrary{grid-row:2 / span 2;grid-column:1}}
@media(max-width:1050px){.rackStudioGrid{grid-template-columns:1fr}.rackLibrary,.rackElevationStage,.rackInfoColumn,.rackDeviceColumn{grid-column:1!important;grid-row:auto!important;position:static}.rackLibraryItems{max-height:260px}.rackElevationStage{min-height:0}}

/* =====================================================================
   v3.8.0 Network & Cabling Studio
   ===================================================================== */
.networkStudio{
  display:grid;
  gap:10px;
  color:var(--ios-text);
}
.networkProjectBadge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 11px;
  border-radius:8px;
  background:#10293a;
  color:#fff;
  border:1px solid #29495c;
  font-size:var(--text-small);
}
.networkTopBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.networkTopTabs,
.networkTopActions,
.networkConnectionFilters{
  display:flex;
  gap:5px;
  align-items:center;
  flex-wrap:wrap;
}
.networkTopTabs button,
.networkTopActions button,
.networkConnectionFilters button{
  min-height:31px!important;
  padding:6px 10px!important;
  background:var(--ios-panel)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:7px!important;
  font-size:var(--text-small)!important;
}
.networkTopTabs button.active,
.networkConnectionFilters button.active{
  background:#102c3f!important;
  color:#fff!important;
  border-color:#173f59!important;
}
.networkTopActions .networkPrimaryAction{
  background:#102c3f!important;
  color:#fff!important;
  border-color:#173f59!important;
}
.networkSectionCard{
  background:var(--ios-panel);
  border:1px solid var(--ios-border);
  border-radius:10px;
  box-shadow:var(--ios-shadow);
  overflow:hidden;
}
.networkSectionHead{
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid var(--ios-border);
  background:var(--ios-panel);
}
.networkSectionHead>div:first-child{min-width:0}
.networkSectionHead h2{
  margin:0;
  font-size:var(--text-body);
  line-height:1.15;
  color:var(--ios-text);
}
.networkSectionHead h2 span{
  color:var(--ios-muted);
  font-weight:var(--weight-semibold);
}
.networkSectionHead small{
  display:block;
  margin-top:2px;
  font-size:var(--text-small);
  color:var(--ios-muted);
}
.networkSectionHead button,
.networkRowActions button,
.compactBtn{
  min-height:28px!important;
  height:28px!important;
  padding:4px 8px!important;
  font-size:var(--text-small)!important;
}
.networkTableWrap{
  width:100%;
  overflow:auto;
}
.networkVlanTable,
.networkConnectionTable{
  width:100%;
  border-collapse:collapse;
}
.networkVlanTable th,.networkVlanTable td,
.networkConnectionTable th,.networkConnectionTable td{
  padding:6px 9px;
  border-bottom:1px solid var(--ios-border);
  text-align:left;
  font-size:var(--text-small);
  white-space:nowrap;
}
.networkVlanTable th,.networkConnectionTable th{
  background:var(--ios-panel-2);
  color:var(--ios-muted);
  font-size:var(--text-small);
  text-transform:none;
  letter-spacing:0;
}
.vlanDot{
  width:8px;height:8px;
  display:inline-block;
  border-radius:50%;
  margin-right:7px;
}
.vlanColorBox{
  width:12px;height:12px;
  display:inline-block;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.12);
}
.networkDeviceList,
.networkPatchList{
  display:grid;
}
.networkDeviceCard,
.networkPatchCard{
  display:grid;
  grid-template-columns:330px minmax(0,1fr) 220px auto;
  gap:12px;
  align-items:center;
  min-height:92px;
  padding:8px 10px;
  border-bottom:1px solid var(--ios-border);
  background:var(--ios-panel);
}
.networkDeviceCard:last-child,.networkPatchCard:last-child{border-bottom:0}
.networkDeviceIdentity,
.networkPatchIdentity{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.networkDeviceIdentity h3,
.networkPatchIdentity h3{
  margin:0 0 2px;
  font-size:var(--text-body);
  color:var(--ios-text);
}
.networkDeviceIdentity b,
.networkPatchIdentity b{
  display:block;
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
  color:var(--ios-text);
}
.networkDeviceIdentity small,
.networkPatchIdentity small{
  display:block;
  margin-top:2px;
  color:var(--ios-muted);
  font-size:var(--text-small);
}
.networkOnline{
  display:inline-block;
  margin-top:4px;
  padding:2px 6px;
  border-radius:999px;
  background:#e7f7ed;
  color:#17824c;
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
}
.networkMiniSwitch,.networkMiniPatch{
  position:relative;
  flex:0 0 112px;
  width:112px;
  height:26px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2px;
  align-items:center;
  padding:5px 7px;
  border-radius:4px;
  background:linear-gradient(#2d3439,#111518);
  box-shadow:inset 0 0 0 1px #0008,0 1px 2px #0003;
}
.networkMiniSwitch:before{
  content:'';
  position:absolute;
  left:5px;top:4px;
  width:3px;height:3px;
  border-radius:50%;
  background:#45cf7b;
}
.networkMiniSwitch i,.networkMiniPatch i{
  display:block;
  height:6px;
  border-radius:1px;
  background:#1e2428;
  border:1px solid #6e777d;
}
.networkSwitchFace{
  min-width:0;
  padding:5px 8px 4px;
  border:1px solid var(--ios-border);
  border-radius:7px;
  background:var(--ios-panel-2);
}
.networkPortNumbers{
  display:grid;
  grid-template-columns:repeat(24,minmax(19px,1fr));
  gap:2px;
  align-items:end;
}
.networkPortJack{
  position:relative;
  min-width:0!important;
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  padding:2px!important;
  border:0!important;
  background:transparent!important;
  color:var(--ios-text)!important;
}
.networkPortJack span{
  display:block;
  font-size:var(--text-small);
  line-height:9px;
  color:var(--ios-muted);
}
.networkPortJack i{
  position:relative;
  display:block;
  width:100%;
  height:16px;
  border-radius:2px;
  background:#151a1e;
  border:2px solid var(--port-color,#c7d0d7);
  box-shadow:inset 0 0 0 2px #080b0d;
}
.networkPortJack.used i:after,
.networkPortJack.trunk i:after,
.networkPortJack.poe i:after{
  content:'';
  position:absolute;
  left:2px;right:2px;bottom:-4px;
  height:2px;
  border-radius:99px;
  background:var(--port-color);
}
.networkPortLegend{
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:5px;
  font-size:var(--text-small);
  color:var(--ios-muted);
}
.networkPortLegend span{display:flex;align-items:center;gap:3px}
.networkPortLegend i{
  width:7px;height:7px;
  border-radius:2px;
  background:#c7d0d7;
}
.networkPortLegend .legendTrunk{background:#2387e8}
.networkPortLegend .legendPoe{background:#27b36a}
.networkDeviceStats,
.networkPatchStats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px 12px;
  font-size:var(--text-small);
  color:var(--ios-muted);
}
.networkDeviceStats span,
.networkPatchStats span{
  display:flex;
  justify-content:space-between;
  gap:5px;
}
.networkDeviceStats b,
.networkPatchStats b{
  color:var(--ios-text);
}
.networkRowActions{
  display:flex;
  gap:5px;
}
.networkRowActions .iconOnly{
  width:31px!important;
  padding:0!important;
}
.networkPatchFace{
  display:grid;
  grid-template-columns:repeat(24,minmax(18px,1fr));
  gap:3px;
  padding:5px 7px;
  border:1px solid var(--ios-border);
  border-radius:7px;
  background:var(--ios-panel-2);
}
.patchJack{
  min-width:0!important;
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  padding:1px!important;
  border:0!important;
  background:transparent!important;
}
.patchJack span{
  display:block;
  font-size:6.5px;
  color:var(--ios-muted);
}
.patchJack i{
  display:block;
  height:14px;
  border-radius:2px;
  background:#191e21;
  border:2px solid #69747b;
}
.patchJack.used i{border-color:#269c64;box-shadow:0 0 0 1px #269c6433}
.networkConnectionHead>div:last-child{
  display:flex;
  gap:5px;
}
.networkConnectionFilters{
  padding:7px 10px;
  border-bottom:1px solid var(--ios-border);
  background:var(--ios-panel);
}
.vlanPill{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.vlanPill i{
  width:7px;height:7px;
  border-radius:50%;
}
.connectionStatus{
  display:inline-flex;
  align-items:center;
  padding:2px 6px;
  border-radius:999px;
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
}
.connectionStatus.active{background:#e6f7ed;color:#18834c}
.connectionStatus.progress{background:#fff5dc;color:#8d6400}
.connectionStatus.planned{background:#eef2f5;color:#657580}

/* Dark mode */
html[data-theme="dark"] .networkOnline{background:#163629;color:#70d99c}
html[data-theme="dark"] .connectionStatus.active{background:#163629;color:#70d99c}
html[data-theme="dark"] .connectionStatus.progress{background:#3a3015;color:#f0cf73}
html[data-theme="dark"] .connectionStatus.planned{background:#222c34;color:#a6b3bd}
html[data-theme="dark"] .networkTopTabs button.active,
html[data-theme="dark"] .networkConnectionFilters button.active,
html[data-theme="dark"] .networkTopActions .networkPrimaryAction{
  background:#1b3a50!important;
  border-color:#2a5875!important;
  color:#fff!important;
}

@media(max-width:1450px){
  .networkDeviceCard,.networkPatchCard{
    grid-template-columns:260px minmax(0,1fr) 180px auto;
  }
  .networkPortNumbers{grid-template-columns:repeat(12,minmax(19px,1fr))}
}
@media(max-width:1050px){
  .networkDeviceCard,.networkPatchCard{
    grid-template-columns:1fr;
  }
  .networkDeviceStats,.networkPatchStats{
    grid-template-columns:repeat(4,1fr);
  }
  .networkRowActions{justify-content:flex-end}
}
@media(max-width:720px){
  .networkPortNumbers{grid-template-columns:repeat(8,minmax(22px,1fr))}
  .networkPatchFace{grid-template-columns:repeat(8,minmax(22px,1fr))}
  .networkDeviceStats,.networkPatchStats{grid-template-columns:1fr 1fr}
}

/* v3.8.1 Network visual polish */
#page-network .pageHead h1,#page-network h1{font-size:var(--text-section)!important;letter-spacing:-.02em}
#networkHint{font-size:var(--text-small)!important;line-height:1.35!important}
.networkStudio{gap:12px!important}
.networkTopBar{min-height:40px!important}
.networkTopTabs,.networkTopActions{gap:7px!important}
.networkTopTabs button,.networkTopActions button,.networkConnectionFilters button{
 min-height:34px!important;height:34px!important;padding:7px 12px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;border-radius:7px!important}
.networkSectionHead{min-height:50px!important;padding:9px 12px!important}
.networkSectionHead h2{font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
.networkSectionHead small{font-size:var(--text-small)!important;line-height:1.35!important;margin-top:3px!important}
.networkSectionHead button{min-height:31px!important;height:31px!important;font-size:var(--text-small)!important;padding:5px 10px!important}
.networkVlanTable th,.networkVlanTable td,.networkConnectionTable th,.networkConnectionTable td{padding:7px 11px!important;font-size:var(--text-small)!important}
.networkVlanTable th,.networkConnectionTable th{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
.networkDeviceCard,.networkPatchCard{
 grid-template-columns:300px minmax(560px,1fr) 210px 82px!important;gap:14px!important;min-height:112px!important;padding:10px 12px!important}
.networkDeviceIdentity,.networkPatchIdentity{gap:14px!important}
.networkDeviceIdentity h3,.networkPatchIdentity h3{font-size:var(--text-body)!important;margin-bottom:3px!important}
.networkDeviceIdentity b,.networkPatchIdentity b{font-size:var(--text-small)!important}
.networkDeviceIdentity small,.networkPatchIdentity small{font-size:var(--text-small)!important;line-height:1.35!important}
.networkOnline{font-size:var(--text-small)!important;padding:3px 7px!important}
.networkMiniSwitch,.networkMiniPatch{
 flex-basis:128px!important;width:128px!important;height:34px!important;grid-template-columns:repeat(12,1fr)!important;gap:2px!important;padding:8px 8px 6px!important;
 border-radius:4px!important;background:linear-gradient(180deg,#3b4247 0%,#171b1e 46%,#0e1113 100%)!important;border:1px solid #080a0c!important;
 box-shadow:inset 0 1px 0 #ffffff22,inset 0 -1px 0 #000,0 2px 3px #0003!important}
.networkMiniSwitch em,.networkMiniPatch em{position:absolute;left:8px;bottom:3px;width:16px;height:2px;background:#79838a;border-radius:2px}
.networkMiniSwitch b,.networkMiniPatch b{position:absolute;right:7px;bottom:3px;width:10px;height:2px;background:#49535a;border-radius:2px}
.networkMiniSwitch .switchLed{position:absolute!important;left:6px!important;top:5px!important;width:4px!important;height:4px!important;border-radius:50%!important;background:#43d17c!important;box-shadow:0 0 4px #43d17c!important}
.networkMiniSwitch i,.networkMiniPatch i{height:8px!important;border-color:#7d878e!important;background:#0c0f11!important;box-shadow:inset 0 0 0 1px #000!important}
.networkSwitchFace,.networkPatchFace{padding:7px 9px 6px!important;border-radius:7px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important}
.networkPortNumbers{gap:3px!important}
.networkPortJack{height:42px!important;min-height:42px!important}
.networkPortJack span,.patchJack span{font-size:8px!important;font-weight:var(--weight-semibold)!important;line-height:12px!important}
.networkPortJack i{height:19px!important;border-width:3px!important;border-radius:2px!important;box-shadow:inset 0 0 0 2px #080b0d,0 1px 1px #0002!important}
.networkPortJack i:before{content:'';position:absolute;left:24%;right:24%;top:2px;height:2px;background:#7b858c;border-radius:1px;opacity:.7}
.networkPortLegend{font-size:var(--text-small)!important;gap:11px!important;margin-top:7px!important}
.networkPortLegend i{width:8px!important;height:8px!important}
.networkPortLegend .legendAvailable{background:#7f8b94!important}.networkPortLegend .legendDisabled{background:#3c444a!important}
.networkDeviceStats,.networkPatchStats{font-size:var(--text-small)!important;gap:7px 14px!important}
.networkDeviceStats b,.networkPatchStats b{font-size:var(--text-small)!important}
.networkRowActions button,.compactBtn{font-size:var(--text-small)!important;min-height:30px!important;height:30px!important}
.networkPatchFace{gap:4px!important}.patchJack{height:39px!important;min-height:39px!important}
.patchJack i{height:18px!important;border-width:3px!important;background:linear-gradient(#242b2f,#0d1012)!important;box-shadow:inset 0 0 0 2px #090c0e!important}
.patchJack.used i{border-color:#24a765!important;box-shadow:inset 0 0 0 2px #090c0e,0 0 0 1px #24a76555!important}
.networkConnectionFilters{padding:8px 11px!important;gap:6px!important}
.connectionStatus{font-size:var(--text-small)!important;padding:3px 7px!important}.networkProjectBadge{font-size:var(--text-small)!important;min-height:34px!important;padding:7px 12px!important}
html[data-theme="light"] .networkSectionCard,html[data-theme="light"] .networkDeviceCard,html[data-theme="light"] .networkPatchCard,html[data-theme="light"] .networkSectionHead{background:#fff!important}
html[data-theme="light"] .networkSwitchFace,html[data-theme="light"] .networkPatchFace{background:#f7f9fb!important;border-color:#d6dee5!important}
html[data-theme="light"] .networkTopTabs button,html[data-theme="light"] .networkTopActions button,html[data-theme="light"] .networkConnectionFilters button{background:#fff!important}
html[data-theme="light"] .networkTopTabs button.active,html[data-theme="light"] .networkConnectionFilters button.active{background:#102c3f!important;color:#fff!important;border-color:#102c3f!important}
#page-network .pageBody,#page-network .content,#networkBody{max-width:none!important}
@media(min-width:1500px){.networkDeviceCard,.networkPatchCard{grid-template-columns:300px minmax(650px,1fr) 220px 84px!important}}
@media(max-width:1320px){.networkDeviceCard,.networkPatchCard{grid-template-columns:260px minmax(480px,1fr) 170px auto!important}}
@media(max-width:1050px){.networkDeviceCard,.networkPatchCard{grid-template-columns:1fr!important}}


/* =====================================================================
   v3.8.2 GLOBAL VISUAL REDESIGN
   Approved IntegratorOS reference: clean, compact, light/dark, project-first.
   Personal IntegratorOS branding only. No ForTech branding/assets.
   ===================================================================== */
:root,html[data-theme="light"]{
 --v382-bg:#f4f7fa;--v382-panel:#fff;--v382-soft:#f8fafc;--v382-line:#e2e8ee;
 --v382-text:#17232d;--v382-muted:#71818e;--v382-accent:#1683e8;--v382-accent2:#0869c4;
 --v382-good:#1f9d67;--v382-warn:#d98b18;--v382-bad:#d64c59;--v382-shadow:0 1px 2px rgba(20,40,55,.04),0 5px 16px rgba(20,40,55,.035)
}
html[data-theme="dark"]{
 --v382-bg:#0c1218;--v382-panel:#121a21;--v382-soft:#172129;--v382-line:#26323c;
 --v382-text:#edf4f8;--v382-muted:#91a0ab;--v382-accent:#42a5ff;--v382-accent2:#70bbff;
 --v382-good:#52c88d;--v382-warn:#f0aa3d;--v382-bad:#ef6b76;--v382-shadow:none
}
body{background:var(--v382-bg)!important;color:var(--v382-text)!important}
.shell371,.shell371>main,.shell371 .content,.shell371 .view{background:var(--v382-bg)!important;color:var(--v382-text)!important}
.appRail371{width:58px!important;background:var(--v382-panel)!important;border-color:var(--v382-line)!important;padding:8px 6px!important}
.rail371Logo{width:38px!important;height:38px!important;min-height:38px!important;background:linear-gradient(145deg,#188eea,#0863bd)!important;color:#fff!important;border-radius:10px!important;margin-bottom:12px!important}
.iosMark{font-size:17px;display:block;transform:rotate(45deg)}
.rail371Btn{width:44px!important;height:46px!important;min-height:46px!important;border-radius:9px!important;color:var(--v382-muted)!important}
.rail371Btn span{font-size:var(--text-section)!important}.rail371Btn small{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
.rail371Btn:hover{background:var(--v382-soft)!important;color:var(--v382-text)!important}.rail371Btn.active{background:color-mix(in srgb,var(--v382-accent) 13%,transparent)!important;color:var(--v382-accent)!important}
.shell371>aside.contextNav371{left:58px!important;width:218px!important;background:var(--v382-panel)!important;border-color:var(--v382-line)!important;padding:10px 9px!important}
.contextNav371 .brand{min-height:43px!important;border-color:var(--v382-line)!important}.contextNav371 .brand b{font-size:var(--text-body)!important;letter-spacing:-.02em!important;color:var(--v382-text)!important}.contextNav371 .brand span{color:var(--v382-accent)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
.contextNav371 .userCard{border-color:var(--v382-line)!important;color:var(--v382-text)!important}.contextNav371 .navSectionToggle{color:var(--v382-muted)!important;font-size:var(--text-small)!important}.contextNav371 .navBtn{min-height:34px!important;font-size:var(--text-small)!important;color:var(--v382-muted)!important}.contextNav371 .navBtn:hover{background:var(--v382-soft)!important;color:var(--v382-text)!important}.contextNav371 .navBtn.active{background:color-mix(in srgb,var(--v382-accent) 11%,transparent)!important;color:var(--v382-accent)!important;font-weight:var(--weight-semibold)!important}
.shell371>main{margin-left:276px!important;width:calc(100% - 276px)!important}
.shell371 main>header{height:52px!important;background:var(--v382-panel)!important;border-color:var(--v382-line)!important;padding:0 16px!important}
.shell371 .shellCrumb small{font-size:var(--text-small)!important;color:var(--v382-muted)!important}.shell371 .shellCrumb b{font-size:var(--text-body)!important;color:var(--v382-text)!important}
.shell371 .shellBackBtn,.shell371 .themeToggle,.shell371 .notificationBell{background:var(--v382-soft)!important;border-color:var(--v382-line)!important;color:var(--v382-muted)!important}
.shell371 .shellProjectContext{background:var(--v382-soft)!important;border-color:var(--v382-line)!important}.shell371 .shellProjectContext select{background:transparent!important;color:var(--v382-text)!important;border:0!important;font-weight:var(--weight-semibold)!important}
.shell371 #workflowRibbon{background:var(--v382-panel)!important;border-color:var(--v382-line)!important;padding:6px 14px!important}
.shell371 .content{padding:16px 18px 28px!important;max-width:1800px!important;margin:0 auto!important;width:100%!important}
.shell371 .pageHead,.shell371 .projectHomeHead{min-height:58px!important;padding:7px 2px 13px!important;align-items:center!important}
.shell371 .pageHead h2,.shell371 .projectHomeHead h2{font-size:var(--text-section)!important;line-height:1.1!important;font-weight:var(--weight-semibold)!important;letter-spacing:-.025em!important;color:var(--v382-text)!important}
.shell371 .pageHead p,.shell371 .projectHomeHead p{font-size:var(--text-small)!important;line-height:1.4!important;color:var(--v382-muted)!important;margin-top:5px!important}
.shell371 .pageHead>div:last-child button,.shell371 .projectHomeHead button{min-height:33px!important;padding:7px 12px!important;font-size:var(--text-small)!important;background:var(--v382-accent)!important;border-color:var(--v382-accent)!important;color:#fff!important;font-weight:var(--weight-semibold)!important}
.shell371 .card,.shell371 .itemCard,.shell371 .workspaceHero,.shell371 .projectGraphCard,.shell371 .projectLaunchCard,.shell371 .projectCommandHero,.shell371 .projectRelationshipCard,.shell371 .operatingPhase,.shell371 .moduleTableCard,.shell371 .moduleManageBar{background:var(--v382-panel)!important;border:1px solid var(--v382-line)!important;border-radius:10px!important;color:var(--v382-text)!important;box-shadow:var(--v382-shadow)!important}
.shell371 .card{padding:13px!important}.shell371 .sectionTitle{font-size:var(--text-body)!important;color:var(--v382-text)!important;margin:17px 0 8px!important}
.shell371 button:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard){min-height:31px;border-radius:7px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
.shell371 input,.shell371 select,.shell371 textarea{background:var(--v382-panel)!important;border:1px solid var(--v382-line)!important;color:var(--v382-text)!important;border-radius:7px!important;font-size:var(--text-small)!important;min-height:35px!important;padding:7px 9px!important}
.shell371 table{font-size:var(--text-small)!important}.shell371 thead th{background:var(--v382-soft)!important;color:var(--v382-muted)!important;border-color:var(--v382-line)!important;padding:9px 10px!important;font-size:var(--text-small)!important;text-transform:uppercase!important;letter-spacing:.035em!important}.shell371 tbody td{color:var(--v382-text)!important;border-color:var(--v382-line)!important;padding:9px 10px!important;font-size:var(--text-small)!important}.shell371 tbody tr:hover td{background:color-mix(in srgb,var(--v382-accent) 3.5%,var(--v382-panel))!important}
.moduleManageBar{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important;margin-bottom:10px!important}.moduleSearch{min-width:min(360px,100%)!important;margin:0!important}.moduleSelectionTools{gap:6px!important}.moduleTableCard{padding:0!important;overflow:hidden!important}
.metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important}.metric{background:var(--v382-panel)!important;border:1px solid var(--v382-line)!important;border-radius:10px!important;padding:13px!important;box-shadow:var(--v382-shadow)!important;position:relative!important;overflow:hidden!important}.metric:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--v382-accent)}.metric b{font-size:var(--text-title)!important;color:var(--v382-text)!important;letter-spacing:-.03em!important}.metric span{font-size:var(--text-small)!important;color:var(--v382-muted)!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.pill,.connectionStatus{border-radius:999px!important}.rowActionGroup{gap:5px!important}.smallBtn{min-height:27px!important;padding:5px 8px!important}
.projectCardGrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:12px!important}.projectLaunchCard{min-height:178px!important;padding:0!important;overflow:hidden!important}.projectLaunchMain{padding:14px!important}.projectLaunchStats{background:var(--v382-soft)!important;border-color:var(--v382-line)!important}
/* Preserve specialized studios while harmonizing their outer surfaces. */
#plans .planWorkspace,#network .networkStudio,#rack .rackStudio{color:var(--v382-text)!important}#plans .planInspector .card,#network .networkSectionCard,#rack .rackElevationStage,#rack .rackLibrary,#rack .rackInfoPanels{border-color:var(--v382-line)!important}
/* High-visibility labels in light Plan Studio are intentional. */
html[data-theme="light"] .planMarker .label,html[data-theme="light"] .planDeviceLabel{background:#15232d!important;color:#fff!important;border-color:#15232d!important}
/* Dialogs now follow the same system. */
dialog{background:var(--v382-panel)!important;color:var(--v382-text)!important;border-color:var(--v382-line)!important;border-radius:12px!important;box-shadow:0 24px 70px rgba(0,0,0,.24)!important}.modalHead,.modalFoot{border-color:var(--v382-line)!important}
/* Personal project: make accidental third-party branding impossible in generic UI. */
.fortechBrand,.fortechLogo,[data-brand="fortech"]{display:none!important}
@media(max-width:900px){.shell371>aside.contextNav371{width:184px!important}.shell371>main{margin-left:242px!important;width:calc(100% - 242px)!important}.shell371 .content{padding:13px!important}}
@media(max-width:700px){.appRail371{width:50px!important}.shell371>aside.contextNav371{display:none!important}.shell371>main{margin-left:50px!important;width:calc(100% - 50px)!important}.shell371 .content{padding:10px!important}.moduleManageBar{align-items:stretch!important;flex-direction:column!important}.moduleSelectionTools{width:100%!important;overflow:auto!important;flex-wrap:nowrap!important}.shell371 .pageHead{min-height:52px!important}}


/* =====================================================================
   v3.8.3 ACTUAL VISUAL REBUILD
   More obvious, reference-driven shell + module treatment.
   ===================================================================== */
:root,html[data-theme="light"]{
 --ui-bg:#f5f7fa;--ui-surface:#ffffff;--ui-surface2:#f8fafc;--ui-border:#dde5ec;
 --ui-text:#18232d;--ui-muted:#71808d;--ui-blue:#137fe5;--ui-blue-soft:#eaf4ff;
 --ui-green:#27a66f;--ui-amber:#dc9225;--ui-red:#df5966;
 --ui-shadow:0 1px 2px rgba(15,23,42,.035),0 8px 24px rgba(15,23,42,.045)
}
html[data-theme="dark"]{
 --ui-bg:#0a1117;--ui-surface:#101820;--ui-surface2:#151f28;--ui-border:#26343f;
 --ui-text:#edf4f8;--ui-muted:#92a3af;--ui-blue:#40a2ff;--ui-blue-soft:#122c42;
 --ui-green:#4ec78d;--ui-amber:#f0aa43;--ui-red:#f06e7b;--ui-shadow:none
}
html,body{background:var(--ui-bg)!important}
body{font-family:var(--font-sans)!important;letter-spacing:0!important}

/* Primary rail: stronger visual identity */
.appRail371{width:64px!important;background:var(--ui-surface)!important;border-right:1px solid var(--ui-border)!important;padding:10px 8px!important;box-shadow:none!important}
.rail371Logo{width:46px!important;height:46px!important;border-radius:13px!important;background:linear-gradient(150deg,#1aa0ff,#0e6bd6)!important;box-shadow:0 8px 18px rgba(19,127,229,.18)!important;margin:0 auto 14px!important}
.rail371Btn{width:48px!important;height:48px!important;margin:2px auto!important;border-radius:11px!important;display:grid!important;place-items:center!important;gap:0!important;color:var(--ui-muted)!important;transition:.16s ease!important}
.rail371Btn span{font-size:var(--text-section)!important;line-height:1!important}.rail371Btn small{display:none!important}
.rail371Btn:hover{transform:translateY(-1px);background:var(--ui-surface2)!important;color:var(--ui-text)!important}.rail371Btn.active{background:var(--ui-blue-soft)!important;color:var(--ui-blue)!important}

/* Context navigation */
.shell371>aside.contextNav371{left:64px!important;width:232px!important;background:var(--ui-surface)!important;border-right:1px solid var(--ui-border)!important;padding:11px 10px!important}
.contextNav371 .brand{min-height:54px!important;padding:0 8px 10px!important;margin-bottom:7px!important;border-bottom:1px solid var(--ui-border)!important;display:flex!important;align-items:center!important;gap:7px!important}
.contextNav371 .brand b{font-size:var(--text-section)!important;color:var(--ui-text)!important;letter-spacing:-.025em!important}.contextNav371 .brand span{background:var(--ui-blue-soft)!important;color:var(--ui-blue)!important;padding:3px 6px!important;border-radius:999px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
.contextNav371 .userCard{background:var(--ui-surface2)!important;border:1px solid var(--ui-border)!important;border-radius:10px!important;padding:8px!important;margin:7px 2px 11px!important}
.contextNav371 .navSection{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.09em!important;color:var(--ui-muted)!important;margin:14px 8px 5px!important}
.contextNav371 .navBtn{min-height:36px!important;border-radius:8px!important;margin:2px 0!important;padding:7px 9px!important;font-size:var(--text-small)!important;color:var(--ui-muted)!important;transition:.14s ease!important}
.contextNav371 .navBtn:hover{background:var(--ui-surface2)!important;color:var(--ui-text)!important}.contextNav371 .navBtn.active{background:var(--ui-blue-soft)!important;color:var(--ui-blue)!important;font-weight:var(--weight-semibold)!important;box-shadow:inset 3px 0 0 var(--ui-blue)!important}

/* Main canvas and top header */
.shell371>main{margin-left:296px!important;width:calc(100% - 296px)!important;background:var(--ui-bg)!important}
.shell371 main>header{height:58px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--ui-border)!important;padding:0 20px!important;backdrop-filter:blur(12px)!important;box-shadow:0 1px 0 rgba(15,23,42,.02)!important}
html[data-theme="dark"] .shell371 main>header{background:rgba(16,24,32,.94)!important}
.shell371 .shellCrumb small{font-size:var(--text-small)!important;text-transform:uppercase!important;letter-spacing:.07em!important;color:var(--ui-muted)!important}.shell371 .shellCrumb b{font-size:var(--text-body)!important;color:var(--ui-text)!important}
.shell371 .shellProjectContext{height:34px!important;background:var(--ui-surface2)!important;border:1px solid var(--ui-border)!important;border-radius:9px!important;padding:0 8px!important}.shell371 .shellProjectContext select{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
.shell371 .shellBackBtn,.shell371 .themeToggle,.shell371 .notificationBell{width:34px!important;height:34px!important;border:1px solid var(--ui-border)!important;background:var(--ui-surface2)!important;border-radius:9px!important;color:var(--ui-muted)!important}
#workflowRibbon{background:var(--ui-surface)!important;border-bottom:1px solid var(--ui-border)!important;padding:8px 18px!important;min-height:42px!important}
.shell371 .content{padding:20px 22px 34px!important;max-width:none!important;background:var(--ui-bg)!important}

/* Page identity */
.shell371 .pageHead,.shell371 .projectHomeHead{min-height:72px!important;padding:4px 0 14px!important;margin-bottom:4px!important;border-bottom:0!important}
.shell371 .pageHead h2,.shell371 .projectHomeHead h2{font-size:var(--text-title)!important;font-weight:var(--weight-semibold)!important;color:var(--ui-text)!important;letter-spacing:-.035em!important}.shell371 .pageHead p,.shell371 .projectHomeHead p{font-size:var(--text-body)!important;color:var(--ui-muted)!important;margin-top:5px!important;max-width:780px!important}
.shell371 .pageHead button,.shell371 .projectHomeHead button{height:35px!important;padding:0 13px!important;border-radius:8px!important;font-size:var(--text-small)!important}

/* Cards and panels */
.shell371 .card,.shell371 .itemCard,.shell371 .workspaceHero,.shell371 .projectGraphCard,.shell371 .projectLaunchCard,.shell371 .projectCommandHero,.shell371 .projectRelationshipCard,.shell371 .operatingPhase,.shell371 .moduleTableCard,.shell371 .moduleManageBar{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:12px!important;box-shadow:var(--ui-shadow)!important;color:var(--ui-text)!important}
.shell371 .card{padding:16px!important}.shell371 .sectionTitle{font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;color:var(--ui-text)!important;margin:20px 0 10px!important}

/* KPI cards become clearly reference-like */
.metrics{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:12px!important}.metric{min-height:92px!important;padding:15px 16px!important;border:1px solid var(--ui-border)!important;border-radius:12px!important;background:var(--ui-surface)!important;box-shadow:var(--ui-shadow)!important}.metric:before{width:4px!important;background:var(--ui-blue)!important}.metric b{font-size:var(--text-title)!important;font-weight:var(--weight-semibold)!important;line-height:1!important;color:var(--ui-text)!important}.metric span{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;color:var(--ui-muted)!important;margin-top:9px!important}

/* Tool bars */
.moduleManageBar{padding:11px 12px!important;margin:6px 0 12px!important;min-height:58px!important;align-items:center!important}.moduleSearch input{height:36px!important}.moduleSelectionTools{display:flex!important;align-items:center!important;gap:7px!important}
.shell371 button:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard){min-height:34px!important;border-radius:8px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;padding:7px 11px!important}
.shell371 button.primary,.shell371 .primary{background:var(--ui-blue)!important;border-color:var(--ui-blue)!important;color:#fff!important}
.shell371 input,.shell371 select,.shell371 textarea{min-height:36px!important;background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:8px!important;color:var(--ui-text)!important;font-size:var(--text-small)!important}

/* Tables */
.moduleTableCard{padding:0!important;overflow:hidden!important}.shell371 table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;font-size:var(--text-small)!important}.shell371 thead th{height:40px!important;padding:10px 12px!important;background:var(--ui-surface2)!important;color:var(--ui-muted)!important;border-bottom:1px solid var(--ui-border)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;text-transform:uppercase!important;letter-spacing:.06em!important}.shell371 tbody td{height:44px!important;padding:10px 12px!important;border-bottom:1px solid var(--ui-border)!important;color:var(--ui-text)!important;font-size:var(--text-small)!important}.shell371 tbody tr:last-child td{border-bottom:0!important}.shell371 tbody tr:hover td{background:color-mix(in srgb,var(--ui-blue) 4%,var(--ui-surface))!important}

/* Project cards */
.projectCardGrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:14px!important}.projectLaunchCard{min-height:190px!important;overflow:hidden!important;transition:transform .16s ease,box-shadow .16s ease!important}.projectLaunchCard:hover{transform:translateY(-2px)!important;box-shadow:0 12px 30px rgba(15,23,42,.08)!important}.projectLaunchMain{padding:16px!important}.projectLaunchStats{background:var(--ui-surface2)!important;border-top:1px solid var(--ui-border)!important;padding:10px 14px!important}

/* Status pills */
.pill,.connectionStatus{border-radius:999px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;padding:4px 7px!important}.rowActionGroup{gap:6px!important}.smallBtn{min-height:28px!important;padding:5px 8px!important}

/* Specialized studios receive full-page framing without changing their behavior */
#plans .planWorkspace,#network .networkStudio,#rack .rackStudio{background:var(--ui-bg)!important;color:var(--ui-text)!important}
#network .networkSectionCard,#rack .rackElevationStage,#rack .rackLibrary,#rack .rackInfoPanels,#plans .planInspector .card{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:12px!important;box-shadow:var(--ui-shadow)!important}
html[data-theme="light"] .planMarker .label,html[data-theme="light"] .planDeviceLabel{background:#16232d!important;color:#fff!important;border-color:#16232d!important;box-shadow:0 2px 5px rgba(0,0,0,.18)!important}

/* Modals */
dialog{background:var(--ui-surface)!important;color:var(--ui-text)!important;border:1px solid var(--ui-border)!important;border-radius:14px!important;box-shadow:0 28px 80px rgba(0,0,0,.28)!important}.modalHead,.modalFoot{border-color:var(--ui-border)!important}

/* Personal product: never show ForTech artwork in the product shell. */
.fortechBrand,.fortechLogo,[data-brand="fortech"],img[alt*="ForTech" i]{display:none!important}

/* Explicit build marker so deployment is visually verifiable. */
.contextNav371 .brand:after{content:"UI";margin-left:auto;font-size:7px;font-weight:var(--weight-semibold);letter-spacing:.08em;color:var(--ui-blue);border:1px solid color-mix(in srgb,var(--ui-blue) 30%,var(--ui-border));border-radius:999px;padding:3px 5px;background:var(--ui-blue-soft)}

@media(max-width:1100px){.shell371>aside.contextNav371{width:210px!important}.shell371>main{margin-left:274px!important;width:calc(100% - 274px)!important}}
@media(max-width:760px){.appRail371{width:54px!important}.shell371>aside.contextNav371{display:none!important}.shell371>main{margin-left:54px!important;width:calc(100% - 54px)!important}.shell371 .content{padding:12px!important}.shell371 main>header{padding:0 10px!important}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ================================================================
   v3.8.4 REAL NETWORK HARDWARE VISUALS
   Switches and patch panels intentionally use different physical
   language: active electronics vs passive structured cabling.
   ================================================================ */
.realSwitchCard,.realPatchCard{min-height:132px!important;padding:13px 12px!important;gap:16px!important}
.switchProductThumb,.patchProductThumb{position:relative;flex:0 0 132px;width:132px;height:42px;border-radius:4px;box-shadow:0 4px 9px #0005,inset 0 1px 0 #ffffff18}
.switchProductThumb{background:linear-gradient(180deg,#39434a 0%,#1a2024 55%,#0d1114 100%);border:1px solid #050708;padding:10px 15px 8px 24px}
.switchProductThumb .rackEar{position:absolute;top:5px;bottom:5px;width:7px;background:#12171a;border:1px solid #4a5359}
.switchProductThumb .rackEar.left{left:3px}.switchProductThumb .rackEar.right{right:3px}
.switchProductThumb .rackEar:after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#90999f;left:1px;top:6px;box-shadow:0 20px 0 #90999f}
.switchBrandMark{position:absolute;left:13px;top:7px;width:5px;height:5px;border-radius:50%;background:#31d17c;box-shadow:0 0 6px #31d17c}
.switchMiniPorts{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:82px;margin-left:7px}
.switchMiniPorts i{height:8px;background:#050708;border:1px solid #78838a;border-radius:1px;box-shadow:inset 0 0 0 1px #1a2125}
.patchProductThumb{background:linear-gradient(180deg,#e9edf0,#b9c0c5);border:1px solid #747d83;padding:10px 10px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;align-items:center}
html[data-theme="dark"] .patchProductThumb{background:linear-gradient(180deg,#4b5257,#24292d);border-color:#687178}
.patchProductThumb>span{position:absolute;left:5px;right:5px;top:5px;height:5px;background:#f8fafb;border:1px solid #aab2b7}
html[data-theme="dark"] .patchProductThumb>span{background:#d7dde1}
.patchProductThumb i{height:11px;background:#0b0d0e;border:2px solid #626c72;border-radius:2px}

.realSwitchFace{position:relative;min-width:0;min-height:106px;padding:15px 88px 23px 118px!important;border:1px solid #07090a!important;border-radius:5px!important;background:linear-gradient(180deg,#343c42 0%,#20272b 18%,#11171a 65%,#090c0e 100%)!important;box-shadow:inset 0 1px 0 #ffffff2c,inset 0 -1px 0 #000,0 4px 12px #0003!important;overflow:hidden}
.realSwitchFace:before{content:'';position:absolute;inset:4px;border:1px solid #4e585e;border-radius:3px;pointer-events:none}
.switchFrontLeft{position:absolute;left:18px;top:22px;width:86px;color:#c8d0d5}
.switchLogoText{display:block;font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:1.1px;color:#aeb8be;margin-bottom:10px}
.switchStatusLeds{display:flex;gap:8px;margin-bottom:5px}.switchStatusLeds i{width:6px;height:6px;border-radius:50%;background:#29ce77;box-shadow:0 0 6px #29ce7788}.switchStatusLeds i:nth-child(3){background:#ffad36}.switchStatusLeds i:nth-child(4){background:#50606a;box-shadow:none}
.switchFrontLeft small{font-size:var(--text-small);color:#748089;letter-spacing:.4px}
.switchPortBank{display:grid;gap:5px 4px;align-content:center;min-height:62px}
.realSwitchFace.ports24 .switchPortBank{grid-template-columns:repeat(12,minmax(28px,1fr))}
.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(24,minmax(24px,1fr))}
.switchRj45{position:relative!important;display:block!important;width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;padding:10px 1px 1px!important;border:0!important;border-radius:2px!important;background:transparent!important;box-shadow:none!important;color:#dce3e7!important}
.switchPortNum{position:absolute;top:0;left:0;right:0;text-align:center;font-size:7px!important;line-height:9px!important;color:#d5dce0!important;font-weight:var(--weight-semibold)!important}
.switchPortHole{position:relative;display:block;width:100%;height:25px;border-radius:2px;background:#050708;border:2px solid #778188;box-shadow:inset 0 0 0 2px #161c20,0 1px 1px #000}
.switchPortHole:before{content:'';position:absolute;left:20%;right:20%;top:2px;height:3px;background:#89939a;border-radius:1px;opacity:.7}
.switchPortHole i{position:absolute;left:18%;right:18%;bottom:3px;height:7px;background:repeating-linear-gradient(90deg,#c89b43 0 2px,#161c20 2px 4px);border-radius:1px;opacity:.75}
.switchPortHole b{position:absolute;left:2px;right:2px;bottom:-4px;height:2px;border-radius:2px;background:var(--port-color,#5d666d);opacity:.35}
.switchRj45.used .switchPortHole,.switchRj45.trunk .switchPortHole,.switchRj45.poe .switchPortHole{border-color:var(--port-color,#31d17c)}
.switchRj45.used .switchPortHole b,.switchRj45.trunk .switchPortHole b,.switchRj45.poe .switchPortHole b{opacity:1}
.switchPortLed{position:absolute;right:3px;top:13px;width:3px;height:3px;border-radius:50%;background:#323b40}
.switchRj45.used .switchPortLed,.switchRj45.trunk .switchPortLed,.switchRj45.poe .switchPortLed{background:#29ce77;box-shadow:0 0 4px #29ce77}
.switchUplinkZone{position:absolute;right:16px;top:20px;width:58px;color:#89959c;text-align:center}.switchUplinkZone small{font-size:6px;letter-spacing:.7px}.sfpRow{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}.sfpRow i{height:16px;background:#050708;border:1px solid #737d84;border-radius:1px}.consolePort{display:block;width:28px;height:8px;margin:7px auto 0;background:#0a0d0f;border:1px solid #5e696f;border-radius:2px}
.rackScrew{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d0d5d8 0 14%,#727b81 16% 45%,#262b2e 47%);z-index:2}.screwTL{left:5px;top:8px}.screwBL{left:5px;bottom:8px}.screwTR{right:5px;top:8px}.screwBR{right:5px;bottom:8px}
.realSwitchFace .networkPortLegend{position:absolute;left:118px;right:88px;bottom:6px;margin:0!important;font-size:7px!important;color:#87949b!important;gap:12px!important}

.realPatchFace{position:relative;min-width:0;min-height:96px;padding:26px 38px 12px!important;border:1px solid #7f888e!important;border-radius:3px!important;background:linear-gradient(180deg,#dfe4e7,#b9c0c4)!important;box-shadow:inset 0 1px 0 #fff,0 3px 10px #0002!important;overflow:hidden}
html[data-theme="dark"] .realPatchFace{background:linear-gradient(180deg,#444b50,#272c30)!important;border-color:#626c72!important;box-shadow:inset 0 1px 0 #ffffff20,0 3px 10px #0003!important}
.patchLabelStrip{position:absolute;left:40px;right:40px;top:6px;height:15px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:#f7f8f8;border:1px solid #9da5aa;color:#333b40}
.patchLabelStrip span{font-size:6px;font-weight:var(--weight-semibold);letter-spacing:1px}.patchLabelStrip small{font-size:6px;color:#667177}
.patchPortBank{display:grid;gap:7px 5px;align-items:center}.realPatchFace.patch24 .patchPortBank{grid-template-columns:repeat(12,minmax(30px,1fr))}.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(24,minmax(25px,1fr))}
.patchKeystone{position:relative!important;display:block!important;height:48px!important;min-height:48px!important;width:100%!important;min-width:0!important;padding:14px 2px 2px!important;border:1px solid #8c959a!important;border-radius:2px!important;background:linear-gradient(#f9fafb,#d5dadd)!important;box-shadow:inset 0 0 0 1px #fff!important;color:#20262a!important}
html[data-theme="dark"] .patchKeystone{background:linear-gradient(#d8dde0,#aeb5b9)!important;border-color:#7d878d!important;color:#1e2427!important}
.patchPortNum{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:7px!important;font-weight:var(--weight-semibold)!important;color:#4a5459!important}
.patchLabelWindow{position:absolute;left:5px;right:5px;top:12px;height:7px;background:#fff;border:1px solid #b9c0c4}
.patchJackHole{position:absolute;left:16%;right:16%;bottom:4px;height:20px;background:#101416;border:2px solid #545e64;border-radius:2px;box-shadow:inset 0 0 0 2px #050708}
.patchJackHole:before{content:'';position:absolute;left:20%;right:20%;top:2px;height:3px;background:#69747a}
.patchJackHole i{position:absolute;left:20%;right:20%;bottom:2px;height:5px;background:repeating-linear-gradient(90deg,#c99b47 0 2px,#111 2px 4px);opacity:.6}
/* Patch panels are passive: do not use VLAN/status colors on jacks. */
.patchKeystone.connected{box-shadow:inset 0 0 0 1px #fff,0 0 0 1px #7e888d!important}
.patchScrew{position:absolute;top:43px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f5f5f5 0 15%,#8d969b 17% 50%,#51595e 52%)}.patchScrewL{left:10px}.patchScrewR{right:10px}

@media(min-width:1500px){.realSwitchCard,.realPatchCard{grid-template-columns:330px minmax(760px,1fr) 220px 84px!important}}
@media(max-width:1450px){.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(12,minmax(28px,1fr))}.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(12,minmax(30px,1fr))}.realSwitchFace{padding-left:100px!important}.realSwitchFace .networkPortLegend{left:100px}}
@media(max-width:1050px){.realSwitchFace{padding:14px 76px 25px 92px!important}.realSwitchFace.ports24 .switchPortBank,.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(8,minmax(28px,1fr))}.realPatchFace.patch24 .patchPortBank,.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(8,minmax(30px,1fr))}}

/* ================================================================
   v3.8.5 NETWORK HARDWARE POLISH
   Goal: switches read immediately as active rack hardware and patch
   panels read immediately as passive structured-cabling hardware.
   ================================================================ */
.networkStudio{max-width:none!important}
.networkDeviceCard.realSwitchCard,
.networkPatchCard.realPatchCard{
  grid-template-columns:270px minmax(720px,1fr) 175px 82px!important;
  min-height:106px!important;
  padding:10px 12px!important;
  gap:14px!important;
  align-items:center!important;
}
.networkDeviceIdentity,.networkPatchIdentity{min-width:0!important}
.networkDeviceIdentity h3,.networkPatchIdentity h3{font-size:var(--text-body)!important;margin:0 0 2px!important}
.networkDeviceIdentity b,.networkPatchIdentity b{font-size:var(--text-small)!important;display:block!important;margin-bottom:2px!important}
.networkDeviceIdentity small,.networkPatchIdentity small{display:block!important;font-size:var(--text-small)!important;line-height:1.25!important;color:var(--ui-muted)!important}
.networkOnline{display:inline-flex!important;margin-top:5px!important;font-size:var(--text-small)!important;padding:2px 7px!important}

.realSwitchFace{
  min-height:78px!important;
  height:78px!important;
  padding:10px 82px 18px 126px!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,#343b40 0%,#20262a 20%,#101416 72%,#080b0d 100%)!important;
}
.realSwitchFace.brand-unifi{background:linear-gradient(180deg,#f2f3f4 0%,#d8dbdd 48%,#bfc4c7 100%)!important;border-color:#8e969b!important}
.realSwitchFace.brand-unifi:before{border-color:#aeb5b9!important}
.realSwitchFace.brand-unifi .switchPortNum,.realSwitchFace.brand-unifi .switchLogoText,.realSwitchFace.brand-unifi .switchUplinkZone small{color:#283238!important}
.realSwitchFace.brand-unifi .switchFrontLeft small{color:#647178!important}
.realSwitchFace.brand-netgear{background:linear-gradient(180deg,#30363a 0%,#1e2428 30%,#0b0e10 100%)!important}
.realSwitchFace.brand-araknis{background:linear-gradient(180deg,#424a50 0%,#252b2f 34%,#0f1315 100%)!important}
.switchFrontLeft{left:20px!important;top:15px!important;width:96px!important}
.switchBrandBadge{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:22px!important;height:22px!important;border-radius:4px!important;background:#0b1114!important;color:#e8eef1!important;border:1px solid #66737a!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;margin-right:5px!important;vertical-align:middle!important}
.brand-unifi .switchBrandBadge{background:#18242b!important;color:#fff!important;border-color:#6e7a81!important}
.switchLogoText{display:inline-block!important;vertical-align:middle!important;margin:0!important;font-size:var(--text-small)!important;letter-spacing:.5px!important;max-width:62px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.switchStatusLeds{margin:7px 0 2px!important;gap:5px!important}.switchStatusLeds i{width:5px!important;height:5px!important}

.switchPortBank{gap:4px 3px!important;min-height:46px!important;align-content:center!important}
.realSwitchFace.ports24 .switchPortBank{grid-template-columns:repeat(24,minmax(20px,1fr))!important}
.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(24,minmax(20px,1fr))!important;grid-auto-rows:25px!important;row-gap:2px!important}
.switchRj45{height:25px!important;min-height:25px!important;padding:7px 1px 0!important}
.switchPortNum{font-size:5.8px!important;line-height:6px!important;top:0!important}
.switchPortHole{height:16px!important;border-width:1px!important}
.switchPortHole:before{height:2px!important;top:1px!important}
.switchPortHole i{bottom:2px!important;height:4px!important;background:repeating-linear-gradient(90deg,#c89b43 0 1px,#161c20 1px 3px)!important}
.switchPortLed{width:2px!important;height:2px!important;top:9px!important;right:2px!important}
.switchUplinkZone{right:16px!important;top:15px!important;width:52px!important}
.sfpRow{grid-template-columns:1fr 1fr!important;gap:4px!important}.sfpRow i{height:18px!important;border-color:#7f8a90!important}
.consolePort{height:6px!important;width:24px!important;margin-top:5px!important}
.realSwitchFace .networkPortLegend{left:126px!important;right:82px!important;bottom:4px!important;gap:8px!important;font-size:6px!important;white-space:nowrap!important;overflow:hidden!important}

/* Patch panel: silver passive chassis, white ID strip, no activity LEDs/colors. */
.realPatchFace{
  min-height:72px!important;
  height:72px!important;
  padding:25px 34px 8px!important;
  background:linear-gradient(180deg,#3a4044,#1e2326)!important;
  border-color:#626b70!important;
}
html[data-theme="light"] .realPatchFace{background:linear-gradient(180deg,#e9edef,#c8ced2)!important;border-color:#969fa4!important}
.patchLabelStrip{left:36px!important;right:36px!important;top:5px!important;height:14px!important;background:#f5f7f8!important;color:#263036!important;border-color:#9da6ab!important}
.patchPortBank{gap:3px!important}
.realPatchFace.patch24 .patchPortBank{grid-template-columns:repeat(24,minmax(20px,1fr))!important}
.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(24,minmax(20px,1fr))!important;grid-auto-rows:21px!important;row-gap:2px!important}
.patchKeystone{height:22px!important;min-height:22px!important;padding:6px 1px 1px!important;background:#e9ecee!important;border:1px solid #7e888d!important;box-shadow:inset 0 0 0 1px #fff!important}
.patchPortNum{font-size:5.5px!important;top:0!important;color:#414c52!important}
.patchLabelWindow{left:2px!important;right:2px!important;top:6px!important;height:4px!important;background:#fff!important;border-color:#aeb6ba!important}
.patchJackHole{left:13%!important;right:13%!important;bottom:1px!important;height:10px!important;border-width:1px!important;background:#0c1012!important}
.patchJackHole:before{display:none!important}.patchJackHole i{display:none!important}
.patchKeystone.connected,.patchKeystone.connected .patchJackHole{border-color:#7e888d!important;box-shadow:inset 0 0 0 1px #fff!important}
.patchScrew{top:32px!important;width:8px!important;height:8px!important}

.networkDeviceStats,.networkPatchStats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px 10px!important;align-content:center!important}
.networkDeviceStats span,.networkPatchStats span{display:flex!important;justify-content:space-between!important;gap:8px!important;font-size:var(--text-small)!important}.networkDeviceStats b,.networkPatchStats b{font-size:var(--text-small)!important}
.networkRowActions{display:flex!important;gap:5px!important;justify-content:flex-end!important}
.networkRowActions button{min-height:30px!important;padding:5px 8px!important;font-size:var(--text-small)!important}

@media(max-width:1500px){
  .networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:235px minmax(580px,1fr) 150px 72px!important}
  .realSwitchFace{padding-left:112px!important}.realSwitchFace .networkPortLegend{left:112px!important}
  .switchFrontLeft{width:82px!important}.switchLogoText{max-width:48px!important}
}
@media(max-width:1220px){
  .networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:210px minmax(460px,1fr) 130px auto!important}
  .realSwitchFace.ports24 .switchPortBank,.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(12,minmax(22px,1fr))!important}
  .realPatchFace.patch24 .patchPortBank,.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(12,minmax(22px,1fr))!important}
  .realSwitchFace{height:auto!important;min-height:105px!important}.realPatchFace{height:auto!important;min-height:90px!important}
}
@media(max-width:980px){
  .networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:1fr!important}
  .realSwitchFace,.realPatchFace{width:100%!important}
}


/* ================================================================
   v3.8.7 SIDEBAR + NETWORK PROPORTION / THEME POLISH
   ================================================================ */
/* One clear primary sidebar. The legacy icon rail is hidden. */
.shell371>.appRail371{display:none!important}
.shell371>aside.contextNav371{
  left:0!important;width:250px!important;min-width:250px!important;
  padding:12px 10px 10px!important;background:#0d1a25!important;
  border-right:1px solid #1d3445!important;box-shadow:4px 0 18px rgba(0,0,0,.08)!important;
  overflow-y:auto!important;overflow-x:hidden!important;transition:width .16s ease,min-width .16s ease!important
}
html[data-theme="light"] .shell371>aside.contextNav371{
  background:#ffffff!important;border-right-color:#dce5ec!important;box-shadow:3px 0 14px rgba(18,38,55,.05)!important
}
.shell371>main{margin-left:250px!important;width:calc(100% - 250px)!important;transition:margin-left .16s ease,width .16s ease!important}
.contextNav371 .brand{height:52px!important;min-height:52px!important;padding:0 7px 9px!important;margin:0 0 7px!important;gap:7px!important;border-bottom:1px solid #1e3444!important}
html[data-theme="light"] .contextNav371 .brand{border-bottom-color:#e5ebf0!important}
.contextNav371 .brand b{font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;white-space:nowrap!important}
.contextNav371 .brand span{font-size:var(--text-small)!important;padding:3px 6px!important}
.contextNav371 .brand:after{display:none!important}
#sidebarToggle{margin-left:auto!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;border-radius:8px!important;font-size:16px!important;display:grid!important;place-items:center!important}
.contextNav371 .userCard{display:none!important}
/* Flat, legible module list like the approved reference. */
.contextNav371 .navSection{display:none!important}
.contextNav371 #mainNav{display:flex!important;flex-direction:column!important;gap:2px!important;padding:2px 0 44px!important}
.contextNav371 .navBtn{
  position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;
  width:100%!important;min-height:42px!important;height:42px!important;padding:0 11px!important;margin:0!important;
  border-radius:8px!important;background:transparent!important;color:#c3d0da!important;
  font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;line-height:1!important;text-align:left!important;
  box-shadow:none!important;border:1px solid transparent!important;overflow:hidden!important
}
html[data-theme="light"] .contextNav371 .navBtn{color:#485b69!important}
.contextNav371 .navBtn:hover{background:#142b3d!important;color:#ffffff!important;border-color:#1d3c52!important}
html[data-theme="light"] .contextNav371 .navBtn:hover{background:#f1f6fa!important;color:#172b39!important;border-color:#e0e9ef!important}
.contextNav371 .navBtn.active{background:#0a5aa0!important;color:#ffffff!important;border-color:#2479b8!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important}
html[data-theme="light"] .contextNav371 .navBtn.active{background:#0d75d6!important;color:#fff!important;border-color:#0b68bd!important}
.contextNav371 .navBtn.active::before,.contextNav371 .navBtn::before{display:none!important;content:none!important}
.navGlyph{width:18px!important;height:18px!important;min-width:18px!important;display:grid!important;place-items:center!important;color:currentColor!important}
.navGlyph svg{width:18px!important;height:18px!important;display:block!important}
.navLabel{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.logoutBtn{position:sticky!important;bottom:0!important;min-height:38px!important;margin-top:auto!important;background:#102231!important;border:1px solid #203b4f!important;color:#bdd0dd!important}
html[data-theme="light"] .logoutBtn{background:#f5f8fa!important;border-color:#dfe7ed!important;color:#4e606d!important}
/* Collapsed = icons only, no blank contextual panel. */
body.compactNav .shell371>aside.contextNav371{display:block!important;left:0!important;width:64px!important;min-width:64px!important;padding:10px 7px!important}
body.compactNav .shell371>main{margin-left:64px!important;width:calc(100% - 64px)!important}
body.compactNav .contextNav371 .brand{display:flex!important;justify-content:center!important;height:48px!important;min-height:48px!important;padding:0 0 8px!important}
body.compactNav .contextNav371 .brand b,body.compactNav .contextNav371 .brand>span{display:none!important}
body.compactNav #sidebarToggle{display:grid!important;margin:0 auto!important;width:40px!important;height:40px!important;font-size:20px!important}
body.compactNav .contextNav371 #mainNav{display:flex!important;padding-top:4px!important}
body.compactNav .contextNav371 .navBtn{display:flex!important;width:50px!important;height:44px!important;min-height:44px!important;padding:0!important;justify-content:center!important;gap:0!important;margin:0 auto!important}
body.compactNav .contextNav371 .navBtn .navLabel{display:none!important}
body.compactNav .contextNav371 .navBtn .navGlyph{width:20px!important;height:20px!important;min-width:20px!important}
body.compactNav .contextNav371 .navBtn .navGlyph svg{width:20px!important;height:20px!important}
body.compactNav .contextNav371 .navBtn.active{box-shadow:none!important}
body.compactNav .contextNav371 #logoutBtn{display:none!important}
@media(max-width:760px){.shell371>aside.contextNav371{display:block!important;width:64px!important;min-width:64px!important}.shell371>main{margin-left:64px!important;width:calc(100% - 64px)!important}.contextNav371 .brand b,.contextNav371 .brand>span,.contextNav371 .navLabel,.contextNav371 #logoutBtn{display:none!important}.contextNav371 .navBtn{width:50px!important;justify-content:center!important;padding:0!important}.contextNav371 #sidebarToggle{margin:0 auto!important}}

/* Network hardware: never compress physical ports into tiny pills. */
.networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{
  grid-template-columns:250px minmax(760px,1fr) 170px 82px!important;gap:16px!important;padding:12px!important
}
.realSwitchFace{overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important}
.realSwitchFace.ports24{height:92px!important;min-height:92px!important;padding:15px 84px 22px 126px!important}
.realSwitchFace.ports48{height:114px!important;min-height:114px!important;padding:14px 84px 20px 126px!important}
.switchPortBank{gap:5px 4px!important;min-width:760px!important;align-content:center!important}
.realSwitchFace.ports24 .switchPortBank{grid-template-columns:repeat(24,28px)!important;grid-auto-rows:34px!important;justify-content:start!important}
.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(24,28px)!important;grid-auto-rows:34px!important;row-gap:4px!important;justify-content:start!important}
.shell371 button.switchRj45,.switchRj45{
  width:28px!important;min-width:28px!important;height:34px!important;min-height:34px!important;padding:8px 1px 1px!important;
  background:transparent!important;border:0!important;border-radius:2px!important;box-shadow:none!important;color:#d8e2e7!important
}
.switchPortNum{font-size:7px!important;line-height:7px!important;top:0!important;color:#d8e2e7!important}
.switchPortHole{height:22px!important;background:#050708!important;border:1.5px solid #758189!important;box-shadow:inset 0 0 0 2px #11181c,0 1px 1px #000!important}
.switchPortHole:before{height:3px!important;top:2px!important;background:#87939a!important}
.switchPortHole i{height:6px!important;bottom:3px!important;background:repeating-linear-gradient(90deg,#c99b43 0 2px,#151c20 2px 4px)!important}
.switchPortLed{width:3px!important;height:3px!important;top:12px!important;right:2px!important}
.realSwitchFace .networkPortLegend{left:126px!important;right:84px!important;bottom:5px!important;font-size:7px!important}
/* Physical hardware keeps its own colors in both app themes. */
html[data-theme="light"] .realSwitchFace:not(.brand-unifi),html[data-theme="dark"] .realSwitchFace:not(.brand-unifi){background:linear-gradient(180deg,#343b40 0%,#20262a 22%,#101416 72%,#080b0d 100%)!important;color:#e7eef2!important}
html[data-theme="light"] .realSwitchFace:not(.brand-unifi) .switchPortNum,html[data-theme="light"] .realSwitchFace:not(.brand-unifi) .switchLogoText,html[data-theme="light"] .realSwitchFace:not(.brand-unifi) .switchUplinkZone small{color:#dce5ea!important}
html[data-theme="light"] .realSwitchFace:not(.brand-unifi) .switchFrontLeft small{color:#91a0a9!important}
/* UniFi silver chassis still uses dark labels and dark RJ45 openings. */
.realSwitchFace.brand-unifi .switchRj45{background:transparent!important;color:#283238!important}.realSwitchFace.brand-unifi .switchPortNum{color:#263238!important}.realSwitchFace.brand-unifi .switchPortHole{background:#091014!important;border-color:#626d73!important}
/* Patch panel ports stay passive/neutral and proportional. */
.realPatchFace{overflow-x:auto!important;overflow-y:hidden!important;height:86px!important;min-height:86px!important;padding:27px 36px 9px!important}
.patchPortBank{min-width:760px!important;gap:4px!important;justify-content:start!important}
.realPatchFace.patch24 .patchPortBank{grid-template-columns:repeat(24,28px)!important}
.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(24,28px)!important;grid-auto-rows:27px!important;row-gap:3px!important}
.shell371 button.patchKeystone,.patchKeystone{width:28px!important;min-width:28px!important;height:27px!important;min-height:27px!important;padding:7px 1px 1px!important;border-radius:2px!important;box-shadow:none!important}
html[data-theme="light"] .patchKeystone{background:linear-gradient(#f8fafb,#dbe1e4)!important;border-color:#8f9ba1!important;color:#26343c!important}
html[data-theme="dark"] .patchKeystone{background:linear-gradient(#555f65,#30383d)!important;border-color:#6f7a80!important;color:#eef3f5!important}
html[data-theme="dark"] .patchPortNum{color:#dce4e8!important}.patchLabelWindow{height:5px!important;top:7px!important}.patchJackHole{height:12px!important;bottom:2px!important;background:#070b0d!important;border-color:#566168!important}
.patchKeystone.connected,.patchKeystone.connected .patchJackHole{border-color:inherit!important;box-shadow:none!important}
@media(max-width:1450px){.networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:220px minmax(650px,1fr) 145px 74px!important}.switchPortBank,.patchPortBank{min-width:700px!important}}
@media(max-width:1180px){.networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:190px minmax(560px,1fr) 130px auto!important}.realSwitchFace,.realPatchFace{overflow-x:auto!important}.switchPortBank,.patchPortBank{min-width:700px!important}}

/* ================================================================
   v3.8.7 TRUE HARDWARE PROPORTIONS + HOME LABEL
   Physical ports use fixed dimensions. The chassis scrolls horizontally
   rather than shrinking RJ45 / keystone geometry.
   ================================================================ */
.networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{
  grid-template-columns:230px minmax(0,1fr) 150px 78px!important;
  gap:14px!important;align-items:center!important
}
.realSwitchFace,.realPatchFace{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important}
.realSwitchFace.ports24{height:104px!important;min-height:104px!important;padding:16px 78px 24px 122px!important}
.realSwitchFace.ports48{height:142px!important;min-height:142px!important;padding:16px 78px 22px 122px!important}
.switchPortBank{display:grid!important;min-width:max-content!important;width:max-content!important;gap:7px 6px!important;align-content:center!important;justify-content:start!important}
.realSwitchFace.ports24 .switchPortBank{grid-template-columns:repeat(24,34px)!important;grid-auto-rows:46px!important}
.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(24,34px)!important;grid-auto-rows:46px!important;row-gap:5px!important}
.shell371 button.switchRj45,.switchRj45{width:34px!important;min-width:34px!important;max-width:34px!important;height:46px!important;min-height:46px!important;padding:11px 3px 2px!important;border-radius:3px!important;flex:none!important}
.switchPortNum{font-size:8px!important;line-height:9px!important;top:1px!important}
.switchPortHole{height:29px!important;border-width:1.5px!important;border-radius:2px!important}
.switchPortHole:before{height:4px!important;top:2px!important}
.switchPortHole i{height:8px!important;bottom:4px!important;background:repeating-linear-gradient(90deg,#c99b43 0 2px,#151c20 2px 5px)!important}
.switchPortLed{width:4px!important;height:4px!important;top:16px!important;right:3px!important}
.realSwitchFace .networkPortLegend{left:122px!important;right:78px!important;bottom:6px!important}

/* Patch panels remain passive and use wider keystone openings. */
.realPatchFace{height:104px!important;min-height:104px!important;padding:30px 34px 10px!important}
.realPatchFace.patch48{height:140px!important;min-height:140px!important}
.patchPortBank{display:grid!important;min-width:max-content!important;width:max-content!important;gap:7px 6px!important;justify-content:start!important;align-content:center!important}
.realPatchFace.patch24 .patchPortBank{grid-template-columns:repeat(24,36px)!important;grid-auto-rows:48px!important}
.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(24,36px)!important;grid-auto-rows:48px!important;row-gap:5px!important}
.shell371 button.patchKeystone,.patchKeystone{width:36px!important;min-width:36px!important;max-width:36px!important;height:48px!important;min-height:48px!important;padding:14px 3px 3px!important;border-radius:3px!important;flex:none!important}
.patchPortNum{font-size:8px!important;top:2px!important;line-height:9px!important}
.patchLabelWindow{left:3px!important;right:3px!important;top:12px!important;height:7px!important}
.patchJackHole{left:12%!important;right:12%!important;bottom:4px!important;height:21px!important;border-width:2px!important;border-radius:2px!important}
.patchLabelStrip{height:17px!important;line-height:15px!important}
/* Keep passive panel port geometry neutral in both themes. */
html[data-theme="light"] .patchKeystone{background:linear-gradient(#f7f9fa,#d9dfe2)!important;border-color:#87939a!important;color:#26343c!important}
html[data-theme="dark"] .patchKeystone{background:linear-gradient(#59636a,#333b40)!important;border-color:#727d83!important;color:#f0f4f6!important}
html[data-theme="light"] .patchJackHole,html[data-theme="dark"] .patchJackHole{background:#080c0e!important;border-color:#58636a!important;box-shadow:inset 0 0 0 2px #12191d!important}

@media(max-width:1500px){
 .networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:205px minmax(0,1fr) 135px 72px!important}
}
@media(max-width:1120px){
 .networkDeviceCard.realSwitchCard,.networkPatchCard.realPatchCard{grid-template-columns:1fr!important}
 .networkDeviceStats,.networkPatchStats{max-width:280px!important}
}


/* ================================================================
   v3.8.8 HARDWARE GEOMETRY FIX
   Strong selectors override the global shell button sizing rules so
   physical switch / patch ports keep exact, symmetric geometry.
   ================================================================ */
/* SWITCHES: RJ45 is wider than tall, like real front-panel jacks. */
.realSwitchFace.ports24{height:92px!important;min-height:92px!important;padding:15px 76px 22px 116px!important}
.realSwitchFace.ports48{height:120px!important;min-height:120px!important;padding:14px 76px 20px 116px!important}
.switchPortBank{display:grid!important;width:max-content!important;min-width:max-content!important;gap:5px 4px!important;align-content:center!important;justify-content:start!important}
.realSwitchFace.ports24 .switchPortBank{grid-template-columns:repeat(24,30px)!important;grid-auto-rows:31px!important}
.realSwitchFace.ports48 .switchPortBank{grid-template-columns:repeat(24,30px)!important;grid-auto-rows:31px!important;row-gap:4px!important}
html body .shell371 button.switchRj45:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard),
html body .shell371 .switchRj45{
  appearance:none!important;-webkit-appearance:none!important;
  width:30px!important;min-width:30px!important;max-width:30px!important;
  height:31px!important;min-height:31px!important;max-height:31px!important;
  padding:8px 2px 2px!important;margin:0!important;
  border:0!important;border-radius:2px!important;background:transparent!important;
  box-shadow:none!important;line-height:1!important;flex:none!important;
}
.switchPortNum{top:0!important;font-size:7px!important;line-height:8px!important;font-weight:var(--weight-semibold)!important}
.switchPortHole{
  position:absolute!important;left:3px!important;right:3px!important;top:9px!important;bottom:auto!important;
  width:auto!important;height:18px!important;min-height:18px!important;
  border:1.5px solid #76828a!important;border-radius:2px!important;
  background:#070a0c!important;box-shadow:inset 0 0 0 2px #11181c!important;
}
.switchPortHole:before{left:3px!important;right:3px!important;top:2px!important;height:3px!important;border-radius:1px!important;background:#818e95!important}
.switchPortHole i{left:4px!important;right:4px!important;bottom:3px!important;height:5px!important;background:repeating-linear-gradient(90deg,#c99b43 0 2px,#151c20 2px 4px)!important}
.switchPortLed{width:3px!important;height:3px!important;top:12px!important;right:4px!important}
.realSwitchFace .networkPortLegend{left:116px!important;right:76px!important;bottom:5px!important}

/* PATCH PANELS: every keystone uses identical fixed geometry. */
.realPatchFace{height:88px!important;min-height:88px!important;padding:28px 32px 8px!important}
.realPatchFace.patch48{height:122px!important;min-height:122px!important}
.patchPortBank{display:grid!important;width:max-content!important;min-width:max-content!important;gap:5px 4px!important;align-content:center!important;justify-content:start!important}
.realPatchFace.patch24 .patchPortBank{grid-template-columns:repeat(24,34px)!important;grid-auto-rows:38px!important}
.realPatchFace.patch48 .patchPortBank{grid-template-columns:repeat(24,34px)!important;grid-auto-rows:38px!important;row-gap:4px!important}
html body .shell371 button.patchKeystone:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard),
html body .shell371 .patchKeystone{
  appearance:none!important;-webkit-appearance:none!important;
  position:relative!important;width:34px!important;min-width:34px!important;max-width:34px!important;
  height:38px!important;min-height:38px!important;max-height:38px!important;
  padding:0!important;margin:0!important;border-radius:2px!important;flex:none!important;
  box-shadow:none!important;line-height:1!important;
}
.patchPortNum{position:absolute!important;top:2px!important;left:0!important;right:0!important;font-size:7px!important;line-height:8px!important;text-align:center!important;font-weight:var(--weight-semibold)!important}
.patchLabelWindow{position:absolute!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;top:10px!important;width:26px!important;height:5px!important;border-radius:1px!important}
.patchJackHole{position:absolute!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:3px!important;width:24px!important;height:17px!important;border-width:1.5px!important;border-radius:2px!important;background:#080c0e!important;box-shadow:inset 0 0 0 2px #12191d!important}
.patchJackHole:before{display:none!important}.patchJackHole i{display:none!important}
.patchKeystone.connected,.patchKeystone.connected .patchJackHole{box-shadow:none!important}

/* Keep hardware colors deterministic in both themes. */
html[data-theme="light"] .realSwitchFace:not(.brand-unifi),html[data-theme="dark"] .realSwitchFace:not(.brand-unifi){background:linear-gradient(180deg,#343b40 0%,#1e2529 28%,#0b0f11 100%)!important;color:#e7eef2!important}
html[data-theme="light"] .patchKeystone{background:linear-gradient(#fafbfc,#d9dfe2)!important;border:1px solid #87939a!important;color:#26343c!important}
html[data-theme="dark"] .patchKeystone{background:linear-gradient(#59636a,#333b40)!important;border:1px solid #727d83!important;color:#f0f4f6!important}

@media(max-width:1120px){
 .realSwitchFace,.realPatchFace{overflow-x:auto!important}
}

/* ================================================================
   v3.8.9 SFP + FIBER HARDWARE
   Active SFP ports are real data-backed ports, not decorative boxes.
   ================================================================ */
/* Light mode: active switches use a professional gray chassis; dark mode unchanged. */
html[data-theme="light"] .realSwitchFace{
  background:linear-gradient(180deg,#d9dee1 0%,#c4cbd0 18%,#aeb7bc 76%,#9ca6ac 100%)!important;
  border-color:#7f8a90!important;
  box-shadow:0 5px 12px #45515a22,inset 0 1px 0 #fff!important;
}
html[data-theme="light"] .realSwitchFace:before{border-color:#929da3!important}
html[data-theme="light"] .realSwitchFace .switchLogoText,
html[data-theme="light"] .realSwitchFace .switchPortNum,
html[data-theme="light"] .realSwitchFace .switchUplinkZone small,
html[data-theme="light"] .realSwitchFace .switchFrontLeft small{color:#243038!important}
html[data-theme="light"] .realSwitchFace.brand-unifi{background:linear-gradient(180deg,#f0f2f3,#d6dade 52%,#c0c6ca)!important}

.switchUplinkZone{width:92px!important;right:10px!important;top:10px!important}
.sfpBank{display:grid;grid-template-columns:repeat(2,38px);gap:4px;justify-content:end;margin-top:3px}
.sfpPort{position:relative!important;width:38px!important;min-width:38px!important;height:25px!important;min-height:25px!important;padding:9px 3px 2px!important;border:1px solid #707b81!important;border-radius:2px!important;background:#080b0d!important;color:#aab3b8!important;box-shadow:inset 0 0 0 1px #11181c!important}
.sfpPort span{position:absolute;top:1px;left:0;right:0;font-size:5.5px!important;line-height:6px!important;text-align:center;letter-spacing:.1px}
.sfpPort i{display:block;width:27px;height:8px;margin:0 auto;background:#030506;border:1px solid #8c969b;border-radius:1px;box-shadow:inset 0 0 0 1px #1d2529}
.sfpPort b{position:absolute;right:3px;bottom:3px;width:4px;height:4px;border-radius:50%;background:#555f64;box-shadow:none}
.sfpPort.active b{background:#27c878;box-shadow:0 0 5px #27c878}
.sfpPort.active{border-color:#37b97a!important}
.sfpPort.connected{box-shadow:inset 0 0 0 1px #11181c,0 0 0 1px #2b8f64!important}
.sfpEmpty{display:flex;align-items:center;justify-content:center;height:25px;color:#7f8b90;font-size:9px}
.legendSfp{background:#27c878!important}
.switchUplinkZone.noSfp .consolePort{margin-top:7px!important}
.realSwitchFace{padding-right:112px!important}
.realSwitchFace .networkPortLegend{right:112px!important}

/* Fiber patch panel: same disciplined proportions, different physical adapter language. */
.fiberPatch{background:linear-gradient(180deg,#d7dde0,#afb8bd)!important;border-color:#7c878d!important}
html[data-theme="dark"] .fiberPatch{background:linear-gradient(180deg,#353c40,#1c2225)!important;border-color:#647078!important}
.fiberThumb{background:linear-gradient(180deg,#e7ebed,#bcc4c8)!important}
.fiberThumb i{background:#8ed8db!important;border-color:#4b8589!important;border-radius:50%!important;height:10px!important}
.fiberPatch .patchPortBank{gap:4px!important}
.fiberAdapter{position:relative!important;width:31px!important;min-width:31px!important;height:22px!important;min-height:22px!important;padding:7px 3px 2px!important;border:1px solid #6e7c82!important;border-radius:2px!important;background:#d8dfe2!important;box-shadow:inset 0 0 0 1px #f8fafb!important;color:#303b40!important}
html[data-theme="dark"] .fiberAdapter{background:#30383c!important;color:#d8e1e5!important;border-color:#68757b!important;box-shadow:inset 0 0 0 1px #151a1d!important}
.fiberAdapter span{position:absolute;top:0;left:0;right:0;font-size:5.5px!important;line-height:7px!important;text-align:center}
.fiberAdapter i{display:inline-block;width:8px;height:8px;margin:3px 1px 0;border-radius:50%;background:#7ecfd3;border:2px solid #3e7478;box-shadow:inset 0 0 0 1px #d8ffff}
.fiberAdapter.connected{border-color:#3f8f77!important}
.fiberAdapter.connected i{background:#62c8a2}
.realPatchFace.fiberPatch.patch24 .patchPortBank{grid-template-columns:repeat(24,31px)!important}
.realPatchFace.fiberPatch.patch48 .patchPortBank{grid-template-columns:repeat(24,31px)!important;grid-auto-rows:22px!important;row-gap:3px!important}

@media(max-width:1500px){
  .realSwitchFace{padding-right:108px!important}
  .realSwitchFace .networkPortLegend{right:108px!important}
}

/* ================================================================
   v3.8.10 — SFP/FIBER GEOMETRY + LIGHT HARDWARE
   Keep physical ports fixed and prevent generic button theme rules
   from turning SFP/fiber hardware into white pills.
   ================================================================ */

/* Light mode active hardware is gray, not black.  Specificity is
   intentionally higher than the older brand/generic switch rules. */
html[data-theme="light"] body .shell371 .realSwitchFace,
html[data-theme="light"] body .shell371 .realSwitchFace:not(.brand-unifi){
  background:linear-gradient(180deg,#d8dde0 0%,#cbd1d4 22%,#b7c0c5 68%,#a9b2b7 100%)!important;
  border-color:#7f8a90!important;
  color:#263238!important;
  box-shadow:0 4px 10px #2f3b4322,inset 0 1px 0 #ffffff!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace.brand-unifi{
  background:linear-gradient(180deg,#f2f4f5 0%,#e1e5e7 38%,#cbd1d5 100%)!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchLogoText,
html[data-theme="light"] body .shell371 .realSwitchFace .switchFrontLeft small,
html[data-theme="light"] body .shell371 .realSwitchFace .switchPortNum,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone small{
  color:#26343b!important;
}

/* SFP area: fixed 2x2 cage bank and fixed rectangular cages. */
.switchUplinkZone{
  width:96px!important;
  min-width:96px!important;
  right:9px!important;
  top:8px!important;
  bottom:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.switchUplinkZone>small{
  display:block!important;
  width:100%!important;
  height:10px!important;
  line-height:10px!important;
  margin:0 0 3px!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sfpBank{
  width:76px!important;
  min-width:76px!important;
  display:grid!important;
  grid-template-columns:repeat(2,36px)!important;
  grid-auto-rows:22px!important;
  gap:3px 4px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto!important;
}
html body .shell371 button.sfpPort:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard),
html body .shell371 .sfpPort{
  appearance:none!important;
  box-sizing:border-box!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  margin:0!important;
  padding:8px 3px 2px!important;
  border:1px solid #69757b!important;
  border-radius:2px!important;
  background:linear-gradient(180deg,#171c1f,#07090a)!important;
  color:#d7e0e4!important;
  box-shadow:inset 0 0 0 1px #21292d!important;
  overflow:hidden!important;
  line-height:1!important;
}
html[data-theme="light"] body .shell371 button.sfpPort,
html[data-theme="light"] body .shell371 .sfpPort{
  background:linear-gradient(180deg,#3b454a,#151b1e)!important;
  border-color:#667279!important;
  color:#f4f7f8!important;
}
.sfpPort span{
  position:absolute!important;
  top:1px!important;
  left:2px!important;
  right:2px!important;
  height:6px!important;
  font-size:5.5px!important;
  line-height:6px!important;
  text-align:center!important;
  color:inherit!important;
}
.sfpPort i{
  display:block!important;
  box-sizing:border-box!important;
  width:27px!important;
  height:8px!important;
  margin:0 auto!important;
  border:1px solid #98a2a7!important;
  border-radius:1px!important;
  background:#020405!important;
  box-shadow:inset 0 0 0 1px #20282c!important;
}
.sfpPort b{
  position:absolute!important;
  right:2px!important;
  bottom:2px!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:#596368!important;
}
.sfpPort.active{border-color:#28b971!important}
.sfpPort.active b{background:#26d57c!important;box-shadow:0 0 4px #26d57c!important}
.sfpPort.connected{box-shadow:inset 0 0 0 1px #20282c,0 0 0 1px #228458!important}
.switchUplinkZone .consolePort{margin:3px auto 0!important}
.realSwitchFace{padding-right:116px!important}
.realSwitchFace .networkPortLegend{right:116px!important}

/* Fiber panels: fixed LC duplex adapter geometry. */
.realPatchFace.fiberPatch.patch12 .patchPortBank,
.realPatchFace.fiberPatch.patch24 .patchPortBank,
.realPatchFace.fiberPatch.patch48 .patchPortBank{
  display:grid!important;
  grid-auto-rows:27px!important;
  gap:4px!important;
  align-items:center!important;
  justify-content:start!important;
}
.realPatchFace.fiberPatch.patch12 .patchPortBank{grid-template-columns:repeat(12,36px)!important}
.realPatchFace.fiberPatch.patch24 .patchPortBank{grid-template-columns:repeat(24,36px)!important}
.realPatchFace.fiberPatch.patch48 .patchPortBank{grid-template-columns:repeat(24,36px)!important;row-gap:5px!important}
html body .shell371 button.fiberAdapter:not(.navBtn):not(.rail371Btn):not(.navSectionToggle):not(.projectLaunchCard),
html body .shell371 .fiberAdapter{
  appearance:none!important;
  box-sizing:border-box!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  margin:0!important;
  padding:8px 2px 2px!important;
  border:1px solid #77848a!important;
  border-radius:3px!important;
  background:#e6eaec!important;
  box-shadow:inset 0 0 0 1px #ffffff!important;
  color:#26343b!important;
  overflow:hidden!important;
  line-height:1!important;
}
html[data-theme="dark"] body .shell371 button.fiberAdapter,
html[data-theme="dark"] body .shell371 .fiberAdapter{
  background:#30383d!important;
  border-color:#6c777d!important;
  box-shadow:inset 0 0 0 1px #151a1d!important;
  color:#eef3f5!important;
}
.fiberAdapter span{
  position:absolute!important;
  top:1px!important;
  left:0!important;
  right:0!important;
  height:6px!important;
  font-size:5.5px!important;
  line-height:6px!important;
  text-align:center!important;
}
.fiberAdapter i{
  display:inline-block!important;
  box-sizing:border-box!important;
  width:8px!important;
  height:8px!important;
  margin:3px 1px 0!important;
  border-radius:50%!important;
  background:#d9e3e8!important;
  border:2px solid #64737b!important;
  box-shadow:inset 0 0 0 1px #f8fbfc!important;
  vertical-align:top!important;
}
/* Single-mode = blue, multimode = cyan. */
.fiberSinglemode .fiberAdapter i,
.fiberAdapter.singlemode i{background:#2f6fed!important;border-color:#164bb2!important;box-shadow:inset 0 0 0 1px #bcd0ff!important}
.fiberMultimode .fiberAdapter i,
.fiberAdapter.multimode i{background:#37cbd4!important;border-color:#177d84!important;box-shadow:inset 0 0 0 1px #c9fbff!important}
.fiberSinglemode .patchLabelStrip{border-bottom-color:#2f6fed!important}
.fiberMultimode .patchLabelStrip{border-bottom-color:#37cbd4!important}
.fiberSinglemode .fiberThumb i{background:#2f6fed!important;border-color:#164bb2!important}
.fiberMultimode .fiberThumb i{background:#37cbd4!important;border-color:#177d84!important}
.fiberAdapter.connected{outline:1px solid #2d9a68!important;outline-offset:0!important}

@media(max-width:1180px){
  .realSwitchFace,.realPatchFace{overflow-x:auto!important}
  .realPatchFace.fiberPatch .patchPortBank{min-width:max-content!important}
}
.realPatchFace.patch12 .patchPortBank{grid-template-columns:repeat(12,34px)!important}


/* =========================================================
   v3.8.11 — MIXED FIBER + DELETE ACTIONS + FIBER PROPORTIONS
   ========================================================= */
.networkRowActions .dangerDelete{font-size:var(--text-section)!important;line-height:1!important;color:#9aa6ad!important;border-color:var(--line)!important}
.networkRowActions .dangerDelete:hover{color:#fff!important;background:#c83f49!important;border-color:#c83f49!important}
html[data-theme="light"] .networkRowActions .dangerDelete:hover{color:#fff!important}
.realPatchFace.fiberPatch{height:auto!important;min-height:86px!important;padding-top:28px!important;padding-bottom:12px!important}
.realPatchFace.fiberPatch .patchPortBank{display:grid!important;width:max-content!important;min-width:0!important;grid-template-columns:repeat(12,40px)!important;grid-auto-rows:32px!important;gap:6px!important;align-content:center!important;justify-content:start!important}
.realPatchFace.fiberPatch.patch12 .patchPortBank{grid-template-columns:repeat(12,40px)!important}
.realPatchFace.fiberPatch.patch24 .patchPortBank,.realPatchFace.fiberPatch.patch48 .patchPortBank{grid-template-columns:repeat(12,40px)!important}
html body .shell371 button.fiberAdapter,html body .shell371 .fiberAdapter{width:40px!important;min-width:40px!important;max-width:40px!important;height:30px!important;min-height:30px!important;max-height:30px!important;border-radius:3px!important;padding:10px 2px 2px!important;box-sizing:border-box!important}
.fiberAdapter span{font-size:7px!important;line-height:9px!important;top:1px!important}
.fiberAdapter i{width:9px!important;height:9px!important;margin:3px 1px 0!important}
html[data-theme="light"] .fiberAdapter{background:#eef2f4!important;border-color:#9aa7ad!important;box-shadow:inset 0 0 0 1px #fff!important;color:#25323a!important}
html[data-theme="dark"] .fiberAdapter{background:#222a2e!important;border-color:#657279!important;color:#dce5e9!important;box-shadow:inset 0 0 0 1px #111719!important}
.fiberAdapter.singlemode i{background:#2f6fed!important;border-color:#164bb2!important;box-shadow:inset 0 0 0 1px #c9d8ff!important}
.fiberAdapter.multimode i{background:#31cbd6!important;border-color:#167f87!important;box-shadow:inset 0 0 0 1px #c9fbff!important}
.fiberMixed .patchLabelStrip{background:linear-gradient(90deg,#2f6fed 0 49%,#31cbd6 51% 100%)!important;color:#fff!important;border-color:#7b8b92!important}
.fiberMixed .patchLabelStrip span,.fiberMixed .patchLabelStrip small{color:#fff!important}
.patchProductThumb.fiberMixed i.smDot{background:#2f6fed!important}.patchProductThumb.fiberMixed i.mmDot{background:#31cbd6!important}
@media(max-width:1180px){.realPatchFace.fiberPatch{overflow-x:auto!important}.realPatchFace.fiberPatch .patchPortBank{min-width:max-content!important}}

/* =========================================================
   v3.8.12 — FIBER VERTICAL ALIGNMENT + LIGHT SFP MATCH
   Keep approved hardware geometry; only correct alignment/color.
   ========================================================= */

/* Fiber LC duplex positions sit slightly lower and visually centered
   in the panel body, while the label strip remains at the top. */
.realPatchFace.fiberPatch{
  min-height:92px!important;
  padding-top:34px!important;
  padding-bottom:14px!important;
}
.realPatchFace.fiberPatch .patchPortBank{
  align-self:center!important;
  transform:translateY(3px)!important;
}
.realPatchFace.fiberPatch.patch24,
.realPatchFace.fiberPatch.patch48{
  min-height:98px!important;
}

/* In light mode the SFP module housing belongs to the same gray
   hardware family as the rest of the switch. The cage opening stays dark. */
html[data-theme="light"] body .shell371 button.sfpPort,
html[data-theme="light"] body .shell371 .sfpPort{
  background:linear-gradient(180deg,#dce2e5,#bcc5ca)!important;
  border-color:#7f8b91!important;
  color:#243139!important;
  box-shadow:inset 0 1px 0 #ffffff!important;
}
html[data-theme="light"] body .shell371 .sfpPort i{
  background:#080b0d!important;
  border-color:#56636a!important;
  box-shadow:inset 0 0 0 1px #161d21!important;
}
html[data-theme="light"] body .shell371 .sfpPort b{
  background:#758188!important;
}
html[data-theme="light"] body .shell371 .sfpPort.active{
  border-color:#2aa96d!important;
}
html[data-theme="light"] body .shell371 .sfpPort.active b{
  background:#26c878!important;
  box-shadow:0 0 4px #26c878!important;
}

/* =========================================================
   v3.8.13 — PATCH PORT EDITOR + LIGHT SFP HARDWARE FIX
   ========================================================= */
/* Strong light-theme override: SFP module housing must visually belong
   to the silver/gray switch chassis, while only the optical cage stays dark. */
html[data-theme="light"] .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort,
html[data-theme="light"] body .realSwitchFace .switchUplinkZone .sfpBank > .sfpPort{
  background:linear-gradient(180deg,#d8dfe3 0%,#bcc6cb 100%)!important;
  border:1px solid #7c898f!important;
  color:#1f2b31!important;
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(78,94,102,.12)!important;
}
html[data-theme="light"] .realSwitchFace .switchUplinkZone .sfpPort i{
  width:24px!important;height:7px!important;
  background:#111719!important;border-color:#647178!important;
  box-shadow:inset 0 0 0 1px #020405!important;
}
html[data-theme="light"] .realSwitchFace .switchUplinkZone .sfpPort span{color:#26343b!important}
html[data-theme="light"] .realSwitchFace .switchUplinkZone .sfpPort.active{border-color:#27a96a!important}

/* Patch-port state is visible at first glance. Empty remains neutral;
   connected/manual-connected gets a restrained green hardware cue. */
.patchKeystone.connected{border-color:#2aa76b!important;box-shadow:0 0 0 1px rgba(42,167,107,.35)!important}
.patchKeystone.connected .patchJackHole{border-color:#2aa76b!important}
.patchKeystone.connected .patchJackHole:after{content:"";position:absolute;right:2px;bottom:2px;width:4px;height:4px;border-radius:50%;background:#25c879;box-shadow:0 0 4px rgba(37,200,121,.65)}
.fiberAdapter.connected{border-color:#2aa76b!important;box-shadow:0 0 0 1px rgba(42,167,107,.35)!important}
.fiberAdapter.connected:after{content:"";position:absolute;right:2px;bottom:2px;width:4px;height:4px;border-radius:50%;background:#25c879;box-shadow:0 0 4px rgba(37,200,121,.65)}
.patchLabelWindow{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:5px!important;line-height:7px!important;text-align:center!important}


/* =========================================================
   v3.8.14 — NETWORK INTELLIGENCE + READABILITY
   ========================================================= */
/* Full-app readability cleanup. Keep hardware micro-labels compact while
   making navigation, forms, tables and content text easier to scan. */
html,body{font-family:var(--font-sans)!important;font-size:var(--text-body)!important;line-height:1.42!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.shell371 .contextNav371,.shell371 main,.shell371 .modalCard{font-size:var(--text-body)!important}
.shell371 h1{font-size:var(--text-title)!important;line-height:1.15!important;letter-spacing:-.35px!important}
.shell371 h2{font-size:var(--text-section)!important;line-height:1.25!important;letter-spacing:-.16px!important}
.shell371 h3{font-size:var(--text-section)!important;line-height:1.25!important}
.shell371 p,.shell371 td,.shell371 th,.shell371 label,.shell371 input,.shell371 select,.shell371 textarea,.shell371 button{font-size:var(--text-body)!important}
.shell371 td,.shell371 th{line-height:1.35!important}
.shell371 small{font-size:var(--text-body)!important;line-height:1.35!important}
.shell371 .navBtn{font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
.shell371 .networkDeviceIdentity b,.shell371 .networkPatchIdentity b{font-size:var(--text-body)!important}
.shell371 .networkDeviceIdentity small,.shell371 .networkPatchIdentity small{font-size:var(--text-small)!important}
/* Protect real-hardware micro typography from the global readability pass. */
.realSwitchFace .switchPortNum,.realSwitchFace .switchUplinkZone small,.realSwitchFace .switchFrontLeft small,.realSwitchFace .sfpPort span,.realPatchFace .patchPortNum,.realPatchFace .patchLabelWindow,.realPatchFace .fiberAdapter span{font-size:7px!important;line-height:8px!important}
.patchPortNum.assigned,.fiberAdapter.connected span{font-size:6px!important;max-width:28px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.networkProductMeta{display:block!important;margin-top:3px!important;font-weight:var(--weight-semibold)!important;color:var(--muted,#6f7c86)!important}
.autoConnectSummary{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;padding:12px 14px;border:1px solid var(--line,#dce3e8);border-radius:10px;background:var(--panel,#fff)}
/* Light-mode SFP zone must be part of the same gray chassis, not a black island. */
html[data-theme="light"] .realSwitchFace .switchUplinkZone,
html[data-theme="light"] .realSwitchFace .sfpBank{background:transparent!important;box-shadow:none!important}
html[data-theme="light"] .realSwitchFace .switchUplinkZone .sfpPort,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort{
  background:#cbd2d6!important;background-image:linear-gradient(180deg,#dfe4e7,#bcc5ca)!important;
  border-color:#7c888e!important;color:#243139!important
}
html[data-theme="light"] .realSwitchFace .switchUplinkZone .sfpPort i{background:#13191c!important}

/* =========================================================
   v3.8.15 — PASSIVE PATCH STATES + SFP LIGHT FIX + DIAGRAM WIZARD
   ========================================================= */
/* Passive patch panels do not use active-device green link lights.
   Empty = gray. Connected = black. Fiber mode remains visible inside
   the duplex adapter through its blue/cyan optical apertures. */
html body .shell371 .patchKeystone,
html body .shell371 button.patchKeystone{
  border-color:#7c878d!important;
  background:#c9d0d4!important;
  box-shadow:inset 0 0 0 1px #eef2f4!important;
}
html body .shell371 .patchKeystone .patchJackHole{
  background:#9ca6ab!important;
  border-color:#727d82!important;
}
html body .shell371 .patchKeystone.connected,
html body .shell371 button.patchKeystone.connected{
  background:#20272b!important;
  border-color:#111619!important;
  box-shadow:inset 0 0 0 1px #343d42!important;
}
html body .shell371 .patchKeystone.connected .patchJackHole{
  background:#050708!important;
  border-color:#404b50!important;
}
.patchKeystone.connected .patchJackHole:after,
.fiberAdapter.connected:after{content:none!important;display:none!important}
html body .shell371 .fiberAdapter,
html body .shell371 button.fiberAdapter{
  border-color:#7c878d!important;
  background:#c9d0d4!important;
  box-shadow:inset 0 0 0 1px #eef2f4!important;
}
html body .shell371 .fiberAdapter.connected,
html body .shell371 button.fiberAdapter.connected{
  background:#20272b!important;
  border-color:#111619!important;
  box-shadow:inset 0 0 0 1px #343d42!important;
  outline:none!important;
  color:#f3f6f7!important;
}
html[data-theme="dark"] body .shell371 .patchKeystone:not(.connected),
html[data-theme="dark"] body .shell371 .fiberAdapter:not(.connected){
  background:#707a80!important;border-color:#929ba0!important;box-shadow:inset 0 0 0 1px #535d62!important;color:#f2f5f6!important
}

/* Definitive light-mode SFP housing override. This targets every state,
   including active and connected, so no old black button rule can win. */
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone,
html[data-theme="light"] body .shell371 .realSwitchFace .sfpBank{
  background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.active,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.connected,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.active.connected{
  background:#c8d0d4!important;
  background-color:#c8d0d4!important;
  background-image:linear-gradient(180deg,#e2e7e9 0%,#c6ced2 55%,#b7c0c5 100%)!important;
  border-color:#7a878d!important;
  color:#243139!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(62,78,86,.10)!important;
  filter:none!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort i{
  background:#111719!important;background-color:#111719!important;background-image:none!important;border-color:#66747a!important
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.active,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.connected{
  border-color:#748188!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.active b{
  background:#25c879!important;box-shadow:0 0 4px rgba(37,200,121,.65)!important
}

.autoConnectWizard{display:flex;flex-direction:column;gap:14px}
.autoConnectPlanPicker{display:flex;flex-direction:column;gap:6px;font-weight:var(--weight-semibold)}
.autoConnectPlanPicker select{min-height:42px}
.autoConnectMethodGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.autoConnectMethodGrid span{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line,#dce3e8);border-radius:9px;background:var(--panel,#fff)}
.autoConnectMethodGrid b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1976d2;color:#fff;font-size:var(--text-body)}
.autoConnectWizardActions{display:flex;justify-content:flex-end}
.autoSourceLine{display:block;max-width:260px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#6f7c86)}
@media(max-width:900px){.autoConnectMethodGrid{grid-template-columns:1fr 1fr}}


/* =========================================================
   v3.8.17 — DEFINITIVE SFP INDICATOR FIX
   Housing NEVER changes between inactive/active/connected states.
   Only the tiny LED (<b>) becomes green when the SFP is enabled
   or has a real cable connection.
   ========================================================= */
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked {
  border-color:#707b81!important;
  box-shadow:inset 0 0 0 1px #11181c!important;
  filter:none!important;
  outline:none!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort b {
  background:#59656b!important;
  box-shadow:none!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked b {
  background:#21c875!important;
  box-shadow:0 0 4px rgba(33,200,117,.72)!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked {
  background:#c8d0d4!important;
  background-color:#c8d0d4!important;
  background-image:linear-gradient(180deg,#e2e7e9 0%,#c6ced2 55%,#b7c0c5 100%)!important;
  border-color:#7a878d!important;
  color:#243139!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(62,78,86,.10)!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort i,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked i {
  background:#111719!important;
  border-color:#66747a!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort b {
  background:#66747a!important;
  box-shadow:none!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked b {
  background:#16b866!important;
  box-shadow:0 0 4px rgba(22,184,102,.7)!important;
}

/* =========================================================
   v3.9.0 — NETWORK STATE LOGIC + DIAGRAM ENGINE POLISH
   ========================================================= */
/* SFP: chassis/cage never changes because of Enabled state.
   Only a real/manual Connected state (.sfpLinked) lights the tiny LED. */
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:hover,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:focus,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked{
  border:1px solid #707b81!important;
  outline:none!important;
  filter:none!important;
  transform:none!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort b{
  background:#59656b!important;
  box-shadow:none!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked b{
  background:#18bd68!important;
  box-shadow:0 0 5px rgba(24,189,104,.8)!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:hover,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:focus,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked{
  background:#c8d0d4!important;
  background-image:linear-gradient(180deg,#e1e6e8 0%,#c8d0d4 54%,#b8c1c6 100%)!important;
  border-color:#78858b!important;
  color:#243139!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(62,78,86,.1)!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort i{
  background:#111719!important;border-color:#66747a!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort b{background:#77848a!important}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked b{background:#16b866!important}

/* Passive patch state: no active-device green. Empty is neutral gray;
   connected is black/dark. Fiber keeps its SM/MM optic colors. */
html body .shell371 button.patchKeystone:not(.connected),
html body .shell371 button.fiberAdapter:not(.connected){
  background:#c8d0d4!important;border-color:#879399!important;color:#26343b!important;
  box-shadow:inset 0 0 0 1px #eef2f4!important;
}
html body .shell371 button.patchKeystone.connected,
html body .shell371 button.fiberAdapter.connected{
  background:#151a1d!important;border-color:#080b0d!important;color:#f1f5f6!important;
  box-shadow:inset 0 0 0 1px #30383d!important;outline:none!important;
}
html body .shell371 button.fiberAdapter.connected:after,
html body .shell371 button.patchKeystone.connected:after{display:none!important;content:none!important}
html[data-theme="dark"] body .shell371 button.patchKeystone:not(.connected),
html[data-theme="dark"] body .shell371 button.fiberAdapter:not(.connected){
  background:#687278!important;border-color:#8c979c!important;color:#f0f4f5!important;
}
.fiberAdapter.singlemode i{background:#2f6fed!important;border-color:#164bb2!important}
.fiberAdapter.multimode i{background:#31cbd6!important;border-color:#167f87!important}

.connectionTypeBadge{display:inline-flex;align-items:center;min-width:62px;justify-content:center;padding:3px 7px;border:1px solid var(--line,#d8e0e6);border-radius:999px;font-size:var(--text-small)!important;font-weight:var(--weight-semibold);background:var(--panel,#fff)}


/* =========================================================
   v3.9.2 — PHYSICAL PORT STATE CLARITY
   Connected RJ45 ports use the bright framed treatment requested
   by the field UI reference. Empty/configured ports stay subdued.
   ========================================================= */
html body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortHole{
  border:2px solid #dce7ed!important;
  background:#070a0c!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 2px #11181c!important;
}
html body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortLed{
  background:#21c875!important;
  box-shadow:0 0 5px rgba(33,200,117,.9)!important;
}
html body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortNum{
  color:#f4f8fa!important;
  font-weight:var(--weight-semibold)!important;
}
/* Configured-but-empty PoE/trunk ports must not look physically linked. */
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .switchPortLed{
  background:#59656b!important;
  box-shadow:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .switchPortHole{
  border-color:#68757c!important;
  box-shadow:inset 0 0 0 2px #11181c!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortHole{
  border-color:#f7fbfd!important;
  box-shadow:0 0 0 1px #7d8b92,inset 0 0 0 2px #11181c!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortNum{
  color:#142229!important;
}
/* SFP cage is structural hardware: enabled/disabled never changes housing.
   Only a real/manual connection turns on the small green LED. */
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:hover,
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:focus{
  outline:none!important;filter:none!important;transform:none!important;
  border-color:#707b81!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort b{background:#59656b!important;box-shadow:none!important}
html body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked b{background:#21c875!important;box-shadow:0 0 5px rgba(33,200,117,.9)!important}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort.sfpLinked,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:hover,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone button.sfpPort:focus{
  background:linear-gradient(180deg,#dfe5e8 0%,#c9d1d5 55%,#b8c2c7 100%)!important;
  border-color:#7a878d!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(62,78,86,.10)!important;
}
/* Passive patch panels: empty = gray, connected = black. Never active-device green. */
html body .shell371 .realPatchFace button.patchKeystone:not(.connected),
html body .shell371 .realPatchFace button.fiberAdapter:not(.connected){background:#c8d0d4!important;border-color:#879399!important}
html body .shell371 .realPatchFace button.patchKeystone.connected,
html body .shell371 .realPatchFace button.fiberAdapter.connected{background:#151a1d!important;border-color:#080b0d!important;box-shadow:inset 0 0 0 1px #30383d!important}
html body .shell371 .realPatchFace button.patchKeystone.connected:after,
html body .shell371 .realPatchFace button.fiberAdapter.connected:after{display:none!important;content:none!important}

/* =========================================================
   v3.9.2 — Physical switch port state language
   Connected Data       = green bar
   Connected Data + PoE = green data bar + amber/red PoE bar
   Empty                 = neutral gray, no active bar
   Configuration alone never makes a physical port look live.
   ========================================================= */
html body .shell371 .realSwitchFace button.switchRj45{
  position:relative!important;
  padding-bottom:5px!important;
}
html body .shell371 .realSwitchFace .switchPortStateBars{
  position:absolute!important;
  left:3px!important;
  right:3px!important;
  bottom:0!important;
  height:3px!important;
  display:flex!important;
  gap:2px!important;
  pointer-events:none!important;
}
html body .shell371 .realSwitchFace .switchPortStateBars i{
  display:block!important;
  height:3px!important;
  flex:1 1 0!important;
  border-radius:2px!important;
  background:#68747b!important;
  opacity:.35!important;
  box-shadow:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortStateBars .dataBar,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortStateBars .dataBar{
  background:#22c978!important;
  opacity:1!important;
  box-shadow:0 0 3px rgba(34,201,120,.55)!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortStateBars .poeBar{
  background:#ef633f!important;
  opacity:1!important;
  box-shadow:0 0 3px rgba(239,99,63,.5)!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortStateBars .poeBar{
  opacity:0!important;
}
html body .shell371 .realSwitchFace button.switchRj45.emptyPhysical .switchPortStateBars i,
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .switchPortStateBars i{
  background:#68747b!important;
  opacity:.35!important;
  box-shadow:none!important;
}
/* Keep jack itself visually neutral; bottom bars communicate physical state. */
html body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortHole,
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortHole,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortHole{
  border-color:#758189!important;
  box-shadow:inset 0 0 0 2px #11181c,0 1px 1px #000!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortLed,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortLed{
  background:#21c875!important;
  box-shadow:0 0 4px rgba(33,200,117,.8)!important;
}
html body .shell371 .realSwitchFace button.switchRj45.emptyPhysical .switchPortLed,
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .switchPortLed{
  background:#59656b!important;
  box-shadow:none!important;
}

/* =========================================================
   v3.9.3 — final physical port state + SFP housing lock
   ========================================================= */
/* RJ45: three visual states only.
   empty = gray, data = green, data+PoE = green + amber/red. */
html body .shell371 .realSwitchFace button.switchRj45 .switchPortStateBars i{
  opacity:.28!important;
  background:#7a858b!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortStateBars .dataBar,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortStateBars .dataBar{
  background:#20c978!important;opacity:1!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortStateBars .poeBar{
  opacity:0!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortStateBars .poeBar{
  background:#f06a43!important;opacity:1!important;
}
html body .shell371 .realSwitchFace button.switchRj45.emptyPhysical .switchPortStateBars i,
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .switchPortStateBars i{
  background:#7a858b!important;opacity:.28!important;
}
/* The RJ45 jack itself never gets a white/green active outline. State is shown by bars only. */
html body .shell371 .realSwitchFace button.switchRj45,
html body .shell371 .realSwitchFace button.switchRj45:hover,
html body .shell371 .realSwitchFace button.switchRj45:focus,
html body .shell371 .realSwitchFace button.switchRj45:active,
html body .shell371 .realSwitchFace button.switchRj45.activeLink,
html body .shell371 .realSwitchFace button.switchRj45.dataLinked,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked{
  outline:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole,
html body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortHole,
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortHole,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortHole{
  border-color:#66757d!important;
  box-shadow:inset 0 0 0 2px #11181c,0 1px 1px rgba(0,0,0,.55)!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace button.switchRj45 .switchPortHole,
html[data-theme="light"] body .shell371 .realSwitchFace button.switchRj45.activeLink .switchPortHole,
html[data-theme="light"] body .shell371 .realSwitchFace button.switchRj45.dataLinked .switchPortHole,
html[data-theme="light"] body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .switchPortHole{
  border-color:#6f7e85!important;
  box-shadow:inset 0 0 0 2px #11181c,0 1px 1px rgba(0,0,0,.22)!important;
}

/* SFP: cage appearance is identical for enabled/disabled/connected/hover/focus.
   Only the tiny LED changes when a real/manual connection exists. */
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort,
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.active,
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.connected,
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.sfpLinked,
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort:hover,
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort:focus,
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort:active{
  width:38px!important;min-width:38px!important;height:25px!important;min-height:25px!important;
  background:#11171a!important;
  border:1px solid #707b81!important;
  color:#aab3b8!important;
  box-shadow:inset 0 0 0 1px #20282c!important;
  outline:none!important;filter:none!important;transform:none!important;
}
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.active,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.connected,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.sfpLinked,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort:hover,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort:focus,
html[data-theme="light"] body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort:active{
  background:linear-gradient(180deg,#dfe5e8 0%,#c9d1d5 55%,#b8c2c7 100%)!important;
  border-color:#7a878d!important;
  color:#26343b!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(62,78,86,.10)!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort b{
  background:#59656b!important;box-shadow:none!important;
}
html body .shell371 .realSwitchFace .switchUplinkZone .sfpBank > button.sfpPort.sfpLinked b{
  background:#21c875!important;box-shadow:0 0 5px rgba(33,200,117,.9)!important;
}

/* =========================================================
   v3.9.4 — VLAN bar + physical link indicators + fiber duplex
   ========================================================= */
/* RJ45: bottom strip is ALWAYS the configured VLAN/port color.
   Physical state is shown inside the gray latch area at the TOP of the jack. */
html body .shell371 .realSwitchFace button.switchRj45 .switchVlanBar{
  position:absolute!important;
  left:3px!important;right:3px!important;bottom:0!important;height:3px!important;
  border-radius:2px!important;background:var(--port-color,#7f8b94)!important;
  opacity:1!important;display:block!important;pointer-events:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState{
  position:absolute!important;left:3px!important;right:3px!important;top:1px!important;height:4px!important;
  display:flex!important;gap:2px!important;z-index:4!important;pointer-events:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState i{
  display:block!important;flex:1 1 0!important;height:3px!important;border-radius:1px!important;
  background:transparent!important;box-shadow:none!important;opacity:0!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .physicalState .dataState,
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .physicalState .dataState{
  background:#20c978!important;box-shadow:0 0 3px rgba(32,201,120,.65)!important;opacity:1!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .physicalState .poeState{
  background:#f06a43!important;box-shadow:0 0 3px rgba(240,106,67,.55)!important;opacity:1!important;
}
/* Hide every legacy state marker so only the new top indicators + VLAN strip remain. */
html body .shell371 .realSwitchFace button.switchRj45 .switchPortStateBars,
html body .shell371 .realSwitchFace button.switchRj45 .switchPortLed,
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole>b{
  display:none!important;
}
/* Keep the latch/gray area neutral; the colored physical-state segments sit over it. */
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole:before{
  left:3px!important;right:3px!important;top:1px!important;height:4px!important;
  background:#7d898f!important;opacity:.78!important;
}

/* SFP: one state only — Empty or Connected. Housing never changes. */
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort,
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort.sfpLinked,
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort:hover,
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort:focus,
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort:active{
  filter:none!important;transform:none!important;outline:none!important;
}
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort b{
  background:#667278!important;box-shadow:none!important;
}
html body .shell371 .realSwitchFace .sfpBank>button.sfpPort.sfpLinked b{
  background:#20c978!important;box-shadow:0 0 5px rgba(32,201,120,.85)!important;
}

/* Fiber patch positions: neutral gray when empty, black when connected.
   One adapter position contains two numbered strands: 1 | 2, 3 | 4, ... */
html body .shell371 .realPatchFace button.fiberAdapter{
  position:relative!important;height:36px!important;min-height:36px!important;max-height:36px!important;
  padding:11px 3px 3px!important;background:#c8d0d4!important;border-color:#879399!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)!important;
}
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter:not(.connected){
  background:#4a5459!important;border-color:#6d787e!important;box-shadow:inset 0 0 0 1px #242b2f!important;
}
html body .shell371 .realPatchFace button.fiberAdapter.connected,
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter.connected{
  background:#111619!important;border-color:#090c0e!important;box-shadow:inset 0 0 0 1px #343d42!important;
}
html body .shell371 .realPatchFace button.fiberAdapter .fiberPair{
  position:absolute!important;top:1px!important;left:1px!important;right:1px!important;
  height:9px!important;line-height:9px!important;text-align:center!important;font-size:6.5px!important;
  font-weight:var(--weight-semibold)!important;letter-spacing:.1px!important;color:#28343a!important;white-space:nowrap!important;
}
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter .fiberPair,
html body .shell371 .realPatchFace button.fiberAdapter.connected .fiberPair{color:#e7eef1!important;}
html body .shell371 .realPatchFace button.fiberAdapter .fiberDuplex{
  position:absolute!important;left:0!important;right:0!important;top:12px!important;height:13px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
}
html body .shell371 .realPatchFace button.fiberAdapter .fiberDuplex i{
  display:block!important;width:9px!important;height:9px!important;margin:0!important;border-radius:50%!important;
}
html body .shell371 .realPatchFace button.fiberAdapter.singlemode .fiberDuplex i{
  background:#2f6fed!important;border:2px solid #164bb2!important;box-shadow:inset 0 0 0 1px #c9d8ff!important;
}
html body .shell371 .realPatchFace button.fiberAdapter.multimode .fiberDuplex i{
  background:#31cbd6!important;border:2px solid #167f87!important;box-shadow:inset 0 0 0 1px #c9fbff!important;
}
html body .shell371 .realPatchFace button.fiberAdapter .fiberAssigned{
  position:absolute!important;left:2px!important;right:2px!important;bottom:1px!important;height:8px!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:center!important;
  font-size:5.5px!important;line-height:8px!important;color:#fff!important;font-weight:var(--weight-semibold)!important;
}
html body .shell371 .realPatchFace button.fiberAdapter.connected:after{display:none!important;content:none!important;}
/* New fiber adapter is slightly taller, keep rows proportional. */
.realPatchFace.fiberPatch .patchPortBank{grid-auto-rows:36px!important;row-gap:6px!important;}

/* =========================================================
   v3.9.5 — switch physical-state clarity + fiber duplex polish
   ========================================================= */
/* VLAN remains the bottom strip. The upper latch zone is ONLY physical state. */
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole{
  overflow:visible!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole:before{
  left:2px!important;right:2px!important;top:1px!important;height:6px!important;
  background:#7f8a90!important;opacity:1!important;border-radius:1px!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState{
  left:2px!important;right:2px!important;top:1px!important;height:6px!important;
  gap:1px!important;border-radius:1px!important;overflow:hidden!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState i{
  height:6px!important;border-radius:0!important;opacity:0!important;
}
/* Data only: green fills the entire upper latch/status area. */
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .physicalState .dataState{
  flex:1 1 100%!important;background:#20c978!important;opacity:1!important;
  box-shadow:0 0 4px rgba(32,201,120,.55)!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .physicalState .poeState{
  display:none!important;
}
/* Data + PoE: split the full upper latch area green/orange 50/50. */
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .physicalState .dataState{
  display:block!important;flex:1 1 50%!important;background:#20c978!important;opacity:1!important;
  box-shadow:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .physicalState .poeState{
  display:block!important;flex:1 1 50%!important;background:#f06a43!important;opacity:1!important;
  box-shadow:none!important;
}
/* Empty/configured-only ports keep the full upper area neutral gray. */
html body .shell371 .realSwitchFace button.switchRj45.emptyPhysical .physicalState i,
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .physicalState i{
  opacity:0!important;
}

/* Fiber: dark mode uses neutral hardware faces, never white pills. */
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter,
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter:not(.connected){
  background:#343d42!important;border-color:#66747b!important;
  box-shadow:inset 0 0 0 1px #1a2024!important;color:#e5ecef!important;
}
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter.connected{
  background:#151a1d!important;border-color:#6f7b81!important;
  box-shadow:inset 0 0 0 2px #050708!important;color:#f2f6f8!important;
}
/* Strand numbers always remain visible, including connected positions. */
html body .shell371 .realPatchFace button.fiberAdapter .fiberPair{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  top:1px!important;left:4px!important;right:4px!important;height:9px!important;
  color:#263238!important;
}
html body .shell371 .realPatchFace button.fiberAdapter .fiberPair b{
  display:block!important;min-width:9px!important;font:var(--weight-semibold) 6.5px/9px var(--font-sans)!important;
  text-align:center!important;color:inherit!important;
}
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter .fiberPair,
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter.connected .fiberPair{
  color:#f1f5f7!important;
}
html body .shell371 .realPatchFace button.fiberAdapter.connected .fiberPair{
  color:#f1f5f7!important;
}
/* Connection is indicated by a mechanical occupancy mark, not a status color. */
html body .shell371 .realPatchFace button.fiberAdapter .fiberOccupancy{
  position:absolute!important;left:7px!important;right:7px!important;bottom:2px!important;height:3px!important;
  border-radius:1px!important;background:transparent!important;box-shadow:none!important;
}
html body .shell371 .realPatchFace button.fiberAdapter.connected .fiberOccupancy{
  background:#07090a!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
html[data-theme="dark"] body .shell371 .realPatchFace button.fiberAdapter.connected .fiberOccupancy{
  background:#000!important;box-shadow:0 1px 0 rgba(255,255,255,.12)!important;
}
/* Assigned text must not cover the strand numbers; keep it at the very bottom. */
html body .shell371 .realPatchFace button.fiberAdapter .fiberAssigned{
  bottom:5px!important;height:7px!important;line-height:7px!important;font-size:5px!important;
}

/* =========================================================
   v3.9.6 — definitive switch link-state + fiber occupancy polish
   ========================================================= */
/* SWITCH RJ45
   Bottom = VLAN only. Top latch/status area = physical connection only.
   Empty: neutral gray. Data: full green. Data+PoE: green/orange split. */
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole:before{
  display:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState{
  position:absolute!important;
  left:2px!important;right:2px!important;top:1px!important;height:8px!important;
  display:flex!important;gap:1px!important;overflow:hidden!important;
  border-radius:1px!important;background:#7b878d!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
  z-index:8!important;pointer-events:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState i{
  display:block!important;height:8px!important;min-width:0!important;
  flex:1 1 0!important;border-radius:0!important;background:transparent!important;
  opacity:0!important;box-shadow:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .physicalState .dataState{
  display:block!important;flex:1 1 100%!important;background:#20c978!important;
  opacity:1!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataLinked .physicalState .poeState{
  display:none!important;opacity:0!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .physicalState .dataState{
  display:block!important;flex:1 1 50%!important;background:#20c978!important;
  opacity:1!important;box-shadow:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45.dataPoeLinked .physicalState .poeState{
  display:block!important;flex:1 1 50%!important;background:#ef6a3f!important;
  opacity:1!important;box-shadow:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45.emptyPhysical .physicalState,
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .physicalState{
  background:#7b878d!important;
}
html body .shell371 .realSwitchFace button.switchRj45.emptyPhysical .physicalState i,
html body .shell371 .realSwitchFace button.switchRj45.configuredOnly .physicalState i{
  opacity:0!important;background:transparent!important;
}
/* VLAN is independent and always visible at the bottom. */
html body .shell371 .realSwitchFace button.switchRj45 .switchVlanBar{
  left:2px!important;right:2px!important;bottom:0!important;height:3px!important;
  background:var(--port-color,#7f8b94)!important;opacity:1!important;
  border-radius:1px!important;z-index:9!important;
}

/* FIBER LC DUPLEX
   Theme-neutral hardware face; SM/MM color exists only in the optic rings.
   Connected state is shown mechanically by a plug/boot mark, not a status color. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter{
  position:relative!important;
  width:38px!important;min-width:38px!important;max-width:38px!important;
  height:38px!important;min-height:38px!important;max-height:38px!important;
  padding:12px 3px 4px!important;
  appearance:none!important;-webkit-appearance:none!important;
  background:#c7d0d5!important;background-image:none!important;
  border:1px solid #88959b!important;border-radius:3px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
  color:#253239!important;
}
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter,
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter:not(.connected),
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter.connected{
  background:#2f383d!important;background-color:#2f383d!important;background-image:none!important;
  border-color:#68767c!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
  color:#eef3f5!important;
}
/* Keep the strand pair visible and readable in every state. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberPair{
  position:absolute!important;left:3px!important;right:3px!important;top:2px!important;height:10px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  color:#263238!important;font-size:8px!important;line-height:10px!important;font-weight:var(--weight-semibold)!important;
  letter-spacing:0!important;white-space:nowrap!important;z-index:5!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberPair b{
  min-width:12px!important;font:var(--weight-semibold) 8px/10px var(--font-sans)!important;text-align:center!important;color:inherit!important;
}
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberPair,
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberPair,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberPair{
  color:inherit!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberDuplex{
  position:absolute!important;left:0!important;right:0!important;top:14px!important;height:14px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;z-index:4!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberDuplex i{
  width:9px!important;height:9px!important;border-radius:50%!important;margin:0!important;
}
/* Mechanical occupancy mark: a small centered plug boot. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberOccupancy{
  position:absolute!important;left:10px!important;right:10px!important;bottom:3px!important;height:5px!important;
  display:block!important;border-radius:1px 1px 2px 2px!important;
  background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;z-index:6!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberOccupancy{
  background:#15191b!important;border-color:#050708!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberOccupancy{
  background:#050708!important;border-color:#77858b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}
/* Assigned label remains below optics but never covers strand numbers. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberAssigned{
  display:none!important;
}
html body .shell371 .realPatchFace.fiberPatch .patchPortBank{
  grid-auto-rows:38px!important;row-gap:7px!important;
}

/* =========================================================
   v3.9.7 — robust RJ45 physical-state surface + fiber marker
   ========================================================= */
/* Replace all legacy mini indicators with one physical-state surface.
   This is the gray latch/status region at the TOP of the RJ45 jack. */
html body .shell371 .realSwitchFace button.switchRj45 .switchPortHole:before{
  display:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState{
  position:absolute!important;
  left:1px!important;right:1px!important;top:1px!important;bottom:auto!important;
  width:auto!important;height:7px!important;min-height:7px!important;max-height:7px!important;
  display:block!important;overflow:hidden!important;border-radius:1px!important;
  background:#7b878d!important;background-image:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20)!important;
  z-index:20!important;pointer-events:none!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState.stateEmpty{
  background:#7b878d!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState.stateData{
  background:#20c978!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState.stateDataPoe{
  background:linear-gradient(90deg,#20c978 0 50%,#ef6a3f 50% 100%)!important;
}
/* Neutralize any old child/pseudo status graphics that can obscure the state surface. */
html body .shell371 .realSwitchFace button.switchRj45 .physicalState i,
html body .shell371 .realSwitchFace button.switchRj45 .switchPortStateBars,
html body .shell371 .realSwitchFace button.switchRj45 .switchPortLed{
  display:none!important;
}
/* VLAN remains completely independent at the bottom. */
html body .shell371 .realSwitchFace button.switchRj45 .switchVlanBar{
  position:absolute!important;left:2px!important;right:2px!important;bottom:0!important;
  top:auto!important;height:3px!important;display:block!important;
  background:var(--port-color,#7f8b94)!important;opacity:1!important;z-index:21!important;
}

/* Fiber occupancy marker must sit BELOW the LC optic pair, never behind strand numbers. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberOccupancy{
  position:absolute!important;
  top:auto!important;left:9px!important;right:9px!important;bottom:2px!important;
  width:auto!important;height:4px!important;min-height:4px!important;max-height:4px!important;
  display:block!important;border-radius:1px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  z-index:8!important;pointer-events:none!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberOccupancy{
  top:auto!important;bottom:2px!important;
  background:#121719!important;border:1px solid #050708!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberOccupancy{
  background:#aab4b9!important;border-color:#78858b!important;
  box-shadow:none!important;
}
/* Keep strand labels and optics above the occupancy marker. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberPair{
  top:2px!important;z-index:12!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberDuplex{
  top:14px!important;z-index:11!important;
}

/* =========================================================
   v3.9.8 — approved RJ45 thin physical indicator + fiber centering
   =========================================================
   RJ45:
   - VLAN bar at the bottom is unchanged.
   - Physical connection indicator stays in the gray latch area at the top.
   - Data = green; Data+PoE = green/orange split.
   - Indicator is intentionally thin so it reads as a status strip, not a block.

   FIBER:
   - Keep SM/MM optic colors unchanged (SM blue / MM cyan).
   - Keep every adapter centered in its grid in both empty/connected states.
   - Bottom occupancy indicator uses the adapter's own mode color when connected.
   - Empty occupancy indicator remains dark/neutral.
   ========================================================= */

/* RJ45 thin physical indicator — DO NOT alter VLAN bar colors/position. */
html body .shell371 .realSwitchFace button.switchRj45 .physicalState{
  left:2px!important;
  right:2px!important;
  top:2px!important;
  bottom:auto!important;
  width:auto!important;
  height:3px!important;
  min-height:3px!important;
  max-height:3px!important;
  border-radius:1px!important;
  background:#7b878d!important;
  box-shadow:none!important;
  z-index:20!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState.stateEmpty{
  background:#7b878d!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState.stateData{
  background:#20c978!important;
}
html body .shell371 .realSwitchFace button.switchRj45 .physicalState.stateDataPoe{
  background:linear-gradient(90deg,#20c978 0 50%,#ef6a3f 50% 100%)!important;
}
/* Explicitly preserve the existing VLAN indicator. */
html body .shell371 .realSwitchFace button.switchRj45 .switchVlanBar{
  left:2px!important;
  right:2px!important;
  bottom:0!important;
  top:auto!important;
  height:3px!important;
  background:var(--port-color,#7f8b94)!important;
  opacity:1!important;
  border-radius:1px!important;
  z-index:21!important;
}

/* Fiber adapter geometry is identical in empty and connected states. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter:not(.connected),
html body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter.connected{
  box-sizing:border-box!important;
  position:relative!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  justify-self:center!important;
  align-self:center!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
}
/* Keep the light face neutral even when fiber is connected. */
html:not([data-theme="dark"]) body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter.connected{
  background:#c7d0d5!important;
  background-image:none!important;
  border-color:#88959b!important;
  color:#253239!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
/* Dark mode also uses one fixed face geometry/state; optics carry SM/MM color. */
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter,
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter:not(.connected),
html[data-theme="dark"] body .shell371 .realPatchCard .realPatchFace.fiberPatch .patchPortBank > button.fiberAdapter.connected{
  background:#2f383d!important;
  background-image:none!important;
  border-color:#68767c!important;
  color:#eef3f5!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
}
/* Approved bottom fiber indicator: centered, mode-matched color, no layout shift. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberOccupancy{
  left:8px!important;
  right:8px!important;
  bottom:2px!important;
  top:auto!important;
  width:auto!important;
  height:3px!important;
  min-height:3px!important;
  max-height:3px!important;
  border:0!important;
  border-radius:1px!important;
  background:#111719!important;
  box-shadow:none!important;
  z-index:8!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.singlemode.connected .fiberOccupancy{
  background:#2f6fed!important;
  border:0!important;
  box-shadow:0 0 3px rgba(47,111,237,.32)!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.multimode.connected .fiberOccupancy{
  background:#31cbd6!important;
  border:0!important;
  box-shadow:0 0 3px rgba(49,203,214,.30)!important;
}
/* Strand numbers and duplex optics remain centered and above the status strip. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberPair{
  left:3px!important;
  right:3px!important;
  top:2px!important;
  transform:none!important;
}
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberDuplex{
  left:0!important;
  right:0!important;
  top:14px!important;
  transform:none!important;
}

/* ==========================================================
   v3.9.13 — fiber bank TRUE panel center + centered occupancy strip
   ==========================================================
   RJ45 rules are intentionally untouched.
*/

/* The complete 12-adapter fiber row is centered on the usable patch-panel
   face. No artificial left/right translation is applied. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank{
  display:grid!important;
  grid-template-columns:repeat(12,38px)!important;
  grid-auto-rows:38px!important;
  column-gap:6px!important;
  row-gap:0!important;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:start!important;
  align-content:center!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  translate:0 0!important;
  transform:none!important;
}

/* Connection state must never change adapter geometry or position. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank > button.fiberAdapter,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank > button.fiberAdapter.connected,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank > button.fiberAdapter:not(.connected){
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  justify-self:center!important;
  align-self:center!important;
  left:auto!important;
  right:auto!important;
  translate:0 0!important;
  transform:none!important;
}

/* Small bottom fiber state strip is centered on each adapter's own axis. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberOccupancy,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberOccupancy{
  left:50%!important;
  right:auto!important;
  width:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  margin:0!important;
  translate:none!important;
  transform:translateX(-50%)!important;
}

/* Do not introduce a different fiber offset at responsive widths. */
@media(max-width:900px){
  html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank{
    translate:0 0!important;
  }
}


/* ==========================================================
   v3.9.14 — patch adapters use common LEFT origin + fiber indicator center
   ==========================================================
   Layout rule:
   - Patch-panel adapters always begin at the panel content's left edge.
   - Shorter panels leave unused chassis space on the right; they are not centered.
   - Fiber connected/empty states do not affect geometry.
   - RJ45 visual/state styling is not changed here.
*/
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch24 .patchPortBank,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch48 .patchPortBank{
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  justify-content:start!important;
  justify-self:start!important;
  align-self:center!important;
  position:relative!important;
  left:0!important;
  right:auto!important;
  translate:0 0!important;
  transform:translateY(3px)!important;
}

/* 12-position LC row: fixed physical geometry, left-to-right from common origin. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank{
  display:grid!important;
  grid-template-columns:repeat(12,38px)!important;
  grid-auto-rows:38px!important;
  column-gap:6px!important;
  row-gap:0!important;
}

html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank > button.fiberAdapter,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank > button.fiberAdapter.connected,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank > button.fiberAdapter:not(.connected){
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  justify-self:start!important;
  align-self:center!important;
  left:0!important;
  right:auto!important;
  translate:0 0!important;
  transform:none!important;
}

/* Bottom fiber status strip: equal inset on both sides = true adapter center. */
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberOccupancy,
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter.connected .fiberOccupancy{
  left:8px!important;
  right:8px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  bottom:2px!important;
  top:auto!important;
  translate:0 0!important;
  transform:none!important;
}

@media(max-width:900px){
  html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch12 .patchPortBank,
  html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch24 .patchPortBank,
  html body .shell371 .realPatchCard .realPatchFace.fiberPatch.patch48 .patchPortBank{
    margin-left:0!important;
    margin-right:0!important;
    left:0!important;
    translate:0 0!important;
    transform:translateY(3px)!important;
  }
}

/* ==========================================================
   v3.9.15 — LC duplex optics exact center inside each adapter
   ==========================================================
   Only the LC optic pair is changed here. The fiber bank left-origin,
   adapter geometry, bottom occupancy indicator, colors and RJ45 remain unchanged.
*/
html body .shell371 .realPatchCard .realPatchFace.fiberPatch button.fiberAdapter .fiberDuplex{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:14px!important;
  width:max-content!important;
  height:13px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  translate:0 0!important;
  transform:translateX(-50%)!important;
}

/* =========================================================
   v3.10.0 — standalone authentication / SaaS entry
   ========================================================= */
html body .loginScreen{position:fixed;inset:0;z-index:10000;min-height:100dvh;width:100%;overflow:auto;display:grid;place-items:center;padding:34px 18px;background:#071820;background-image:radial-gradient(circle at 22% 8%,#15394b 0,#0b2633 24%,#071820 58%,#061319 100%)}
html body .authWrap{width:min(470px,100%);margin:auto;display:grid;gap:18px}
html body .authBrand{display:flex;align-items:center;justify-content:center;gap:13px;color:#f2f8fa;text-align:left}
html body .authBrand h1{font-size:var(--text-title);line-height:1;margin:0;letter-spacing:-1px}
html body .authBrand p{margin:6px 0 0;color:#83a8b8;font-size:var(--text-body);letter-spacing:.9px}
html body .authLogoMark{width:42px;height:42px;border:1px solid #315b6d;border-radius:12px;background:#0c2530;display:grid;grid-template-columns:repeat(3,6px);gap:4px;place-content:center;box-shadow:0 10px 30px #0005}
html body .authLogoMark span{width:6px;height:22px;border-radius:5px;background:#3ba9d5}
html body .authLogoMark span:nth-child(2){height:30px;background:#62d1cf}
html body .authLogoMark span:nth-child(3){height:16px}
html body .loginCard.authPanel{width:100%;padding:30px;background:rgba(11,30,39,.96);border:1px solid #2a4c5b;border-radius:18px;box-shadow:0 28px 70px #0007,inset 0 1px 0 #ffffff08}
html body .authPanelWide{width:min(620px,calc(100vw - 36px))!important;margin-left:50%;transform:translateX(-50%)}
html body .authHeading{margin-bottom:20px}
html body .authHeading h2{margin:0 0 6px;font-size:var(--text-section);color:#f1f7f9}
html body .authHeading p{margin:0;color:#83a1af;font-size:var(--text-body);line-height:1.55}
html body .authPanel label{display:grid;gap:6px;margin:11px 0;color:#a9c0ca;font-size:var(--text-body);font-weight:var(--weight-semibold)}
html body .authPanel input,html body .authPanel select,html body .authPanel textarea{background:#f4f7f8;color:#10232c;border:1px solid #aebbc1;border-radius:9px;min-height:44px;padding:10px 12px;outline:none}
html body .authPanel textarea{min-height:78px;resize:vertical}
html body .authPanel input:focus,html body .authPanel select:focus,html body .authPanel textarea:focus{border-color:#3aa8d3;box-shadow:0 0 0 3px #3aa8d322}
html body .authPrimary,html body .authSecondary{width:100%;min-height:44px;margin-top:10px;font-weight:var(--weight-semibold);border-radius:9px}
html body .authPrimary{background:#1979a2;border-color:#3197bd;box-shadow:0 8px 20px #0b0f1240}
html body .authSecondary{background:#102a35;border-color:#31515f;color:#dbe9ee}
html body .authTextBtn{width:100%;background:transparent;border:0;color:#68bddb;margin-top:9px;font-size:var(--text-body);padding:9px}
html body .authDivider{display:flex;align-items:center;gap:10px;margin:19px 0 3px;color:#688794;font-size:var(--text-small);text-transform:uppercase;letter-spacing:.7px}
html body .authDivider:before,html body .authDivider:after{content:"";height:1px;background:#1e3d49;flex:1}
html body .authBack{background:transparent;border:0;color:#7fc6df;padding:0;margin:0 0 18px;font-size:var(--text-body)}
html body .authTwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html body .authMessage{min-height:16px;margin-top:8px;font-size:var(--text-body)}
html body .authFine{display:block;color:#6f8e9b;margin-top:14px;line-height:1.5;text-align:center}
html body .authVersion{text-align:center;color:#4f7180;font-size:var(--text-small);letter-spacing:.5px}
html body .previewBadge{display:inline-block;margin-bottom:10px;padding:5px 8px;border-radius:999px;background:#113b49;border:1px solid #246377;color:#67d0d0;font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:1px}
@media(max-width:600px){html body .authTwo{grid-template-columns:1fr}html body .loginCard.authPanel{padding:23px}html body .authPanelWide{width:100%!important;margin-left:0;transform:none}}


/* =========================================================
   v3.10.1 — approved login cleanup
   - Login contains Sign In + one Sign up link only.
   - Trial / Preview enrollment stays outside the app login.
   - No version label on the public login screen.
   ========================================================= */
html body .authSignupPrompt{margin-top:18px;text-align:center;color:#c8d7dd;font-size:var(--text-body);line-height:1.4}
html body .authSignupLink{display:inline;background:transparent!important;border:0!important;color:#2ec8f2!important;padding:0 0 0 5px!important;margin:0!important;font:inherit;font-weight:var(--weight-semibold);cursor:pointer;box-shadow:none!important}
html body .authSignupLink:hover{text-decoration:underline}
html body .authDivider{margin:20px 0 0}
html body .authDivider span{min-width:24px;text-align:center}


/* =========================================================
   v3.10.2 — two-step verification & security settings
   ========================================================= */
html body .settingsGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:18px;align-items:start}
html body .settingsCard{background:var(--card,#fff);border:1px solid var(--border,#d7e0e5);border-radius:14px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
html[data-theme="dark"] body .settingsCard{background:#0c2029;border-color:#294653;box-shadow:0 12px 30px rgba(0,0,0,.25)}
html body .settingsCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
html body .settingsCardHead small{display:block;font-size:var(--text-small);letter-spacing:.9px;color:#728a95;margin-bottom:4px}
html body .settingsCardHead h3{margin:0;font-size:var(--text-section)}
html body .settingsCard>p{margin:0 0 18px;color:var(--muted,#6a7d86);line-height:1.55}
html body .securityStatus{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border-radius:999px;border:1px solid #8aa0aa;color:#687d86;font-size:var(--text-small);font-weight:var(--weight-semibold);white-space:nowrap}
html body .securityStatus.enabled{border-color:#2b9f70;background:#e9f8f1;color:#18774f}
html[data-theme="dark"] body .securityStatus.enabled{background:#0f3327;border-color:#247a58;color:#73d7aa}
html body .securityFacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
html body .securityFacts span{display:grid;gap:3px;padding:11px 12px;border:1px solid var(--border,#d7e0e5);border-radius:10px;font-size:var(--text-body)}
html body .securityFacts b{font-size:var(--text-small);text-transform:uppercase;letter-spacing:.6px;color:#718893}
html[data-theme="dark"] body .securityFacts span{border-color:#294653;background:#0a1a22}
html body .settingsActionsRow{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
html body .securityNotice{padding:11px 12px;border-radius:9px;background:#fff7df;border:1px solid #e2ca7b;color:#6a5717;font-size:var(--text-body);line-height:1.5}
html body .securityNotice.neutral{background:#eef5f7;border-color:#c7d9df;color:#4c6975}
html[data-theme="dark"] body .securityNotice{background:#302911;border-color:#675922;color:#e7d786}
html[data-theme="dark"] body .securityNotice.neutral{background:#102833;border-color:#284b59;color:#91b5c3}
html body .twoFactorSetup{display:grid;gap:12px;max-width:430px}
html body .twoFactorSetup>p{margin:0;line-height:1.5}
html body .twoFactorQr{display:grid;place-items:center;padding:13px;background:#fff;border-radius:12px;border:1px solid #d4dce0;width:max-content;max-width:100%;margin:0 auto}
html body .twoFactorQr img{display:block;width:220px;max-width:100%;height:auto}
html body .twoFactorSetup label{display:grid;gap:6px;font-size:var(--text-body)}
html body .twoFactorSetup input{min-height:42px}
html body .twoFactorSetup small{color:var(--muted,#738792);line-height:1.45}
html body .recoveryPanel{display:grid;gap:14px;min-width:min(420px,75vw)}
html body .recoveryCodes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body .recoveryCodes code{display:block;padding:9px 10px;border-radius:8px;border:1px solid var(--border,#d5dfe3);background:var(--soft,#f5f8f9);font-size:var(--text-body);text-align:center;letter-spacing:.6px}
html[data-theme="dark"] body .recoveryCodes code{background:#091920;border-color:#294653;color:#e5f1f5}
html body #twoFactorForm input[data-recovery="1"]{text-transform:uppercase;letter-spacing:1px}
@media(max-width:760px){html body .settingsGrid{grid-template-columns:1fr}html body .securityFacts{grid-template-columns:1fr}html body .recoveryCodes{grid-template-columns:1fr}}
\n\n/* =========================================================\n   v3.10.3 — trusted-device 2-step verification policy\n   ========================================================= */\nhtml body .trustDeviceRow{display:flex!important;align-items:flex-start!important;gap:10px!important;margin:14px 0 4px!important;padding:11px 12px;border:1px solid #294b59;border-radius:9px;background:#0d2732;color:#d6e6ec!important;cursor:pointer}\nhtml body .trustDeviceRow.hidden{display:none!important}\nhtml body .trustDeviceRow input{width:16px!important;height:16px!important;min-height:0!important;margin:2px 0 0!important;padding:0!important;accent-color:#2ec8f2;flex:0 0 auto}\nhtml body .trustDeviceRow span{display:grid;gap:3px;min-width:0}\nhtml body .trustDeviceRow b{font-size:var(--text-body);color:#e6f2f6}\nhtml body .trustDeviceRow small{font-size:var(--text-small);line-height:1.45;color:#86a8b6}\nhtml body .securityPolicyLabel{display:grid;gap:7px;margin:14px 0 4px;padding:13px;border:1px solid var(--border,#d7e0e5);border-radius:10px;font-size:var(--text-body);font-weight:var(--weight-semibold)}\nhtml[data-theme="dark"] body .securityPolicyLabel{border-color:#294653;background:#0a1a22}\nhtml body .securityPolicyLabel select{min-height:40px;padding:8px 10px;border-radius:8px;border:1px solid var(--border,#cbd8dd);background:var(--card,#fff);color:inherit}\nhtml[data-theme="dark"] body .securityPolicyLabel select{background:#102832;border-color:#31505d;color:#e7f1f5}\nhtml body .securityPolicyLabel small{font-weight:var(--weight-regular);color:var(--muted,#728791);line-height:1.45}\n

/* =========================================================
   v3.10.4 — trusted device details
   ========================================================= */
html body .trustedDevicesSection{margin-top:20px;padding-top:18px;border-top:1px solid var(--border,#d7e0e5)}
html[data-theme="dark"] body .trustedDevicesSection{border-color:#294653}
html body .trustedDevicesHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
html body .trustedDevicesHead small{display:block;font-size:var(--text-small);letter-spacing:.9px;color:#728a95;margin-bottom:3px}
html body .trustedDevicesHead h4{margin:0;font-size:var(--text-body)}
html body .trustedDeviceList{display:grid;gap:9px}
html body .trustedDeviceItem{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--border,#d7e0e5);border-radius:11px;background:var(--soft,#f7f9fa)}
html[data-theme="dark"] body .trustedDeviceItem{background:#091920;border-color:#294653}
html body .trustedDeviceItem.current{border-color:#2c8eaf;box-shadow:inset 3px 0 0 #2ec8f2}
html body .trustedDeviceIcon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#e9f3f6;border:1px solid #c9dde5;color:#2385a7;font-size:19px;font-weight:var(--weight-semibold)}
html[data-theme="dark"] body .trustedDeviceIcon{background:#102a35;border-color:#31515f;color:#5bc8ea}
html body .trustedDeviceMain{min-width:0;display:grid;gap:6px}
html body .trustedDeviceTitle{display:flex;align-items:center;gap:8px;min-width:0}
html body .trustedDeviceTitle>b{font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .trustedDeviceTitle>span{display:inline-flex;padding:3px 7px;border-radius:999px;background:#dff6ed;border:1px solid #8fd3b8;color:#176f50;font-size:var(--text-small);font-weight:var(--weight-semibold);white-space:nowrap}
html[data-theme="dark"] body .trustedDeviceTitle>span{background:#0f3327;border-color:#247a58;color:#73d7aa}
html body .trustedDeviceMeta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted,#6f838d);font-size:var(--text-small)}
html body .trustedDeviceMeta span{display:flex;gap:4px}.trustedDeviceMeta b{color:inherit;font-weight:var(--weight-semibold)}
html body .trustedDevicesEmpty{padding:14px;border:1px dashed var(--border,#ccd8dd);border-radius:10px;color:var(--muted,#71858e);font-size:var(--text-body);line-height:1.5;text-align:center}
html[data-theme="dark"] body .trustedDevicesEmpty{border-color:#294653;background:#091920}
@media(max-width:700px){html body .trustedDeviceItem{grid-template-columns:36px minmax(0,1fr)}html body .trustedDeviceItem>button{grid-column:1/-1;width:100%}html body .trustedDeviceMeta{display:grid;gap:3px}}

/* =========================================================
   v3.11.0 — Dashboard + permission-aware project navigation
   ========================================================= */
html[data-theme="light"] .shell371 > aside.contextNav371{
  scrollbar-color:#b8c5cd #f4f7f9!important;
}
html[data-theme="light"] .shell371 > aside.contextNav371::-webkit-scrollbar{width:7px!important;height:7px!important}
html[data-theme="light"] .shell371 > aside.contextNav371::-webkit-scrollbar-track{background:#f4f7f9!important}
html[data-theme="light"] .shell371 > aside.contextNav371::-webkit-scrollbar-thumb{background:#b8c5cd!important;border:1px solid #f4f7f9!important;border-radius:999px!important}
html[data-theme="light"] .shell371 > aside.contextNav371::-webkit-scrollbar-thumb:hover{background:#9cabb5!important}

.dashboardFilters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.dashboardFilters label{display:grid;gap:5px;min-width:190px;font-size:var(--text-small);color:var(--ui-muted,#8da7b4);text-transform:uppercase;letter-spacing:.04em}
.dashboardFilters select{min-height:36px!important}
.dashboardMetricGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-bottom:14px}
.dashboardMetric{position:relative;text-align:left;min-height:88px;padding:14px 15px!important;border-radius:12px!important;background:var(--ui-surface,#0e2632)!important;border:1px solid var(--ui-border,#244b5c)!important;color:var(--ui-text,#eef8fb)!important;box-shadow:var(--ui-shadow,none)!important}
.dashboardMetric:hover{transform:translateY(-1px)}
.dashboardMetric b{display:block;font-size:var(--text-title);line-height:1;margin-bottom:8px}
.dashboardMetric span{font-size:var(--text-small);text-transform:uppercase;letter-spacing:.04em;color:var(--ui-muted,#8da7b4)}
.dashboardMetric.active{outline:2px solid var(--ui-blue,#2387e8);outline-offset:1px}
.dashboardGrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px}
.dashboardPanel{background:var(--ui-surface,#0c1e27);border:1px solid var(--ui-border,#1e3c4a);border-radius:12px;padding:14px;min-width:0}
.dashboardPanelHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.dashboardPanelHead h3{margin:0;font-size:var(--text-body)}.dashboardPanelHead small{color:var(--ui-muted,#8da7b4)}
.dashboardTaskList{display:grid;gap:7px}.dashboardTask{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;background:var(--ui-surface2,#102833)!important;border:1px solid var(--ui-border,#244b5c)!important;border-radius:9px!important;padding:10px 11px!important}.dashboardTask strong{display:block;font-size:var(--text-body)}.dashboardTask small{display:block;margin-top:4px;font-size:var(--text-small);color:var(--ui-muted,#8da7b4)}.dashboardTaskMeta{text-align:right;white-space:nowrap}.dashboardTaskMeta b{display:block;font-size:var(--text-small)}.dashboardTaskMeta span{font-size:var(--text-small);color:var(--ui-muted,#8da7b4)}
.dashboardProgressList{display:grid;gap:9px}.dashboardProgressItem{cursor:pointer;background:var(--ui-surface2,#102833);border:1px solid var(--ui-border,#244b5c);border-radius:9px;padding:10px}.dashboardProgressTop{display:flex;justify-content:space-between;gap:8px;font-size:var(--text-body)}.dashboardProgressTrack{height:6px;background:rgba(127,145,155,.2);border-radius:999px;overflow:hidden;margin:8px 0 6px}.dashboardProgressTrack span{display:block;height:100%;background:var(--ui-blue,#2387e8)}.dashboardProgressFoot{display:flex;gap:10px;font-size:var(--text-small);color:var(--ui-muted,#8da7b4)}
.dashboardEmpty{padding:24px;text-align:center;color:var(--ui-muted,#8da7b4)}
@media(max-width:1000px){.dashboardGrid{grid-template-columns:1fr}}
@media(max-width:700px){.dashboardFilters label{min-width:100%;width:100%}.dashboardMetricGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboardTask{grid-template-columns:1fr}.dashboardTaskMeta{text-align:left}}


/* =========================================================
   v3.11.1 — page-to-page navigation routing fix
   ========================================================= */
#mainNav .navBtn.scopeHidden,
#mainNav .navSection.scopeHidden{
  display:none!important;
}

/* =========================================================
   v3.12.0 — Dashboard / Project Overview / customer access
   ========================================================= */
.projectOverviewGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0}
.projectOverviewCard{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px;min-width:0}
.overviewCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.overviewCardHead small{font-size:var(--text-small);letter-spacing:.12em;color:var(--muted)}
.overviewCardHead h3{margin:3px 0 0;font-size:var(--text-section)}
.overviewInfoList{display:grid;gap:9px}
.overviewInfoList>span{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-body);color:var(--muted);border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding-top:8px}
.overviewInfoList>span b{color:var(--text);font-weight:var(--weight-semibold)}
.overviewTeamList{display:grid;gap:7px}
.overviewTeamList>span{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:var(--text-body)}
.overviewTeamList small{color:var(--muted)}
@media(max-width:1050px){.projectOverviewGrid{grid-template-columns:1fr 1fr}.projectOverviewCard:last-child{grid-column:1/-1}}
@media(max-width:720px){.projectOverviewGrid{grid-template-columns:1fr}.projectOverviewCard:last-child{grid-column:auto}}

/* =========================================================
   v3.12.1 — Project overview window
   ========================================================= */
#modal.projectOverviewDialog{
  width:min(1120px,calc(100vw - 40px));
  max-width:1120px;
}
#modal.projectOverviewDialog .modalBody{max-height:min(74vh,820px);overflow:auto}
.projectOverviewWindow{display:grid;gap:18px}
.projectOverviewActions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:760px){
  #modal.projectOverviewDialog{width:calc(100vw - 20px)}
  .projectOverviewActions{justify-content:flex-start}
}


/* =====================================================================
   v3.13.0 — global utility header, unified forms, project view choices
   ===================================================================== */
/* One type family everywhere inside the application. Sizes/weights stay contextual. */
#appShell, #appShell button, #appShell input, #appShell select, #appShell textarea,
#appShell table, #appShell th, #appShell td, #appShell dialog{
  font-family:var(--font-sans)!important;
}

/* Global writable controls: neutral at rest, IntegratorOS accent only on focus. */
#appShell input:not([type="checkbox"]):not([type="radio"]),
#appShell select,
#appShell textarea{
  background:#19232b!important;
  color:#e9f0f4!important;
  border:1px solid #34444f!important;
  box-shadow:none!important;
}
#appShell input::placeholder,#appShell textarea::placeholder{color:#7f909b!important;opacity:1!important}
#appShell input:not([type="checkbox"]):not([type="radio"]):hover,
#appShell select:hover,#appShell textarea:hover{border-color:#465a67!important}
#appShell input:not([type="checkbox"]):not([type="radio"]):focus,
#appShell select:focus,#appShell textarea:focus{
  outline:none!important;
  border-color:#29a9d6!important;
  box-shadow:0 0 0 2px rgba(41,169,214,.12)!important;
}
html[data-theme="light"] #appShell input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] #appShell select,
html[data-theme="light"] #appShell textarea{
  background:#fff!important;color:#17212a!important;border-color:#c8d3da!important;
}
html[data-theme="light"] #appShell input::placeholder,
html[data-theme="light"] #appShell textarea::placeholder{color:#87959e!important}
html[data-theme="light"] #appShell input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] #appShell select:focus,
html[data-theme="light"] #appShell textarea:focus{border-color:#168bc0!important;box-shadow:0 0 0 2px rgba(22,139,192,.11)!important}

/* Minimal global header: utility controls live on the far right only. */
.shell371 main>header.globalUtilityHeader,
main>header.globalUtilityHeader{
  justify-content:flex-end!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 14px!important;
}
.globalUtilityHeader>.liveTimerBadge{margin-right:auto!important}
.globalUtilityHeader .utilityActions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:8px!important}
.userProfileControl{position:relative!important}
.userProfileBtn{
  min-width:44px!important;height:32px!important;padding:0 8px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  border-radius:9px!important;background:var(--ui-surface2,#16222b)!important;border:1px solid var(--ui-border,#2b3b46)!important;
  color:var(--ui-text,#eef4f7)!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-small)!important;
}
.profileChevron{font-size:var(--text-small)!important;opacity:.7!important}
.userProfileMenu{
  position:absolute!important;right:0!important;top:39px!important;width:220px!important;z-index:500!important;
  padding:7px!important;background:#111a21!important;border:1px solid #31414b!important;border-radius:11px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.32)!important;
}
.userProfileIdentity{display:grid!important;gap:2px!important;padding:8px 9px 10px!important;border-bottom:1px solid #293842!important;margin-bottom:5px!important}
.userProfileIdentity b{font-size:var(--text-body)!important}.userProfileIdentity span{font-size:var(--text-small)!important;color:#9aacb6!important}.userProfileIdentity small{font-size:var(--text-small)!important;color:#6fd0ee!important}
.userProfileMenu>button{width:100%!important;text-align:left!important;background:transparent!important;border:0!important;color:#dfe8ed!important;padding:8px 9px!important}
.userProfileMenu>button:hover{background:#1b2a33!important}
.userProfileMenu>button.profileSignOut{color:#ffaaa5!important;border-top:1px solid #293842!important;border-radius:0!important;margin-top:4px!important;padding-top:10px!important}
html[data-theme="light"] .userProfileBtn{background:#fff!important;border-color:#d5dee4!important;color:#17212a!important}
html[data-theme="light"] .userProfileMenu{background:#fff!important;border-color:#d4dde3!important;box-shadow:0 18px 45px rgba(40,60,75,.16)!important}
html[data-theme="light"] .userProfileIdentity{border-color:#e3e9ed!important}
html[data-theme="light"] .userProfileIdentity span{color:#697984!important}
html[data-theme="light"] .userProfileMenu>button{color:#25323a!important}
html[data-theme="light"] .userProfileMenu>button:hover{background:#f2f6f8!important}

/* Projects page view selector and visual project cards. */
.projectsPageTools{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;margin-bottom:12px!important}
.projectPageSearch{display:grid!important;gap:5px!important;min-width:min(420px,100%)!important;font-size:var(--text-small)!important;color:var(--ui-muted,#8ca0ab)!important}
.projectPageSearch input{min-width:320px!important}
.projectsViewToolbar{display:flex!important;align-items:center!important;gap:10px!important}
.projectsViewModes,.projectsViewSizes{display:flex!important;align-items:center!important;gap:4px!important;background:var(--ui-surface2,#14212a)!important;border:1px solid var(--ui-border,#2b3d48)!important;border-radius:9px!important;padding:3px!important}
.projectsViewSizes>span{padding:0 5px!important;font-size:var(--text-small)!important;color:var(--ui-muted,#8ca0ab)!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.projectsViewToolbar button{min-height:28px!important;padding:4px 9px!important;background:transparent!important;border:0!important;color:var(--ui-muted,#8ca0ab)!important}
.projectsViewToolbar button.active{background:var(--ui-accent-soft,#15384a)!important;color:var(--ui-accent,#5cc9ef)!important}
.projectsViewToolbar button:disabled{opacity:.35!important;cursor:default!important}
.projectsThumbView{display:grid!important;gap:12px!important;align-items:start!important}
.projectsThumbView.size-small{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important}
.projectsThumbView.size-medium{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important}
.projectsThumbView.size-large{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))!important}
.projectPageCard{overflow:hidden!important;padding:0!important;background:var(--ui-panel,#111c23)!important;border:1px solid var(--ui-border,#2a3a45)!important;border-radius:11px!important;cursor:pointer!important;transition:transform .13s ease,border-color .13s ease,box-shadow .13s ease!important}
.projectPageCard:hover{transform:translateY(-1px)!important;border-color:#3e6174!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important}
.projectPageThumb{position:relative!important;height:170px!important;overflow:hidden!important;background:var(--ui-surface2,#17242c)!important}
.size-small .projectPageThumb{height:115px!important}.size-large .projectPageThumb{height:225px!important}
.projectPageThumb>img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important}
.projectPageThumb .projectThumbFallback{width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:var(--text-title)!important;font-weight:var(--weight-semibold)!important;color:#46b7e4!important;background:rgba(39,160,188,0.15)!important}
.projectPageShade{position:absolute!important;inset:38% 0 0!important;background:rgba(3,9,13,0.86)!important}
.projectPageIdentity{position:absolute!important;left:12px!important;right:12px!important;bottom:10px!important;color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.55)!important}
.projectPageIdentity small{font-size:var(--text-small)!important;color:#d3e2ea!important}.projectPageIdentity h3{margin:2px 0!important;font-size:var(--text-body)!important;color:#fff!important}.projectPageIdentity p{margin:0!important;font-size:var(--text-small)!important;color:#dce8ed!important}
.projectPhotoBtn{position:absolute!important;right:8px!important;top:8px!important;width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;z-index:4!important;background:rgba(8,16,21,.78)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}
.projectPageFoot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:9px 10px!important}
.projectPageFoot>div{display:flex!important;gap:5px!important}
.projectStatusBadge{display:inline-flex!important;align-items:center!important;min-height:22px!important;padding:3px 7px!important;border-radius:999px!important;background:var(--ui-surface2,#17242c)!important;color:var(--ui-muted,#9aabb4)!important;font-size:var(--text-small)!important;text-transform:capitalize!important}
.projectsListView{display:grid!important;gap:6px!important}
.projectListRow{display:grid!important;grid-template-columns:58px minmax(220px,1fr) auto auto!important;align-items:center!important;gap:12px!important;padding:7px!important;background:var(--ui-panel,#111c23)!important;border:1px solid var(--ui-border,#2a3a45)!important;border-radius:9px!important;cursor:pointer!important}
.projectListRow:hover{border-color:#3e6174!important}.projectListImage{width:58px!important;height:44px!important;border-radius:6px!important;overflow:hidden!important;background:var(--ui-surface2,#17242c)!important;display:grid!important;place-items:center!important;color:#46b7e4!important;font-weight:var(--weight-semibold)!important}.projectListImage img{width:100%!important;height:100%!important;object-fit:cover!important}.projectListMain{display:grid!important;gap:1px!important}.projectListMain small{font-size:var(--text-small)!important}.projectListMain b{font-size:var(--text-body)!important}.projectListMain span{font-size:var(--text-small)!important;color:var(--ui-muted,#8ca0ab)!important}.projectListActions{display:flex!important;gap:5px!important}
@media(max-width:760px){.projectsPageTools{align-items:stretch!important}.projectPageSearch,.projectPageSearch input{min-width:0!important;width:100%!important}.projectsViewToolbar{justify-content:space-between!important}.projectListRow{grid-template-columns:52px 1fr!important}.projectListRow>.projectStatusBadge,.projectListActions{grid-column:2!important}.projectsThumbView.size-large,.projectsThumbView.size-medium,.projectsThumbView.size-small{grid-template-columns:1fr!important}}

/* =====================================================================
   v3.13.1 — form control polish + project photo control + ribbon cleanup
   ===================================================================== */
/* Modal dialogs live outside #appShell, so include them in the global form theme. */
#modal input:not([type="checkbox"]):not([type="radio"]),
#modal select,
#modal textarea,
dialog input:not([type="checkbox"]):not([type="radio"]),
dialog select,
dialog textarea{
  background:#1b242b!important;
  color:#e9f0f4!important;
  border:1px solid #34434d!important;
  box-shadow:none!important;
}
#modal input::placeholder,#modal textarea::placeholder,
dialog input::placeholder,dialog textarea::placeholder{color:#7f909b!important;opacity:1!important}
#modal input:not([type="checkbox"]):not([type="radio"]):hover,
#modal select:hover,#modal textarea:hover,
dialog input:not([type="checkbox"]):not([type="radio"]):hover,
dialog select:hover,dialog textarea:hover{border-color:#465a67!important}
#modal input:not([type="checkbox"]):not([type="radio"]):focus,
#modal select:focus,#modal textarea:focus,
dialog input:not([type="checkbox"]):not([type="radio"]):focus,
dialog select:focus,dialog textarea:focus{
  outline:none!important;
  border-color:#29a9d6!important;
  box-shadow:0 0 0 2px rgba(41,169,214,.12)!important;
}
html[data-theme="light"] #modal input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] #modal select,
html[data-theme="light"] #modal textarea,
html[data-theme="light"] dialog input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] dialog select,
html[data-theme="light"] dialog textarea{
  background:#fff!important;
  color:#17212a!important;
  border-color:#c8d3da!important;
}
html[data-theme="light"] #modal input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] #modal select:focus,
html[data-theme="light"] #modal textarea:focus,
html[data-theme="light"] dialog input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] dialog select:focus,
html[data-theme="light"] dialog textarea:focus{
  border-color:#168bc0!important;
  box-shadow:0 0 0 2px rgba(22,139,192,.11)!important;
}

/* Project thumbnail photo button: center the icon exactly. */
.projectPhotoBtn{
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  text-align:center!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
  text-indent:0!important;
}
.projectPhotoBtn>*{margin:0!important;transform:none!important}

/* The old workflow/project command ribbon is no longer part of the UI. */
#workflowRibbon,.workflowRibbon{display:none!important}


/* =====================================================================
   v3.13.2 — Project Overview light-mode + typography normalization
   ===================================================================== */
/* Dialogs live outside #appShell. Keep typography identical to the app. */
#modal,
#modal *,
dialog,
dialog *{
  font-family:var(--font-sans)!important;
  font-style:normal;
}

/* Project Overview uses the top-right X only; no duplicate footer Close. */
#modal.projectOverviewDialog .modalFoot{
  display:none!important;
}

/* Keep overview surfaces coherent in dark mode. */
#modal.projectOverviewDialog{
  background:#10181e!important;
  color:#e8eef2!important;
  border-color:#2d3c46!important;
}
#modal.projectOverviewDialog .modalHead{
  background:#141d23!important;
  color:#e8eef2!important;
  border-color:#2d3c46!important;
}
#modal.projectOverviewDialog .projectCommandHero{
  background:#0e2028!important;
  border-color:#29404b!important;
  color:#e8eef2!important;
}
#modal.projectOverviewDialog .projectOverviewCard{
  background:#121c22!important;
  border-color:#31424d!important;
  color:#e8eef2!important;
}
#modal.projectOverviewDialog .projectKpis button{
  background:#0f242d!important;
  border-color:#2b4653!important;
  color:#e8eef2!important;
}
#modal.projectOverviewDialog .overviewInfoList>span,
#modal.projectOverviewDialog .overviewTeamList>span{
  border-color:#2a3a43!important;
}

/* Light mode: no dark-mode islands inside the overview dialog. */
html[data-theme="light"] #modal.projectOverviewDialog{
  background:#f7f9fb!important;
  color:#17212a!important;
  border-color:#cfd9df!important;
  box-shadow:0 24px 70px rgba(35,52,65,.22)!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .modalHead{
  background:#ffffff!important;
  color:#17212a!important;
  border-color:#dce4e9!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .modalHead button[data-close]{
  background:#eef3f6!important;
  color:#24333d!important;
  border-color:#cbd7de!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectCommandHero{
  background:#ffffff!important;
  border-color:#d3dde3!important;
  color:#17212a!important;
  box-shadow:0 1px 2px rgba(25,45,58,.04)!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectCommandHero h2,
html[data-theme="light"] #modal.projectOverviewDialog .projectOverviewCard h3,
html[data-theme="light"] #modal.projectOverviewDialog .overviewInfoList>span b{
  color:#17212a!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectCommandHero small,
html[data-theme="light"] #modal.projectOverviewDialog .overviewCardHead small,
html[data-theme="light"] #modal.projectOverviewDialog .overviewInfoList>span,
html[data-theme="light"] #modal.projectOverviewDialog .overviewTeamList small{
  color:#6f808b!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .heroMeta span{
  background:#eef4f7!important;
  border-color:#d4e0e6!important;
  color:#445660!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectOverviewCard{
  background:#ffffff!important;
  border-color:#d1dce3!important;
  color:#17212a!important;
  box-shadow:0 1px 2px rgba(25,45,58,.03)!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .overviewInfoList>span,
html[data-theme="light"] #modal.projectOverviewDialog .overviewTeamList>span{
  border-color:#e0e7eb!important;
  color:#5f717c!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectKpis button{
  background:#ffffff!important;
  border-color:#d1dce3!important;
  color:#17212a!important;
  box-shadow:none!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectKpis button:hover{
  background:#f2f7fa!important;
  border-color:#b9ccd7!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectKpis small{
  color:#71838e!important;
}
html[data-theme="light"] #modal.projectOverviewDialog .projectKpis b{
  color:#17212a!important;
}
html[data-theme="light"] #modal.projectOverviewDialog button.smallBtn,
html[data-theme="light"] #modal.projectOverviewDialog .projectOverviewActions button{
  background:#f3f7f9!important;
  color:#23333d!important;
  border-color:#c8d6de!important;
}
html[data-theme="light"] #modal.projectOverviewDialog button.smallBtn:hover,
html[data-theme="light"] #modal.projectOverviewDialog .projectOverviewActions button:hover{
  background:#e9f2f6!important;
  border-color:#afc5d1!important;
}

/* =========================================================
   v3.14.0 — Contextual project setup wizard
   ========================================================= */
#modal.projectWizardDialog{width:min(1040px,calc(100vw - 28px));max-width:1040px}
#modal.projectWizardDialog #modalForm{min-height:min(760px,calc(100vh - 36px));display:flex;flex-direction:column}
#modal.projectWizardDialog .modalFoot{display:none!important}
#modal.projectWizardDialog #modalBody{padding:0;flex:1;overflow:auto}
.projectWizard{min-height:620px;display:flex;flex-direction:column}
.projectWizardProgress{display:grid;grid-template-columns:repeat(7,minmax(70px,1fr));gap:8px;padding:16px 20px;border-bottom:1px solid var(--border,#2d3941);overflow:auto}
.projectWizardStepDot{appearance:none;border:0;background:transparent;color:var(--muted,#9ba9b2);display:flex;align-items:center;gap:7px;padding:5px 4px;min-width:90px;text-align:left;cursor:pointer}
.projectWizardStepDot span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #51616c;background:#1b242a;color:#d7e2e8;font-size:var(--text-body);flex:none}
.projectWizardStepDot small{font-size:var(--text-body);white-space:nowrap}
.projectWizardStepDot.active{color:#e9f4f8}.projectWizardStepDot.active span{border-color:#20aee9;background:#12354a;color:#7ed8ff;box-shadow:0 0 0 3px rgba(32,174,233,.09)}
.projectWizardStepDot.done span{border-color:#2fb978;background:#14392c;color:#9be7c0}
.projectWizardHeading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:22px 28px 14px}
.projectWizardHeading small{letter-spacing:.16em;color:var(--muted,#84939d);font-size:var(--text-small)}.projectWizardHeading h3{margin:4px 0 2px;font-size:var(--text-title)}.projectWizardHeading p{margin:0;color:var(--muted,#9aa8b1)}.projectWizardHeading>span{font-size:var(--text-body);color:#66c8ef;background:rgba(32,174,233,.08);border:1px solid rgba(32,174,233,.25);padding:6px 10px;border-radius:999px}
.projectWizardContent{padding:6px 28px 24px;flex:1}
.projectWizardForm{max-width:900px}.projectWizardForm.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.projectWizardForm .full{grid-column:1/-1}
.projectWizardForm label{display:flex;flex-direction:column;gap:7px;font-size:var(--text-body);color:var(--muted,#a6b1b8)}
.projectWizardForm input,.projectWizardForm select,.projectWizardForm textarea{width:100%}.projectWizardForm textarea{min-height:110px}
.projectWizardActions{margin-top:auto;padding:16px 28px;border-top:1px solid var(--border,#2d3941);display:flex;justify-content:space-between;gap:16px;align-items:center}
.projectWizardActions>div{display:flex;gap:9px;align-items:center}.projectWizardActions button{min-height:38px;padding:0 15px}.projectWizardActions .wizardCreate{min-width:150px}.wizardDiscard{background:transparent!important;border-color:transparent!important;color:#9aa7ae!important}
.wizardChoiceRow{display:flex;gap:10px;margin-bottom:18px}.wizardRadio{flex-direction:row!important;align-items:center!important;border:1px solid var(--border,#34434d);padding:11px 14px;border-radius:9px;background:rgba(255,255,255,.015)}.wizardRadio input{width:auto!important}
.wizardExistingCustomer{max-width:460px}.wizardNewCustomer{margin-top:8px}.wizardSiteCallout{margin-top:18px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border,#34434d);border-radius:9px}.wizardSiteCallout span{color:var(--muted,#9ba8b0);flex:1}.wizardSiteCallout button{padding:6px 10px}
.wizardLead{margin:0 0 16px;color:var(--muted,#9caab2)}
.wizardTeamList{display:grid;gap:8px}.wizardTeamRow{display:grid;grid-template-columns:1fr 210px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--border,#34434d);border-radius:9px}.wizardTeamRow>label{flex-direction:row!important;align-items:center!important;gap:10px!important}.wizardTeamRow input{width:auto!important}.wizardTeamRow label span{display:flex;flex-direction:column;gap:2px}.wizardTeamRow small{color:var(--muted,#8998a1)}
.wizardOptionGrid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px}.wizardOptionGrid.modules{grid-template-columns:repeat(3,minmax(170px,1fr))}.wizardOption{display:block!important;position:relative;cursor:pointer}.wizardOption input{position:absolute;opacity:0;pointer-events:none}.wizardOption span{display:flex;align-items:center;min-height:54px;padding:10px 13px;border:1px solid var(--border,#34434d);border-radius:9px;background:rgba(255,255,255,.018);color:var(--text,#e8eef2)}.wizardOption input:checked+span{border-color:#268ec0;background:rgba(32,174,233,.11);box-shadow:inset 3px 0 0 #27aee8}.wizardModuleTools{display:flex;gap:8px;margin-top:14px}.wizardModuleTools button{padding:6px 10px}
.wizardInfoBox{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border,#34434d);border-radius:9px;padding:13px 14px}.wizardInfoBox span{color:var(--muted,#98a7af)}
.projectWizardReview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.projectWizardReview section{position:relative;border:1px solid var(--border,#34434d);border-radius:10px;padding:15px;background:rgba(255,255,255,.015);min-height:118px}.projectWizardReview h4{margin:0 0 10px}.projectWizardReview section>button{position:absolute;right:10px;top:10px;padding:5px 9px}.projectWizardReview strong{display:block;margin-bottom:5px}.projectWizardReview section>span{display:block;color:var(--muted,#9aa8b0);font-size:var(--text-body);line-height:1.5;padding-right:35px}.projectWizardReview dl{margin:0;display:grid;gap:5px}.projectWizardReview dl div{display:grid;grid-template-columns:90px 1fr;gap:8px}.projectWizardReview dt{color:var(--muted,#87969e);font-size:var(--text-body)}.projectWizardReview dd{margin:0;font-size:var(--text-body)}
html[data-theme="light"] .projectWizardStepDot span{background:#eef3f6;border-color:#cbd6dc;color:#52606a}html[data-theme="light"] .projectWizardStepDot.active span{background:#e3f4fb;color:#1677a1;border-color:#53b5dc}html[data-theme="light"] .wizardOption span,html[data-theme="light"] .wizardRadio,html[data-theme="light"] .wizardTeamRow,html[data-theme="light"] .wizardSiteCallout,html[data-theme="light"] .wizardInfoBox,html[data-theme="light"] .projectWizardReview section{background:#f7f9fa;border-color:#cbd5db}html[data-theme="light"] .wizardOption input:checked+span{background:#e8f6fc;border-color:#4aaed6;color:#18333f}
@media(max-width:760px){#modal.projectWizardDialog{width:calc(100vw - 12px)}.projectWizardProgress{grid-template-columns:repeat(7,110px)}.projectWizardHeading,.projectWizardContent,.projectWizardActions{padding-left:16px;padding-right:16px}.projectWizardForm.formGrid,.projectWizardReview{grid-template-columns:1fr}.wizardOptionGrid,.wizardOptionGrid.modules{grid-template-columns:1fr 1fr}.wizardTeamRow{grid-template-columns:1fr}.projectWizardActions{align-items:stretch;flex-direction:column}.projectWizardActions>div{justify-content:flex-end;flex-wrap:wrap}}

/* =========================================================
   v3.15.0 — Project intelligence: drafts, module + scope filters
   ========================================================= */
.projectDraftSection,.activeProjectsSection{display:grid;gap:14px;margin-bottom:24px}
.projectSectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.projectSectionHead small{font-size:var(--text-small);letter-spacing:.16em;color:var(--muted,#8797a0)}
.projectSectionHead h3{margin:3px 0 2px;font-size:var(--text-section)}
.projectSectionHead p{margin:0;color:var(--muted,#8e9da6);font-size:var(--text-body)}
.projectSectionHead>span{font-size:var(--text-body);padding:5px 9px;border-radius:999px;border:1px solid var(--border,#34434d);color:var(--muted,#9aa7af)}
.projectDraftGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.projectDraftCard{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;border:1px dashed #4f6672;border-radius:11px;padding:14px;background:rgba(36,164,214,.035)}
.draftIcon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(42,174,226,.28);background:rgba(42,174,226,.08);color:#65cdf5;font-size:16px}
.draftMain{min-width:0}.draftMain small{display:block;color:#72bedc;font-size:var(--text-small);letter-spacing:.08em}.draftMain h4{margin:4px 0 3px;font-size:var(--text-body)}.draftMain p{margin:0;color:var(--muted,#8e9ca4);font-size:var(--text-body)}.draftMain time{display:block;margin-top:7px;color:var(--muted,#77868f);font-size:var(--text-small)}
.draftScopes{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.draftScopes span{font-size:var(--text-small);padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border,#33424b);color:var(--muted,#a3afb5)}
.draftActions{display:flex;flex-direction:column;gap:6px}.draftActions button{min-width:82px;padding:7px 10px}
.scopeFilterBanner{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px;border:1px solid rgba(42,174,226,.26);border-radius:9px;background:rgba(42,174,226,.06)}
.scopeFilterBanner b{font-size:var(--text-body)}.scopeFilterBanner span{flex:1;color:var(--muted,#97a6ae);font-size:var(--text-body)}.scopeFilterBanner button{padding:6px 9px;white-space:nowrap}
html[data-theme="light"] .projectDraftCard{background:#f5fbfd;border-color:#a9cad8}html[data-theme="light"] .draftIcon{background:#e7f6fb;color:#157da8;border-color:#b6dce9}html[data-theme="light"] .draftScopes span{background:#f3f7f9;border-color:#d2dde2;color:#52636d}html[data-theme="light"] .scopeFilterBanner{background:#edf8fc;border-color:#b8dce9;color:#18333f}
@media(max-width:720px){.projectDraftCard{grid-template-columns:38px 1fr}.draftActions{grid-column:1/-1;flex-direction:row;justify-content:flex-end}.scopeFilterBanner{align-items:flex-start;flex-wrap:wrap}.scopeFilterBanner span{flex-basis:100%;order:3}}


/* v3.15.1 — role-aware project navigation status */
.projectNavModeNote{display:flex;align-items:center;gap:12px;padding:11px 14px;margin:0 0 14px;border:1px solid var(--line,#34434d);border-radius:10px;background:var(--panel,#1b242b);font-family:var(--font-sans)}
.projectNavModeNote b{white-space:nowrap;font-size:var(--text-body)}
.projectNavModeNote span{font-size:var(--text-body);opacity:.75}
[data-theme="light"] .projectNavModeNote{background:#fff;border-color:#d7e0e6;color:#17212a}

/* v3.15.2 — global active-project picker */
.headerProjectPicker{display:flex;align-items:center;gap:8px;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line,#31424d);border-radius:10px;background:var(--panel,#162027)}
.headerProjectPickerLabel{font-size:var(--text-body);font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;opacity:.66;white-space:nowrap}
.headerProjectSelect{min-width:190px;max-width:320px;height:32px;padding:0 28px 0 8px;border:0!important;outline:0;background:transparent!important;color:inherit!important;font:inherit;font-weight:var(--weight-semibold);box-shadow:none!important}
.headerProjectSelect:focus{box-shadow:none!important}
html[data-theme="light"] .headerProjectPicker{background:#fff;border-color:#d6e0e6}
html[data-theme="light"] .headerProjectSelect{color:#17212a!important}
@media(max-width:900px){.headerProjectPickerLabel{display:none}.headerProjectSelect{min-width:140px;max-width:190px}.headerProjectPicker{padding:0 6px}}
@media(max-width:650px){.headerProjectPicker{max-width:160px}.headerProjectSelect{min-width:0;width:145px}}

/* ===== v3.15.3 compact sidebar scrolling + toggle polish ===== */
/* Compact navigation must remain fully reachable on short displays. */
body.compactNav #appShell>aside,
body.compactNav .contextNav371{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#3b5362 #11171d!important;
  overscroll-behavior:contain!important;
}
body.compactNav #appShell>aside::-webkit-scrollbar,
body.compactNav .contextNav371::-webkit-scrollbar{
  display:block!important;
  width:5px!important;
}
body.compactNav #appShell>aside::-webkit-scrollbar-track,
body.compactNav .contextNav371::-webkit-scrollbar-track{
  background:#11171d!important;
}
body.compactNav #appShell>aside::-webkit-scrollbar-thumb,
body.compactNav .contextNav371::-webkit-scrollbar-thumb{
  background:#3b5362!important;
  border:1px solid #11171d!important;
  border-radius:999px!important;
}
body.compactNav #mainNav{
  overflow:visible!important;
  flex:0 0 auto!important;
  padding-bottom:8px!important;
}

/* Use the same neutral dark control treatment in both sidebar states. */
body.compactNav #sidebarToggle{
  background:#162532!important;
  border-color:#2a3b49!important;
  color:#c9d8e4!important;
  font-size:19px!important;
}
body.compactNav #sidebarToggle:hover{
  background:#1b2d3a!important;
  border-color:#3a5060!important;
}

html[data-theme="light"] body.compactNav #appShell>aside,
html[data-theme="light"] body.compactNav .contextNav371{
  scrollbar-color:#b8c4cc #ffffff!important;
}
html[data-theme="light"] body.compactNav #appShell>aside::-webkit-scrollbar-track,
html[data-theme="light"] body.compactNav .contextNav371::-webkit-scrollbar-track{
  background:#ffffff!important;
}
html[data-theme="light"] body.compactNav #appShell>aside::-webkit-scrollbar-thumb,
html[data-theme="light"] body.compactNav .contextNav371::-webkit-scrollbar-thumb{
  background:#b8c4cc!important;
  border-color:#ffffff!important;
}


/* ===== v3.15.4 project selector + module access + sidebar scroller ===== */
/* Active project is a workspace context, so keep it anchored at the far-left of the header. */
.globalUtilityHeader>.headerProjectPicker{
  margin:0 10px 0 0!important;
  flex:0 1 360px!important;
  width:min(360px,32vw)!important;
  height:36px!important;
  padding:0 8px!important;
}
.globalUtilityHeader>.liveTimerBadge{margin-right:auto!important}
.globalUtilityHeader .utilityActions{margin-left:0!important;gap:7px!important}
.headerProjectSelect{width:100%!important;min-width:0!important;max-width:none!important;height:32px!important;min-height:32px!important;padding-top:0!important;padding-bottom:0!important}
.globalUtilityHeader #themeToggle,.globalUtilityHeader #notificationBell,.globalUtilityHeader .userProfileBtn{
  height:36px!important;min-height:36px!important;
}
.globalUtilityHeader #themeToggle,.globalUtilityHeader #notificationBell{width:36px!important;min-width:36px!important;padding:0!important}

/* One scrollbar only: the module list scrolls; the sidebar shell itself never scrolls. */
.shell371>aside.contextNav371,
body.compactNav #appShell>aside,
body.compactNav .contextNav371{
  overflow:hidden!important;
}
.contextNav371 #mainNav,
body.compactNav .contextNav371 #mainNav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:#3b5362 transparent!important;
  padding-bottom:12px!important;
}
.contextNav371 #mainNav::-webkit-scrollbar{display:block!important;width:5px!important}
.contextNav371 #mainNav::-webkit-scrollbar-track{background:transparent!important}
.contextNav371 #mainNav::-webkit-scrollbar-thumb{background:#3b5362!important;border-radius:999px!important}
html[data-theme="light"] .contextNav371 #mainNav{scrollbar-color:#b8c4cc transparent!important}
html[data-theme="light"] .contextNav371 #mainNav::-webkit-scrollbar-thumb{background:#b8c4cc!important}

@media(max-width:900px){
  .globalUtilityHeader>.headerProjectPicker{width:min(280px,42vw)!important;flex-basis:280px!important}
}
@media(max-width:650px){
  .globalUtilityHeader>.headerProjectPicker{width:min(190px,46vw)!important;flex-basis:190px!important;margin-right:6px!important}
}


/* ===== v3.15.6 — collapsed sidebar reachability + owner access polish ===== */
/* Make the sidebar a true full-height flex column so the menu itself owns
   scrolling. This overrides older compactNav rules that alternately hid or
   scrolled the whole sidebar and caused the compact menu to stop early. */
.shell371>aside.contextNav371,
body.compactNav .shell371>aside.contextNav371{
  position:fixed!important;
  top:0!important;
  bottom:0!important;
  height:100vh!important;
  max-height:100vh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.contextNav371 #mainNav,
body.compactNav .contextNav371 #mainNav{
  display:flex!important;
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:#476274 transparent!important;
  scrollbar-gutter:stable!important;
  padding-bottom:18px!important;
}
.contextNav371 #mainNav::-webkit-scrollbar,
body.compactNav .contextNav371 #mainNav::-webkit-scrollbar{
  display:block!important;
  width:6px!important;
}
.contextNav371 #mainNav::-webkit-scrollbar-track,
body.compactNav .contextNav371 #mainNav::-webkit-scrollbar-track{
  background:transparent!important;
}
.contextNav371 #mainNav::-webkit-scrollbar-thumb,
body.compactNav .contextNav371 #mainNav::-webkit-scrollbar-thumb{
  background:#476274!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  background-clip:padding-box!important;
}
body.compactNav .contextNav371 #mainNav{
  padding:4px 0 18px!important;
}
body.compactNav .contextNav371 .brand{
  flex:0 0 48px!important;
}
body.compactNav .contextNav371 .navBtn{
  flex:0 0 44px!important;
}
html[data-theme="light"] .contextNav371 #mainNav,
html[data-theme="light"] body.compactNav .contextNav371 #mainNav{
  scrollbar-color:#aab9c3 transparent!important;
}
html[data-theme="light"] .contextNav371 #mainNav::-webkit-scrollbar-thumb,
html[data-theme="light"] body.compactNav .contextNav371 #mainNav::-webkit-scrollbar-thumb{
  background:#aab9c3!important;
}


/* ===== v3.15.7 — true left project selector + owner global access UI ===== */
/* The project selector is the workspace context. Anchor it to the first
   available pixel of the content header while utilities remain right aligned. */
.shell371 main>header.globalUtilityHeader,
main>header.globalUtilityHeader{
  justify-content:flex-start!important;
  align-items:center!important;
}
.globalUtilityHeader>.headerProjectPicker{
  order:0!important;
  margin-left:0!important;
  margin-right:10px!important;
  flex:0 1 330px!important;
  width:min(330px,34vw)!important;
  max-width:330px!important;
  min-width:210px!important;
}
.globalUtilityHeader>.liveTimerBadge{
  order:1!important;
  margin-left:0!important;
  margin-right:10px!important;
}
.globalUtilityHeader .utilityActions{
  order:3!important;
  margin-left:auto!important;
  margin-right:0!important;
}
.headerProjectPickerLabel{flex:0 0 auto!important}
.headerProjectSelect{flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important}
@media(max-width:900px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:270px!important;width:min(270px,43vw)!important;min-width:170px!important}
}
@media(max-width:650px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:185px!important;width:min(185px,48vw)!important;min-width:135px!important;margin-right:6px!important}
}

/* ===== v3.15.8 — project selector sizing + stable page scrollbar ===== */
/* Keep the active-project control compact and aligned with the utility header. */
.globalUtilityHeader>.headerProjectPicker{
  flex:0 0 300px!important;
  width:300px!important;
  max-width:300px!important;
  min-width:300px!important;
  height:34px!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:9px!important;
}
.globalUtilityHeader .headerProjectPickerLabel{
  flex:0 0 72px!important;
  width:72px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 8px!important;
  border-right:1px solid var(--line,#31424d)!important;
  font-size:var(--text-small)!important;
  line-height:1!important;
}
.globalUtilityHeader .headerProjectSelect{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 28px 0 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectPickerLabel{
  border-right-color:#d6e0e6!important;
}
@media(max-width:900px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:250px!important;width:250px!important;max-width:250px!important;min-width:250px!important}
  .globalUtilityHeader .headerProjectPickerLabel{flex-basis:64px!important;width:64px!important}
}
@media(max-width:650px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:190px!important;width:190px!important;max-width:190px!important;min-width:190px!important}
  .globalUtilityHeader .headerProjectPickerLabel{display:none!important}
}

/* Reserve the browser/page scrollbar at every desktop width so the content
   area never changes width only when the viewport becomes shorter. */
html{
  overflow-y:scroll!important;
  scrollbar-gutter:stable!important;
}
body{
  min-height:100vh!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

/* ===== v3.16.0 — lifecycle navigation + contextual project guide ===== */
/* Project selector is one unified rectangle: no inset label segment, no offset select. */
.globalUtilityHeader>.headerProjectPicker{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:stretch!important;
  flex:0 0 300px!important;
  width:300px!important;
  min-width:300px!important;
  max-width:300px!important;
  height:38px!important;
  margin:0 10px 0 0!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid var(--ui-border,#2f414d)!important;
  border-radius:8px!important;
  background:var(--ui-surface,#131d24)!important;
}
.globalUtilityHeader .headerProjectPickerLabel{
  box-sizing:border-box!important;
  flex:0 0 74px!important;
  width:74px!important;
  height:36px!important;
  margin:0!important;
  padding:0 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-right:1px solid var(--ui-border,#2f414d)!important;
  border-radius:0!important;
  background:transparent!important;
  text-transform:uppercase!important;
}
.globalUtilityHeader .headerProjectSelect{
  box-sizing:border-box!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 32px 0 12px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  align-self:stretch!important;
}
.globalUtilityHeader>.headerProjectPicker:focus-within{
  border-color:#2a9dcc!important;
  box-shadow:0 0 0 2px rgba(42,157,204,.12)!important;
}
html[data-theme="light"] .globalUtilityHeader>.headerProjectPicker{background:#fff!important;border-color:#c9d5dc!important}
html[data-theme="light"] .globalUtilityHeader .headerProjectPickerLabel{border-right-color:#c9d5dc!important}
@media(max-width:900px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:250px!important;width:250px!important;min-width:250px!important;max-width:250px!important}
  .globalUtilityHeader .headerProjectPickerLabel{flex-basis:64px!important;width:64px!important}
}
@media(max-width:650px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:190px!important;width:190px!important;min-width:190px!important;max-width:190px!important}
  .globalUtilityHeader .headerProjectPickerLabel{display:none!important}
}

/* Sidebar categories are the project lifecycle/user guide. */
.contextNav371 #mainNav .navSection{
  margin-top:13px!important;
  padding-top:9px!important;
  border-top:1px solid rgba(122,151,165,.12)!important;
  font-size:var(--text-small)!important;
  letter-spacing:.13em!important;
}
.contextNav371 #mainNav .navSection:first-child{margin-top:2px!important;padding-top:2px!important;border-top:0!important}
.contextNav371 #mainNav .navSection.navPhase{color:#74a9bc!important;font-weight:var(--weight-semibold)!important}
body.compactNav .contextNav371 #mainNav .navSection{display:none!important}

/* v3.23.2 categorized navigation: headings appear only in expanded mode. */
body:not(.compactNav) .contextNav371 #mainNav .navSection{display:block!important;color:#74a9bc!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.13em!important}
body.compactNav .contextNav371 #mainNav .navSection{display:none!important;margin:0!important;padding:0!important;border:0!important}
.estimateProductRecommendation{display:flex;gap:10px;align-items:center;margin:10px 0;padding:10px 12px;border:1px solid #2d6075;border-radius:9px;background:#0c2834}.estimateProductRecommendation b{color:#75d5f5;white-space:nowrap}.estimateProductRecommendation span{color:#b8cad2;font-size:var(--text-body)}

/* Contextual next-step guide shown on lifecycle pages. */
.workflowGuideFooter{
  grid-template-columns:minmax(110px,.8fr) minmax(260px,1.5fr) minmax(180px,1fr)!important;
  position:sticky!important;
  bottom:8px!important;
  margin-top:18px!important;
  padding:9px 10px!important;
  background:var(--ui-surface,#131d24)!important;
  border:1px solid var(--ui-border,#2b3a44)!important;
  border-radius:10px!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
}
.workflowGuideFooter .guideCenter{text-align:center!important;display:grid!important;gap:2px!important}
.workflowGuideFooter .guideCenter small{font-size:var(--text-small)!important;letter-spacing:.12em!important;color:#6d91a0!important}
.workflowGuideFooter .guideCenter b{font-size:var(--text-body)!important}
.workflowGuideFooter .guideCenter span{font-size:var(--text-small)!important;color:#829da8!important}
.workflowGuideFooter .guideNext{justify-self:end!important;min-width:170px!important}
.workflowGuideFooter .guidePrev{justify-self:start!important;max-width:170px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.workflowGuideFooter button:disabled{opacity:.38!important;cursor:default!important}
html[data-theme="light"] .workflowGuideFooter{background:#fff!important;border-color:#cbd7de!important;box-shadow:0 8px 20px rgba(40,60,75,.09)!important}
@media(max-width:850px){
 .workflowGuideFooter{grid-template-columns:1fr 1fr!important}
 .workflowGuideFooter .guideCenter{grid-column:1/-1!important;grid-row:1!important}
 .workflowGuideFooter .guidePrev{grid-column:1!important;grid-row:2!important}
 .workflowGuideFooter .guideNext{grid-column:2!important;grid-row:2!important;min-width:0!important}
}

/* ===== v3.16.1 — project selector native-control geometry fix ===== */
/* Render the selector as a single custom rectangle. The browser's native select
   chrome was creating the inset rounded left edge visible in Chromium/Windows. */
.globalUtilityHeader>.headerProjectPicker{
  position:relative!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 300px!important;
  width:300px!important;
  min-width:300px!important;
  max-width:300px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0 10px 0 0!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid var(--ui-border,#2f414d)!important;
  border-radius:8px!important;
  background:var(--ui-surface,#131d24)!important;
}
.globalUtilityHeader .headerProjectPickerLabel{
  box-sizing:border-box!important;
  flex:0 0 72px!important;
  width:72px!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-right:1px solid var(--ui-border,#2f414d)!important;
  border-radius:0!important;
  background:transparent!important;
  line-height:1!important;
}
.globalUtilityHeader .headerProjectSelect{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  box-sizing:border-box!important;
  display:block!important;
  flex:1 1 auto!important;
  width:calc(100% - 72px)!important;
  min-width:0!important;
  max-width:none!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0 34px 0 12px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  line-height:32px!important;
  vertical-align:middle!important;
}
.globalUtilityHeader>.headerProjectPicker::after{
  content:""!important;
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  width:6px!important;
  height:6px!important;
  margin-top:-5px!important;
  border-right:2px solid #b8c9d2!important;
  border-bottom:2px solid #b8c9d2!important;
  transform:rotate(45deg)!important;
  pointer-events:none!important;
}
.globalUtilityHeader>.headerProjectPicker:focus-within{
  border-color:#2a9dcc!important;
  box-shadow:0 0 0 2px rgba(42,157,204,.12)!important;
}
html[data-theme="light"] .globalUtilityHeader>.headerProjectPicker{background:#fff!important;border-color:#c9d5dc!important}
html[data-theme="light"] .globalUtilityHeader .headerProjectPickerLabel{border-right-color:#c9d5dc!important}
html[data-theme="light"] .globalUtilityHeader>.headerProjectPicker::after{border-color:#536b78!important}
@media(max-width:900px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:250px!important;width:250px!important;min-width:250px!important;max-width:250px!important}
  .globalUtilityHeader .headerProjectPickerLabel{flex-basis:64px!important;width:64px!important}
  .globalUtilityHeader .headerProjectSelect{width:calc(100% - 64px)!important}
}
@media(max-width:650px){
  .globalUtilityHeader>.headerProjectPicker{flex-basis:190px!important;width:190px!important;min-width:190px!important;max-width:190px!important}
  .globalUtilityHeader .headerProjectPickerLabel{display:none!important}
  .globalUtilityHeader .headerProjectSelect{width:100%!important;padding-left:12px!important}
}


/* ===== v3.16.2 — exact nested project selector geometry ===== */
/* Outer rounded rectangle + independent inset rounded selector, matching approved sketch. */
.globalUtilityHeader>.headerProjectPicker{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  align-items:center!important;
  flex:0 0 320px!important;
  width:320px!important;
  min-width:320px!important;
  max-width:320px!important;
  height:44px!important;
  min-height:44px!important;
  margin:0 10px 0 0!important;
  padding:4px!important;
  gap:4px!important;
  overflow:visible!important;
  border:1px solid #304550!important;
  border-radius:11px!important;
  background:#101a21!important;
  box-shadow:none!important;
}
.globalUtilityHeader .headerProjectPickerLabel{
  box-sizing:border-box!important;
  width:auto!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#aebfc8!important;
  font-size:var(--text-small)!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.globalUtilityHeader .headerProjectControl{
  position:relative!important;
  min-width:0!important;
  height:34px!important;
}
.globalUtilityHeader .headerProjectTrigger{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid #3a515e!important;
  border-radius:9px!important;
  background:#16232c!important;
  color:#eef5f8!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
  text-align:left!important;
  cursor:pointer!important;
}
.globalUtilityHeader .headerProjectTrigger:hover{
  border-color:#4d6977!important;
  background:#192832!important;
}
.globalUtilityHeader .headerProjectTrigger:focus-visible{
  outline:none!important;
  border-color:#2a9dcc!important;
  box-shadow:0 0 0 2px rgba(42,157,204,.14)!important;
}
.globalUtilityHeader #globalProjectText{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.globalUtilityHeader .headerProjectChevron{
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  border-right:2px solid #bfd0d8!important;
  border-bottom:2px solid #bfd0d8!important;
  transform:rotate(45deg) translateY(-2px)!important;
  transition:transform .14s ease!important;
}
.globalUtilityHeader .headerProjectTrigger[aria-expanded="true"] .headerProjectChevron{
  transform:rotate(225deg) translate(-1px,-1px)!important;
}
.globalUtilityHeader .headerProjectMenu{
  position:absolute!important;
  z-index:4000!important;
  top:38px!important;
  left:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-height:min(420px,65vh)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:5px!important;
  border:1px solid #3a515e!important;
  border-radius:9px!important;
  background:#16232c!important;
  box-shadow:0 14px 30px rgba(0,0,0,.38)!important;
}
.globalUtilityHeader .headerProjectMenu.hidden{display:none!important}
.globalUtilityHeader .headerProjectOption{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-height:32px!important;
  margin:0!important;
  padding:7px 10px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#dce8ed!important;
  box-shadow:none!important;
  text-align:left!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-regular)!important;
  cursor:pointer!important;
}
.globalUtilityHeader .headerProjectOption:hover{background:#203543!important}
.globalUtilityHeader .headerProjectOption.active{background:#245b82!important;color:#fff!important}
.globalUtilityHeader .headerProjectSelectNative{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
}
.globalUtilityHeader>.headerProjectPicker:focus-within{
  border-color:#304550!important;
  box-shadow:none!important;
}
html[data-theme="light"] .globalUtilityHeader>.headerProjectPicker{
  background:#f7fafb!important;
  border-color:#c9d5dc!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectPickerLabel{color:#516874!important}
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger,
html[data-theme="light"] .globalUtilityHeader .headerProjectMenu{
  background:#fff!important;
  color:#17212a!important;
  border-color:#c8d3da!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption{color:#263842!important}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption:hover{background:#edf4f7!important}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption.active{background:#dbeef7!important;color:#12384c!important}
html[data-theme="light"] .globalUtilityHeader .headerProjectChevron{border-color:#536b78!important}
@media(max-width:900px){
  .globalUtilityHeader>.headerProjectPicker{grid-template-columns:68px minmax(0,1fr)!important;flex-basis:270px!important;width:270px!important;min-width:270px!important;max-width:270px!important}
}
@media(max-width:650px){
  .globalUtilityHeader>.headerProjectPicker{grid-template-columns:1fr!important;flex-basis:205px!important;width:205px!important;min-width:205px!important;max-width:205px!important}
  .globalUtilityHeader .headerProjectPickerLabel{display:none!important}
}

/* =========================================================
   v3.17.0 — IntegratorOS unified design system
   Final presentation layer. Functional/status/network colors are intentionally
   not overridden here (VLAN, fiber mode, PoE/data, project/task status, etc.).
   ========================================================= */
:root{
  --ios-font:var(--font-sans);
  --ios-bg:#0b1218;
  --ios-bg-elevated:#0f1920;
  --ios-surface:#121d24;
  --ios-surface-2:#17232b;
  --ios-surface-3:#1b2932;
  --ios-border:#2c414d;
  --ios-border-soft:#223640;
  --ios-text:#edf4f7;
  --ios-text-2:#c2d0d7;
  --ios-muted:#8198a4;
  --ios-accent:#2a9dcc;
  --ios-accent-hover:#35addb;
  --ios-accent-soft:rgba(42,157,204,.14);
  --ios-danger:#a84747;
  --ios-danger-bg:#3b2022;
  --ios-radius:10px;
  --ios-radius-sm:8px;
  --ios-control-h:38px;
  --ios-shadow:0 12px 30px rgba(0,0,0,.24);
}
html[data-theme="light"]{
  --ios-bg:#f3f6f8;
  --ios-bg-elevated:#ffffff;
  --ios-surface:#ffffff;
  --ios-surface-2:#f6f9fa;
  --ios-surface-3:#edf3f5;
  --ios-border:#c8d4da;
  --ios-border-soft:#dbe4e8;
  --ios-text:#17232b;
  --ios-text-2:#40545f;
  --ios-muted:#6f8490;
  --ios-accent:#168bc0;
  --ios-accent-hover:#117cab;
  --ios-accent-soft:rgba(22,139,192,.12);
  --ios-danger:#b44040;
  --ios-danger-bg:#fff0f0;
  --ios-shadow:0 12px 30px rgba(28,49,60,.10);
}

/* One typography system across app, dialogs, sub-pages and generated controls. */
html,body,#appShell,#appShell button,#appShell input,#appShell select,#appShell textarea,
#appShell table,#appShell th,#appShell td,dialog,dialog button,dialog input,dialog select,
dialog textarea,.authPanel,.authPanel button,.authPanel input,.authPanel select,.authPanel textarea,
.headerProjectPicker,.headerProjectMenu,.headerProjectOption{
  font-family:var(--font-sans)!important;
}
html,body{background:var(--ios-bg)!important;color:var(--ios-text)!important}
body{font-size:var(--text-body)!important;line-height:1.42!important}
main,.content{background:var(--ios-bg)!important;color:var(--ios-text)!important}

/* Consistent page typography. */
.pageHead h1,.pageHead h2,.pageHead h3,.sectionTitle,.cardHead h3,.modalHead h3{
  color:var(--ios-text)!important;
  font-family:var(--font-sans)!important;
  letter-spacing:0!important;
}
.pageHead h2{font-size:var(--text-title)!important;line-height:1.2!important;font-weight:var(--weight-semibold)!important}
.pageHead p,.card small,.itemCard small,.empty,small{color:var(--ios-muted)!important}

/* Unified surfaces/cards. */
.card,.itemCard,.metric,.projectHero,.linkedValue,.userCard,.dangerZone,
.securityPolicyLabel,.projectNavModeNote,.planLayerBar{
  background:var(--ios-surface)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
  border-radius:var(--ios-radius)!important;
  box-shadow:none!important;
}
.metric{background:var(--ios-surface-2)!important}
.linkedRow,th,td{border-color:var(--ios-border-soft)!important}
th{color:var(--ios-muted)!important;background:transparent!important;font-weight:var(--weight-semibold)!important}
td{color:var(--ios-text-2)!important}

/* Unified writable controls. */
#appShell input:not([type="checkbox"]):not([type="radio"]),
#appShell select,#appShell textarea,
dialog input:not([type="checkbox"]):not([type="radio"]),dialog select,dialog textarea,
.authPanel input:not([type="checkbox"]):not([type="radio"]),.authPanel select,.authPanel textarea{
  box-sizing:border-box!important;
  min-height:var(--ios-control-h)!important;
  background:var(--ios-surface-2)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:var(--ios-radius-sm)!important;
  outline:none!important;
  box-shadow:none!important;
}
#appShell input::placeholder,#appShell textarea::placeholder,
dialog input::placeholder,dialog textarea::placeholder{color:var(--ios-muted)!important;opacity:.78!important}
#appShell input:not([type="checkbox"]):not([type="radio"]):hover,
#appShell select:hover,#appShell textarea:hover,
dialog input:not([type="checkbox"]):not([type="radio"]):hover,dialog select:hover,dialog textarea:hover{
  border-color:#46606d!important;
}
#appShell input:not([type="checkbox"]):not([type="radio"]):focus,
#appShell select:focus,#appShell textarea:focus,
dialog input:not([type="checkbox"]):not([type="radio"]):focus,dialog select:focus,dialog textarea:focus{
  border-color:var(--ios-accent)!important;
  box-shadow:0 0 0 3px var(--ios-accent-soft)!important;
}
html[data-theme="light"] #appShell input:not([type="checkbox"]):not([type="radio"]):hover,
html[data-theme="light"] #appShell select:hover,html[data-theme="light"] #appShell textarea:hover,
html[data-theme="light"] dialog input:not([type="checkbox"]):not([type="radio"]):hover,
html[data-theme="light"] dialog select:hover,html[data-theme="light"] dialog textarea:hover{border-color:#9fb2bc!important}

/* Unified buttons without touching semantic status colors. */
#appShell button:not(.navBtn):not(.port):not(.planMarker),dialog button{
  font-family:var(--font-sans)!important;
  min-height:34px;
  border-radius:var(--ios-radius-sm)!important;
  border-color:#3b5968!important;
  background:#173344!important;
  color:#eef7fa!important;
  box-shadow:none!important;
}
#appShell button:not(.navBtn):not(.port):not(.planMarker):hover,dialog button:hover{
  background:#1c4054!important;
  border-color:#4b7184!important;
  filter:none!important;
}
#appShell button.secondary,#appShell .smallBtn,dialog button.secondary{
  background:var(--ios-surface-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
#appShell button.danger,dialog button.danger{
  background:var(--ios-danger-bg)!important;
  color:#ffdede!important;
  border-color:var(--ios-danger)!important;
}
html[data-theme="light"] #appShell button:not(.navBtn):not(.port):not(.planMarker),
html[data-theme="light"] dialog button{background:#eaf4f8!important;color:#17313e!important;border-color:#b8ccd5!important}
html[data-theme="light"] #appShell button:not(.navBtn):not(.port):not(.planMarker):hover,
html[data-theme="light"] dialog button:hover{background:#dcecf3!important;border-color:#99b9c7!important}
html[data-theme="light"] #appShell button.danger,html[data-theme="light"] dialog button.danger{background:var(--ios-danger-bg)!important;color:#8d2929!important;border-color:#d59a9a!important}

/* Sidebar and navigation use the same surface hierarchy. */
aside{background:var(--ios-bg-elevated)!important;border-color:var(--ios-border-soft)!important;color:var(--ios-text)!important}
.navSection{color:var(--ios-muted)!important}
.navBtn{font-family:var(--font-sans)!important;color:var(--ios-text-2)!important;border-radius:8px!important}
.navBtn:hover{background:var(--ios-surface-2)!important;color:var(--ios-text)!important}
.navBtn.active{background:#173b50!important;border-color:#2f6a87!important;color:#fff!important}
html[data-theme="light"] .navBtn.active{background:#dceef6!important;border-color:#8ebbd0!important;color:#173b4e!important}

/* Header uses the same palette as the rest of the application. */
.globalUtilityHeader,header{background:var(--ios-bg-elevated)!important;border-color:var(--ios-border-soft)!important;color:var(--ios-text)!important}
.shellHeaderActions button,.userProfileControl>button{background:var(--ios-surface-2)!important;border-color:var(--ios-border)!important;color:var(--ios-text)!important}

/* Modal/dialog standardization — modals live outside #appShell. */
dialog,#modal{
  background:var(--ios-bg-elevated)!important;
  color:var(--ios-text)!important;
  border:1px solid var(--ios-border)!important;
  border-radius:14px!important;
  box-shadow:var(--ios-shadow)!important;
}
.modalHead,.modalFoot{background:var(--ios-bg-elevated)!important;border-color:var(--ios-border-soft)!important}
#modalBody{background:var(--ios-bg-elevated)!important;color:var(--ios-text)!important}

/* Tables and utility dropdowns. */
table{color:var(--ios-text)!important}
.pill{background:var(--ios-surface-2)!important;border-color:var(--ios-border)!important;color:var(--ios-text-2)!important}
#toast{background:var(--ios-surface-3)!important;border-color:var(--ios-border)!important;color:var(--ios-text)!important;box-shadow:var(--ios-shadow)!important}

/* Project context selector: approved nested geometry + exactly ONE chevron. */
.globalUtilityHeader>.headerProjectPicker::after,
.globalUtilityHeader>.headerProjectPicker::before,
.globalUtilityHeader .headerProjectTrigger::after,
.globalUtilityHeader .headerProjectTrigger::before{
  content:none!important;
  display:none!important;
}
.globalUtilityHeader>.headerProjectPicker{
  background:var(--ios-bg-elevated)!important;
  border-color:var(--ios-border)!important;
}
.globalUtilityHeader .headerProjectPickerLabel{
  font-family:var(--font-sans)!important;
  color:var(--ios-muted)!important;
}
.globalUtilityHeader .headerProjectTrigger{
  font-family:var(--font-sans)!important;
  background:var(--ios-surface-2)!important;
  color:var(--ios-text)!important;
  border-color:var(--ios-border)!important;
}
.globalUtilityHeader .headerProjectTrigger:hover{background:var(--ios-surface-3)!important;border-color:#49616d!important}
.globalUtilityHeader .headerProjectMenu{
  font-family:var(--font-sans)!important;
  background:var(--ios-surface-2)!important;
  border-color:var(--ios-border)!important;
  box-shadow:var(--ios-shadow)!important;
}
.globalUtilityHeader .headerProjectOption{
  font-family:var(--font-sans)!important;
  color:var(--ios-text-2)!important;
}
.globalUtilityHeader .headerProjectOption:hover{background:var(--ios-surface-3)!important;color:var(--ios-text)!important}
.globalUtilityHeader .headerProjectOption.active{background:#245b82!important;color:#fff!important}
.globalUtilityHeader .headerProjectChevron{
  display:block!important;
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  border-right:2px solid var(--ios-text-2)!important;
  border-bottom:2px solid var(--ios-text-2)!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption.active{background:#dbeef7!important;color:#12384c!important}

/* Consistent scrollbars across page, navigation and menus. */
html{scrollbar-gutter:stable}
*{scrollbar-width:thin;scrollbar-color:#506773 transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#506773;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#657f8c;background-clip:padding-box}
html[data-theme="light"] *{scrollbar-color:#a7b8c0 transparent}
html[data-theme="light"] *::-webkit-scrollbar-thumb{background:#a7b8c0;background-clip:padding-box}

/* =========================================================
   v3.17.1 — component-level visual normalization
   One neutral surface hierarchy across dashboard, projects, overview and CRUD dialogs.
   Semantic/technical colors remain untouched.
   ========================================================= */
:root{
  --ios-page:#0b1218;
  --ios-panel:#111b22;
  --ios-card:#142028;
  --ios-card-hover:#172630;
  --ios-field:#18252d;
  --ios-line:#2b3d47;
  --ios-line-soft:#22323b;
  --ios-primary:#1c526b;
  --ios-primary-hover:#236783;
}
html[data-theme="light"]{
  --ios-page:#f3f6f8;
  --ios-panel:#ffffff;
  --ios-card:#f8fafb;
  --ios-card-hover:#f1f6f8;
  --ios-field:#ffffff;
  --ios-line:#cbd6dc;
  --ios-line-soft:#dde5e9;
  --ios-primary:#dceef6;
  --ios-primary-hover:#cbe6f1;
}

/* Typography: identical family, weight rhythm and label treatment everywhere. */
html,body,#appShell,#appShell *,dialog,dialog *,.headerProjectPicker,.headerProjectPicker *{
  font-family:var(--font-sans)!important;
}
.pageHead h2,.modalHead h3,.projectOverviewDialog .modalHead h3{font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;letter-spacing:0!important}
.card h3,.itemCard h3,.dashboardPanel h3,.projectOverviewCard h3{font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;letter-spacing:0!important}
label,.formGrid label,.toolbar label,.projectOverviewCard small,.projectOverviewKpi small,.projectPageCard small{
  font-family:var(--font-sans)!important;
}
.formGrid label,.toolbar label{font-size:var(--text-small)!important;color:var(--ios-muted)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.01em!important}

/* Neutral surface hierarchy — accent is selection/focus, not normal card fill. */
.content{background:var(--ios-page)!important}
.card,.itemCard,.dashboardPanel,.projectOverviewCard,.projectPageCard,.projectDraftCard,
.projectNavModeNote,.scopeFilterBanner,.linkedValue,.projectHero,.dangerZone{
  background:var(--ios-panel)!important;
  border:1px solid var(--ios-line)!important;
  color:var(--ios-text)!important;
  box-shadow:none!important;
}
.dashboardMetric,.metric,.projectOverviewKpi,.projectLaunchStats{
  background:var(--ios-card)!important;
  border:1px solid var(--ios-line)!important;
  color:var(--ios-text)!important;
  box-shadow:none!important;
}
.dashboardTask{
  background:var(--ios-card)!important;
  border:1px solid var(--ios-line)!important;
  color:var(--ios-text)!important;
  box-shadow:none!important;
}
.dashboardTask:hover,.projectPageCard:hover{background:var(--ios-card-hover)!important;border-color:#405966!important}
.dashboardMetric:hover{background:var(--ios-card-hover)!important}
.dashboardMetric.active{outline:2px solid var(--ios-accent)!important;outline-offset:1px!important}

/* Projects: remove the unrelated blue/teal card treatment. */
.projectPageThumb,.projectThumb,.projectLaunchMain{background:var(--ios-card)!important}
.projectPageThumb .projectThumbFallback,.projectThumbFallback{
  background:var(--ios-card)!important;
  color:var(--ios-accent)!important;
}
.projectPageCard .projectPageFoot,.projectVisualCard .projectLaunchFoot,.projectLaunchStats{
  background:var(--ios-panel)!important;
  border-color:var(--ios-line-soft)!important;
}

/* Overview: same panel/card hierarchy as every other page. */
#modal.projectOverviewDialog,#modal.projectOverviewDialog #modalBody{background:var(--ios-page)!important}
#modal.projectOverviewDialog .modalHead{background:var(--ios-panel)!important}
#modal.projectOverviewDialog .projectOverviewHero,
#modal.projectOverviewDialog .projectHero{background:var(--ios-panel)!important;border:1px solid var(--ios-line)!important}
#modal.projectOverviewDialog .projectOverviewCard{background:var(--ios-panel)!important;border-color:var(--ios-line)!important}
#modal.projectOverviewDialog .projectOverviewKpi{background:var(--ios-card)!important;border-color:var(--ios-line)!important}

/* CRUD dialogs: exactly the same fields, surfaces, buttons and spacing. */
dialog,#modal{background:var(--ios-panel)!important;border-color:var(--ios-line)!important}
.modalHead,.modalFoot{background:var(--ios-panel)!important;border-color:var(--ios-line-soft)!important;padding:14px 16px!important}
#modalBody{background:var(--ios-panel)!important;padding:16px!important}
.formGrid{gap:12px!important}
#appShell input:not([type="checkbox"]):not([type="radio"]),#appShell select,#appShell textarea,
dialog input:not([type="checkbox"]):not([type="radio"]),dialog select,dialog textarea{
  background:var(--ios-field)!important;
  border:1px solid var(--ios-line)!important;
  color:var(--ios-text)!important;
  border-radius:8px!important;
  min-height:38px!important;
}
dialog textarea{min-height:88px!important}

/* One button family. Keep danger semantic styling. */
#appShell button:not(.navBtn):not(.port):not(.planMarker):not(.dashboardTask):not(.dashboardMetric):not(.projectPageCard):not(.switchRj45):not(.sfpPort):not(.patchKeystone):not(.fiberAdapter),
dialog button{
  background:var(--ios-primary)!important;
  border:1px solid #3a6275!important;
  color:var(--ios-text)!important;
  min-height:34px!important;
  border-radius:8px!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
}
#appShell button:not(.navBtn):not(.port):not(.planMarker):not(.dashboardTask):not(.dashboardMetric):not(.projectPageCard):not(.switchRj45):not(.sfpPort):not(.patchKeystone):not(.fiberAdapter):hover,
dialog button:hover{background:var(--ios-primary-hover)!important}
#appShell button.secondary,#appShell .smallBtn,dialog button.secondary{
  background:var(--ios-card)!important;border-color:var(--ios-line)!important;color:var(--ios-text)!important
}
#appShell button.danger,dialog button.danger{background:var(--ios-danger-bg)!important;border-color:var(--ios-danger)!important;color:#ffdede!important}
html[data-theme="light"] #appShell button.danger,html[data-theme="light"] dialog button.danger{color:#8d2929!important}

/* Keep header selector visually part of this system. */
.globalUtilityHeader>.headerProjectPicker{background:var(--ios-panel)!important;border-color:var(--ios-line)!important}
.globalUtilityHeader .headerProjectTrigger{background:var(--ios-card)!important;border-color:var(--ios-line)!important;color:var(--ios-text)!important}
.globalUtilityHeader .headerProjectMenu{background:var(--ios-panel)!important;border-color:var(--ios-line)!important}
.globalUtilityHeader .headerProjectOption:hover{background:var(--ios-card-hover)!important}


/* =========================================================
   v3.17.2 — technical visual protection layer
   The application design system must never restyle physical
   network hardware controls. Preserve approved VLAN/PoE/data/fiber visuals.
   ========================================================= */
#appShell button.switchRj45,
#appShell button.sfpPort,
#appShell button.patchKeystone,
#appShell button.fiberAdapter{
  font-family:var(--font-sans)!important;
  box-shadow:revert-layer;
}
/* SFP cages: restore approved compact hardware geometry after global UI rules. */
#appShell .realSwitchFace .sfpBank>button.sfpPort{
  appearance:none!important;
  box-sizing:border-box!important;
  width:36px!important;min-width:36px!important;max-width:36px!important;
  height:22px!important;min-height:22px!important;max-height:22px!important;
  margin:0!important;padding:8px 3px 2px!important;
  border:1px solid #69757b!important;border-radius:2px!important;
  background:linear-gradient(180deg,#171c1f,#07090a)!important;
  color:#d7e0e4!important;
  box-shadow:inset 0 0 0 1px #21292d!important;
  overflow:hidden!important;line-height:1!important;
}
#appShell .realSwitchFace .sfpBank>button.sfpPort:hover{
  background:linear-gradient(180deg,#171c1f,#07090a)!important;
  border-color:#7b878d!important;
}
html[data-theme="light"] #appShell .realSwitchFace .sfpBank>button.sfpPort{
  background:linear-gradient(180deg,#d8dfe3 0%,#bcc6cb 100%)!important;
  border:1px solid #7c898f!important;
  color:#1f2b31!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(78,94,102,.12)!important;
}
#appShell .realSwitchFace .sfpPort i{
  display:block!important;box-sizing:border-box!important;width:27px!important;height:8px!important;
  margin:0 auto!important;border:1px solid #98a2a7!important;border-radius:1px!important;
  background:#020405!important;box-shadow:inset 0 0 0 1px #20282c!important;
}
html[data-theme="light"] #appShell .realSwitchFace .sfpPort i{
  width:24px!important;height:7px!important;background:#111719!important;border-color:#647178!important;
  box-shadow:inset 0 0 0 1px #020405!important;
}
#appShell .realSwitchFace .sfpPort span{
  position:absolute!important;top:1px!important;left:2px!important;right:2px!important;height:6px!important;
  font-size:5.5px!important;line-height:6px!important;text-align:center!important;color:inherit!important;
}
#appShell .realSwitchFace .sfpPort b{
  position:absolute!important;right:2px!important;bottom:2px!important;width:4px!important;height:4px!important;
  border-radius:50%!important;background:#596368!important;
}
#appShell .realSwitchFace .sfpPort.active{border-color:#28b971!important}
#appShell .realSwitchFace .sfpPort.active b{background:#26d57c!important;box-shadow:0 0 4px #26d57c!important}
#appShell .realSwitchFace .sfpPort.connected,#appShell .realSwitchFace .sfpPort.sfpLinked{
  box-shadow:inset 0 0 0 1px #20282c,0 0 0 1px #228458!important;
}
/* Do not let global button styling modify patch/fiber physical controls. */
#appShell .patchPortBank>button.patchKeystone,
#appShell .patchPortBank>button.fiberAdapter{font-size:inherit!important;font-weight:inherit!important}


/* =========================================================
   v3.17.3 — dark control finish + switch SFP cleanup
   Dark-mode UI controls are quiet/charcoal at rest and gain
   a glossy, slightly raised treatment only on hover.
   Light mode is intentionally unchanged.
   Technical hardware controls remain excluded.
   ========================================================= */
html[data-theme="dark"] #appShell button:not(.navBtn):not(.port):not(.planMarker):not(.dashboardTask):not(.dashboardMetric):not(.projectPageCard):not(.switchRj45):not(.sfpPort):not(.patchKeystone):not(.fiberAdapter),
html[data-theme="dark"] dialog button{
  background:var(--color-surface)!important;
  border:1px solid var(--color-border)!important;
  color:var(--color-text)!important; /* v3.41.0: on the tokens (were #151d23 / #33434d / #e6edf1) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.28)!important;
  text-shadow:none!important;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
html[data-theme="dark"] #appShell button:not(.navBtn):not(.port):not(.planMarker):not(.dashboardTask):not(.dashboardMetric):not(.projectPageCard):not(.switchRj45):not(.sfpPort):not(.patchKeystone):not(.fiberAdapter):hover,
html[data-theme="dark"] dialog button:hover{
  background:var(--color-surface-2)!important;
  border-color:var(--color-border-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35),0 4px 9px rgba(0,0,0,.34)!important;
  transform:translateY(-1px)!important;
}
html[data-theme="dark"] #appShell button:not(.navBtn):not(.port):not(.planMarker):not(.dashboardTask):not(.dashboardMetric):not(.projectPageCard):not(.switchRj45):not(.sfpPort):not(.patchKeystone):not(.fiberAdapter):active,
html[data-theme="dark"] dialog button:active{
  background:var(--color-surface)!important;
  border-color:var(--color-border)!important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45)!important;
  transform:translateY(0)!important;
}
/* Secondary and small actions use the same family instead of blue fill. */
html[data-theme="dark"] #appShell button.secondary,
html[data-theme="dark"] #appShell .smallBtn,
html[data-theme="dark"] dialog button.secondary{
  background:var(--color-surface)!important;
  border-color:var(--color-border)!important;
  color:var(--color-text)!important;
}
html[data-theme="dark"] #appShell button.secondary:hover,
html[data-theme="dark"] #appShell .smallBtn:hover,
html[data-theme="dark"] dialog button.secondary:hover{
  background:var(--color-surface-2)!important;
  border-color:var(--color-border-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 9px rgba(0,0,0,.3)!important;
}
/* Danger stays semantic, but uses the same restrained dark treatment. */
html[data-theme="dark"] #appShell button.danger,
html[data-theme="dark"] #appShell .dangerDelete,
html[data-theme="dark"] dialog button.danger{
  background:#231517!important;
  border-color:#633a3f!important;
  color:#ffc7c7!important;
}
html[data-theme="dark"] #appShell button.danger:hover,
html[data-theme="dark"] #appShell .dangerDelete:hover,
html[data-theme="dark"] dialog button.danger:hover{
  background:#301e21!important;
  border-color:#9a5962!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 9px rgba(0,0,0,.32)!important;
}
/* Header utility buttons follow the same dark control family. */
html[data-theme="dark"] .shellHeaderActions button,
html[data-theme="dark"] .userProfileControl>button{
  background:var(--color-surface)!important;
  border-color:var(--color-border)!important;
  color:var(--color-text)!important;
}
html[data-theme="dark"] .shellHeaderActions button:hover,
html[data-theme="dark"] .userProfileControl>button:hover{
  background:var(--color-surface-2)!important;
  border-color:var(--color-border-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 9px rgba(0,0,0,.32)!important;
  transform:translateY(-1px)!important;
}
/* Project selector stays neutral/dark at rest; menu options are not bright blue. */
html[data-theme="dark"] .globalUtilityHeader .headerProjectTrigger{
  background:#151d23!important;
  border-color:#33434d!important;
}
html[data-theme="dark"] .globalUtilityHeader .headerProjectTrigger:hover{
  background:#1b272f!important;
  border-color:#536b77!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 9px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] .globalUtilityHeader .headerProjectMenu{
  background:#11191e!important;
  border-color:#33434d!important;
  box-shadow:0 10px 24px rgba(0,0,0,.42)!important;
}
html[data-theme="dark"] .globalUtilityHeader .headerProjectOption{
  background:transparent!important;color:#dfe8ed!important;
}
html[data-theme="dark"] .globalUtilityHeader .headerProjectOption:hover,
html[data-theme="dark"] .globalUtilityHeader .headerProjectOption.active{
  background:#222f38!important;
  color:#fff!important;
}
/* Dark mode only: SFP tiles use the same switch-face background family as RJ45.
   Light mode remains exactly as before. */
html[data-theme="dark"] #appShell .realSwitchFace .sfpBank>button.sfpPort,
html[data-theme="dark"] #appShell .realSwitchFace .sfpBank>button.sfpPort:hover,
html[data-theme="dark"] #appShell .realSwitchFace .sfpBank>button.sfpPort:focus,
html[data-theme="dark"] #appShell .realSwitchFace .sfpBank>button.sfpPort:active,
html[data-theme="dark"] #appShell .realSwitchFace .sfpBank>button.sfpPort.sfpLinked{
  background:transparent!important;
  border-color:#69757b!important;
  box-shadow:inset 0 0 0 1px #21292d!important;
  transform:none!important;
}
/* The old console/USB-like switch visual is intentionally removed in v3.17.3. */
.realSwitchFace .consolePort{display:none!important}


/* =========================================================
   v3.17.4 — locked dashboard visual system + brand cleanup
   Approved dark UI target from the dashboard reference.
   Technical device visuals remain explicitly untouched.
   ========================================================= */
html[data-theme="dark"] #dashboardDynamic .dashboardMetric,
html[data-theme="dark"] #dashboardDynamic .dashboardTask,
html[data-theme="dark"] #dashboardDynamic .dashboardProgressItem{
  background:#131b20!important;
  border:1px solid #33434d!important;
  color:#e9f0f4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] #dashboardDynamic .dashboardMetric{
  min-height:74px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:11px 14px!important;
}
html[data-theme="dark"] #dashboardDynamic .dashboardMetric:hover,
html[data-theme="dark"] #dashboardDynamic .dashboardTask:hover,
html[data-theme="dark"] #dashboardDynamic .dashboardProgressItem:hover{
  background:#1b262d!important;
  border-color:#4c6572!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 10px rgba(0,0,0,.25)!important;
}
.dashboardMetricIcon{
  width:40px;height:40px;min-width:40px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;font-weight:var(--weight-semibold);line-height:1;border:1px solid currentColor;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.025);
}
.dashboardMetricCopy{display:block;text-align:left;min-width:0}.dashboardMetricCopy>b{display:block!important;margin:0 0 5px!important;font-size:var(--text-title)!important;line-height:1!important}.dashboardMetricCopy>span{display:block;font-size:var(--text-small)!important;text-transform:uppercase;letter-spacing:.04em;color:#9aaab3!important}
.metric-due .dashboardMetricIcon{color:#3f9cff;background:#102a43}.metric-overdue .dashboardMetricIcon{color:#ff5c5c;background:#35191c}.metric-in_progress .dashboardMetricIcon{color:#a96cff;background:#281c3b}.metric-blocked .dashboardMetricIcon{color:#ffb21f;background:#382812}.metric-completed .dashboardMetricIcon{color:#37d88a;background:#143326}
html[data-theme="dark"] #dashboardDynamic .dashboardMetric.active{outline:1px solid #5d7886!important;outline-offset:1px!important}
html[data-theme="dark"] #dashboardDynamic .dashboardTask{padding:9px 11px!important;border-radius:9px!important;transform:none!important}
.dashboardStatusPill{display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;padding:3px 7px!important;font-size:var(--text-small)!important;line-height:1!important;font-weight:var(--weight-semibold)!important;letter-spacing:.025em!important;color:#fff!important;border:1px solid transparent!important}
.dashboardStatusPill.status-due{background:#174f88!important;border-color:#256bac!important}.dashboardStatusPill.status-overdue{background:#6b2228!important;border-color:#9c3740!important}.dashboardStatusPill.status-in_progress{background:#59319a!important;border-color:#774ec0!important}.dashboardStatusPill.status-blocked{background:#85570e!important;border-color:#a7721a!important}.dashboardStatusPill.status-completed{background:#1d754c!important;border-color:#2c9465!important}
/* Brand: actual IntegratorOS mark + name only. Visible version badge removed. */
.contextNav371 .brand{justify-content:flex-start!important}.contextNav371 .brandLogoIcon{display:grid!important;place-items:center!important;width:23px!important;height:23px!important;min-width:23px!important;color:#2f8de4!important}.contextNav371 .brandLogoIcon svg{width:22px!important;height:22px!important;display:block!important;fill:currentColor!important}.contextNav371 .brand>b{margin-right:auto!important}.contextNav371 .brand>span:not(.brandLogoIcon){display:none!important}
body.compactNav .contextNav371 .brandLogoIcon{display:none!important}
/* Keep dashboard accent/status styling out of all technical hardware visuals. */
.realSwitchFace,.switchRj45,.sfpPort,.patchKeystone,.fiberAdapter,.fiberDuplex,.patchPortBank{font-family:inherit}


/* =========================================================
   v3.17.5 — dashboard finish: ClearType typography, vector icons,
   centered brand mark, and neutral dark dashboard surfaces.
   Technical hardware visuals remain excluded from this layer.
   ========================================================= */
:root{
  --ios-font:var(--font-sans)!important;
}
html,body,#appShell,#appShell *,dialog,dialog *,button,input,select,textarea,table,th,td,
.headerProjectPicker,.headerProjectPicker *{
  font-family:var(--font-sans)!important;
  -webkit-font-smoothing:auto!important;
  text-rendering:auto!important;
}
body{font-weight:var(--weight-regular)!important}
.navBtn,.dashboardTask,.dashboardProgressItem,.dashboardMetric,.card,.itemCard,button,input,select,textarea{font-synthesis:none}

/* Brand mark: one circular holder, geometrically centered SVG. */
.contextNav371 .brand{align-items:center!important;gap:8px!important}
.contextNav371 .brandLogoIcon{
  display:grid!important;
  place-items:center!important;
  width:24px!important;height:24px!important;min-width:24px!important;
  padding:0!important;margin:0!important;
  border-radius:50%!important;
  background:#123654!important;
  border:1px solid #244f6d!important;
  color:#38a5f2!important;
  line-height:0!important;
  overflow:hidden!important;
}
.contextNav371 .brandLogoIcon svg{
  display:block!important;
  width:15px!important;height:15px!important;
  margin:0!important;padding:0!important;
  transform:translate(0,0)!important;
  transform-origin:center!important;
  fill:currentColor!important;
}
.contextNav371 .brand>b{line-height:24px!important;margin:0 auto 0 0!important}

/* Crisp vector metric icons. */
.dashboardMetricIcon{
  width:40px!important;height:40px!important;min-width:40px!important;
  display:grid!important;place-items:center!important;
  border-radius:50%!important;
  padding:0!important;line-height:0!important;
}
.dashboardMetricIcon svg{width:21px!important;height:21px!important;display:block!important}

/* Dashboard surfaces: neutral charcoal at rest; color only carries meaning. */
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardMetric,
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardTask,
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardProgressItem{
  background:#141c21!important;
  background-image:none!important;
  border-color:#31414a!important;
  color:#edf3f6!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardMetric:hover,
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardTask:hover,
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardProgressItem:hover{
  background:#1c252a!important;
  border-color:#526671!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 5px 12px rgba(0,0,0,.25)!important;
}
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardPanel{
  background:#10171c!important;
  border-color:#31414a!important;
}
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardMetric.active{
  outline:1px solid #58717e!important;
  outline-offset:1px!important;
}
.dashboardTaskMeta{align-items:flex-end!important}
.dashboardStatusPill{text-transform:uppercase!important}

/* Remove any legacy visible build/version badges in the sidebar branding. */
.contextNav371 .brand .pill,.contextNav371 .brand .version,.contextNav371 .brand [class*="version"],
.contextNav371 .brand [data-version]{display:none!important}

/* Technical hardware stays outside UI typography/surface normalization. */
.realSwitchFace,.realSwitchFace *,.switchRj45,.sfpPort,.patchKeystone,.fiberAdapter,.fiberDuplex,.patchPortBank{
  -webkit-font-smoothing:auto;
}
/* v3.17.6 approved IntegratorOS mark */
.contextNav371 .brandLogoIcon{display:grid!important;place-items:center!important;overflow:visible!important}
.contextNav371 .brandLogoIcon img{display:block!important;width:23px!important;height:23px!important;object-fit:contain!important}


/* =========================================================
   v3.17.7 — exact IntegratorOS brand mark + lifecycle order
   Remove the temporary circular holder and preserve the supplied icon geometry.
   ========================================================= */
.contextNav371 .brandLogoIcon{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  line-height:0!important;
}
.contextNav371 .brandLogoIcon img{
  display:block!important;
  width:28px!important;
  height:28px!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.contextNav371 .brand>b{line-height:28px!important}

/* =========================================================
   v3.17.8 — dashboard light/dark parity + brand alignment
   Approved dashboard visuals now apply consistently in both themes.
   Technical Network/Cabling visuals remain intentionally untouched.
   ========================================================= */

/* Brand header: center the supplied IntegratorOS mark and wordmark as one row.
   Remove the historical bottom-only padding that visually shifted the mark. */
.contextNav371 .brand{
  display:flex!important;
  align-items:center!important;
  height:52px!important;
  min-height:52px!important;
  padding:0 7px!important;
  margin:0 0 7px!important;
  gap:8px!important;
}
.contextNav371 .brandLogoIcon{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;
  padding:0!important;
  margin:0!important;
  line-height:0!important;
  align-self:center!important;
}
.contextNav371 .brandLogoIcon img{
  display:block!important;
  width:28px!important;
  height:28px!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  margin:0!important;
  padding:0!important;
}
.contextNav371 .brand>b{
  display:flex!important;
  align-items:center!important;
  height:28px!important;
  line-height:1!important;
  margin:0 auto 0 0!important;
}

/* Work-row status and due-date must never collide. */
#dashboardDynamic .dashboardTaskMeta{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  min-width:max-content!important;
  text-align:right!important;
  white-space:nowrap!important;
}
#dashboardDynamic .dashboardTaskMeta .dashboardStatusPill{
  flex:0 0 auto!important;
  margin:0!important;
}
#dashboardDynamic .dashboardTaskMeta>span{
  display:inline-block!important;
  flex:0 0 auto!important;
  margin:0!important;
}

/* DARK — approved neutral dashboard hierarchy. */
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardMetric,
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardTask,
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardProgressItem{
  background:#151f26!important;
  border-color:#31434d!important;
  color:#eef4f7!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardPanel{
  background:#10191f!important;
  border-color:#2b3b45!important;
}
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardMetric:hover,
html[data-theme="dark"] body #appShell #dashboardDynamic button.dashboardTask:hover,
html[data-theme="dark"] body #appShell #dashboardDynamic .dashboardProgressItem:hover{
  background:#1a252d!important;
  border-color:#45606d!important;
}

/* LIGHT — same hierarchy translated to light surfaces, not blue-filled cards. */
html[data-theme="light"] body #appShell #dashboardDynamic .dashboardPanel{
  background:#ffffff!important;
  border-color:#cad6de!important;
  color:#18242c!important;
  box-shadow:none!important;
}
html[data-theme="light"] body #appShell #dashboardDynamic button.dashboardMetric,
html[data-theme="light"] body #appShell #dashboardDynamic button.dashboardTask,
html[data-theme="light"] body #appShell #dashboardDynamic .dashboardProgressItem{
  background:#f7f9fa!important;
  border-color:#c8d5dd!important;
  color:#18242c!important;
  box-shadow:none!important;
}
html[data-theme="light"] body #appShell #dashboardDynamic button.dashboardMetric:hover,
html[data-theme="light"] body #appShell #dashboardDynamic button.dashboardTask:hover,
html[data-theme="light"] body #appShell #dashboardDynamic .dashboardProgressItem:hover{
  background:#eef4f7!important;
  border-color:#8faebb!important;
}
html[data-theme="light"] #dashboardDynamic .dashboardMetricCopy>span,
html[data-theme="light"] #dashboardDynamic .dashboardTask small,
html[data-theme="light"] #dashboardDynamic .dashboardTaskMeta>span,
html[data-theme="light"] #dashboardDynamic .dashboardPanelHead small,
html[data-theme="light"] #dashboardDynamic .dashboardProgressFoot{
  color:#647883!important;
}
html[data-theme="light"] #dashboardDynamic .dashboardProgressTrack{
  background:#dce5ea!important;
}

/* Keep meaningful status colors in both themes. */
html[data-theme="light"] .dashboardStatusPill{color:#fff!important}
html[data-theme="light"] .metric-due .dashboardMetricIcon{color:#0879da!important;background:#e4f2ff!important}
html[data-theme="light"] .metric-overdue .dashboardMetricIcon{color:#d73f46!important;background:#ffe9ea!important}
html[data-theme="light"] .metric-in_progress .dashboardMetricIcon{color:#7a43bd!important;background:#f0e8fa!important}
html[data-theme="light"] .metric-blocked .dashboardMetricIcon{color:#ad7000!important;background:#fff2d5!important}
html[data-theme="light"] .metric-completed .dashboardMetricIcon{color:#138657!important;background:#e1f6ec!important}

@media(max-width:700px){
  #dashboardDynamic .dashboardTaskMeta{justify-content:flex-start!important;gap:8px!important}
}

/* =========================================================
   v3.17.9 — light-mode parity, header controls, metric geometry,
   final brand alignment and notification treatment.
   Technical device visuals remain untouched.
   ========================================================= */

/* Final brand lock: use the supplied IntegratorOS mark as-is, with no
   inherited circular holder or offset from older branding experiments. */
.contextNav371 .brand{
  display:flex!important;
  align-items:center!important;
  min-height:52px!important;
  padding:0 8px!important;
  gap:8px!important;
}
.contextNav371 .brandLogoIcon{
  width:28px!important;height:28px!important;min-width:28px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;margin:0!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;overflow:visible!important;line-height:0!important;
  transform:none!important;
}
.contextNav371 .brandLogoIcon img{
  width:28px!important;height:28px!important;display:block!important;
  object-fit:contain!important;object-position:center center!important;
  margin:0!important;padding:0!important;transform:none!important;
}
.contextNav371 .brand>b{
  display:flex!important;align-items:center!important;
  height:28px!important;line-height:28px!important;margin:0 auto 0 0!important;
}

/* Dashboard metric geometry is identical in light and dark modes. */
#dashboardDynamic .dashboardMetric{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  min-height:74px!important;
  padding:11px 14px!important;
}
#dashboardDynamic .dashboardMetricIcon{
  flex:0 0 40px!important;
}
#dashboardDynamic .dashboardMetricCopy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  text-align:left!important;
}
#dashboardDynamic .dashboardMetricCopy>b{
  display:block!important;
  margin:0 0 5px!important;
  line-height:1!important;
}
#dashboardDynamic .dashboardMetricCopy>span{
  display:block!important;
  margin:0!important;
  line-height:1.1!important;
}

/* Light-mode header: neutral controls, not blue-filled boxes. */
html[data-theme="light"] .globalUtilityHeader{
  background:#ffffff!important;
  border-bottom-color:#d6e0e6!important;
}
html[data-theme="light"] .globalUtilityHeader>.headerProjectPicker{
  background:#ffffff!important;
  border-color:#cbd6dd!important;
  box-shadow:none!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectPickerLabel{
  color:#607580!important;
  background:transparent!important;
  border-right-color:#cbd6dd!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger{
  background:#ffffff!important;
  color:#17252d!important;
  border-color:#cbd6dd!important;
  box-shadow:none!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger:hover{
  background:#f5f8fa!important;
  border-color:#9fb2bd!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectMenu{
  background:#ffffff!important;
  border-color:#cbd6dd!important;
  box-shadow:0 10px 24px rgba(24,42,53,.12)!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption{
  background:transparent!important;color:#253842!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption:hover{
  background:#f1f5f7!important;color:#17252d!important;
}
html[data-theme="light"] .globalUtilityHeader .headerProjectOption.active{
  background:#e7f0f5!important;color:#17394a!important;
}

/* Theme, notifications and account controls use one neutral family. */
.shellHeaderActions #themeToggle,
.shellHeaderActions #notificationBell,
.shellHeaderActions .userProfileBtn{
  width:36px!important;height:36px!important;min-width:36px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
html[data-theme="light"] .shellHeaderActions #themeToggle,
html[data-theme="light"] .shellHeaderActions #notificationBell,
html[data-theme="light"] .shellHeaderActions .userProfileBtn{
  background:#ffffff!important;
  border:1px solid #cbd6dd!important;
  color:#334a56!important;
  box-shadow:none!important;
}
html[data-theme="light"] .shellHeaderActions #themeToggle:hover,
html[data-theme="light"] .shellHeaderActions #notificationBell:hover,
html[data-theme="light"] .shellHeaderActions .userProfileBtn:hover{
  background:#f4f7f9!important;
  border-color:#9fb2bd!important;
}
.themeGlyph,.notificationBellIcon svg{
  width:18px!important;height:18px!important;display:block!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.notificationBellIcon{display:grid!important;place-items:center!important;line-height:0!important}

/* Bell stays neutral at rest; unread state is red rather than yellow. */
#notificationBell{color:inherit!important}
#notificationBell.hasUnread{
  color:#dc3f48!important;
  border-color:#dc3f48!important;
  box-shadow:0 0 0 2px rgba(220,63,72,.12)!important;
}
#notificationBell.hasUnread .notificationBellIcon{color:#dc3f48!important}
#notificationBell #notificationCount{
  background:#dc3f48!important;
  color:#fff!important;
  border-color:var(--ios-panel,#11191e)!important;
}
html[data-theme="light"] #notificationBell #notificationCount{
  border-color:#fff!important;
}

/* Light metric cards keep the approved neutral surface hierarchy. */
html[data-theme="light"] #dashboardDynamic .dashboardMetric{
  background:#ffffff!important;
  border-color:#cad6de!important;
  color:#18242c!important;
}
html[data-theme="light"] #dashboardDynamic .dashboardMetric:hover{
  background:#f5f8fa!important;
  border-color:#9fb2bd!important;
}

/* ================================================================
   v3.18.0 — Survey / Design workspace
   Project-first field survey, engineering handoff, guided wizard.
   ================================================================ */
.surveyWorkspace{display:grid;gap:16px}
.surveyHero,.surveySystems,.surveyRecordsSection{
  background:var(--ios-panel,#11191e);border:1px solid var(--ios-border,#2b3942);
  border-radius:14px;padding:18px
}
.surveyHero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.surveyHero h2{margin:3px 0 4px;font-size:var(--text-title)}.surveyHero p{margin:0;color:var(--ios-muted,#90a2ad)}
.surveyHeroMetrics{display:grid;grid-template-columns:repeat(4,minmax(112px,1fr));gap:8px;min-width:min(560px,55%)}
.surveyHeroMetrics>div{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:10px;padding:10px 12px}
.surveyHeroMetrics b{display:block;font-size:var(--text-section);line-height:1.05}.surveyHeroMetrics span{font-size:var(--text-body);color:var(--ios-muted,#90a2ad)}
.surveySectionHead{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:12px}
.surveySectionHead h3{margin:2px 0 0}.surveySectionHead p{margin:0;color:var(--ios-muted,#90a2ad);font-size:var(--text-body)}
.surveySystemGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.surveySystemCard{display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto auto!important;gap:8px 10px!important;text-align:left!important;padding:13px!important;min-height:110px!important;background:var(--ios-surface,#172127)!important;border:1px solid var(--ios-border,#2b3942)!important;color:var(--ios-text,#e6edf1)!important}
.surveySystemCard>div span{display:block;font-weight:var(--weight-semibold)}.surveySystemCard>div small,.surveySystemCard>small{color:var(--ios-muted,#90a2ad)}
.surveySystemCard>b{font-size:var(--text-section)}.surveySystemCard>i{grid-column:1/-1;height:5px;border-radius:99px;background:#26343d;overflow:hidden}.surveySystemCard>i>em{display:block;height:100%;background:#2f9bea;border-radius:99px}
.surveyToolbar{display:grid;grid-template-columns:minmax(220px,1fr) 200px 190px;gap:9px;margin-bottom:12px}
.surveyRecordGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.surveyRecordCard{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:12px;padding:14px;display:grid;gap:12px}
.surveyRecordHead{display:flex;justify-content:space-between;gap:12px}.surveyRecordHead h3{margin:2px 0 3px;font-size:var(--text-section)}.surveyRecordHead p{margin:0;color:var(--ios-muted,#90a2ad);font-size:var(--text-body)}
.surveyStatus{height:max-content;border-radius:99px;padding:4px 8px;font-size:var(--text-small);font-weight:var(--weight-semibold);border:1px solid #40515b;color:#bcc9d0;background:#1a252c;white-space:nowrap}.surveyStatus.good{color:#67dfa2;border-color:#247950;background:#102b20}.surveyStatus.progress{color:#c7a9ff;border-color:#6a43a9;background:#241638}
.surveyRecordMeta{display:flex;gap:8px;flex-wrap:wrap;color:var(--ios-muted,#90a2ad);font-size:var(--text-body)}.surveyRecordMeta span{border-right:1px solid var(--ios-border,#2b3942);padding-right:8px}.surveyRecordMeta span:last-child{border-right:0}
.surveyRecordProgress>div{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-body);margin-bottom:6px}.surveyRecordProgress>i,.surveyReadinessBar{display:block;height:6px;border-radius:99px;background:#26343d;overflow:hidden}.surveyRecordProgress>i>em,.surveyReadinessBar>i{display:block;height:100%;background:#2f9bea;border-radius:99px}
.surveyRecordActions{display:flex;justify-content:flex-end}.surveyEmpty{grid-column:1/-1;border:1px dashed var(--ios-border,#2b3942);border-radius:12px;padding:28px;text-align:center}.surveyEmpty p{color:var(--ios-muted,#90a2ad)}
.surveyWizardSplit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.surveyWizardForm{align-content:start}.surveyGuideCard{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:12px;padding:14px;height:max-content;position:sticky;top:8px}.surveyGuideHead{display:grid;gap:3px;margin-bottom:10px}.surveyGuideHead small{color:var(--ios-muted,#90a2ad)}.surveyGuideList{display:grid;gap:8px}.surveyGuideList>div{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start}.surveyGuideList span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#162a36;border:1px solid #315469;color:#7dcaf0;font-size:var(--text-small)}.surveyGuideList p{margin:2px 0 0;font-size:var(--text-body);color:#bfccd3}
.surveyReview{display:grid;gap:14px}.surveyReviewTop{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}.surveyReviewTop section,.surveyReviewGrid section{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:10px;padding:12px}.surveyReviewTop h3{margin:3px 0}.surveyReviewTop p,.surveyReviewGrid p{margin:4px 0 0;white-space:pre-wrap;color:var(--ios-muted,#90a2ad)}.surveyReviewControls{max-width:650px}.surveyReviewGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.surveyReviewGrid .wide{grid-column:1/-1}
@media(max-width:980px){.surveyHero{display:grid}.surveyHeroMetrics{min-width:0;width:100%;grid-template-columns:repeat(2,1fr)}.surveyWizardSplit{grid-template-columns:1fr}.surveyGuideCard{position:static}.surveyToolbar{grid-template-columns:1fr}.surveyReviewTop{grid-template-columns:1fr}.surveyReviewGrid{grid-template-columns:1fr}.surveyReviewGrid .wide{grid-column:auto}}

/* Light theme parity for Survey / Design. */
html[data-theme="light"] .surveyHero,html[data-theme="light"] .surveySystems,html[data-theme="light"] .surveyRecordsSection,
html[data-theme="light"] .surveyRecordCard,html[data-theme="light"] .surveySystemCard,html[data-theme="light"] .surveyGuideCard,
html[data-theme="light"] .surveyReviewTop section,html[data-theme="light"] .surveyReviewGrid section,html[data-theme="light"] .surveyHeroMetrics>div{
  background:#fff!important;border-color:#cbd6dd!important;color:#17252d!important
}
html[data-theme="light"] .surveyGuideList p,html[data-theme="light"] .surveyHero p,html[data-theme="light"] .surveyRecordHead p,
html[data-theme="light"] .surveyRecordMeta,html[data-theme="light"] .surveySectionHead p,html[data-theme="light"] .surveyReviewTop p,
html[data-theme="light"] .surveyReviewGrid p{color:#5f727d!important}
html[data-theme="light"] .surveyStatus{background:#f3f6f8;color:#52646e;border-color:#c7d2d9}
html[data-theme="light"] .surveyStatus.good{background:#e9f8ef;color:#177044;border-color:#9fd4b6}
html[data-theme="light"] .surveyStatus.progress{background:#f2ecff;color:#6942a1;border-color:#c9b5ee}

/* v3.18.0 final light-header neutral surface lock. Older page rules must not tint these controls blue. */
html[data-theme="light"] #sidebarToggle,
html[data-theme="light"] .globalUtilityHeader .headerProjectPicker,
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger,
html[data-theme="light"] .shellHeaderActions #themeToggle,
html[data-theme="light"] .shellHeaderActions #notificationBell,
html[data-theme="light"] .shellHeaderActions .userProfileBtn{
  background:#fff!important;background-image:none!important;color:#233640!important;border-color:#bfcdd5!important;box-shadow:none!important
}
html[data-theme="light"] #sidebarToggle:hover,
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger:hover,
html[data-theme="light"] .shellHeaderActions #themeToggle:hover,
html[data-theme="light"] .shellHeaderActions #notificationBell:hover,
html[data-theme="light"] .shellHeaderActions .userProfileBtn:hover{background:#f4f7f9!important;background-image:none!important}

/* ================================================================
   v3.18.1 — Survey field-truth workflow
   ================================================================ */
.fieldCaption{display:block;font-size:var(--text-body);font-weight:var(--weight-semibold);margin:0 0 7px;color:var(--ios-muted,#90a2ad)}
.surveyMultiSystems{display:flex;gap:8px;flex-wrap:wrap}.surveyMultiSystems label{display:block!important}.surveyMultiSystems input{position:absolute;opacity:0;pointer-events:none}.surveyMultiSystems span{display:block;padding:8px 11px;border:1px solid var(--ios-border,#2b3942);border-radius:9px;background:var(--ios-surface,#172127);font-size:var(--text-body);cursor:pointer}.surveyMultiSystems input:checked+span{border-color:#268bc3;background:#132a38;color:#8dd6fa;box-shadow:inset 0 0 0 1px #268bc3}
.surveyGuideCopy{font-size:var(--text-body);line-height:1.55;color:var(--ios-muted,#90a2ad)}
.surveyRequirements{display:grid;gap:12px}.surveyReqSystem{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:12px;padding:14px}.surveyReqHead{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:10px}.surveyReqHead h3{margin:2px 0}.surveyReqHead>span{font-size:var(--text-body);color:var(--ios-muted,#90a2ad)}.surveyReqChecks{display:grid;gap:7px;margin-bottom:12px}.surveyReqChecks>div{display:grid;grid-template-columns:1fr 145px;gap:12px;align-items:center;padding:8px 10px;background:var(--ios-panel,#11191e);border:1px solid var(--ios-border,#2b3942);border-radius:8px}.surveyReqChecks p{margin:0;font-size:var(--text-body)}
.surveyArraySection{display:grid;gap:10px}.surveyArrayHead{display:flex;justify-content:space-between;align-items:center;gap:14px}.surveyArrayHead h3{margin:0 0 3px}.surveyArrayHead p{margin:0;color:var(--ios-muted,#90a2ad);font-size:var(--text-body)}.surveyArrayRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:12px;padding:12px}.surveyArrayGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.surveyArrayGrid .full{grid-column:1/-1}.surveyRowDelete{align-self:start}.surveyArrayEmpty{padding:24px;text-align:center;border:1px dashed var(--ios-border,#2b3942);border-radius:10px;color:var(--ios-muted,#90a2ad)}
.surveyHandoff{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 16px;border-radius:12px;border:1px solid}.surveyHandoff h3{margin:2px 0 3px}.surveyHandoff p{margin:0;font-size:var(--text-body)}.surveyHandoff>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:var(--text-section);font-weight:var(--weight-semibold)}.surveyHandoff.ready{background:#10281d;border-color:#286d49}.surveyHandoff.ready h3,.surveyHandoff.ready>span{color:#5de099}.surveyHandoff.ready>span{background:#173b2a}.surveyHandoff.notReady{background:#2b2013;border-color:#77542b}.surveyHandoff.notReady h3,.surveyHandoff.notReady>span{color:#f2b35f}.surveyHandoff.notReady>span{background:#49331b}.surveyMissing{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:10px;padding:12px;display:grid;gap:5px;font-size:var(--text-body)}.surveyMissing b{margin-bottom:3px}.surveyMissing small{color:var(--ios-muted,#90a2ad)}.surveyBlockerMeta{color:#f0a35d!important}
@media(max-width:760px){.surveyReqChecks>div,.surveyArrayGrid{grid-template-columns:1fr}.surveyArrayRow{grid-template-columns:1fr}.surveyArrayHead{align-items:flex-start;flex-direction:column}}
html[data-theme="light"] .surveyMultiSystems span,html[data-theme="light"] .surveyReqSystem,html[data-theme="light"] .surveyReqChecks>div,html[data-theme="light"] .surveyArrayRow,html[data-theme="light"] .surveyMissing{background:#fff!important;border-color:#cbd6dd!important;color:#17252d!important}html[data-theme="light"] .surveyMultiSystems input:checked+span{background:#eef7fc!important;border-color:#2588bd!important;color:#176b98!important}html[data-theme="light"] .surveyHandoff.ready{background:#eef9f2;border-color:#9ccfb1}html[data-theme="light"] .surveyHandoff.notReady{background:#fff7eb;border-color:#e1bd88}

/* ===== v3.18.3 Survey wizard photo workflow + layout fix ===== */
.surveyWizard .projectWizardProgress{display:flex!important;grid-template-columns:none!important;gap:8px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:14px 18px;scrollbar-width:thin;scrollbar-color:var(--ios-border,#31414b) transparent}
.surveyWizard .projectWizardStepDot{flex:0 0 164px;min-width:164px;max-width:164px;overflow:hidden}
.surveyWizard .projectWizardStepDot small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.surveyWizard .projectWizardActions{position:sticky;bottom:0;z-index:12;background:var(--ios-surface,#151d22);box-shadow:0 -10px 18px rgba(0,0,0,.18);border-top:1px solid var(--ios-border,#2b3942)}
.surveyReqChecks.expandable{display:grid;gap:8px}
.surveyReqItem{border:1px solid var(--ios-border,#2b3942);border-radius:10px;background:var(--ios-surface-2,#121b20);overflow:hidden}
.surveyReqItem>summary{list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 14px;cursor:pointer;user-select:none}
.surveyReqItem>summary::-webkit-details-marker{display:none}
.surveyReqItem[open]>summary{border-bottom:1px solid var(--ios-border,#2b3942)}
.surveyReqItemTitle{font-weight:var(--weight-semibold);min-width:0}
.surveyReqItemRight{display:flex;align-items:center;gap:10px;white-space:nowrap}.surveyReqItemRight>b{font-size:var(--text-body);color:var(--ios-muted,#91a3ae);font-weight:var(--weight-regular)}.surveyReqItemRight>i{font-style:normal;transition:transform .18s}.surveyReqItem[open] .surveyReqItemRight>i{transform:rotate(180deg)}
.surveyReqState{font-style:normal;font-size:var(--text-small);padding:4px 8px;border-radius:999px;border:1px solid var(--ios-border,#2b3942);color:var(--ios-muted,#91a3ae)}
.surveyReqState.captured{border-color:#247a55;color:#75d9aa;background:rgba(31,137,91,.12)}.surveyReqState.na{border-color:#53616a;color:#a9b5bc}.surveyReqItemBody{padding:12px 14px;display:grid;gap:12px}
.surveyReqItemActions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.surveyReqItemActions label{min-width:180px;display:grid;gap:5px}.surveyReqItemActions select{min-width:180px}
.surveyReqNoPhotos{border:1px dashed var(--ios-border,#2b3942);border-radius:9px;padding:14px;color:var(--ios-muted,#91a3ae);font-size:var(--text-body);text-align:center}
.surveyReqPhotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}.surveyReqPhoto{padding:0!important;overflow:hidden;display:grid!important;background:var(--ios-surface,#151d22)!important;border:1px solid var(--ios-border,#2b3942)!important;text-align:left}.surveyReqPhoto img{display:block;width:100%;height:86px;object-fit:cover}.surveyReqPhoto span{padding:7px 8px;font-size:var(--text-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surveyCameraPanel{position:absolute;inset:0;z-index:30;background:var(--ios-bg,#0d1418);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-radius:inherit}
#modalBody{position:relative}.surveyCameraPanel>header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--ios-border,#2b3942);background:var(--ios-surface,#151d22)}.surveyCameraPanel header h3{margin:2px 0 0}.surveyCameraPanel header p,.surveyCameraPanel header small{margin:0;color:var(--ios-muted,#91a3ae)}
.surveyCameraStage{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;padding:14px;min-height:0;overflow:auto}.surveyCameraViewport{position:relative;display:grid;place-items:center;min-height:360px;background:#05090b;border:1px solid var(--ios-border,#2b3942);border-radius:12px;overflow:hidden}.surveyCameraViewport video,.surveyCameraViewport canvas{max-width:100%;max-height:58vh;width:auto;height:auto;object-fit:contain;touch-action:none}.surveyCameraMessage{position:absolute;inset:auto 15px 15px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.65);color:white;font-size:var(--text-body)}.surveyCameraTools{display:grid;gap:8px}.surveyCameraTools button,.surveyUploadPhotoBtn{width:100%;box-sizing:border-box}.surveyUploadPhotoBtn{display:flex;justify-content:center;align-items:center;min-height:36px;border:1px solid var(--ios-border,#2b3942);border-radius:8px;cursor:pointer;background:var(--ios-surface,#151d22)}.surveyUploadPhotoBtn input{display:none}.surveyCameraTools .active{outline:1px solid #2aa7e8;box-shadow:0 0 0 2px rgba(42,167,232,.13)}.surveyCameraHint{margin-top:10px;color:var(--ios-muted,#91a3ae);font-size:var(--text-body);line-height:1.45}.surveyCaptureTray{border-top:1px solid var(--ios-border,#2b3942);padding:12px 14px;background:var(--ios-surface,#151d22);display:grid;gap:9px}.surveyCaptureTray>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.surveyCaptureTray small{color:var(--ios-muted,#91a3ae)}.surveyCaptureThumbs{display:flex;gap:8px;overflow-x:auto;min-height:70px}.surveyCaptureThumbs>span{color:var(--ios-muted,#91a3ae);align-self:center}.surveyCaptureThumbs button{flex:0 0 92px;padding:3px!important;position:relative}.surveyCaptureThumbs button.active{outline:2px solid #2aa7e8}.surveyCaptureThumbs img{width:84px;height:58px;object-fit:cover;border-radius:5px;display:block}.surveyCaptureThumbs small{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:white;border-radius:99px;padding:1px 5px}.surveyCameraDone{min-width:92px}
@media(max-width:760px){.surveyWizard .projectWizardStepDot{flex-basis:138px;min-width:138px;max-width:138px}.surveyCameraStage{grid-template-columns:1fr}.surveyCameraViewport{min-height:260px}.surveyCameraTools{grid-template-columns:repeat(2,minmax(0,1fr))}.surveyCameraHint{grid-column:1/-1}}


/* ===== v3.18.4 Survey requirement status + photo tray polish ===== */
.surveyWizard,.surveyWizard *,.surveyCameraPanel,.surveyCameraPanel *{
  font-family:var(--font-sans)!important;
  text-rendering:auto!important;
  -webkit-font-smoothing:auto!important;
}
.surveyReqChevron{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;color:var(--ios-muted,#91a3ae);transition:transform .18s ease}
.surveyReqChevron svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.surveyReqItem[open] .surveyReqChevron{transform:rotate(180deg)}
.surveyReqItemActions select{
  appearance:none!important;
  -webkit-appearance:none!important;
  padding-right:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2391a3ae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-size:14px 14px!important;
  background-position:right 12px center!important;
}
.surveyCaptureThumbs{align-items:flex-start}
.surveyCaptureThumb{position:relative;flex:0 0 92px;border-radius:7px}
.surveyCaptureThumb.active{outline:2px solid #2aa7e8;outline-offset:1px}
.surveyCaptureThumbOpen{width:92px!important;padding:3px!important;display:block!important;position:relative!important}
.surveyCaptureThumbOpen img{width:84px;height:58px;object-fit:cover;border-radius:5px;display:block}
.surveyCaptureThumbOpen small{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.72);color:white;border-radius:99px;padding:1px 5px}
.surveyCaptureThumbDelete{
  position:absolute!important;right:4px!important;top:4px!important;z-index:5!important;
  width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;
  display:grid!important;place-items:center!important;border-radius:6px!important;
  background:rgba(13,20,24,.9)!important;border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;font-size:var(--text-body)!important;line-height:1!important;font-weight:var(--weight-semibold)!important;
}
.surveyCaptureThumbDelete:hover{background:#7c2626!important;border-color:#b84a4a!important;transform:translateY(-1px)}
html[data-theme="light"] .surveyReqItemActions select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6c76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}

/* v3.18.5 Survey photo capture responsive layout */
#modal.projectWizardDialog.surveyCameraMode{
  width:min(1180px,calc(100vw - 24px))!important;
  max-width:none!important;
  height:min(900px,calc(100dvh - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
}
#modal.projectWizardDialog.surveyCameraMode #modalForm{
  height:100%!important;
  min-height:0!important;
}
#modal.projectWizardDialog.surveyCameraMode #modalBody{
  padding:0!important;
  overflow:hidden!important;
  min-height:0!important;
  flex:1 1 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  position:absolute!important;
  inset:0!important;
  height:100%!important;
  min-height:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  grid-template-columns:minmax(0,1fr) minmax(190px,220px)!important;
  grid-template-rows:minmax(0,1fr)!important;
  min-height:0!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  min-height:0!important;
  height:100%!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  display:grid!important;
  place-items:center!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  min-height:0!important;
  overflow:auto!important;
  scrollbar-width:thin;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  padding-bottom:8px!important;
  background:var(--ios-bg,#0d1418)!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  flex:0 0 auto!important;
  max-height:150px!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}

@media (max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header{
    padding:10px 12px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:8px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    min-height:220px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
    overflow:visible!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
    position:sticky!important;
    bottom:0!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px 0 0!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
    display:none!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
    max-height:132px!important;
    padding:9px 10px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray>div:first-child{
    align-items:center!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray>div:first-child small{
    display:none!important;
  }
}

@media (max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header h3{font-size:var(--text-body)!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header p,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header small{font-size:var(--text-small)!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools button,
  #modal.projectWizardDialog.surveyCameraMode .surveyUploadPhotoBtn{
    min-height:42px!important;
    font-size:var(--text-body)!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
    max-height:118px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs img{
    width:72px!important;
    height:50px!important;
  }
}

/* ===== v3.18.6 Survey capture geometry + thumbnail + notes fix ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header{
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:0!important;
  padding:10px!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding-right:3px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes{
  display:grid!important;
  gap:6px!important;
  margin-top:10px!important;
  font-family:var(--font-sans)!important;
  color:var(--ios-text,#e7eef3)!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes span{
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes textarea{
  width:100%!important;
  min-height:84px!important;
  resize:vertical!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  flex:0 0 auto!important;
  max-height:none!important;
  min-height:118px!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{
  min-height:82px!important;
  align-items:center!important;
  padding:2px 2px 8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{
  position:relative!important;
  flex:0 0 116px!important;
  width:116px!important;
  height:78px!important;
  border:1px solid var(--ios-border,#2b3942)!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:#05090b!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
  background:transparent!important;
  transform:none!important;
  box-shadow:none!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:0!important;
  display:block!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen small{
  right:6px!important;
  bottom:5px!important;
  z-index:2!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbDelete{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  z-index:4!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:6px!important;
  background:rgba(12,18,22,.88)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  line-height:1!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb.active{
  outline:2px solid #2aa7e8!important;
  outline-offset:2px!important;
}
html[data-theme="light"] #modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes{
  color:#18232b!important;
}

@media (max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
    overflow-y:auto!important;
    grid-template-rows:minmax(260px,1fr) auto!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    min-height:260px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
    overflow:visible!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes{
    margin-top:8px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes textarea{
    min-height:70px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
    min-height:108px!important;
  }
}
@media (max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{
    flex-basis:94px!important;
    width:94px!important;
    height:66px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbDelete{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
  }
}

/* ===== v3.18.7 Survey live-camera + dedicated markup workflow ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(320px,1fr) auto!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:12px!important;
  overflow:auto!important;
  padding:14px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  width:min(100%,980px)!important;
  justify-self:center!important;
  min-height:340px!important;
  max-height:62vh!important;
  aspect-ratio:16/9!important;
  padding:10px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,980px)!important;
  justify-self:center!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px)!important;
  gap:12px!important;
  align-items:start!important;
  overflow:visible!important;
  padding:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools button,
#modal.projectWizardDialog.surveyCameraMode .surveyUploadPhotoBtn{
  min-height:40px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  grid-column:1/-1!important;
  margin-top:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  padding:12px 14px 14px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{
  align-items:center!important;
  padding:4px 4px 8px!important;
  gap:10px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{
  flex:0 0 116px!important;
  width:116px!important;
  height:78px!important;
  padding:4px!important;
  border:1px solid var(--ios-border,#2b3942)!important;
  border-radius:9px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:#05090b!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb.active{
  border:2px solid #2aa7e8!important;
  outline:none!important;
  box-shadow:0 0 0 1px rgba(42,167,232,.15) inset!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:5px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:5px!important;
  display:block!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbDelete{
  top:7px!important;
  right:7px!important;
}
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport{
  background:#070b0e!important;
}
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{
  cursor:crosshair!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
    grid-template-rows:minmax(260px,52dvh) auto!important;
    padding:10px!important;
    gap:10px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    width:100%!important;
    min-height:260px!important;
    max-height:52dvh!important;
    aspect-ratio:auto!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
    width:100%!important;
    grid-template-columns:1fr!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes textarea{
    min-height:72px!important;
  }
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header{
    padding:10px 12px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
    grid-template-rows:minmax(230px,46dvh) auto!important;
    padding:8px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    min-height:230px!important;
    max-height:46dvh!important;
    padding:6px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
    grid-template-columns:1fr 1fr!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
    padding:10px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{
    flex-basis:100px!important;
    width:100px!important;
    height:70px!important;
  }
}

/* ===== v3.18.8 Survey point automation + compact camera/review ===== */
.surveyReqPhotoWrap{position:relative;display:inline-grid}
.surveyReqPhotoDelete{position:absolute!important;top:5px!important;right:5px!important;z-index:4!important;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:0!important;border-radius:7px!important;display:grid!important;place-items:center!important;background:rgba(15,23,29,.9)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important;font:var(--weight-semibold) var(--text-section)/1 var(--font-sans)!important}
.surveyReqPhotoDelete:hover{background:#7c2626!important;border-color:#b84a4a!important}
.surveyPointGrid label:first-child,.surveyPointGrid label:nth-child(2){order:-2}
.surveyPointGrid input[readonly]{opacity:.92;cursor:default;background:color-mix(in srgb,var(--ios-surface,#172127) 80%,#000 20%)}
.surveyPointRow{scroll-margin-top:100px}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{grid-template-rows:auto auto!important;align-content:start!important;overflow:visible!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{width:min(100%,920px)!important;min-height:0!important;height:auto!important;max-height:none!important;aspect-ratio:16/9!important;align-self:start!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{width:100%!important;height:100%!important;max-height:min(58dvh,620px)!important;object-fit:contain!important}
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport{aspect-ratio:auto!important;min-height:0!important;height:auto!important;padding:8px!important}
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{width:auto!important;height:auto!important;max-width:100%!important;max-height:min(58dvh,620px)!important;margin:auto!important;display:block!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{align-self:start!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{position:relative!important;margin-top:0!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{min-height:0!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbDelete{display:grid!important;place-items:center!important;z-index:5!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools button:disabled{opacity:.38!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{grid-template-rows:auto auto!important;overflow:visible!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{min-height:0!important;height:auto!important;max-height:none!important;aspect-ratio:16/9!important}
  #modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport{aspect-ratio:auto!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{max-height:52dvh!important}
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{min-height:0!important;height:auto!important;max-height:none!important;aspect-ratio:4/3!important}
  #modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport{aspect-ratio:auto!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{max-height:46dvh!important}
  .surveyPointGrid{grid-template-columns:1fr!important}
}

/* ===== v3.18.9 Survey camera intrinsic-size layout fix ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  padding:14px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  min-height:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(100%,920px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin:0 auto!important;
  background:#05090b!important;
  border:1px solid var(--ios-border,#2b3942)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:56dvh!important;
  object-fit:contain!important;
  margin:0 auto!important;
  background:#05090b!important;
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:56dvh!important;
  object-fit:contain!important;
  margin:0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,920px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px)!important;
  gap:12px!important;
  align-items:start!important;
  align-self:center!important;
  overflow:visible!important;
  padding:0!important;
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  grid-column:1/-1!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  flex:0 0 auto!important;
  margin-top:0!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
    padding:10px!important;
    gap:10px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    width:100%!important;
  }
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
    max-height:50dvh!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
    width:100%!important;
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
    max-height:44dvh!important;
  }
}

/* ===== v3.19.0 Survey camera content-driven geometry fix ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
  gap:12px!important;
  padding:14px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  --media-ratio:1.7777778;
  --media-aspect:16 / 9;
  width:min(100%,calc(56dvh * var(--media-ratio)))!important;
  max-width:920px!important;
  height:auto!important;
  min-height:0!important;
  max-height:56dvh!important;
  aspect-ratio:var(--media-aspect)!important;
  flex:0 0 auto!important;
  padding:0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,920px)!important;
  flex:0 0 auto!important;
  overflow:visible!important;
  align-self:center!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  position:relative!important;
  margin:0!important;
  max-height:none!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  margin:0!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{padding:10px!important;gap:10px!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    width:min(100%,calc(50dvh * var(--media-ratio)))!important;
    max-height:50dvh!important;
  }
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
    width:min(100%,calc(44dvh * var(--media-ratio)))!important;
    max-height:44dvh!important;
  }
  #modal.projectWizardDialog.surveyCameraAside{width:100%!important}
}

/* ===== v3.19.1 Survey camera true intrinsic layout ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  gap:10px!important;
  padding:12px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:920px!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin:0 auto!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  background:#05090b!important;
}
#modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video{
  position:relative!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:56dvh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  position:relative!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:56dvh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:100%!important;
  max-width:920px!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
  align-self:center!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  margin:0!important;
  padding-top:2px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  margin:0!important;
  padding-top:10px!important;
  position:relative!important;
  max-height:none!important;
  overflow:visible!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{max-height:50dvh!important}
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{padding:8px!important;gap:8px!important}
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{max-height:44dvh!important}
}

/* ===== v3.19.2 Survey camera fit + compact flow ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  display:block!important;
  height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  flex:none!important;
  overflow:visible!important;
  padding:12px!important;
  gap:10px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  position:relative!important;
  flex:none!important;
  min-width:0!important;
  min-height:0!important;
  max-width:calc(100% - 8px)!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#05090b!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,920px)!important;
  max-width:920px!important;
  height:auto!important;
  min-height:0!important;
  flex:none!important;
  margin:0 auto!important;
  align-self:center!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{margin:0!important;padding:0!important}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  flex:none!important;
  margin:0!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{min-height:0!important}
@media(max-width:760px){
 #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{padding:8px!important;gap:8px!important}
 #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{width:100%!important}
}

/* ===== v3.19.3 Survey camera compact geometry + draft consolidation ===== */
#modal.projectWizardDialog.surveyCameraMode{
  width:min(1040px,calc(100vw - 24px))!important;
  height:auto!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode #modalForm,
#modal.projectWizardDialog.surveyCameraMode #modalBody{
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 24px)!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  position:relative!important;
  inset:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:block!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  width:100%!important;
  max-width:940px!important;
  margin:0 auto!important;
  padding:12px 14px 8px!important;
  gap:8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  position:relative!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  flex:0 0 auto!important;
  margin:0 auto!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#05090b!important;
  overflow:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(100%,860px)!important;
  max-height:52dvh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  position:relative!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(100%,860px)!important;
  max-height:52dvh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,860px)!important;
  max-width:860px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px)!important;
  grid-template-rows:auto auto!important;
  align-content:start!important;
  align-items:start!important;
  gap:8px 12px!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  align-self:start!important;
  position:static!important;
  padding:0!important;
  background:transparent!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes{
  margin:0!important;
  align-self:start!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  grid-column:1/-1!important;
  margin:0!important;
  padding:2px 0 0!important;
  min-height:0!important;
  line-height:1.35!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  margin:0!important;
  padding:10px 14px 12px!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{
  min-height:0!important;
  padding:4px 2px 2px!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode{width:100vw!important;height:auto!important;max-height:100dvh!important;border-radius:0!important;margin:0!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{padding:8px!important;gap:8px!important}
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{max-width:100%!important;max-height:46dvh!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{width:100%!important;grid-template-columns:1fr!important;grid-template-rows:auto!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{grid-column:1!important}
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{max-height:42dvh!important}
}

/* ===== v3.19.4 Camera workspace + Dashboard width lock ===== */
/* Camera capture is a dedicated workspace. Hide the survey wizard underneath while it is open. */
#modal.projectWizardDialog.surveyCameraMode #modalBody{
  position:relative!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode #modalBody>.projectWizard{
  display:none!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 36px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin:0!important;
  padding:0!important;
  z-index:5!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  width:100%!important;
  max-width:900px!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:12px 12px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0!important;
  background:#05090b!important;
  overflow:hidden!important;
}
/* The viewport is already sized from the camera's intrinsic dimensions in JS. Fill it exactly. */
#modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:100%!important;
  max-width:900px!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px)!important;
  gap:8px 12px!important;
  align-items:start!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  grid-column:1/-1!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:10px 14px 12px!important;
  overflow:visible!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{max-width:100%!important;padding:8px!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{max-width:100%!important;grid-template-columns:1fr!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{grid-column:1!important}
}

/* Dashboard is an operations canvas; use the available page width instead of the old 1380px cap. */
#projecthome.view.active .projectHomeShell.dashboardShell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
#projecthome.view.active .dashboardMetricGrid,
#projecthome.view.active .dashboardGrid,
#projecthome.view.active .dashboardFilters{
  width:100%!important;
  max-width:none!important;
}
@media(min-width:1200px){
  #projecthome.view.active .dashboardGrid{
    grid-template-columns:minmax(0,1.55fr) minmax(360px,.65fr)!important;
  }
}

/* ===== v3.19.5 Survey camera compact centered workspace ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(100dvh - 24px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel>header{
  flex:0 0 auto!important;
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  background:var(--ios-bg,#0d1418)!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  flex:0 0 auto!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  padding:10px 12px 6px!important;
  gap:8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:44dvh!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  background:#05090b!important;
}
#modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:44dvh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  flex:0 0 auto!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(240px,.85fr)!important;
  gap:8px 12px!important;
  align-items:start!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:0!important;
  background:transparent!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes{
  margin:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes textarea{
  min-height:82px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  grid-column:1/-1!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  flex:0 0 auto!important;
  position:sticky!important;
  bottom:0!important;
  z-index:7!important;
  width:100%!important;
  min-height:92px!important;
  max-height:126px!important;
  margin:0!important;
  padding:9px 14px 10px!important;
  background:var(--ios-bg,#0d1418)!important;
  border-top:1px solid var(--ios-border,#2b3b45)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  min-height:64px!important;
  padding:4px 2px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{
  flex:0 0 82px!important;
  width:82px!important;
  height:64px!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen,
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbOpen img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  box-sizing:border-box!important;
}
@media(max-width:900px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{max-width:100%!important;padding:8px!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport,
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{max-height:40dvh!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{max-width:100%!important;grid-template-columns:1fr!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{grid-column:1!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{position:sticky!important;bottom:0!important;max-height:118px!important}
}
@media(max-width:560px){
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport,
  #modal.projectWizardDialog.surveyCameraMode:not(.markupMode) .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{max-height:36dvh!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{grid-template-columns:1fr 1fr!important}
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{flex-basis:74px!important;width:74px!important;height:58px!important}
}

/* ===== v3.19.6 Survey camera final interaction/layout lock ===== */
#modal.projectWizardDialog.surveyCameraMode{
  width:min(1040px,calc(100vw - 24px))!important;
  height:auto!important;
  max-height:calc(100dvh - 24px)!important;
}
#modal.projectWizardDialog.surveyCameraMode #modalForm,
#modal.projectWizardDialog.surveyCameraMode #modalBody{
  height:auto!important;
  min-height:0!important;
}
#modal.projectWizardDialog.surveyCameraMode #modalBody{
  overflow:auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel{
  position:relative!important;
  inset:auto!important;
  height:auto!important;
  min-height:0!important;
  display:block!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:12px 16px 8px!important;
  gap:10px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(100%,760px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0!important;
  background:#05090b!important;
  overflow:hidden!important;
  border-radius:12px!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:58dvh!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,760px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:8px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:0!important;
  background:transparent!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes{
  width:100%!important;
  margin:0!important;
  display:grid!important;
  gap:5px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes textarea{
  width:100%!important;
  min-height:72px!important;
  max-height:160px!important;
  resize:vertical!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraHint{
  margin:0!important;
  padding:0!important;
  line-height:1.35!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  position:static!important;
  min-height:0!important;
  max-height:none!important;
  padding:10px 16px 12px!important;
  margin:0!important;
  overflow:visible!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumbs{
  min-height:0!important;
  padding:6px 2px 2px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureThumb{
  flex:0 0 116px!important;
  width:116px!important;
  height:78px!important;
}
/* Photo review replaces the live camera in the same centered viewport. */
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport{
  width:min(100%,860px)!important;
  background:#05090b!important;
}
#modal.projectWizardDialog.surveyCameraMode.markupMode .surveyCameraViewport canvas{
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:62dvh!important;
}
@media(max-width:760px){
  #modal.projectWizardDialog.surveyCameraMode{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
    padding:8px!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
    width:100%!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video,
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas{
    max-height:48dvh!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
    padding:8px!important;
  }
}

/* ===== v3.19.7 Camera single-media + compact modal geometry ===== */
/* Hidden video/canvas must actually disappear. Previous generic !important display rules
   overrode the HTML hidden attribute and rendered video + canvas side-by-side. */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport video[hidden],
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport canvas[hidden],
#modal.projectWizardDialog.surveyCameraMode .surveyCameraMessage[hidden]{
  display:none!important;
}

/* Camera dialog should wrap the real working area instead of reserving desktop-width gutters. */
#modal.projectWizardDialog.surveyCameraMode{
  width:min(820px,calc(100vw - 24px))!important;
  max-width:820px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraPanel,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage,
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraStage{
  padding:12px!important;
  gap:8px!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraViewport{
  flex:none!important;
  margin-inline:auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
  width:min(100%,640px)!important;
  max-width:640px!important;
  margin-inline:auto!important;
}
#modal.projectWizardDialog.surveyCameraMode .surveyCaptureTray{
  padding:10px 16px 12px!important;
}

@media(max-width:760px){
  #modal.projectWizardDialog.surveyCameraMode{
    width:100vw!important;
    max-width:100vw!important;
  }
  #modal.projectWizardDialog.surveyCameraMode .surveyCameraAside{
    width:100%!important;
    max-width:100%!important;
  }
}

/* ===== v3.20.0 Survey Step 5 automation + camera notes cleanup ===== */
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraTools{
  border-right:0!important;border-left:0!important;box-shadow:none!important
}
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside::before,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraAside::after,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes::before,
#modal.projectWizardDialog.surveyCameraMode .surveyCameraNotes::after{display:none!important;content:none!important}

.surveyInfra{display:grid;gap:16px;font-family:var(--font-sans)}
.surveyInfraSummary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--ios-border,#2b3942);border-radius:14px;background:var(--ios-surface,#151d22)}
.surveyInfraSummary h3,.surveyInfraStatus h3,.surveyInfraCard h3{margin:2px 0 4px}.surveyInfraSummary p,.surveyInfraStatus p,.surveyInfraCard p{margin:0;color:var(--ios-muted,#91a3ae)}
.surveyInfraMetrics{display:grid;grid-template-columns:repeat(5,minmax(76px,1fr));gap:8px}.surveyInfraMetrics span{display:grid;gap:2px;min-width:78px;padding:9px 10px;border:1px solid var(--ios-border,#2b3942);border-radius:10px;background:var(--ios-surface-2,#1a242b);text-align:center;color:var(--ios-muted,#91a3ae);font-size:var(--text-body)}.surveyInfraMetrics b{font-size:var(--text-section);color:var(--ios-text,#e9f0f4)}
.surveyInfraStatus{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border:1px solid var(--ios-border,#2b3942);border-radius:12px;background:var(--ios-surface-2,#1a242b)}
.surveyInfraStatus.ready{border-color:rgba(53,180,119,.5)}.surveyInfraStatus.conditions{border-color:rgba(80,151,216,.55)}.surveyInfraStatus.review{border-color:rgba(234,180,63,.55)}.surveyInfraStatus.blocked{border-color:rgba(231,84,84,.55)}
.surveyInfraCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}.surveyInfraCard{display:grid;gap:12px;padding:15px;border:1px solid var(--ios-border,#2b3942);border-radius:13px;background:var(--ios-surface,#151d22)}
.surveyInfraCardHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.surveyInfraCardHead small{color:var(--ios-muted,#91a3ae);font-weight:var(--weight-semibold);letter-spacing:.04em}.surveyInfraDecision{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 9px;border-radius:999px;border:1px solid var(--ios-border,#2b3942);background:var(--ios-surface-2,#1a242b);font-size:var(--text-body);font-weight:var(--weight-semibold)}.surveyInfraDecision.needed{border-color:#2f8f62;color:#79d8ac}.surveyInfraDecision.not-needed{border-color:#53616a;color:#aebbc3}.surveyInfraDecision.tbd{border-color:#9b792f;color:#e7c86c}
.surveyInfraWhy{padding:11px 12px;border-radius:10px;background:var(--ios-surface-2,#1a242b);border:1px solid var(--ios-border,#2b3942)}.surveyInfraWhy b{display:block;margin-bottom:4px;font-size:var(--text-body);color:var(--ios-text,#e9f0f4)}
.surveyInfraChoices{display:flex;flex-wrap:wrap;gap:8px}.surveyInfraChoices button{min-height:34px}.surveyInfraChoices button.active{border-color:#4d8fd1!important;box-shadow:inset 0 0 0 1px rgba(77,143,209,.25)!important}
.surveyInfraCard label{display:grid;gap:6px;color:var(--ios-text,#e9f0f4);font-size:var(--text-body)}.surveyInfraCard textarea{min-height:70px}.surveyInfraNoPhotos{padding:9px 10px;border:1px dashed var(--ios-border,#2b3942);border-radius:9px;color:var(--ios-muted,#91a3ae);font-size:var(--text-body)}
.surveyInfraNotes{border:1px solid var(--ios-border,#2b3942);border-radius:12px;background:var(--ios-surface,#151d22);overflow:hidden}.surveyInfraNotes>summary{cursor:pointer;padding:13px 15px;font-weight:var(--weight-semibold)}.surveyInfraNotes[open]>summary{border-bottom:1px solid var(--ios-border,#2b3942)}.surveyInfraNotes>.surveyWizardForm{padding:14px}
html[data-theme="light"] .surveyInfraSummary,html[data-theme="light"] .surveyInfraCard,html[data-theme="light"] .surveyInfraNotes{background:#fff;border-color:#d5dde3}html[data-theme="light"] .surveyInfraMetrics span,html[data-theme="light"] .surveyInfraWhy,html[data-theme="light"] .surveyInfraStatus{background:#f5f7f9;border-color:#d5dde3}html[data-theme="light"] .surveyInfraMetrics b,html[data-theme="light"] .surveyInfraSummary h3,html[data-theme="light"] .surveyInfraCard h3,html[data-theme="light"] .surveyInfraStatus h3{color:#172229}
@media(max-width:980px){.surveyInfraSummary{grid-template-columns:1fr}.surveyInfraMetrics{grid-template-columns:repeat(5,1fr)}}
@media(max-width:700px){.surveyInfraMetrics{grid-template-columns:repeat(2,1fr)}.surveyInfraCards{grid-template-columns:1fr}.surveyInfraChoices{display:grid;grid-template-columns:repeat(2,1fr)}.surveyInfraChoices button{width:100%}}

/* v3.20.1 Step 5 structured engineering notes + typography */
.surveyInfra,.surveyInfra *,.surveyInfraNotes,.surveyInfraNotes *{font-family:var(--font-sans)!important;text-rendering:auto;-webkit-font-smoothing:auto}
.surveyInfraAdditional{padding:14px;display:grid;gap:14px}.surveyInfraCategoryGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.surveyInfraCategory{display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 11px;border:1px solid var(--ios-border,#2b3942);border-radius:10px;background:var(--ios-surface-2,#10181d);cursor:pointer;font-weight:var(--weight-semibold)}.surveyInfraCategory input{width:17px;height:17px;accent-color:#38a7ff}.surveyInfraCategory:has(input:checked){border-color:#2f8fd4;background:rgba(47,143,212,.12)}.surveyInfraAdditionalNotes textarea{min-height:120px}.surveyInfraLegacy{border-top:1px solid var(--ios-border,#2b3942);padding-top:10px}.surveyInfraLegacy>summary{cursor:pointer;font-weight:var(--weight-semibold);color:var(--ios-muted,#9fb0bb);margin-bottom:10px}html[data-theme="light"] .surveyInfraCategory{background:#f7f9fa;border-color:#d5dde3;color:#172229}html[data-theme="light"] .surveyInfraCategory:has(input:checked){background:#eef6fc;border-color:#79b8e8}
@media(max-width:700px){.surveyInfraCategoryGrid{grid-template-columns:1fr}.surveyInfraAdditional{padding:10px}}

/* ===== v3.20.2 Survey Step 6 — issue tracking ===== */
.surveyIssuesWorkspace{display:grid;gap:14px;font-family:var(--font-sans)}
.surveyIssueSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.surveyIssueSummary>div{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--ios-border,#2b3942);border-radius:12px;background:var(--ios-surface,#172127)}
.surveyIssueSummary b{font-size:var(--text-title);line-height:1;color:var(--ios-text,#e8eef2)}
.surveyIssueSummary span{font-size:var(--text-body);color:var(--ios-muted,#90a2ad)}
.surveyIssueSummary .danger{border-color:rgba(239,68,68,.45);background:rgba(127,29,29,.16)}
.surveyIssueSuggestions{display:grid;gap:10px;padding:12px;border:1px solid var(--ios-border,#2b3942);border-radius:14px;background:var(--ios-panel,#11191e)}
.surveyIssueSuggestionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.surveyIssueSuggestionGrid article{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--ios-border,#2b3942);border-radius:12px;background:var(--ios-surface,#172127)}
.surveyIssueSuggestionGrid article>div{display:grid;gap:3px;min-width:0}
.surveyIssueSuggestionGrid small{font-size:var(--text-small);letter-spacing:.05em;text-transform:uppercase;color:var(--ios-muted,#90a2ad)}
.surveyIssueSuggestionGrid b{font-size:var(--text-body);color:var(--ios-text,#e8eef2)}
.surveyIssueSuggestionGrid p{margin:0;font-size:var(--text-body);line-height:1.4;color:var(--ios-muted,#90a2ad)}
.surveyIssueCard{display:grid;gap:12px;padding:14px;border:1px solid var(--ios-border,#2b3942);border-radius:14px;background:var(--ios-surface,#172127)}
.surveyIssueCard.blocks-estimate{border-color:rgba(239,68,68,.5);box-shadow:inset 3px 0 0 rgba(239,68,68,.65)}
.surveyIssueCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.surveyIssueCardHead small{font-size:var(--text-small);letter-spacing:.07em;color:var(--ios-muted,#90a2ad)}
.surveyIssueCardHead h4{margin:3px 0 0;font-size:var(--text-body);color:var(--ios-text,#e8eef2)}
.surveyIssueBadges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.surveyIssuePriority,.surveyIssueStatus,.surveyIssueBlocker{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;font-size:var(--text-body);font-weight:var(--weight-semibold);border:1px solid var(--ios-border,#2b3942);background:var(--ios-panel,#11191e);color:var(--ios-muted,#90a2ad)}
.surveyIssueStatus.status-open{color:#93c5fd;border-color:rgba(59,130,246,.36);background:rgba(30,64,175,.12)}
.surveyIssueStatus.status-waiting{color:#fcd34d;border-color:rgba(245,158,11,.4);background:rgba(120,53,15,.16)}
.surveyIssueStatus.status-resolved{color:#6ee7b7;border-color:rgba(16,185,129,.4);background:rgba(6,78,59,.16)}
.surveyIssueStatus.status-closed{color:#94a3b8;border-color:rgba(148,163,184,.3);background:rgba(51,65,85,.16)}
.surveyIssuePriority.priority-high{color:#fbbf24;border-color:rgba(245,158,11,.45);background:rgba(120,53,15,.18)}
.surveyIssuePriority.priority-critical,.surveyIssueBlocker{color:#fca5a5;border-color:rgba(239,68,68,.48);background:rgba(127,29,29,.18)}
.surveyIssuePriority.priority-low{color:#93c5fd;border-color:rgba(59,130,246,.36);background:rgba(30,64,175,.12)}
.surveyIssueGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.surveyIssueToggle{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:4px 9px;padding:10px 12px;border:1px solid var(--ios-border,#2b3942);border-radius:10px;background:var(--ios-panel,#11191e)}
.surveyIssueToggle input{grid-row:1/3;width:18px!important;height:18px!important;margin:0!important}
.surveyIssueToggle span{font-size:var(--text-body);font-weight:var(--weight-semibold);color:var(--ios-text,#e8eef2)}
.surveyIssueToggle small{font-size:var(--text-body);line-height:1.35;color:var(--ios-muted,#90a2ad)}
.surveyIssueEvidence{display:grid;gap:9px;padding:12px;border:1px solid var(--ios-border,#2b3942);border-radius:12px;background:var(--ios-panel,#11191e)}
.surveyIssueEvidenceHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.surveyIssueEvidenceHead>div{display:grid;gap:2px}.surveyIssueEvidenceHead small{font-size:var(--text-small);letter-spacing:.06em;color:var(--ios-muted,#90a2ad)}.surveyIssueEvidenceHead b{font-size:var(--text-body);color:var(--ios-text,#e8eef2)}
.surveyIssuePhotos{display:flex;flex-wrap:wrap;gap:8px}
.surveyIssueNoPhotos{padding:10px;border:1px dashed var(--ios-border,#2b3942);border-radius:9px;color:var(--ios-muted,#90a2ad);font-size:var(--text-body)}
.surveyIssueExisting{border-top:1px solid var(--ios-border,#2b3942);padding-top:8px}
.surveyIssueExisting summary{cursor:pointer;font-size:var(--text-body);font-weight:var(--weight-semibold);color:var(--ios-text,#e8eef2)}
.surveyIssueExistingGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:9px}
.surveyIssueExistingGrid label{position:relative;display:grid;gap:5px;padding:6px;border:1px solid var(--ios-border,#2b3942);border-radius:9px;background:var(--ios-surface,#172127);cursor:pointer}
.surveyIssueExistingGrid input{position:absolute;top:8px;left:8px;z-index:2;width:16px!important;height:16px!important;margin:0!important}
.surveyIssueExistingGrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#0b1115}
.surveyIssueExistingGrid span{font-size:var(--text-small);line-height:1.25;color:var(--ios-muted,#90a2ad);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surveyIssueActions{display:flex;justify-content:flex-end}
@media(max-width:900px){.surveyIssueSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.surveyIssueSuggestionGrid{grid-template-columns:1fr}}
@media(max-width:760px){.surveyIssueGrid{grid-template-columns:1fr}.surveyIssueCardHead,.surveyIssueEvidenceHead{align-items:flex-start;flex-direction:column}.surveyIssueBadges{justify-content:flex-start}.surveyIssueSummary{grid-template-columns:1fr 1fr}.surveyIssueSuggestionGrid article{flex-direction:column}.surveyIssueSuggestionGrid article button{width:100%}}
html[data-theme="light"] .surveyIssueSummary>div,html[data-theme="light"] .surveyIssueSuggestions,html[data-theme="light"] .surveyIssueSuggestionGrid article,html[data-theme="light"] .surveyIssueCard,html[data-theme="light"] .surveyIssueToggle,html[data-theme="light"] .surveyIssueEvidence,html[data-theme="light"] .surveyIssueExistingGrid label{background:#fff!important;border-color:#cbd6dd!important;color:#17252d!important}
html[data-theme="light"] .surveyIssueCardHead h4,html[data-theme="light"] .surveyIssueSuggestionGrid b,html[data-theme="light"] .surveyIssueToggle span,html[data-theme="light"] .surveyIssueEvidenceHead b,html[data-theme="light"] .surveyIssueExisting summary{color:#17252d!important}
html[data-theme="light"] .surveyIssueSummary b{color:#17252d!important}

/* v3.20.5 — Survey Review & Handoff */
.surveyReviewFinal{font-family:var(--font-sans)}
.surveyHandoffMetrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.surveyHandoffMetrics>div{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:10px;padding:12px;display:grid;gap:2px}
.surveyHandoffMetrics b{font-size:var(--text-title)}.surveyHandoffMetrics span{font-size:var(--text-body);color:var(--ios-muted,#90a2ad)}
.surveyHandoffMetrics .danger{border-color:#9a4242;background:#28191b}.surveyHandoffMetrics .danger b{color:#ff7777}
.surveyReviewColumns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.surveyReviewColumns>section,.surveyReviewNotes{background:var(--ios-surface,#172127);border:1px solid var(--ios-border,#2b3942);border-radius:10px;padding:13px}
.surveyReviewSectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.surveyReviewSectionHead small{display:block;color:var(--ios-muted,#90a2ad);font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:.06em}
.surveyReviewSectionHead b{display:block;margin-top:2px}.surveyReviewSectionHead>span{font-size:var(--text-body);color:var(--ios-muted,#90a2ad)}
.surveyReviewFacts{display:grid;gap:9px}.surveyReviewFacts>div{border-top:1px solid var(--ios-border,#2b3942);padding-top:8px}
.surveyReviewFacts>div:first-child{border-top:0;padding-top:0}.surveyReviewFacts span{font-size:var(--text-body);color:var(--ios-muted,#90a2ad)}
.surveyReviewFacts p{margin:3px 0 0;white-space:pre-wrap}
.surveyReviewChips{display:flex;flex-wrap:wrap;gap:7px}.surveyReviewChips span{border:1px solid #34505f;background:#1b2a32;border-radius:999px;padding:5px 9px;font-size:var(--text-body)}
.surveyReviewMeta{margin:10px 0 0;color:var(--ios-muted,#90a2ad);font-size:var(--text-body)}.surveyReviewEmpty{color:var(--ios-muted,#90a2ad);font-size:var(--text-body);padding:8px 0}
.surveyReviewList{display:grid;gap:7px}.surveyReviewList>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;border-top:1px solid var(--ios-border,#2b3942);padding-top:7px}
.surveyReviewList>div:first-child{border-top:0;padding-top:0}.surveyReviewList p{margin:0}.surveyReviewList p b,.surveyReviewList p small{display:block}
.surveyReviewList p small{color:var(--ios-muted,#90a2ad);margin-top:2px}.surveyReviewList em{font-style:normal;font-size:var(--text-small);color:#ff8585}
.surveyHandoffChecklist{display:grid;gap:7px}.surveyHandoffChecklist span{padding:8px 9px;border-radius:8px;border:1px solid var(--ios-border,#2b3942);font-size:var(--text-body)}
.surveyHandoffChecklist .done{color:#76dfa6;background:#13261d;border-color:#2c6043}.surveyHandoffChecklist .pending{color:#efbd78;background:#2b2115;border-color:#66502e}
.surveyReviewNotes textarea{width:100%;min-height:90px}.surveyReviewActions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.surveyMissing .surveyReviewSectionHead{margin-bottom:8px}
html[data-theme="light"] .surveyHandoffMetrics>div,html[data-theme="light"] .surveyReviewColumns>section,html[data-theme="light"] .surveyReviewNotes{background:#fff;border-color:#cbd6dd;color:#17252d}
html[data-theme="light"] .surveyReviewChips span{background:#f3f7f9;border-color:#cbd6dd;color:#263943}
html[data-theme="light"] .surveyReviewFacts>div,html[data-theme="light"] .surveyReviewList>div{border-color:#d8e1e6}
html[data-theme="light"] .surveyHandoffChecklist .done{background:#eef9f2;border-color:#a8d6b9;color:#28744a}
html[data-theme="light"] .surveyHandoffChecklist .pending{background:#fff7eb;border-color:#e1bd88;color:#93601d}
@media(max-width:980px){.surveyHandoffMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.surveyReviewColumns{grid-template-columns:1fr}}
@media(max-width:600px){.surveyHandoffMetrics{grid-template-columns:1fr 1fr}.surveyReviewActions{display:grid}.surveyReviewActions button{width:100%}}

/* v3.20.6 — Review & Handoff deep links */
.surveyHandoffMetrics>button{appearance:none;text-align:left;font:inherit;color:inherit;background:var(--surface-2,#18232b);border:1px solid var(--border,#34434d);border-radius:12px;padding:14px;cursor:pointer;min-width:0;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.surveyHandoffMetrics>button:hover,.surveyReviewClickable:hover,.surveyReviewSectionHeadLink:hover{border-color:var(--accent,#22a7f0);box-shadow:0 8px 18px rgba(0,0,0,.18);transform:translateY(-1px)}
.surveyHandoffMetrics>button small{display:block;margin-top:4px;color:var(--accent,#53b9f6);font-size:var(--text-body)}
.surveyHandoffMetrics>button.danger{border-color:rgba(239,68,68,.55)}
.surveyReviewClickable,.surveyReviewSectionHeadLink{cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.surveyMissingLinks{display:grid;gap:8px;margin-top:10px}
.surveyMissingLinks>button,.surveyReviewIssueLink,.surveyReviewMore{width:100%;display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:inherit;background:var(--surface-2,#18232b);border:1px solid var(--border,#34434d);border-radius:10px;padding:10px 12px;cursor:pointer}
.surveyMissingLinks>button{justify-content:space-between}
.surveyMissingLinks>button i,.surveyReviewIssueLink>i{margin-left:auto;color:var(--accent,#53b9f6);font-style:normal;white-space:nowrap}
.surveyReviewIssueLink p{margin:0;display:grid;gap:2px;flex:1}.surveyReviewIssueLink p small{color:var(--muted,#98a6b3)}
.surveyReviewIssueLink em{color:#ff7777;font-style:normal;font-size:var(--text-body);white-space:nowrap}
.surveyReviewMore{justify-content:center;color:var(--accent,#53b9f6)}
.surveyReviewTarget{outline:2px solid var(--accent,#22a7f0)!important;outline-offset:4px;box-shadow:0 0 0 5px rgba(34,167,240,.12)!important}
@media(max-width:760px){.surveyHandoffMetrics>button small{font-size:var(--text-body)}.surveyReviewIssueLink{align-items:flex-start;flex-wrap:wrap}.surveyReviewIssueLink>i{width:100%;margin-left:0}.surveyMissingLinks>button{align-items:flex-start;gap:8px}}

/* v3.20.8 — Step 2 synchronized survey checklist */
.surveyGuideChecks{gap:7px}
.surveyGuideCheck{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:start;padding:7px 8px;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.surveyGuideCheck:hover{background:rgba(75,165,215,.06);border-color:var(--ios-border,#2b3942)}
.surveyGuideCheck input{position:absolute;opacity:0;pointer-events:none}
.surveyGuideCheckBox{width:20px;height:20px;border:1px solid #426276;border-radius:6px;background:var(--ios-surface-2,#111b21);display:grid;place-items:center;margin-top:1px}
.surveyGuideCheck.checked .surveyGuideCheckBox{border-color:#19b978;background:rgba(25,185,120,.14)}
.surveyGuideCheck.checked .surveyGuideCheckBox:after{content:'✓';font-family:var(--font-sans);font-size:13px;font-weight:var(--weight-semibold);color:#48d99d;line-height:1}
.surveyGuideCheckText{font-family:var(--font-sans);font-size:var(--text-body);line-height:1.35;color:#bfccd3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:2px}
.surveyGuideCheckText small{font-size:var(--text-small);letter-spacing:.02em;text-transform:uppercase;color:#7fc9ef}
html[data-theme="light"] .surveyGuideCheckBox{background:#fff;border-color:#aebfca}
html[data-theme="light"] .surveyGuideCheckText{color:#263944}
html[data-theme="light"] .surveyGuideCheck.checked .surveyGuideCheckBox{background:#e8f8f1;border-color:#159b67}

/* ===== v3.20.9 Step 2 — Site & Existing Conditions ===== */
.surveyStep2Workspace{display:grid;gap:18px}
.surveyStep2Intro,.surveyStep2Notes{grid-template-columns:1fr}
.surveySiteConditions{display:grid;gap:14px;padding:16px;border:1px solid var(--ios-border,#2b3942);border-radius:14px;background:var(--ios-surface,#151d22)}
.surveySiteConditionsHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.surveySiteConditionsHead>div{display:grid;gap:3px}.surveySiteConditionsHead small{color:var(--ios-muted,#8fa0aa);font-size:var(--text-small);letter-spacing:.08em}.surveySiteConditionsHead h3{margin:0;font-size:var(--text-section)}.surveySiteConditionsHead p{margin:0;color:var(--ios-muted,#8fa0aa);font-size:var(--text-body)}.surveySiteConditionsHead>span{white-space:nowrap;border:1px solid var(--ios-border,#2b3942);border-radius:999px;padding:5px 9px;color:var(--ios-muted,#8fa0aa);font-size:var(--text-body)}
.surveySiteConditionGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.surveySiteConditionChoice{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;align-items:center;min-height:42px;padding:8px 10px;border:1px solid var(--ios-border,#2b3942);border-radius:10px;background:var(--ios-surface-2,#111b21);cursor:pointer;transition:.15s ease}
.surveySiteConditionChoice:hover{border-color:#426276;transform:translateY(-1px)}.surveySiteConditionChoice input{position:absolute;opacity:0;pointer-events:none}.surveySiteConditionChoice b{font-size:var(--text-body);font-weight:var(--weight-regular);line-height:1.25}.surveySiteConditionBox{width:18px;height:18px;border-radius:5px;border:1px solid #496779;display:grid;place-items:center}.surveySiteConditionChoice.selected{border-color:#1b7cab;background:rgba(30,136,190,.08)}.surveySiteConditionChoice.selected .surveySiteConditionBox{border-color:#22a0d6;background:rgba(34,160,214,.14)}.surveySiteConditionChoice.selected .surveySiteConditionBox:after{content:'✓';font-size:12px;font-weight:var(--weight-semibold);color:#7bd6ff}
.surveySiteConditionDetails{display:grid;gap:12px}.surveySiteConditionCard{display:grid;gap:12px;padding:14px;border:1px solid var(--ios-border,#2b3942);border-radius:12px;background:var(--ios-surface-2,#111b21)}
.surveySiteConditionCardHead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.surveySiteConditionCardHead>div{display:grid;gap:3px}.surveySiteConditionCardHead small{font-size:var(--text-small);letter-spacing:.08em;color:var(--ios-muted,#8fa0aa)}.surveySiteConditionCardHead h4{margin:0;font-size:var(--text-body)}.surveySiteConditionCardHead p{margin:0;color:var(--ios-muted,#8fa0aa);font-size:var(--text-body)}.surveySiteConditionCardHead button{white-space:nowrap}
.surveySiteConditionForm{display:grid;grid-template-columns:1fr 1fr;gap:10px}.surveySiteConditionForm .full{grid-column:1/-1}.surveySiteConditionForm label{display:grid;gap:5px;font-size:var(--text-body)}.surveySiteConditionForm input,.surveySiteConditionForm textarea{width:100%}.surveySiteConditionForm textarea{min-height:72px;resize:vertical}
.surveySiteConditionPhotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,150px));gap:8px}.surveySiteConditionNoPhotos{padding:10px 12px;border:1px dashed var(--ios-border,#2b3942);border-radius:9px;color:var(--ios-muted,#8fa0aa);font-size:var(--text-body)}
html[data-theme="light"] .surveySiteConditions,html[data-theme="light"] .surveySiteConditionCard,html[data-theme="light"] .surveySiteConditionChoice{background:#fff;border-color:#cad5dc}html[data-theme="light"] .surveySiteConditionChoice.selected{background:#eef8fd;border-color:#4d9fc5}html[data-theme="light"] .surveySiteConditionChoice b{color:#1e313d}
@media(max-width:1180px){.surveySiteConditionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.surveySiteConditionGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.surveySiteConditionCardHead{display:grid}.surveySiteConditionCardHead button{justify-self:start}.surveySiteConditionForm{grid-template-columns:1fr}.surveySiteConditionForm .full{grid-column:auto}}
@media(max-width:560px){.surveySiteConditionGrid{grid-template-columns:1fr}.surveySiteConditions{padding:12px}.surveySiteConditionsHead{display:grid}.surveySiteConditionsHead>span{justify-self:start}}


/* =========================================================
   v3.20.10 — survey identity cleanup + dashboard spacing polish
   ========================================================= */
/* Dashboard title starts directly at the content top; the legacy WORKSPACE
   eyebrow was removed from markup. Keep the heading compact with no ghost gap. */
#projecthome.view.active .projectHomeHead{
  min-height:0!important;
  padding:2px 0 10px!important;
  margin:0 0 2px!important;
  align-items:flex-start!important;
}
#projecthome.view.active .projectHomeHead>div:first-child{margin:0!important;padding:0!important}
#projecthome.view.active .projectHomeHead h2{margin:0!important}
#projecthome.view.active .projectHomeHead p{margin:4px 0 0!important}

/* Put the sidebar scrollbar against the outer divider instead of visually
   floating beside the nav labels. WebKit uses a tiny transparent left border
   on the thumb to bias the visible track toward the right edge. */
.contextNav371 #mainNav,
body.compactNav .contextNav371 #mainNav{
  width:calc(100% + 4px)!important;
  margin-right:-4px!important;
  padding-right:4px!important;
  box-sizing:border-box!important;
  scrollbar-gutter:stable!important;
}
.contextNav371 #mainNav::-webkit-scrollbar,
body.compactNav .contextNav371 #mainNav::-webkit-scrollbar{width:7px!important}
.contextNav371 #mainNav::-webkit-scrollbar-thumb,
body.compactNav .contextNav371 #mainNav::-webkit-scrollbar-thumb{
  border-left:2px solid transparent!important;
  border-right:0!important;
  background-clip:padding-box!important;
}


/* v3.21.0 foundation stabilization */
#appShell[hidden], #loginScreen[hidden]{display:none !important;}
.surveyReqNoSystems{padding:22px;border:1px solid var(--border,#33434f);border-radius:14px;background:var(--panel,#151d23);display:grid;gap:10px;justify-items:start}
.projectWizardStepDot.inProgress span{box-shadow:inset 0 0 0 2px rgba(56,189,248,.55)}
.projectWizardStepDot.blocked span{background:#5b1f27 !important;border-color:#ef4444 !important;color:#fecaca !important}


/* v3.21.0 foundation stabilization */
#appShell[hidden], #loginScreen[hidden]{display:none !important;}
.surveyReqNoSystems{padding:22px;border:1px solid var(--border,#33434f);border-radius:14px;background:var(--panel,#151d23);display:grid;gap:10px;justify-items:start}
.projectWizardStepDot.inProgress span{box-shadow:inset 0 0 0 2px rgba(56,189,248,.55)}
.projectWizardStepDot.blocked span{background:#5b1f27 !important;border-color:#ef4444 !important;color:#fecaca !important}

/* ===== v3.21.1 — project selector overlay hardening ===== */
.globalUtilityHeader{z-index:10020!important;overflow:visible!important}
.globalUtilityHeader>.headerProjectPicker{z-index:10030!important;overflow:visible!important}
.globalUtilityHeader .headerProjectControl{position:relative!important;z-index:10031!important;overflow:visible!important}
.globalUtilityHeader .headerProjectMenu{z-index:10040!important;max-height:min(420px,calc(100vh - 90px))!important}
.workflowPageFooter{z-index:30!important}
.planStatusBar{z-index:25!important}

/* ===== v3.22.0 — Estimate Intelligence ===== */
.estimateWorkspace{display:grid;gap:18px}
.estimateCard{border:1px solid var(--border,#31414e);border-radius:16px;background:var(--panel,#151d23);padding:18px;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.estimateCardHead{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.estimateTitleLine{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.estimateTitleLine h3{margin:0}.estimateTitleLine>span{font-size:var(--text-body);color:var(--muted,#95a7b4)}
.estimateStatus{padding:4px 9px;border-radius:999px;border:1px solid var(--border,#3b4c58);background:rgba(255,255,255,.035);font-weight:var(--weight-semibold);color:var(--text,#e6edf3)!important}
.estimateStatus.approved{border-color:#22c55e;color:#86efac!important}.estimateStatus.sent,.estimateStatus.customer-review{border-color:#38bdf8;color:#7dd3fc!important}.estimateStatus.declined{border-color:#ef4444;color:#fca5a5!important}.estimateStatus.superseded{opacity:.68}
.estimateSurveyLink{margin-top:9px;display:grid;gap:2px;padding:9px 11px;border-left:3px solid #0ea5e9;background:rgba(14,165,233,.07);border-radius:0 8px 8px 0}.estimateSurveyLink b{font-size:var(--text-body);text-transform:uppercase;letter-spacing:.08em}.estimateSurveyLink span{font-size:var(--text-body)}.estimateSurveyLink small{color:var(--muted,#93a4b0)}.estimateSurveyLink.override{border-left-color:#f59e0b;background:rgba(245,158,11,.08)}
.estimateMetrics{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;margin:12px 0 16px}.estimateMetrics>div{border:1px solid var(--border,#31414e);border-radius:12px;padding:11px 13px;background:var(--surface2,#11191f);display:grid;gap:3px}.estimateMetrics b{font-size:var(--text-section)}.estimateMetrics span{font-size:var(--text-body);color:var(--muted,#91a1ad);text-transform:uppercase;letter-spacing:.05em}
.estimateCommercialNotes{margin:7px 0;border:1px solid var(--border,#31414e);border-radius:10px;padding:9px 11px}.estimateCommercialNotes summary{cursor:pointer;font-weight:var(--weight-semibold)}.estimateCommercialNotes p{white-space:pre-wrap;margin:8px 0 0;color:var(--muted,#a8b5bd)}
.estimateLineType{display:block;font-weight:var(--weight-semibold)}.estimateLineType+small,.estimateCard table td small{display:block;color:var(--muted,#8fa1ad);margin-top:3px}.estimateWhy{color:#7dd3fc!important;max-width:480px}
.estimateCreate{display:grid;gap:14px}.estimateSurveySummary{border:1px solid var(--border,#31414e);border-radius:12px;padding:12px 14px;display:grid;gap:6px}.estimateSurveySummary.ready{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.06)}.estimateSurveySummary.notReady{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.06)}.estimateSurveySummary>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.estimateSurveySummary p{margin:0;color:var(--muted,#9dafb9)}
.estimateLineBuilder{display:grid;gap:14px}.estimateLineSource,.estimateProductFinder,.estimateAccessories{border:1px solid var(--border,#31414e);border-radius:14px;background:var(--surface2,#11191f);padding:14px}.estimateLineSource{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.4fr);gap:14px;align-items:end}.estimateLineSource>div{display:grid;gap:4px}.estimateLineSource small,.estimateFinderHead small{font-size:var(--text-small);letter-spacing:.09em;color:var(--muted,#8fa0ac)}.estimateLineSource span{color:var(--muted,#9dabb4);font-size:var(--text-body)}
.estimateFinderHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}.estimateFinderHead h3{margin:2px 0 0}.estimateFinderHead>span{font-size:var(--text-body);color:var(--muted,#91a4af);max-width:420px;text-align:right}
.estimateFilterGrid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px}.estimateFilterGrid .wide{grid-column:auto}.estimateFilterGrid label:last-child{grid-column:1/-1}
.estimateCommercialLine{padding:2px}.estimateAccessories{min-height:72px}.estimateRecHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.estimateRecHead>div{display:grid;gap:3px}.estimateRecHead span{font-size:var(--text-body);color:var(--muted,#91a3ae)}.estimateRecGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.estimateRecItem{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:10px!important;align-items:start!important;border:1px solid var(--border,#31414e);border-radius:11px;padding:10px!important;background:rgba(255,255,255,.025)}.estimateRecItem input{margin-top:3px}.estimateRecItem span{display:grid;gap:2px}.estimateRecItem small{color:var(--muted,#8fa1ad)}.estimateRecItem em{font-size:var(--text-body);color:#7dd3fc;font-style:normal;margin-top:3px}.estimateRecItem strong{white-space:nowrap}.estimateRecEmpty,.estimateAssemblyHint{color:var(--muted,#91a4af);font-size:var(--text-body);padding:8px}
.estimateDialog{width:min(980px,96vw)!important}.estimateLineDialog{width:min(1120px,97vw)!important}
@media(max-width:900px){.estimateMetrics{grid-template-columns:repeat(2,minmax(120px,1fr))}.estimateCardHead{display:grid}.estimateLineSource{grid-template-columns:1fr}.estimateFilterGrid{grid-template-columns:1fr 1fr}.estimateFilterGrid .wide{grid-column:1/-1}.estimateRecGrid{grid-template-columns:1fr}}
@media(max-width:600px){.estimateMetrics{grid-template-columns:1fr 1fr}.estimateFilterGrid{grid-template-columns:1fr}.estimateFilterGrid .wide{grid-column:auto}.estimateCard{padding:12px}.estimateCard .rowActions{flex-wrap:wrap}.estimateLineDialog,.estimateDialog{width:100vw!important;max-width:100vw!important;margin:0!important;border-radius:0!important}}

/* ===== v3.22.1 — Estimate approval, inventory allocation & supplier sourcing ===== */

/* ===== v3.22.3 — immutable build identity and Project Wizard review ===== */
.buildVersion{display:inline-flex!important;font-size:var(--text-small)!important;line-height:1!important;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.authBrand .buildVersion{margin-top:5px}
.contextNav371 .brand .buildVersion{margin-left:6px;padding:4px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel2)}
.projectWizardReview{display:grid;gap:16px}
.projectReviewGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.projectReviewGrid section,.projectReviewLists section,.projectReviewDescription{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.projectReviewGrid small,.projectReviewLists small,.projectReviewDescription small{display:block;margin-bottom:7px;color:var(--muted);font-weight:var(--weight-semibold);letter-spacing:.07em}
.projectReviewGrid h3{margin:0 0 5px}.projectReviewGrid p,.projectReviewDescription p{margin:0 0 5px}
.projectReviewLists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.projectReviewLists ul{margin:8px 0 0;padding-left:20px}
.projectReviewChips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.projectReviewChips span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
@media(max-width:720px){.projectReviewGrid,.projectReviewLists{grid-template-columns:1fr}}
.estimateSourcingBox{margin-top:12px;border:1px solid var(--border,#31414e);border-radius:12px;padding:11px 13px;background:rgba(14,165,233,.045);display:grid;gap:8px}
.estimateSourcingBox>div:first-child{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.estimateSourcingBox span,.estimateSourcingBox small{color:var(--muted,#94a7b2);font-size:var(--text-body)}.estimateSupplierPills{display:flex;flex-wrap:wrap;gap:7px}.estimateSupplierPills>span{border:1px solid var(--border,#31414e);border-radius:999px;padding:5px 9px;background:var(--surface2,#11191f)}.estimateSupplierPills>span.preferred{border-color:rgba(34,197,94,.55);color:#86efac}
.estimateApprovalNotice,.estimateProcurementSummary{border:1px solid rgba(56,189,248,.38);background:rgba(56,189,248,.06);border-radius:11px;padding:10px 12px;display:grid;gap:4px}.estimateApprovalNotice span,.estimateProcurementSummary span,.estimateProcurementSummary small{font-size:var(--text-body);color:var(--muted,#9eb0ba)}
.estimateProcurementSummary{margin:10px 0 14px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 18px}.estimateProcurementSummary b{white-space:nowrap}.estimateProcurementSummary small{text-align:right}
#procurementBody table td small{display:block;color:var(--muted,#91a4af);margin-top:3px}
@media(max-width:760px){.estimateProcurementSummary{grid-template-columns:1fr}.estimateProcurementSummary small{text-align:left}.estimateSourcingBox>div:first-child{display:grid}}

/* ===== v3.23.0 Typography, Estimator Wizard & Commercial Settings ===== */
:root{font-family:var(--font-sans);font-size:16px;line-height:1.45;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:var(--text-body);letter-spacing:0;color:#eef6f9}button,input,select,textarea{font:inherit;font-size:var(--text-body);line-height:1.35}button{min-height:38px;padding:8px 12px;font-weight:var(--weight-semibold)}small{font-size:var(--text-body);line-height:1.4;color:#9bb0b9}
.navBtn{font-size:var(--text-body);min-height:42px;padding:9px 10px}.navSection{font-size:var(--text-small);line-height:1.3}.brand b{font-size:var(--text-section)}.brand small,.brand span{font-size:var(--text-body)!important}.pageHead h2{font-size:var(--text-title);line-height:1.2}.pageHead p{font-size:var(--text-body)}.content{padding:22px}
table{font-size:var(--text-body);line-height:1.4}th{font-size:var(--text-body);letter-spacing:.06em;padding:11px 10px;color:#9bb4be}td{padding:12px 10px}.metric span,.estimateMetrics span{font-size:var(--text-body)}.estimateLineType{font-size:var(--text-body)}.estimateWhy{font-size:var(--text-body);line-height:1.4}
.estimateCardHead{align-items:flex-start}.estimateActions{justify-content:flex-end;max-width:760px}.estimateActions button{font-size:var(--text-body);min-height:36px}.estimateWizard{display:grid;gap:16px}.estimateWizardSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.estimateWizardSteps button{background:#0a2029;border-color:#244755;color:#9eb4bd}.estimateWizardSteps button.active{background:#1d607e;border-color:#65b9d8;color:white}.estimateWizardPanel{display:none;min-height:360px}.estimateWizardPanel.active{display:block}.estimateWizardPanelHead{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #29434e}.estimateWizardPanelHead small{letter-spacing:.1em}.estimateWizardPanelHead h3{font-size:var(--text-title);margin:3px 0}.estimateWizardNav{display:flex;justify-content:space-between;border-top:1px solid #29434e;padding-top:12px}.estimateWizardReview{display:grid;gap:12px;padding:18px;background:#0a2029;border:1px solid #294b59;border-radius:12px}.estimateWizardReview>b{font-size:var(--text-section)}.estimateFinishActions{display:grid;gap:7px}.estimateFinishActions span{padding:10px;background:#071820;border-radius:7px}.approvalLinkResult{display:grid;gap:12px}.approvalLinkResult b{font-size:var(--text-section)}
.commercialSettingsDialog{width:min(980px,96vw)}.commercialSettingsTabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.commercialSettingsTabs section{padding:14px;background:#091b23;border:1px solid #284652;border-radius:10px}.commercialSettingsTabs h3{margin-top:0}.commercialSettingsCard{grid-column:auto}
@media(max-width:1050px){.estimateCardHead{display:grid}.estimateActions{justify-content:flex-start}.commercialSettingsTabs{grid-template-columns:1fr}.commercialSettingsCard{grid-column:auto}}@media(max-width:700px){:root{font-size:16px}body{font-size:var(--text-body)}.content{padding:12px}.estimateWizardSteps{grid-template-columns:1fr 1fr}table{font-size:var(--text-body)}}

/* ===== v3.24.0 — Survey to BOM automation ===== */
.surveyBomDialog{width:min(1180px,97vw)!important}.surveyBomIntro{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 16px;margin-bottom:12px;border:1px solid rgba(56,189,248,.42);border-radius:13px;background:rgba(56,189,248,.06)}.surveyBomIntro small{letter-spacing:.1em}.surveyBomIntro h3{margin:2px 0 3px;font-size:var(--text-section)}.surveyBomIntro p{margin:0;color:var(--muted,#9eb0ba)}.surveyBomIntro>span{white-space:nowrap;padding:6px 10px;border:1px solid var(--border,#31414e);border-radius:999px;color:var(--muted,#9eb0ba)}
.surveyBomRows{display:grid;gap:11px}.surveyBomRow{display:grid;gap:11px;padding:14px;border:1px solid var(--border,#31414e);border-radius:13px;background:var(--surface2,#11191f)}.surveyBomRow.duplicate{opacity:.65}.surveyBomRow header{display:flex;justify-content:space-between;gap:14px;align-items:center}.surveyBomRow header label{display:flex;gap:10px;align-items:center}.surveyBomRow header label span{display:grid;gap:2px}.surveyBomRow header small{color:var(--muted,#9eb0ba)}.surveyBomRow header strong{font-size:var(--text-body);color:#7dd3fc}.surveyBomRow.duplicate header strong{color:#fbbf24}.surveyBomFilters{display:grid;grid-template-columns:1fr 1fr 2fr 110px;gap:9px}.surveyBomFilters label{display:grid;gap:5px;font-size:var(--text-body)}.surveyBomDetail{display:grid;grid-template-columns:105px 105px 130px minmax(160px,1fr) minmax(260px,2fr);gap:8px}.surveyBomDetail>span,.surveyBomDetail>p{margin:0;padding:9px 10px;border:1px solid var(--border,#31414e);border-radius:9px;background:rgba(255,255,255,.025)}.surveyBomDetail>span{display:grid;gap:2px}.surveyBomDetail>span small{font-size:var(--text-small);text-transform:uppercase;letter-spacing:.05em}.surveyBomDetail>p{color:var(--muted,#a5b5bd);font-size:var(--text-body)}.surveyBomWarning{grid-column:1/-1;color:#fbbf24!important}
@media(max-width:900px){.surveyBomFilters{grid-template-columns:1fr 1fr}.surveyBomFilters .wide{grid-column:1/-1}.surveyBomDetail{grid-template-columns:1fr 1fr}.surveyBomDetail>p{grid-column:1/-1}}@media(max-width:560px){.surveyBomDialog{width:100vw!important;max-width:100vw!important;margin:0!important;border-radius:0!important}.surveyBomIntro,.surveyBomRow header{display:grid}.surveyBomIntro>span{justify-self:start}.surveyBomFilters,.surveyBomDetail{grid-template-columns:1fr}.surveyBomFilters .wide,.surveyBomDetail>p{grid-column:auto}}

/* ===== v3.25.0 — approved equipment engineering release ===== */
button:disabled{opacity:.38!important;cursor:not-allowed!important;filter:saturate(.35)}.estimateActions .engineeringReleaseAction{border-color:#22a7df;box-shadow:inset 0 0 0 1px rgba(34,167,223,.16)}
.engineeringReleaseDialog{width:min(1000px,96vw)!important}.engineeringRelease{display:grid;gap:14px}.engineeringReleaseHead{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:15px;border:1px solid rgba(34,197,94,.42);border-radius:13px;background:rgba(34,197,94,.055)}.engineeringReleaseHead small{letter-spacing:.1em}.engineeringReleaseHead h3{margin:3px 0;font-size:var(--text-section)}.engineeringReleaseHead p{margin:0;color:var(--muted,#9eb0ba)}.engineeringReleaseHead strong{padding:6px 10px;border:1px solid #22c55e;border-radius:999px;color:#86efac}.engineeringRouteGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.engineeringRouteCard{display:grid;gap:3px;text-align:left;min-height:112px;padding:13px;background:var(--surface2,#11191f)}.engineeringRouteCard>b{font-size:var(--text-title);color:#7dd3fc}.engineeringRouteCard>span{font-weight:var(--weight-semibold)}.engineeringRouteCard>small{font-weight:var(--weight-regular);color:var(--muted,#9eb0ba)}.engineeringReleaseLines{border:1px solid var(--border,#31414e);border-radius:13px;padding:14px}.engineeringReleaseLines h3{margin:0 0 8px}.engineeringReleaseLines>div{display:flex;justify-content:space-between;gap:15px;padding:9px 2px;border-top:1px solid var(--border,#31414e)}.engineeringReleaseLines>div span{display:grid}.engineeringReleaseLines small{color:var(--muted,#9eb0ba)}.engineeringReleaseNote{margin:0;padding:11px 13px;border-left:3px solid #38bdf8;background:rgba(56,189,248,.055);color:var(--muted,#9eb0ba)}@media(max-width:760px){.engineeringRouteGrid{grid-template-columns:1fr 1fr}.engineeringReleaseHead{display:grid}}@media(max-width:480px){.engineeringRouteGrid{grid-template-columns:1fr}}

/* ===== v3.25.2 — approved equipment queue in Plan Studio ===== */
.engineeringPlanEmpty{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr);gap:16px}.engineeringPlanEmpty>section{background:var(--panel,#10232c);border:1px solid var(--border,#294652);border-radius:14px;padding:22px}.engineeringPlanEmpty h2{margin:7px 0}.engineeringPlanEmpty p{color:var(--muted,#91a8b3);margin:0 0 18px}.engineeringEquipmentQueue{background:var(--panel,#10232c);border:1px solid var(--border,#294652);border-radius:14px;padding:14px}.engineeringEquipmentQueue.compact{margin-top:12px}.engineeringQueueStats{display:flex;gap:10px;margin:10px 0}.engineeringQueueStats span{flex:1;background:rgba(8,20,27,.5);border:1px solid var(--border,#294652);border-radius:8px;padding:8px;font-size:var(--text-body)}.engineeringQueueList{display:flex;flex-direction:column;gap:7px;max-height:360px;overflow:auto}.engineeringQueueItem{display:grid;grid-template-columns:30px 1fr auto;align-items:center;text-align:left;gap:9px;width:100%;padding:9px}.engineeringQueueItem>span svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7}.engineeringQueueItem div{min-width:0}.engineeringQueueItem b,.engineeringQueueItem small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.engineeringQueueItem small{color:var(--muted,#91a8b3)}.engineeringQueueItem em{font-style:normal;color:var(--accent,#35bfff)}.engineeringQueueItem.active{border-color:var(--accent,#35bfff);box-shadow:0 0 0 1px var(--accent,#35bfff)}
@media(max-width:900px){.engineeringPlanEmpty{grid-template-columns:1fr}.engineeringQueueList{max-height:45vh}}

/* ===== v3.26.0 — Plan Studio workspace cleanup ===== */
#plans .planWorkspace{grid-template-columns:94px minmax(0,1fr) 340px!important}
#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 340px!important}
#plans .planWorkspace.inspectorCollapsed{grid-template-columns:94px minmax(0,1fr)!important}
#plans .planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
#plans .planRail .symbolGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
#plans .planRail .symbolTool,#plans .planRail .utilityTools button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;min-width:0!important;padding:7px 3px!important;text-align:center!important}
#plans .planRail .symbolTool svg{display:block!important;width:24px!important;height:24px!important;margin:0 auto!important}
#plans .planRail .symbolTool span,#plans .planRail .utilityTools button span{display:block!important;width:100%!important;text-align:center!important;font-size:var(--text-small)!important}
#plans .planPanelHandle{transform:none!important;transition:background .14s ease,border-color .14s ease,translate .08s ease!important}
#plans .planPanelHandle:hover{transform:none!important;translate:0 0!important}
#plans .toolsPanelHandle:active{translate:2px 0!important}#plans .inspectorPanelHandle:active{translate:-2px 0!important}
#plans .planSideTabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1.15fr 1fr 1.15fr;gap:5px;padding:8px;background:var(--panel,#10232c);border-bottom:1px solid var(--border,#294652)}
#plans .planSideTabs button{min-width:0;padding:7px 5px;font-size:var(--text-body);white-space:nowrap}#plans .planSideTabs button.active{border-color:#38bdf8;background:rgba(56,189,248,.12);color:#9bdfff}#plans .planSideTabs span{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:1px 5px;margin-left:3px;border-radius:999px;background:rgba(255,255,255,.08)}
#plans .planInspector>.card,#plans .planInspector>.engineeringEquipmentQueue{margin:10px!important}
#plans .engineeringEquipmentQueue.compact{padding:12px!important}.engineeringQueueGroup{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid var(--border,#294652);border-radius:9px;background:rgba(5,15,21,.34)}.engineeringQueueGroup.active{border-color:#38bdf8}.engineeringQueueIcon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7}.engineeringQueueGroup>div{min-width:0}.engineeringQueueGroup b,.engineeringQueueGroup small,.engineeringQueueGroup em{display:block}.engineeringQueueGroup b{white-space:normal;line-height:1.25}.engineeringQueueGroup small{color:var(--muted,#91a8b3);margin-top:3px}.engineeringQueueGroup em{font-style:normal;color:#7dd3fc;font-size:var(--text-body);margin-top:4px}.engineeringQueueGroup>button{padding:6px 8px;font-size:var(--text-body);white-space:nowrap}
#plans .planPageSelector{display:grid!important;grid-template-columns:auto minmax(240px,1fr) auto auto!important;align-items:stretch!important}.planPageGalleryTrigger{display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:auto auto!important;column-gap:8px!important;text-align:left!important;min-width:260px!important}.planPageGalleryTrigger>span{grid-row:1/3;align-self:center;color:#7dd3fc}.planPageGalleryTrigger>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.planPageGalleryTrigger>small{font-size:var(--text-small);color:var(--muted,#91a8b3)}
.planPageGalleryDialog{width:min(1180px,96vw)!important}.planPageGallery>header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.planPageGallery h3{margin:3px 0}.planPageGalleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;max-height:68vh;overflow:auto;padding:2px}.planPageThumb{display:grid!important;gap:8px!important;text-align:left!important;padding:10px!important;min-height:190px!important}.planPageThumb>span{position:relative;display:flex;height:135px;background:#fff;border-radius:7px;overflow:hidden}.planPageThumb img{width:100%;height:100%;object-fit:contain}.planPageThumb em{position:absolute;left:7px;top:7px;padding:3px 7px;border-radius:999px;background:rgba(4,15,22,.82);color:white;font-size:var(--text-small);font-style:normal}.planPageThumb b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.planPageThumb small{color:var(--muted,#91a8b3)}.planPageThumb.active{border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf8}
#plans .planStatusBar{position:relative!important;bottom:auto!important;min-height:30px!important;padding-bottom:5px!important}
@media(max-width:1100px){#plans .planWorkspace{grid-template-columns:88px minmax(0,1fr) 310px!important}#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 310px!important}}
@media(max-width:760px){.planPageGalleryGrid{grid-template-columns:1fr 1fr}.planPageGalleryTrigger{min-width:0!important}#plans .planPageSelector{grid-template-columns:auto minmax(0,1fr) auto!important}#plans .planPageSelector .secondary{grid-column:1/-1}}

/* ===== v3.26.1 — Plan navigation, tool rail and theme polish ===== */
#plans .planCanvasWrap{cursor:grab!important}#plans .planCanvasWrap.panning{cursor:grabbing!important}#plans .planCanvasWrap:has(.trainingMode),#plans .planCanvasWrap:has(.planMarker:hover){cursor:default!important}
#plans .planRail.v26{padding:7px!important;background:var(--ui-surface,#101b24)!important;border-color:var(--ui-border,#304553)!important}
#plans .planRail .toolGroup{padding:7px 0!important;border-color:var(--ui-border,#304553)!important}
#plans .planRail .toolGroup>small{display:block!important;margin:0 0 6px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1.2!important;letter-spacing:.09em!important;color:var(--ui-muted,#8da5b0)!important;text-align:center!important;white-space:normal!important}
#plans .planRail .symbolGrid{gap:6px!important}
#plans .planRail .symbolTool,#plans .planRail .utilityTools button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:100%!important;height:48px!important;min-height:48px!important;padding:5px 2px!important;background:var(--ui-surface-2,#14232d)!important;border:1px solid var(--ui-border,#304553)!important;color:var(--ui-text,#edf6fa)!important;box-shadow:none!important}
#plans .planRail .symbolTool:hover,#plans .planRail .utilityTools button:hover{background:color-mix(in srgb,var(--ui-accent,#31a7d8) 15%,var(--ui-surface-2,#14232d))!important;border-color:var(--ui-accent,#31a7d8)!important;filter:none!important;transform:none!important}
#plans .planRail .symbolTool:active,#plans .planRail .utilityTools button:active{transform:scale(.96)!important}
#plans .planRail .symbolTool.active,#plans .planRail .selectTool.active{background:color-mix(in srgb,var(--ui-accent,#31a7d8) 24%,var(--ui-surface-2,#14232d))!important;border-color:var(--ui-accent,#31a7d8)!important;color:var(--ui-accent,#69d2ff)!important}
#plans .planRail .symbolTool svg{display:block!important;width:23px!important;height:23px!important;margin:0 auto!important;flex:0 0 23px!important;stroke:currentColor!important}
#plans .planRail .symbolTool span,#plans .planRail .utilityTools button span{display:block!important;width:100%!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1!important;letter-spacing:.01em!important;text-align:center!important;color:inherit!important}
#plans .planRail .utilityTools button i{display:grid!important;place-items:center!important;width:23px!important;height:23px!important;margin:0!important;font-style:normal!important;font-size:17px!important;line-height:1!important;color:inherit!important}
#plans .securityTools .symbolTool{--tool-accent:#3bbbf1}#plans .networkTools .symbolTool{--tool-accent:#42c998}#plans .avTools .symbolTool{--tool-accent:#a78bfa}#plans .utilityTools button{--tool-accent:#f3b34c}
#plans .securityTools .symbolTool:hover,#plans .securityTools .symbolTool.active{border-color:#3bbbf1!important;color:#3bbbf1!important}#plans .networkTools .symbolTool:hover,#plans .networkTools .symbolTool.active{border-color:#42c998!important;color:#42c998!important}#plans .avTools .symbolTool:hover,#plans .avTools .symbolTool.active{border-color:#a78bfa!important;color:#a78bfa!important}#plans .utilityTools button:hover,#plans .utilityTools button.active{border-color:#f3b34c!important;color:#f3b34c!important}
#plans .planPanelHandle:hover{transform:none!important;translate:0 0!important;filter:none!important}#plans .toolsPanelHandle:active{translate:2px 0!important}#plans .inspectorPanelHandle:active{translate:-2px 0!important}
html[data-theme="light"] #plans .planCanvasWrap{background:#dbe3e8!important;border-color:#a9bac4!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)!important}
html[data-theme="light"] #plans #planCanvasSizer{background:radial-gradient(circle at center,#eef3f6 0,#e5ecef 54%,#dbe3e8 100%)!important}
html[data-theme="light"] #plans .planSurface{box-shadow:0 10px 32px rgba(32,55,68,.22)!important}
html[data-theme="light"] #plans .planRail.v26,html[data-theme="light"] #plans .planInspector,html[data-theme="light"] #plans .engineeringEquipmentQueue{background:#f7fafc!important;border-color:#b9cbd5!important;color:#182a34!important}
html[data-theme="light"] #plans .planRail .symbolTool,html[data-theme="light"] #plans .planRail .utilityTools button{background:#edf4f7!important;border-color:#a9bfcb!important;color:#24414f!important}
html[data-theme="light"] #plans .planRail .toolGroup>small{color:#55717e!important}
html[data-theme="light"] #plans .engineeringQueueGroup{background:#fff!important;border-color:#bfd0d8!important;color:#172a34!important}html[data-theme="light"] #plans .engineeringQueueGroup b{color:#172a34!important}html[data-theme="light"] #plans .engineeringQueueGroup small{color:#526b77!important}html[data-theme="light"] #plans .engineeringQueueStats span{background:#fff!important;border-color:#bfd0d8!important;color:#243e4b!important}
html[data-theme="light"] #plans .planSideTabs{background:#eaf1f4!important;border-color:#b9cbd5!important}html[data-theme="light"] #plans .planSideTabs button{background:#f8fbfc!important;color:#263f4b!important;border-color:#afc3cd!important}html[data-theme="light"] #plans .planSideTabs button.active{background:#d8eef8!important;color:#075d84!important;border-color:#238bb7!important}

/* ===== v3.26.2 — unsqueezed tool rail and neutral light controls ===== */
#plans .planRail.v26{display:flex!important;flex-direction:column!important;align-content:stretch!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable!important}
#plans .planRail.v26>.selectTool,#plans .planRail.v26>.toolGroup{flex:0 0 auto!important;min-height:max-content!important}
#plans .planRail.v26>.selectTool{height:42px!important;min-height:42px!important}
#plans .planRail .toolGroup{margin-top:7px!important;padding-top:9px!important}
#plans .planRail .symbolGrid{grid-auto-rows:52px!important;align-items:stretch!important}
#plans .planRail .symbolTool,#plans .planRail .utilityTools button{height:52px!important;min-height:52px!important;max-height:52px!important;overflow:hidden!important}
#plans .planRail .utilityTools button i{flex:0 0 22px!important}
#plans .planRail .symbolTool span,#plans .planRail .utilityTools button span{min-height:10px!important;white-space:nowrap!important;overflow:visible!important}
#plans .planRail .utilityTools>small{grid-column:1/-1!important}

html[data-theme="light"] #plans .planCanvasWrap{background:#cbd4da!important;border-color:#9eafb9!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)!important}
html[data-theme="light"] #plans #planCanvasSizer{background:radial-gradient(circle at center,#e7ecef 0,#d9e0e4 58%,#cbd4da 100%)!important}
html[data-theme="light"] #plans .planRail.v26,html[data-theme="light"] #plans .planInspector,html[data-theme="light"] #plans .engineeringEquipmentQueue{background:#f4f6f8!important;border-color:#c5cfd5!important;color:#18262e!important}
html[data-theme="light"] #plans button:not(.navBtn):not(.planMarker){background:#fff!important;background-image:none!important;border-color:#aebdc6!important;color:#24343d!important;box-shadow:0 1px 1px rgba(28,45,55,.04)!important}
html[data-theme="light"] #plans button:not(.navBtn):not(.planMarker):hover{background:#f1f4f6!important;border-color:#7f96a3!important;color:#14242d!important}
html[data-theme="light"] #plans button:not(.navBtn):not(.planMarker):active{background:#e6ebee!important;transform:none!important}
html[data-theme="light"] #plans .planRail .symbolTool,html[data-theme="light"] #plans .planRail .utilityTools button{background:#fff!important;border-color:#b7c4cb!important;color:#263943!important}
html[data-theme="light"] #plans .planRail .symbolTool:hover,html[data-theme="light"] #plans .planRail .utilityTools button:hover{background:#f3f6f7!important}
html[data-theme="light"] #plans .planRail .symbolTool.active,html[data-theme="light"] #plans .planRail .selectTool.active,html[data-theme="light"] #plans .planLayerBar button.active,html[data-theme="light"] #plans .planSideTabs button.active{background:#176f9c!important;border-color:#176f9c!important;color:#fff!important;box-shadow:none!important}
html[data-theme="light"] #plans .planSideTabs{background:#eef1f3!important;border-color:#c5cfd5!important}
html[data-theme="light"] #plans .planSideTabs button{background:#fff!important;border-color:#b6c3ca!important;color:#263943!important}

/* ===== v3.26.3 — compact categorized Plan Studio tools ===== */
#plans .planWorkspace{position:relative!important}
#plans .planRail.compactToolRail{overflow:visible!important;gap:8px!important;padding:7px!important}
#plans .compactToolRail .selectTool{flex:0 0 44px!important;margin:0!important}
#plans .planCategoryList{display:grid!important;gap:8px!important;flex:0 0 auto!important}
#plans .planCategoryButton{position:relative!important;display:grid!important;grid-template-columns:1fr 12px!important;grid-template-rows:28px auto!important;align-items:center!important;justify-items:center!important;gap:3px 0!important;width:100%!important;height:62px!important;min-height:62px!important;padding:6px 4px!important;background:var(--ui-surface-2,#14232d)!important;border:1px solid var(--ui-border,#304553)!important;color:var(--ui-text,#edf6fa)!important;text-align:center!important;overflow:hidden!important}
#plans .planCategoryButton svg{grid-column:1!important;width:27px!important;height:27px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#plans .planCategoryButton>i{grid-column:1!important;display:grid!important;place-items:center!important;width:27px!important;height:27px!important;font-size:20px!important;font-style:normal!important}
#plans .planCategoryButton>span{grid-column:1!important;width:100%!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1.05!important;color:inherit!important;white-space:normal!important}
#plans .planCategoryButton>b{position:absolute!important;right:4px!important;top:50%!important;translate:0 -50%!important;font-size:var(--text-body)!important;font-weight:var(--weight-regular)!important;color:var(--ui-muted,#8da5b0)!important}
#plans .planCategoryButton:hover{background:#1a2b35!important;border-color:#69808c!important;transform:none!important}
#plans .planCategoryButton.active{background:rgba(49,167,216,.16)!important;border-color:#31a7d8!important;color:#72d4fa!important}
#plans .selectedPlanTool{display:grid!important;place-items:center!important;gap:2px!important;margin-top:auto!important;padding:8px 3px!important;min-height:66px!important;border-top:1px solid var(--ui-border,#304553)!important;color:#72d4fa!important;text-align:center!important}
#plans .selectedPlanTool svg{width:25px!important;height:25px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
#plans .selectedPlanTool small{font-size:var(--text-small)!important;letter-spacing:.12em!important;color:var(--ui-muted,#8da5b0)!important}
#plans .selectedPlanTool b{font-size:var(--text-small)!important;color:inherit!important}
#plans .planCategoryFlyout{position:absolute!important;left:102px!important;top:0!important;z-index:80!important;width:286px!important;padding:12px!important;background:var(--ui-surface,#101b24)!important;border:1px solid #3b6578!important;border-radius:11px!important;box-shadow:0 18px 50px rgba(0,0,0,.48)!important}
#plans .planCategoryFlyout>header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:10px!important;padding-bottom:9px!important;border-bottom:1px solid var(--ui-border,#304553)!important}
#plans .planCategoryFlyout>header>div{display:grid!important;gap:2px!important}
#plans .planCategoryFlyout>header small{font-size:var(--text-small)!important;letter-spacing:.13em!important;color:var(--ui-muted,#8da5b0)!important}
#plans .planCategoryFlyout>header b{font-size:var(--text-body)!important}
#plans .planCategoryFlyout>header>button{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;font-size:var(--text-section)!important}
#plans .planFlyoutGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
#plans .planFlyoutGrid>button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:72px!important;min-height:72px!important;padding:8px 5px!important;background:var(--ui-surface-2,#14232d)!important;border:1px solid var(--ui-border,#304553)!important;color:var(--ui-text,#edf6fa)!important}
#plans .planFlyoutGrid>button svg{width:30px!important;height:30px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
#plans .planFlyoutGrid>button i{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;font-size:22px!important;font-style:normal!important}
#plans .planFlyoutGrid>button span{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;color:inherit!important}
#plans .planFlyoutGrid>button:hover,#plans .planFlyoutGrid>button.active{background:rgba(49,167,216,.16)!important;border-color:#31a7d8!important;color:#72d4fa!important;transform:none!important}
html[data-theme="light"] #plans .planCategoryButton,html[data-theme="light"] #plans .planFlyoutGrid>button{background:#fff!important;border-color:#b6c3ca!important;color:#263943!important}
html[data-theme="light"] #plans .planCategoryButton:hover,html[data-theme="light"] #plans .planFlyoutGrid>button:hover{background:#f1f4f6!important;border-color:#7f96a3!important;color:#14242d!important}
html[data-theme="light"] #plans .planCategoryButton.active,html[data-theme="light"] #plans .planFlyoutGrid>button.active{background:#176f9c!important;border-color:#176f9c!important;color:#fff!important}
html[data-theme="light"] #plans .planCategoryFlyout{background:#f7f9fa!important;border-color:#8fa7b3!important;box-shadow:0 18px 45px rgba(38,55,65,.22)!important;color:#18262e!important}
html[data-theme="light"] #plans .selectedPlanTool{border-color:#c5cfd5!important;color:#176f9c!important}
@media(max-width:760px){#plans .planCategoryFlyout{position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:84px!important;width:auto!important}.mobileToolsSheet #plans .planCategoryFlyout{position:fixed!important}}

/* ===== v3.26.4 — rail collapse, smaller tools, visible cursor, brand-neutral light UI ===== */
#plans .planWorkspace{grid-template-columns:76px minmax(0,1fr) 340px!important}
#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 340px!important}
#plans .planWorkspace.inspectorCollapsed{grid-template-columns:76px minmax(0,1fr)!important}
#plans .planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
#plans .planRail.compactToolRail{padding:6px!important;gap:6px!important}
#plans .compactToolRail .selectTool{height:38px!important;min-height:38px!important;font-size:var(--text-small)!important}
#plans .planCategoryList{gap:6px!important}
#plans .planCategoryButton{height:52px!important;min-height:52px!important;grid-template-rows:22px auto!important;padding:5px 3px!important}
#plans .planCategoryButton svg,#plans .planCategoryButton>i{width:21px!important;height:21px!important;font-size:17px!important}
#plans .planCategoryButton>span{font-size:var(--text-small)!important;line-height:1!important}
#plans .planCategoryButton>b{right:3px!important;font-size:var(--text-body)!important}
#plans .selectedPlanTool{min-height:54px!important;padding:6px 2px!important}
#plans .selectedPlanTool svg{width:20px!important;height:20px!important}
#plans .selectedPlanTool b{font-size:var(--text-small)!important}
#plans .planCategoryFlyout{left:84px!important;width:254px!important;padding:10px!important}
#plans .planFlyoutGrid{gap:7px!important}
#plans .planFlyoutGrid>button{height:60px!important;min-height:60px!important;padding:6px 4px!important;gap:4px!important}
#plans .planFlyoutGrid>button svg,#plans .planFlyoutGrid>button i{width:24px!important;height:24px!important;font-size:18px!important}
#plans .planFlyoutGrid>button span{font-size:var(--text-small)!important}
#plans .toolsPanelHandle{left:78px!important}
#plans .planWorkspace.railCollapsed .toolsPanelHandle{left:0!important}
#plans .planCanvasWrap.placingTool,#plans .planCanvasWrap.placingTool #planSurface{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath d='M12.5 2v21M2 12.5h21' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M12.5 2v21M2 12.5h21' stroke='%23050b0f' stroke-width='2'/%3E%3Ccircle cx='12.5' cy='12.5' r='2.5' fill='%23ffffff' stroke='%23050b0f' stroke-width='1.5'/%3E%3C/svg%3E") 12 12,crosshair!important}
html[data-theme="light"] #plans{--plan-light-button:#fbfaf8;--plan-light-hover:#f0efec;--plan-light-border:#a9b0b5;--plan-brand-blue:#24577f}
html[data-theme="light"] #plans button:not(.navBtn):not(.planMarker),html[data-theme="light"] #plans .planCategoryButton,html[data-theme="light"] #plans .planFlyoutGrid>button,html[data-theme="light"] #plans .planSideTabs button{background:var(--plan-light-button)!important;background-image:none!important;border-color:var(--plan-light-border)!important;color:#26333a!important;box-shadow:none!important}
html[data-theme="light"] #plans button:not(.navBtn):not(.planMarker):hover,html[data-theme="light"] #plans .planCategoryButton:hover,html[data-theme="light"] #plans .planFlyoutGrid>button:hover,html[data-theme="light"] #plans .planSideTabs button:hover{background:var(--plan-light-hover)!important;border-color:#7e8990!important;color:#18242a!important}
html[data-theme="light"] #plans .planCategoryButton.active,html[data-theme="light"] #plans .planFlyoutGrid>button.active,html[data-theme="light"] #plans .planLayerBar button.active,html[data-theme="light"] #plans .planSideTabs button.active{background:var(--plan-brand-blue)!important;border-color:var(--plan-brand-blue)!important;color:#fff!important}
html[data-theme="light"] #plans input[type="checkbox"]{accent-color:var(--plan-brand-blue)!important}
@media(max-width:1100px){#plans .planWorkspace{grid-template-columns:72px minmax(0,1fr) 310px!important}#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 310px!important}#plans .planWorkspace.inspectorCollapsed{grid-template-columns:72px minmax(0,1fr)!important}#plans .toolsPanelHandle{left:74px!important}}

/* ===== v3.26.6 — deterministic Plan Studio controls ===== */
#plans #planToolRail[hidden],#plans .planInspector[hidden]{display:none!important}
#plans #planToolFlyoutHost:empty{display:none!important}
#plans .planWorkspace{grid-template-columns:68px minmax(0,1fr) 340px!important;transition:grid-template-columns .14s ease!important}
#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 340px!important}
#plans .planWorkspace.inspectorCollapsed{grid-template-columns:68px minmax(0,1fr)!important}
#plans .planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
#plans .planRail.compactToolRail{width:68px!important;padding:5px!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important}
#plans .compactToolRail .selectTool{height:34px!important;min-height:34px!important;padding:3px!important}
#plans .planCategoryList{gap:5px!important}
#plans .planCategoryButton{height:46px!important;min-height:46px!important;grid-template-rows:18px auto!important;padding:4px 2px!important;border-radius:7px!important}
#plans .planCategoryButton svg,#plans .planCategoryButton>i{width:18px!important;height:18px!important;font-size:15px!important}
#plans .planCategoryButton>span{font-size:var(--text-small)!important;line-height:1!important}
#plans .selectedPlanTool{min-height:46px!important;padding:5px 2px!important}
#plans .selectedPlanTool svg{width:17px!important;height:17px!important}
#plans .planCategoryFlyout{left:74px!important;width:230px!important;padding:9px!important}
#plans .planFlyoutGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
#plans .planFlyoutGrid>button{height:52px!important;min-height:52px!important;padding:5px 3px!important;gap:3px!important}
#plans .planFlyoutGrid>button svg,#plans .planFlyoutGrid>button i{width:20px!important;height:20px!important;font-size:16px!important}
#plans .planFlyoutGrid>button span{font-size:var(--text-small)!important}
#plans .toolsPanelHandle{left:70px!important;transition:left .14s ease,transform .09s ease!important}
#plans .inspectorPanelHandle{transition:right .14s ease,transform .09s ease!important}
#plans .planPanelHandle:hover{transform:none!important}
#plans .toolsPanelHandle:active{transform:translateX(2px)!important}
#plans .inspectorPanelHandle:active{transform:translateX(-2px)!important}
#plans .planCanvasWrap.placingTool,#plans .planCanvasWrap.placingTool *{cursor:crosshair!important}
#plans .planCanvasWrap.placingTool .planMarker,#plans .planCanvasWrap.placingTool button,#plans .planCanvasWrap.placingTool input,#plans .planCanvasWrap.placingTool select{cursor:pointer!important}
html[data-theme="light"] body #appShell.shell371 #plans{--plan-control:#fff;--plan-control-hover:#f3f1ed;--plan-control-active:#31475a;--plan-control-border:#aeb8be;--plan-control-text:#23313a}
html[data-theme="light"] body #appShell.shell371 #plans button:not(.navBtn):not(.planMarker),html[data-theme="light"] body #appShell.shell371 #plans .planCategoryButton,html[data-theme="light"] body #appShell.shell371 #plans .planFlyoutGrid>button{background:var(--plan-control)!important;background-image:none!important;border-color:var(--plan-control-border)!important;color:var(--plan-control-text)!important;box-shadow:none!important}
html[data-theme="light"] body #appShell.shell371 #plans button:not(.navBtn):not(.planMarker):hover,html[data-theme="light"] body #appShell.shell371 #plans .planCategoryButton:hover,html[data-theme="light"] body #appShell.shell371 #plans .planFlyoutGrid>button:hover{background:var(--plan-control-hover)!important;border-color:#7f8d95!important;color:#17242b!important}
html[data-theme="light"] body #appShell.shell371 #plans .planCategoryButton.active,html[data-theme="light"] body #appShell.shell371 #plans .planFlyoutGrid>button.active,html[data-theme="light"] body #appShell.shell371 #plans .planLayerBar button.active,html[data-theme="light"] body #appShell.shell371 #plans .planSideTabs button.active{background:var(--plan-control-active)!important;border-color:var(--plan-control-active)!important;color:#fff!important}
html[data-theme="light"] body #appShell.shell371 #plans .planCanvasWrap{background:#d8dde0!important;border-color:#aeb7bc!important}
html[data-theme="light"] body #appShell.shell371 #plans #planCanvasSizer{background:#d8dde0!important}
@media(max-width:1100px){#plans .planWorkspace{grid-template-columns:66px minmax(0,1fr) 310px!important}#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 310px!important}#plans .planWorkspace.inspectorCollapsed{grid-template-columns:66px minmax(0,1fr)!important}#plans .planRail.compactToolRail{width:66px!important}#plans .toolsPanelHandle{left:68px!important}}

/* ===== v3.26.7 — Forge QA corrections ===== */
#plans .planWorkspace{transition:none!important}
html[data-theme="dark"] body #appShell.shell371 #plans .planCategoryButton:hover,
html[data-theme="dark"] body #appShell.shell371 #plans .planFlyoutGrid>button:hover,
html[data-theme="light"] body #appShell.shell371 #plans .planCategoryButton:hover,
html[data-theme="light"] body #appShell.shell371 #plans .planFlyoutGrid>button:hover{
  transform:none!important;
  translate:0 0!important;
}
#plans .planCategoryButton:active,#plans .planFlyoutGrid>button:active{transform:scale(.97)!important;translate:0 0!important}

/* ===== v3.27.0 — compact Plan Studio rail and unified control theme ===== */
#plans .planWorkspace{grid-template-columns:58px minmax(0,1fr) 340px!important}
#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 340px!important}
#plans .planWorkspace.inspectorCollapsed{grid-template-columns:58px minmax(0,1fr)!important}
#plans .planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
#plans .planRail.compactToolRail{width:58px!important;padding:4px!important;gap:4px!important;overflow-x:hidden!important}
#plans .compactToolRail .selectTool{height:30px!important;min-height:30px!important;padding:2px!important;font-size:var(--text-small)!important;border-radius:6px!important}
#plans .compactToolRail .selectArrow{font-size:12px!important;line-height:1!important}
#plans .planCategoryList{gap:4px!important}
#plans .planCategoryButton{height:40px!important;min-height:40px!important;grid-template-columns:1fr 8px!important;grid-template-rows:16px auto!important;padding:3px 2px!important;border-radius:6px!important}
#plans .planCategoryButton svg,#plans .planCategoryButton>i{width:16px!important;height:16px!important;font-size:14px!important}
#plans .planCategoryButton>span{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1!important}
#plans .planCategoryButton>b{right:2px!important;font-size:var(--text-small)!important}
#plans .selectedPlanTool{min-height:38px!important;padding:4px 2px!important;gap:1px!important}
#plans .selectedPlanTool svg{width:15px!important;height:15px!important}
#plans .selectedPlanTool small{font-size:var(--text-small)!important}
#plans .selectedPlanTool b{font-size:var(--text-small)!important}
#plans .planCategoryFlyout{left:63px!important;width:210px!important;padding:8px!important}
#plans .planCategoryFlyout>header{margin-bottom:7px!important;padding-bottom:7px!important}
#plans .planCategoryFlyout>header small{font-size:var(--text-small)!important}
#plans .planCategoryFlyout>header b{font-size:var(--text-body)!important}
#plans .planCategoryFlyout>header>button{width:27px!important;height:27px!important;min-height:27px!important;font-size:var(--text-section)!important}
#plans .planFlyoutGrid{gap:5px!important}
#plans .planFlyoutGrid>button{height:46px!important;min-height:46px!important;padding:4px 3px!important;gap:2px!important;border-radius:6px!important}
#plans .planFlyoutGrid>button svg,#plans .planFlyoutGrid>button i{width:17px!important;height:17px!important;font-size:15px!important}
#plans .planFlyoutGrid>button span{font-size:var(--text-small)!important}
#plans .toolsPanelHandle{left:60px!important}
#plans .planWorkspace.railCollapsed .toolsPanelHandle{left:0!important}
#plans .planWorkspace.railCollapsed #planToolFlyoutHost{display:none!important}
#plans .planPanelHandle{transition:background-color .1s ease,border-color .1s ease,transform .08s ease!important}
#plans .planPanelHandle:hover{transform:none!important;translate:0 0!important}
#plans .toolsPanelHandle:active{transform:translateX(2px)!important;translate:0 0!important}
#plans .inspectorPanelHandle:active{transform:translateX(-2px)!important;translate:0 0!important}
#plans .planCategoryButton:focus-visible,#plans .planFlyoutGrid>button:focus-visible,#plans .planPanelHandle:focus-visible{outline:2px solid #77b9d6!important;outline-offset:2px!important}
#plans .planCanvasWrap.placingTool,#plans .planCanvasWrap.placingTool #planSurface{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23'%3E%3Cpath d='M11.5 1v21M1 11.5h21' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M11.5 1v21M1 11.5h21' stroke='%23101b24' stroke-width='2'/%3E%3Ccircle cx='11.5' cy='11.5' r='2' fill='%23ffffff' stroke='%23101b24' stroke-width='1.5'/%3E%3C/svg%3E") 11 11,crosshair!important}
html[data-theme="light"] body #appShell.shell371 #plans{--plan-control:#fbfaf8;--plan-control-hover:#efefec;--plan-control-active:#34495a;--plan-control-border:#aeb5ba;--plan-control-text:#23313a}
html[data-theme="light"] body #appShell.shell371 #plans .planCategoryButton.active,
html[data-theme="light"] body #appShell.shell371 #plans .planFlyoutGrid>button.active,
html[data-theme="light"] body #appShell.shell371 #plans .planLayerBar button.active,
html[data-theme="light"] body #appShell.shell371 #plans .planSideTabs button.active{background:#34495a!important;border-color:#34495a!important;color:#fff!important}
html[data-theme="light"] body #appShell.shell371 #plans .planCanvasWrap,
html[data-theme="light"] body #appShell.shell371 #plans #planCanvasSizer{background:#dfe3e5!important}
html[data-theme="light"] #plans .planCategoryButton:focus-visible,
html[data-theme="light"] #plans .planFlyoutGrid>button:focus-visible,
html[data-theme="light"] #plans .planPanelHandle:focus-visible{outline-color:#34495a!important}
@media(max-width:1100px){#plans .planWorkspace{grid-template-columns:56px minmax(0,1fr) 310px!important}#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 310px!important}#plans .planWorkspace.inspectorCollapsed{grid-template-columns:56px minmax(0,1fr)!important}#plans .planRail.compactToolRail{width:56px!important}#plans .toolsPanelHandle{left:58px!important}}

/* ===== v3.27.1 — reliable Focus Plan layout ===== */
body.planFocusMode{overflow:hidden!important}
body.planFocusMode #appShell.shell371{display:block!important;grid-template-columns:minmax(0,1fr)!important;width:100vw!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
body.planFocusMode #appShell.shell371>.appRail371,
body.planFocusMode #appShell.shell371>aside.contextNav371,
body.planFocusMode #appShell.shell371>main>.globalUtilityHeader,
body.planFocusMode #workflowRibbon{display:none!important}
body.planFocusMode #appShell.shell371>main{display:block!important;width:100vw!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
body.planFocusMode #appShell.shell371 .content{width:100vw!important;height:100dvh!important;min-height:0!important;padding:0!important;overflow:hidden!important}
body.planFocusMode #plans{width:100vw!important;height:100dvh!important;min-height:0!important;padding:4px!important;overflow:hidden!important}
body.planFocusMode #plans>.pageHead{display:none!important}
body.planFocusMode #plansBody{display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
body.planFocusMode #plans .desktopPlanControls{flex:0 0 auto!important;min-height:0!important}
body.planFocusMode #plans .planStudioCommandHeader{display:none!important}
body.planFocusMode #plans .planTopTools,
body.planFocusMode #plans .planLayerBar{position:relative!important;top:auto!important;flex:0 0 auto!important}
body.planFocusMode #plans .planWorkspace{flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important}
body.planFocusMode #plans .planCanvasWrap,
body.planFocusMode #plans .planRail.v26,
body.planFocusMode #plans .planInspector{height:100%!important;min-height:0!important;max-height:none!important}
body.planFocusMode #plans .planStatusBar{flex:0 0 auto!important;margin:0!important}
body.planFocusMode #plans .planPanelHandle{z-index:90!important}

#plans:fullscreen{width:100vw!important;height:100dvh!important;min-height:0!important;padding:4px!important;overflow:hidden!important}
#plans:fullscreen>.pageHead{display:none!important}
#plans:fullscreen #plansBody{display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
#plans:fullscreen .planStudioCommandHeader{display:none!important}
#plans:fullscreen .planWorkspace{flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow:hidden!important}
#plans:fullscreen .planCanvasWrap,
#plans:fullscreen .planRail.v26,
#plans:fullscreen .planInspector{height:100%!important;min-height:0!important;max-height:none!important}

/* ===== v3.27.2 — Focus viewport offset and footer correction ===== */
body.planFocusMode #appShell.shell371>main{
  margin-left:0!important;
  width:100vw!important;
  max-width:none!important;
}
body.planFocusMode #appShell.shell371 .content{
  margin:0!important;
  max-width:none!important;
}
body.planFocusMode #plans>.workflowPageFooter,
body.planFocusMode #plans .workflowPageFooter{
  display:none!important;
}
body.planFocusMode #plans,
body.planFocusMode #plansBody,
body.planFocusMode #plans .planWorkspace{
  max-width:none!important;
}

/* ===== v3.27.3 — marked light-theme cleanup + approved tool geometry ===== */
/* The category rail uses the approved 44px control inside a 54px column. */
#plans .planWorkspace{grid-template-columns:54px minmax(0,1fr) 340px!important}
#plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 340px!important}
#plans .planWorkspace.inspectorCollapsed{grid-template-columns:54px minmax(0,1fr)!important}
#plans .planWorkspace.railCollapsed.inspectorCollapsed{grid-template-columns:minmax(0,1fr)!important}
#plans .planRail.compactToolRail{width:54px!important;padding:5px!important;gap:5px!important}
#plans .compactToolRail .selectTool{width:44px!important;height:30px!important;min-height:30px!important;justify-self:center!important}
#plans .planCategoryList{gap:5px!important}
#plans .planCategoryButton{
  width:44px!important;height:44px!important;min-height:44px!important;
  grid-template-columns:1fr 7px!important;grid-template-rows:19px auto!important;
  padding:4px 2px!important;border-radius:7px!important;justify-self:center!important
}
#plans .planCategoryButton .planCategoryGlyph{
  grid-column:1!important;width:18px!important;height:18px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2!important;
  stroke-linecap:round!important;stroke-linejoin:round!important
}
#plans .planCategoryButton>span{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1!important}
#plans .planCategoryButton>b{right:2px!important;font-size:var(--text-small)!important}
#plans .selectedPlanTool{width:44px!important;min-height:38px!important;justify-self:center!important}
#plans .planCategoryFlyout{left:59px!important}
#plans .toolsPanelHandle{left:56px!important}
#plans .planWorkspace.railCollapsed .toolsPanelHandle{left:0!important}

/* Light shell controls are neutral; blue/cyan is reserved for real state. */
html[data-theme="light"] .contextNav371 .brandLogoIcon{
  background:transparent!important;border:0!important;box-shadow:none!important
}
html[data-theme="light"] .contextNav371 .brand .buildVersion{
  background:#fff!important;border-color:#bfc5c9!important;color:#56636b!important
}
html[data-theme="light"] #sidebarToggle,
html[data-theme="light"] .shellHeaderActions #themeToggle,
html[data-theme="light"] .shellHeaderActions #notificationBell,
html[data-theme="light"] .shellHeaderActions .userProfileBtn{
  background:#fbfaf8!important;background-image:none!important;
  border-color:#aeb5ba!important;color:#2d3a42!important;box-shadow:none!important
}
html[data-theme="light"] #sidebarToggle:hover,
html[data-theme="light"] .shellHeaderActions #themeToggle:hover,
html[data-theme="light"] .shellHeaderActions #notificationBell:hover,
html[data-theme="light"] .shellHeaderActions .userProfileBtn:hover{
  background:#efefec!important;border-color:#7f898f!important;color:#18242a!important
}
html[data-theme="light"] .globalUtilityHeader>.headerProjectPicker{
  background:#fff!important;border-color:#b9c0c4!important;box-shadow:none!important
}
html[data-theme="light"] .globalUtilityHeader .headerProjectPickerLabel{
  color:#647078!important;border-right-color:#c9ced1!important
}
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger{
  background:#fbfaf8!important;border-color:#aeb5ba!important;color:#23313a!important
}
html[data-theme="light"] .globalUtilityHeader .headerProjectTrigger:hover{
  background:#efefec!important;border-color:#7f898f!important
}
html[data-theme="light"] .globalUtilityHeader .headerProjectChevron{border-color:#45545d!important}
html[data-theme="light"] #plans .planPageGalleryTrigger>span,
html[data-theme="light"] #plans .engineeringQueueGroup em{
  color:#59676f!important
}
html[data-theme="light"] .contextNav371 .logoutBtn{
  min-height:34px!important;background:#fbfaf8!important;background-image:none!important;
  border-color:#aeb5ba!important;color:#2d3a42!important;box-shadow:none!important
}
html[data-theme="light"] .contextNav371 .logoutBtn:hover{
  background:#efefec!important;border-color:#7f898f!important;color:#18242a!important
}
@media(max-width:1100px){
  #plans .planWorkspace{grid-template-columns:54px minmax(0,1fr) 310px!important}
  #plans .planWorkspace.railCollapsed{grid-template-columns:minmax(0,1fr) 310px!important}
  #plans .planWorkspace.inspectorCollapsed{grid-template-columns:54px minmax(0,1fr)!important}
  #plans .planRail.compactToolRail{width:54px!important}
  #plans .toolsPanelHandle{left:56px!important}
}

/* ===== v3.27.4 — clear symbols, equal tool cells, camera housing intelligence ===== */
#plans .compactToolRail .selectTool{
  display:grid!important;grid-template-rows:17px auto!important;
  place-items:center!important;align-content:center!important;
  width:44px!important;height:44px!important;min-height:44px!important;
  margin:0 auto!important;padding:4px 2px!important;gap:2px!important;
  line-height:1!important;text-align:center!important
}
#plans .compactToolRail .selectTool .selectArrow{
  display:grid!important;place-items:center!important;width:18px!important;height:17px!important;
  margin:0!important;font-size:15px!important;line-height:1!important
}
#plans .compactToolRail .selectTool>span:last-child{
  display:block!important;width:100%!important;margin:0!important;
  font-size:var(--text-small)!important;line-height:1!important;text-align:center!important
}
#plans .planCategoryButton .planCategoryGlyph{
  width:21px!important;height:21px!important;stroke-width:2.25!important
}
#plans .planCategoryFlyout{left:59px!important;width:174px!important;padding:9px!important}
#plans .planFlyoutGrid{
  display:grid!important;grid-template-columns:repeat(3,44px)!important;
  grid-auto-rows:44px!important;gap:6px!important;justify-content:start!important
}
#plans .planFlyoutGrid>button{
  box-sizing:border-box!important;width:44px!important;height:44px!important;
  min-width:44px!important;max-width:44px!important;min-height:44px!important;max-height:44px!important;
  padding:4px 2px!important;gap:2px!important;border-radius:7px!important;overflow:hidden!important
}
#plans .planFlyoutGrid>button svg,#plans .planFlyoutGrid>button i{
  flex:0 0 20px!important;width:20px!important;height:20px!important;
  font-size:17px!important;stroke-width:2.2!important;stroke-linecap:round!important;stroke-linejoin:round!important
}
#plans .planFlyoutGrid>button span{
  display:block!important;width:100%!important;font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;line-height:1!important;white-space:nowrap!important;text-align:center!important
}
.planMarker .markerCore .cameraShape{display:grid!important;place-items:center!important;width:25px!important;height:25px!important;line-height:0!important}
.planMarker .markerCore .cameraShape svg{display:block!important;width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.15!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.planMarker .markerCore .markerTypeCode{display:block!important;font-size:9px!important;font-weight:var(--weight-semibold)!important;line-height:1!important}
.engineeringQueueIcon svg{stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* ===== v3.27.5 — hierarchical camera palette and architectural symbols ===== */
#plans .planRail.compactToolRail{
  display:flex!important;flex-direction:column!important;align-items:center!important
}
#plans .compactToolRail .selectTool,
#plans .planCategoryButton,
#plans .selectedPlanTool{justify-self:auto!important;align-self:center!important;margin-left:auto!important;margin-right:auto!important}
#plans .planCategoryList{width:44px!important;display:flex!important;flex-direction:column!important;align-items:center!important}
#plans .planCategoryButton{
  display:grid!important;grid-template-columns:44px!important;grid-template-rows:22px 10px!important;
  place-items:center!important;align-content:center!important;justify-content:center!important;
  gap:1px!important;padding:4px 0!important;text-align:center!important
}
#plans .planCategoryButton .planCategoryGlyph{
  grid-column:1!important;grid-row:1!important;justify-self:center!important;align-self:center!important;
  width:22px!important;height:22px!important;stroke-width:2.35!important
}
#plans .planCategoryButton>span{
  grid-column:1!important;grid-row:2!important;justify-self:center!important;align-self:center!important;
  width:40px!important;margin:0!important;text-align:center!important
}
#plans .planCategoryButton>b{position:absolute!important;right:2px!important;top:50%!important;translate:0 -50%!important}
#plans .compactToolRail .selectTool .selectArrow svg{
  display:block!important;width:18px!important;height:18px!important;fill:currentColor!important;stroke:none!important
}
#plans .planFlyoutGrid>button{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
#plans .planFlyoutGrid>button svg{
  width:23px!important;height:23px!important;flex-basis:23px!important;
  stroke-width:2.45!important;overflow:visible!important
}
#plans .planFlyoutGrid>button.cameraCategoryTool>b{
  position:absolute!important;right:3px!important;top:50%!important;translate:0 -50%!important;
  color:currentColor!important;font-size:var(--text-body)!important;line-height:1!important
}
#plans .planCategoryFlyout.planCameraSubmenu{
  left:241px!important;top:0!important;z-index:82!important;width:174px!important
}
#plans .planCameraSubmenu:before{
  content:"";position:absolute;left:-9px;top:40px;width:9px;height:1px;background:var(--ui-border,#405764)
}
#plans .cameraStyleGrid>button svg{width:25px!important;height:25px!important;flex-basis:25px!important;stroke-width:2.4!important}
.planMarker .markerCore .cameraShape{width:29px!important;height:29px!important}
.planMarker .markerCore .cameraShape svg{width:28px!important;height:28px!important;stroke-width:2.55!important;overflow:visible!important}
html[data-theme="light"] #plans .planCategoryFlyout.planCameraSubmenu{background:#f7f9fa!important;border-color:#8fa7b3!important;color:#18262e!important}
@media(max-width:760px){
  #plans .planCategoryFlyout.planCameraSubmenu{left:190px!important;right:12px!important;top:auto!important;bottom:84px!important;width:174px!important}
}

/* ===== v3.27.6 — stable placement, dark cursor and useful symbol summary ===== */
#plans .planCanvasWrap:not(.placingTool),
#plans .planCanvasWrap:not(.placingTool) #planSurface,
#plans .planCanvasWrap:not(.placingTool) #planSurface>img{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l14 11-7 1 4 7-3 2-4-8-4 5z' fill='%23071117' stroke='%23ffffff' stroke-width='.7'/%3E%3C/svg%3E") 3 2,default!important
}
#plans .planCanvasWrap.placingTool,
#plans .planCanvasWrap.placingTool #planSurface,
#plans .planCanvasWrap.placingTool #planSurface>img{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath d='M12.5 1v23M1 12.5h23' stroke='%23071117' stroke-width='3'/%3E%3Ccircle cx='12.5' cy='12.5' r='2.6' fill='%23071117'/%3E%3C/svg%3E") 12 12,crosshair!important
}
#plans .planSymbolPopup{width:330px!important;padding:10px!important}
#plans .planSymbolPopupHead{
  display:grid!important;grid-template-columns:30px minmax(0,1fr) 25px!important;
  align-items:center!important;gap:8px!important
}
#plans .planPopupDeviceIcon{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;color:var(--ui-accent,#58b9e5)!important}
#plans .planPopupDeviceIcon svg{display:block!important;width:27px!important;height:27px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.25!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#plans .planSymbolPopupHead>div{min-width:0!important}
#plans .planSymbolPopupHead>div>b,#plans .planSymbolPopupHead>div>small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#plans .planPopupSummary{display:grid!important;grid-template-columns:1fr 1fr!important;gap:1px 10px!important;padding:8px 0!important;border-bottom:1px solid var(--ui-border,#2a3d56)!important}
#plans .planPopupSummary>span{display:grid!important;gap:1px!important;min-width:0!important;padding:4px 0!important}
#plans .planPopupSummary small{font-size:var(--text-small)!important;letter-spacing:.09em!important;color:var(--ui-muted,#8396b1)!important}
#plans .planPopupSummary b{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#plans .planSymbolPopupActions{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-top:8px!important}
#plans .planPopupHint{font-size:var(--text-small)!important}
@media(max-width:700px){
  #plans .planSymbolPopup{width:min(290px,calc(100vw - 24px))!important}
  #plans .planPopupSummary{grid-template-columns:1fr!important}
}

/* ===== v3.27.7 — reliable clicks and legible plan-tool symbols ===== */
#plans .planCategoryButton .planCategoryGlyph{
  width:23px!important;height:23px!important;stroke-width:2.6!important
}
#plans .planCategoryButton>span{
  font-family:var(--font-sans)!important;
  font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1.05!important;
  letter-spacing:0!important;text-rendering:geometricPrecision!important
}
#plans .compactToolRail .selectTool>span:last-child,
#plans .planFlyoutGrid>button span{
  font-family:var(--font-sans)!important;
  font-weight:var(--weight-semibold)!important;letter-spacing:0!important;text-rendering:geometricPrecision!important
}
#plans .compactToolRail .selectTool>span:last-child{font-size:var(--text-small)!important}
#plans .planCategoryFlyout{font-family:var(--font-sans)!important}
#plans .planCategoryFlyout>header small{font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.1em!important}
#plans .planCategoryFlyout>header b{font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;line-height:1.15!important}
#plans .planFlyoutGrid>button,
#plans .planFlyoutGrid>button.symbolTool{
  width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;
  min-height:44px!important;max-height:44px!important;padding:3px 2px!important;gap:1px!important
}
#plans .planFlyoutGrid>button svg,
#plans .planFlyoutGrid>button.symbolTool svg{
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  stroke-width:2.55!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  overflow:visible!important
}
#plans .planFlyoutGrid>button span{font-size:var(--text-small)!important;line-height:1!important}
#plans svg .symbolLens,
.planMarker svg .symbolLens,
.engineeringQueueIcon svg .symbolLens{fill:currentColor!important;stroke:currentColor!important}
.planMarker .markerCore .cameraShape svg{stroke-width:2.7!important}

/* ===== v3.28.0 — confirmed QA corrections + approved plan-symbol system ===== */

/* IOS-3277-01: functional UI text must remain readable at normal desktop scale. */
.shell371 .contextNav371 .navBtn{font-size:var(--text-body)!important}
body:not(.compactNav) .contextNav371 #mainNav .navSection,
.shell371 .contextNav371 .navSectionToggle{font-size:var(--text-small)!important;line-height:1.25!important}
.shell371 button:not(.planMarker):not(.port){font-size:var(--text-body)!important}
.shell371 input,.shell371 select,.shell371 textarea,.shell371 label{font-size:var(--text-body)!important}
.shell371 table{font-size:var(--text-body)!important}
.shell371 thead th{font-size:var(--text-small)!important;line-height:1.25!important}
.shell371 tbody td{font-size:var(--text-body)!important;line-height:1.35!important}
.shell371 :is(.card,.itemCard,.moduleManageBar,.pageHead,.headActions,.toolbar,.metrics,.workflowPageFooter) small,
.shell371 :is(.card,.itemCard,.moduleManageBar,.pageHead,.headActions,.toolbar,.metrics,.workflowPageFooter) .hint,
.shell371 .metric span{font-size:var(--text-small)!important;line-height:1.35!important}
.workflowGuideFooter .guideCenter small,.workflowGuideFooter .guideCenter span{font-size:var(--text-small)!important;line-height:1.3!important}
.pill,.connectionStatus,.statusBadge,.projectStatusBadge{font-size:var(--text-small)!important}

/* IOS-3277-02: tables stay inside the content column; actions remain reachable. */
.shell371 .view,.shell371 .view .card,.shell371 .view .itemCard{min-width:0;max-width:100%}
.dataTableViewport{
  display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;
  overscroll-behavior-inline:contain;scrollbar-gutter:stable;scrollbar-width:thin;
  outline:none
}
.dataTableViewport table{width:100%;min-width:max-content}
.dataTableViewport:focus-visible{box-shadow:inset 0 0 0 2px var(--ui-blue,#2387e8)}
.dataTableViewport.hasActions th:last-child,
.dataTableViewport.hasActions td:last-child{
  position:sticky;right:0;z-index:2;min-width:max-content;
  background:var(--ui-surface,#111b2e);box-shadow:-1px 0 0 var(--ui-border,#2a3953)
}
.dataTableViewport.hasActions thead th:last-child{z-index:3;background:var(--ui-surface2,#162238)}
.dataTableViewport.hasActions tbody tr:hover td:last-child{background:color-mix(in srgb,var(--ui-blue,#2387e8) 4%,var(--ui-surface,#111b2e))!important}
html[data-theme="light"] .dataTableViewport.hasActions td:last-child{background:var(--ui-surface,#fff)}
html[data-theme="light"] .dataTableViewport.hasActions th:last-child{background:var(--ui-surface2,#f2f5f7)}
#procurementBody .card,#inventoryBody .card,#assetsBody .card{min-width:0;max-width:100%;overflow:visible}
#procurementBody .dataTableViewport,#inventoryBody .dataTableViewport,#assetsBody .dataTableViewport{padding-bottom:3px}

/* IOS-3277-03: every side tab sizes to its complete label and count. */
#plans .planSideTabs{
  grid-template-columns:minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1fr)!important;
  overflow-x:auto!important
}
#plans .planSideTabs button{min-width:max-content!important;padding-inline:9px!important}

/* IOS-3277-04: approved tool geometry cannot be compressed by the rail flexbox. */
#plans .planRail.compactToolRail{overflow-y:auto!important;overflow-x:hidden!important}
#plans .compactToolRail .selectTool,
#plans .planCategoryButton,
#plans .planFlyoutGrid>button{
  box-sizing:border-box!important;flex:0 0 44px!important;
  width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;
  min-height:44px!important;max-height:44px!important
}
#plans .planCategoryList{flex:0 0 auto!important}
#plans .selectedPlanTool{flex:0 0 auto!important}

/* Readable, centered tool glyphs using the same line-symbol language as the plan. */
#plans .compactToolRail .selectTool,
#plans .planCategoryButton{padding:4px 1px!important}
#plans .compactToolRail .selectTool>span:last-child,
#plans .planCategoryButton>span,
#plans .planFlyoutGrid>button span{font-size:var(--text-small)!important;line-height:1!important;font-weight:var(--weight-semibold)!important}
#plans .planCategoryButton{grid-template-columns:44px!important;grid-template-rows:23px 10px!important;gap:1px!important}
#plans .planCategoryButton .planCategoryGlyph{width:22px!important;height:22px!important;stroke-width:2.2!important}
#plans .planFlyoutGrid>button{padding:3px 1px!important;gap:1px!important}
#plans .planFlyoutGrid>button svg,#plans .planFlyoutGrid>button.symbolTool svg{
  width:24px!important;height:24px!important;flex:0 0 24px!important;stroke-width:2.25!important
}
#plans .planCategoryFlyout>header small{font-size:var(--text-small)!important}
#plans .selectedPlanTool small,#plans .selectedPlanTool b{font-size:var(--text-small)!important;line-height:1.15!important}
#plans .compactToolRail .selectTool{place-items:center!important;align-content:center!important}

/* Approved architectural marker treatment: neutral badge, dark line icon, state as an accent. */
#plans .planMarker{width:38px!important;height:38px!important;border:0!important;background:transparent!important}
#plans .planMarker .markerCore{
  width:38px!important;height:38px!important;border-radius:8px!important;
  background:rgba(249,251,252,.96)!important;color:#102b3b!important;
  border:1.5px solid #294756!important;
  box-shadow:0 2px 5px rgba(3,13,19,.32)!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape){
  display:grid!important;place-items:center!important;width:30px!important;height:30px!important;line-height:0!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  display:block!important;width:29px!important;height:29px!important;fill:none!important;
  stroke:currentColor!important;stroke-width:2.15!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  overflow:visible!important
}
#plans .planMarker .markerCore .symbolLens{fill:currentColor!important;stroke:currentColor!important}
#plans .planMarker.selected .markerCore{
  border-color:#2387b8!important;outline:2px solid rgba(35,135,184,.28)!important;outline-offset:2px!important;
  box-shadow:0 2px 6px rgba(3,13,19,.35)!important
}
#plans .planMarker.detection .markerCore{background:#fff9e8!important;color:#684b00!important;border-color:#bd8a16!important}
#plans .planMarker.statusNew .markerCore,#plans .planMarker.statusAssigned .markerCore,
#plans .planMarker.statusProgress .markerCore,#plans .planMarker.statusWaiting .markerCore,
#plans .planMarker.statusBlocked .markerCore,#plans .planMarker.statusCompleted .markerCore,
#plans .planMarker.statusClosed .markerCore{
  border-color:var(--status-color)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--status-color) 35%,transparent),0 2px 5px rgba(3,13,19,.32)!important;
  animation:none!important
}
#plans .planMarker .cameraFov path{fill:rgba(64,183,224,.11)!important;stroke:rgba(31,156,204,.62)!important;stroke-width:1.1!important}
#plans .planMarker .label{
  font-family:var(--font-sans)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;
  line-height:1.15!important;padding:3px 6px!important;border-radius:5px!important;
  background:rgba(12,25,34,.94)!important;color:#f5fafc!important;border:1px solid #48616d!important;
  box-shadow:0 2px 5px rgba(0,0,0,.28)!important
}
#plans .markerLockBadge{
  right:-4px!important;bottom:-4px!important;width:13px!important;height:13px!important;
  display:grid!important;place-items:center!important;border-radius:4px!important;
  background:#f8fafc!important;border:1px solid #536d79!important;filter:none!important
}
#plans .markerLockIcon{display:block!important;width:9px!important;height:9px!important;fill:none!important;stroke:#183746!important;stroke-width:1.4!important}
#plans .planPopupSummary small{font-size:var(--text-small)!important}
#plans .planPopupSummary b,#plans .planPopupHint,#plans .planSymbolPopupHead small{font-size:var(--text-body)!important;line-height:1.3!important}

/* ===== v3.28.1 — approved neutral metrics + compact architectural symbols ===== */

/* Estimate and module metrics use the same neutral application surface as cards. */
.shell371 .metric{
  background:var(--ios-panel,var(--ui-surface,#141d22))!important;
  border-color:var(--ios-border,var(--ui-border,#33424b))!important;
  box-shadow:none!important
}
.shell371 .metric:before{display:none!important}
html[data-theme="light"] .shell371 .metric{
  background:var(--ios-panel,var(--ui-surface,#fff))!important;
  border-color:var(--ios-border,var(--ui-border,#c7d0d5))!important
}

/* The approved plan language is standalone line artwork, not large tiled badges. */
#plans .planMarker{width:34px!important;height:34px!important}
#plans .planMarker .markerCore{
  width:34px!important;height:34px!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#0e2a3b!important;box-shadow:none!important;
  outline:0!important;
  transform:scale(var(--marker-render-scale,.55))!important;
  transform-origin:center!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape){width:32px!important;height:32px!important}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  width:31px!important;height:31px!important;stroke-width:2.2!important;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.95)) drop-shadow(0 1px 1px rgba(4,17,25,.18))
}
#plans .planMarker.selected .markerCore{
  color:#0b3850!important;border:0!important;outline:0!important;
  filter:drop-shadow(0 0 3px rgba(43,143,185,.7))!important;box-shadow:none!important
}
#plans .planMarker.detection .markerCore{
  background:transparent!important;color:#755500!important;border:0!important;box-shadow:none!important
}
#plans .planMarker.statusNew .markerCore,#plans .planMarker.statusAssigned .markerCore,
#plans .planMarker.statusProgress .markerCore,#plans .planMarker.statusWaiting .markerCore,
#plans .planMarker.statusBlocked .markerCore,#plans .planMarker.statusCompleted .markerCore,
#plans .planMarker.statusClosed .markerCore{
  color:#0e2a3b!important;border:0!important;box-shadow:none!important;
  filter:drop-shadow(0 0 1px var(--status-color))!important;animation:none!important
}

/* Symbol and label remain compact on screen instead of growing with deep plan zoom. */
#plans .planMarker .label{
  top:var(--annotation-top,29px)!important;
  font-size:var(--text-small)!important;line-height:1!important;padding:3px 5px!important;border-radius:4px!important;
  transform:translate(calc(-50% + var(--label-x,0px)),var(--label-y,0px)) scale(var(--plan-compensation,1))!important;
  transform-origin:top center!important;
  background:#13232e!important;color:#f7fbfd!important;border:1px solid #344f5e!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important
}

/* ===== v3.28.8 — complete approved Plan Studio interaction and control geometry ===== */
@media(min-width:761px){
  #plans .planRail.compactToolRail,
  #plans .compactToolRail .selectTool,
  #plans .planCategoryList,
  #plans .planCategoryButton,
  #plans .selectedPlanTool{
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important
  }
  #plans .planCategoryFlyout:not(.planCameraSubmenu){
    left:62px!important;
    width:var(--plan-tools-width,174px)!important
  }
  #plans .planCategoryFlyout.planCameraSubmenu{
    left:calc(62px + var(--plan-tools-width,174px) + 8px)!important
  }
  #plans .planCategoryFlyout:not(.planCameraSubmenu)>.planFlyoutGrid{
    flex:1 1 auto!important;
    align-content:start!important;
    justify-content:center!important;
    padding-top:10px!important
  }
  #plans .toolsPanelHandle{
    left:68px!important;
    transform:translate(0,-50%)!important
  }
  #plans .planWorkspace.toolsOpen .toolsPanelHandle{
    left:calc(62px + var(--plan-tools-width,174px) + 6px)!important
  }
  #plans .planWorkspace.cameraToolsOpen .toolsPanelHandle{
    left:calc(62px + var(--plan-tools-width,174px) + 8px + 174px + 6px)!important
  }
  #plans .planWorkspace.railCollapsed .toolsPanelHandle{
    left:0!important;
    transform:translate(0,-50%)!important
  }
  #plans .inspectorPanelHandle{
    right:340px!important;
    transform:translate(0,-50%)!important
  }
  #plans .planWorkspace.inspectorCollapsed .inspectorPanelHandle{
    right:0!important;
    transform:translate(0,-50%)!important
  }
}
@media(min-width:761px) and (max-width:1100px){
  #plans .inspectorPanelHandle{right:310px!important}
}

#plans .planMarquee{
  position:absolute!important;
  z-index:95!important;
  pointer-events:none!important;
  border:1px solid #58aef5!important;
  background:rgba(35,135,232,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important
}
#plans .planMarquee[hidden]{display:none!important}
#plans .planCanvasWrap:not(.placingTool){cursor:default!important}
#plans .planCanvasWrap.panning{cursor:grabbing!important}
#plans .planCanvasWrap.marqueeSelecting{cursor:crosshair!important;user-select:none!important}
#plans .planMarker.marqueeSelected .markerCore,
#plans .planMarker.selected .markerCore{
  outline:2px solid #58aef5!important;
  outline-offset:3px!important
}

/*
 * The legacy compact-symbol selector includes the status class, so it is more
 * specific than the generic ring rule and used to win with `border:0`.  Keep
 * these status-qualified rules in the final block: the symbol is transparent,
 * while the task state is shown by the compact perimeter only.
 */
#plans .planMarker .markerCore,
#plans .planMarker.statusNew .markerCore,
#plans .planMarker.statusAssigned .markerCore,
#plans .planMarker.statusProgress .markerCore,
#plans .planMarker.statusWaiting .markerCore,
#plans .planMarker.statusBlocked .markerCore,
#plans .planMarker.statusCompleted .markerCore,
#plans .planMarker.statusClosed .markerCore{
  box-sizing:border-box!important;
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  border:3px solid var(--status-color,#2387e8)!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#102b3b!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
  transform:scale(var(--marker-render-scale,.55))!important;
  transform-origin:center!important;
  animation:none!important
}
#plans .planMarker.selected .markerCore,
#plans .planMarker.selected.statusNew .markerCore,
#plans .planMarker.selected.statusAssigned .markerCore,
#plans .planMarker.selected.statusProgress .markerCore,
#plans .planMarker.selected.statusWaiting .markerCore,
#plans .planMarker.selected.statusBlocked .markerCore,
#plans .planMarker.selected.statusCompleted .markerCore,
#plans .planMarker.selected.statusClosed .markerCore{
  border:3px solid var(--status-color,#2387e8)!important;
  outline:2px solid rgba(35,135,232,.32)!important;
  outline-offset:3px!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape),
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  width:34px!important;
  height:34px!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.96))!important;
  overflow:visible!important
}
#plans .planMarker.detection .markerCore{
  width:40px!important;
  height:40px!important;
  border:3px dashed #bd8a16!important;
  border-radius:50%!important;
  background:rgba(255,249,232,.72)!important;
  color:#684b00!important
}

/* Whole-symbol resize stays separate on the left; camera rotation stays above. */
#plans .planMarker.selected:not(.markerLocked)>.resizeHandle{
  cursor:ew-resize!important;
  border-radius:4px!important;
  font-size:var(--text-small)!important
}

/* FOV width uses two blue corners; FOV distance uses one red midpoint on the arc. */
#plans .fovRangeHandle{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  margin:-9px 0 0 -9px!important;
  transform:translate(var(--fov-x),var(--fov-y))!important;
  cursor:ns-resize!important;
  touch-action:none!important;
  z-index:44!important
}
#plans .fovRangeHandle::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  border:2px solid #b4232f!important;
  background:#ef3340!important;
  box-shadow:0 1px 3px rgba(0,0,0,.35)!important;
  transform:translate(-50%,-50%) scale(var(--plan-compensation,1))!important;
  transform-origin:center!important
}
#plans .planMarker:not(.selected)>.fovRangeHandle,
#plans .planMarker.markerLocked>.fovRangeHandle{display:none!important}

#plans .deviceTaskLinkNotice{
  padding:10px 12px!important;
  border:1px solid color-mix(in srgb,var(--ui-accent,#31a7d8) 45%,var(--ui-border,#344651))!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--ui-accent,#31a7d8) 8%,transparent)!important;
  color:var(--ui-muted,#a8bac3)!important;
  font-size:var(--text-body)!important}

/* Status-qualified rules must stay last to defeat the legacy border:0 rule. */
#plans .planMarker .markerCore,
#plans .planMarker.statusNew .markerCore,
#plans .planMarker.statusAssigned .markerCore,
#plans .planMarker.statusProgress .markerCore,
#plans .planMarker.statusWaiting .markerCore,
#plans .planMarker.statusBlocked .markerCore,
#plans .planMarker.statusCompleted .markerCore,
#plans .planMarker.statusClosed .markerCore{
  box-sizing:border-box!important;
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  border:3px solid var(--status-color,#2387e8)!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#102b3b!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
  transform:scale(var(--marker-render-scale,.55))!important;
  transform-origin:center!important;
  animation:none!important
}
#plans .planMarker.selected .markerCore,
#plans .planMarker.selected.statusNew .markerCore,
#plans .planMarker.selected.statusAssigned .markerCore,
#plans .planMarker.selected.statusProgress .markerCore,
#plans .planMarker.selected.statusWaiting .markerCore,
#plans .planMarker.selected.statusBlocked .markerCore,
#plans .planMarker.selected.statusCompleted .markerCore,
#plans .planMarker.selected.statusClosed .markerCore{
  border:3px solid var(--status-color,#2387e8)!important;
  outline:2px solid rgba(35,135,232,.32)!important;
  outline-offset:3px!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape),
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  width:34px!important;
  height:34px!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.96))!important;
  overflow:visible!important
}
#plans .planMarker.detection .markerCore{
  width:40px!important;
  height:40px!important;
  border:3px dashed #bd8a16!important;
  border-radius:50%!important;
  background:rgba(255,249,232,.72)!important;
  color:#684b00!important
}
#plans .planMarker.selected .label::after{inset:-2px!important;border-color:rgba(53,142,181,.55)!important}

/* Lock is an unobtrusive state indicator attached to the architectural symbol. */
#plans .markerLockBadge{
  right:-3px!important;bottom:-3px!important;width:11px!important;height:11px!important;
  border-radius:3px!important;background:#fff!important;border:1px solid #526b77!important
}
#plans .markerLockIcon{width:8px!important;height:8px!important;stroke-width:1.35!important}

/* Keep field-of-view geometry on plan scale, but visually secondary. */
#plans .planMarker .cameraFov path{
  fill:rgba(68,178,220,.075)!important;stroke:rgba(37,150,194,.52)!important;stroke-width:1!important
}

/* Match the approved category artwork: centered, restrained line icons. */
#plans .planCategoryButton .planCategoryGlyph{stroke-width:2!important}
#plans .planCategoryButton.active,#plans .planFlyoutGrid>button.active{
  color:var(--ui-text,#e8f1f5)!important;
  background:color-mix(in srgb,var(--ui-text,#e8f1f5) 8%,var(--ui-surface-2,#14232d))!important;
  border-color:var(--ui-muted,#81939d)!important
}
html[data-theme="light"] #plans .planCategoryButton.active,
html[data-theme="light"] #plans .planFlyoutGrid>button.active{
  color:#162d3a!important;background:#edf1f3!important;border-color:#526d7b!important
}

/* ===== v3.28.2 — Forge-confirmed Select rail geometry only ===== */
#plans .compactToolRail .selectTool{
  box-sizing:border-box!important;
  flex:0 0 44px!important;
  inline-size:44px!important;
  block-size:44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--ui-border,#304553)!important
}
html[data-theme="light"] #plans .compactToolRail .selectTool{
  box-shadow:inset 0 0 0 1px var(--plan-control-border,#aeb5ba)!important
}

/* ===== v3.28.4 — approved Plan Studio toolbar icon system only ===== */
#plans .compactToolRail .selectTool,
#plans .planCategoryButton,
#plans .planFlyoutGrid>button{
  box-sizing:border-box!important;
  flex:0 0 44px!important;
  inline-size:44px!important;
  block-size:44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  color:var(--ui-text,#edf4f7)!important;
  background:var(--ui-surface-2,#15232c)!important;
  border:0!important;
  border-radius:5px!important;
  box-shadow:inset 0 0 0 1px var(--ui-border,#3b4a53)!important;
  transform:none!important
}
#plans .compactToolRail .selectTool:hover,
#plans .planCategoryButton:hover,
#plans .planFlyoutGrid>button:hover{
  color:var(--ui-text,#fff)!important;
  background:color-mix(in srgb,var(--ui-text,#fff) 5%,var(--ui-surface-2,#15232c))!important;
  box-shadow:inset 0 0 0 1px var(--ui-muted,#70828d)!important;
  transform:none!important
}
#plans .compactToolRail .selectTool.active,
#plans .planCategoryButton.active,
#plans .planFlyoutGrid>button.active{
  color:var(--ui-text,#fff)!important;
  background:var(--ui-surface-2,#15232c)!important;
  box-shadow:inset 0 0 0 2px var(--ui-blue,#2387e8)!important;
  outline:0!important
}
#plans .planCategoryButton{
  position:relative!important;
  display:grid!important;
  grid-template-columns:44px!important;
  grid-template-rows:24px 16px!important;
  place-items:center!important;
  align-content:center!important;
  gap:0!important;
  padding:2px 0!important
}
#plans .planCategoryButton .planCategoryGlyph{
  grid-column:1!important;
  grid-row:1!important;
  display:block!important;
  width:24px!important;
  height:24px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  overflow:visible!important
}
#plans .planCategoryButton>span{
  grid-column:1!important;
  grid-row:2!important;
  align-self:center!important;
  width:40px!important;
  margin:0!important;
  color:inherit!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  line-height:8px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important
}
#plans .planCategoryButton>b{
  right:2px!important;
  color:var(--ui-muted,#8da0aa)!important;
  font-size:var(--text-small)!important}
#plans .compactToolRail .selectTool{
  display:grid!important;
  grid-template-rows:24px 12px!important;
  place-items:center!important;
  align-content:center!important;
  gap:1px!important;
  padding:2px 0!important
}
#plans .compactToolRail .selectTool .selectArrow,
#plans .compactToolRail .selectTool .selectArrow svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  margin:0!important
}
#plans .compactToolRail .selectTool>span:last-child{
  width:40px!important;
  color:inherit!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  line-height:9px!important;
  text-align:center!important
}
#plans .planFlyoutGrid>button{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
  padding:2px 0!important
}
#plans .planFlyoutGrid>button .toolbarSymbolGlyph{
  display:block!important;
  width:25px!important;
  height:25px!important;
  flex:0 0 25px!important;
  margin:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  overflow:visible!important
}
#plans .planFlyoutGrid>button .toolbarSymbolGlyph .symbolLens,
#plans .planCategoryButton .symbolLens{fill:currentColor!important;stroke:currentColor!important}
#plans .planFlyoutGrid>button>span{
  display:block!important;
  width:42px!important;
  min-height:9px!important;
  color:inherit!important;
  font-size:var(--text-small)!important;
  font-weight:var(--weight-semibold)!important;
  line-height:9px!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important
}
#plans .planFlyoutGrid>button.cameraCategoryTool>b{
  right:2px!important;
  color:var(--ui-muted,#8da0aa)!important;
  font-size:var(--text-small)!important}
#plans .planCategoryFlyout{
  background:var(--ui-surface,#101b22)!important;
  border-color:var(--ui-border,#3b4a53)!important
}
#plans .planFlyoutGrid{align-items:start!important}
#plans .planCameraSubmenu .planFlyoutGrid{grid-template-columns:repeat(2,44px)!important;justify-content:start!important}
html[data-theme="light"] #plans .compactToolRail .selectTool,
html[data-theme="light"] #plans .planCategoryButton,
html[data-theme="light"] #plans .planFlyoutGrid>button{
  color:#263943!important;
  background:#fff!important;
  box-shadow:inset 0 0 0 1px #aebbc3!important
}
html[data-theme="light"] #plans .compactToolRail .selectTool:hover,
html[data-theme="light"] #plans .planCategoryButton:hover,
html[data-theme="light"] #plans .planFlyoutGrid>button:hover{
  color:#172a34!important;
  background:#f3f6f7!important;
  box-shadow:inset 0 0 0 1px #647985!important
}
html[data-theme="light"] #plans .compactToolRail .selectTool.active,
html[data-theme="light"] #plans .planCategoryButton.active,
html[data-theme="light"] #plans .planFlyoutGrid>button.active{
  color:#172a34!important;
  background:#fff!important;
  box-shadow:inset 0 0 0 2px var(--ui-blue,#2387e8)!important
}
html[data-theme="light"] #plans .planCategoryFlyout{
  background:#f7f9fa!important;
  border-color:#9aabb4!important
}

/* ===== v3.28.5 — full-height centered Plan Tools flyout only ===== */
@media(min-width:761px){
  #plans .planCategoryFlyout:not(.planCameraSubmenu){
    top:0!important;
    bottom:0!important;
    height:auto!important;
    min-height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important
  }
  #plans .planCategoryFlyout:not(.planCameraSubmenu)>.planFlyoutGrid{
    flex:1 1 auto!important;
    align-content:center!important;
    justify-content:center!important
  }
}

/* ===== v3.28.6 — complete approved Plan Studio tools and symbols ===== */

/* Keep the approved 44x44 controls, but give the architectural glyphs enough presence. */
#plans .planCategoryButton .planCategoryGlyph{
  width:25px!important;
  height:25px!important;
  stroke-width:2.25!important
}
#plans .planFlyoutGrid>button .toolbarSymbolGlyph{
  width:27px!important;
  height:27px!important;
  flex-basis:27px!important;
  stroke-width:2.15!important
}
#plans .planFlyoutGrid>button>span,
#plans .planCategoryButton>span,
#plans .compactToolRail .selectTool>span:last-child{
  font-size:var(--text-small)!important;
  line-height:9px!important
}

/* Approved status ring: compact white center, architectural glyph, task-state perimeter. */
#plans .planMarker{
  width:52px!important;
  height:52px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important
}
#plans .planMarker .markerCore{
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  border:4px solid var(--status-color,#2387e8)!important;
  border-radius:50%!important;
  background:rgba(250,252,253,.97)!important;
  color:#102b3b!important;
  box-shadow:0 2px 7px rgba(3,13,19,.3)!important;
  outline:0!important;
  transform:scale(var(--marker-render-scale,.55))!important;
  transform-origin:center!important;
  animation:none!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape){
  width:35px!important;
  height:35px!important;
  display:grid!important;
  place-items:center!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  width:34px!important;
  height:34px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:none!important;
  overflow:visible!important
}
#plans .planMarker .markerCore .symbolLens{
  fill:currentColor!important;
  stroke:currentColor!important
}
#plans .planMarker.statusNew .markerCore,
#plans .planMarker.statusAssigned .markerCore,
#plans .planMarker.statusProgress .markerCore,
#plans .planMarker.statusWaiting .markerCore,
#plans .planMarker.statusBlocked .markerCore,
#plans .planMarker.statusCompleted .markerCore,
#plans .planMarker.statusClosed .markerCore{
  color:#102b3b!important;
  border-color:var(--status-color)!important;
  box-shadow:0 2px 7px rgba(3,13,19,.3)!important;
  filter:none!important;
  animation:none!important
}
#plans .planMarker.selected .markerCore{
  outline:2px solid rgba(35,135,232,.28)!important;
  outline-offset:3px!important;
  filter:none!important
}
#plans .planMarker.detection .markerCore{
  width:40px!important;
  height:40px!important;
  border:3px dashed #bd8a16!important;
  background:#fff9e8!important;
  color:#684b00!important
}

/* The lock state is always visible as a miniature badge on the ring's lower-right edge. */
#plans .planMarker .markerCore .markerLockBadge{
  position:absolute!important;
  right:-7px!important;
  bottom:-7px!important;
  width:15px!important;
  height:15px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:5px!important;
  color:#fff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.35)!important;
  filter:none!important;
  pointer-events:none!important;
  z-index:25!important
}
#plans .markerLockBadge.locked{
  background:#2387e8!important;
  border:1px solid #1262b8!important
}
#plans .markerLockBadge.unlocked{
  background:#20a85a!important;
  border:1px solid #11743b!important
}
#plans .markerLockBadge .markerLockIcon{
  width:10px!important;
  height:10px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.65!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important
}

/* Selected-only editing controls: rotate, resize, and both FOV corner handles. */
#plans .planMarker.selected:not(.markerLocked)>.rotateHandle,
#plans .planMarker.selected:not(.markerLocked)>.resizeHandle{
  display:grid!important;
  place-items:center!important;
  scale:var(--plan-compensation,1)!important;
  transform-origin:center!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  min-height:14px!important;
  margin:-7px 0 0 -7px!important;
  padding:0!important;
  border:2px solid #2387e8!important;
  background:#f8fcff!important;
  color:#1769ad!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  font-size:8px!important;
  line-height:1!important;
  z-index:45!important
}
#plans .planMarker.selected:not(.markerLocked)>.rotateHandle{border-radius:50%!important}
#plans .planMarker.selected:not(.markerLocked)>.resizeHandle{border-radius:3px!important;cursor:nwse-resize!important}
#plans .planMarker:not(.selected)>.rotateHandle,
#plans .planMarker:not(.selected)>.resizeHandle,
#plans .planMarker.markerLocked>.rotateHandle,
#plans .planMarker.markerLocked>.resizeHandle{
  display:none!important
}
#plans .fovAngleHandle{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:16px!important;
  height:16px!important;
  margin:-8px 0 0 -8px!important;
  transform:translate(var(--fov-x),var(--fov-y))!important;
  cursor:crosshair!important;
  touch-action:none!important;
  z-index:42!important
}
#plans .fovAngleHandle::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  border:2px solid #2387e8!important;
  background:#f8fcff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.25)!important;
  transform:translate(-50%,-50%) scale(var(--plan-compensation,1))!important;
  transform-origin:center!important
}
#plans .planMarker:not(.selected)>.fovAngleHandle,
#plans .planMarker.markerLocked>.fovAngleHandle{display:none!important}

/* ===== v3.28.7 — approved Plan Studio navigation, layout, controls, and task-state markers ===== */
#plans .planWorkspace{
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
  column-gap:0!important;
  row-gap:0!important
}
#plans .planRail.compactToolRail{
  height:100%!important;
  box-sizing:border-box!important;
  align-items:center!important
}
#plans #planCanvasWrap{
  position:relative!important;
  overflow:hidden!important;
  min-width:0!important;
  min-height:0!important;
  scrollbar-width:none!important;
  overscroll-behavior:none!important
}
#plans #planCanvasWrap::-webkit-scrollbar{display:none!important}
#plans #planCanvasSizer{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important}
#plans #planSurface{will-change:transform,left,top!important}
#plans .planInspector{height:100%!important;min-height:0!important;box-sizing:border-box!important}
#plans .planStatusBar{
  box-sizing:border-box!important;
  min-height:30px!important;
  margin:0!important;
  border-top:1px solid var(--ui-border,#344651)!important;
  display:grid!important;
  grid-template-columns:auto auto auto auto 1fr!important;
  align-items:center!important;
  column-gap:14px!important
}
#plans .planStatusBar>span:last-child{text-align:right!important}

@media(min-width:761px){
  #plans .planCategoryFlyout:not(.planCameraSubmenu){
    width:var(--plan-tools-width,174px)!important;
    max-width:320px!important;
    min-width:158px!important;
    border-radius:0 9px 9px 0!important
  }
  #plans .planCategoryFlyout.planCameraSubmenu{
    left:calc(59px + var(--plan-tools-width,174px) + 8px)!important
  }
  #plans .planCategoryFlyout[data-category="security"]>.planFlyoutGrid{
    grid-template-columns:repeat(2,44px)!important;
    grid-auto-rows:44px!important;
    gap:8px 10px!important;
    place-content:center!important
  }
}
#plans .planToolsResizeGrip{
  position:absolute!important;
  top:0!important;
  right:-5px!important;
  bottom:0!important;
  width:10px!important;
  cursor:ew-resize!important;
  touch-action:none!important;
  z-index:80!important
}
#plans .planToolsResizeGrip::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  left:4px!important;
  width:2px!important;
  height:34px!important;
  border-radius:2px!important;
  background:var(--ui-border,#536873)!important;
  transform:translateY(-50%)!important
}
#plans .planFlyoutGrid>button.categoryShortcut>b{position:absolute!important;right:2px!important;font-size:var(--text-small)!important;color:var(--ui-muted,#8da0aa)!important}

/* A single clean close control replaces inconsistent X buttons throughout the app. */
button.uiCloseButton,
.modalHead>button[data-close],
button[aria-label^="Close"],
.modalHead>button:last-child,
.planSymbolPopupHead>button:last-child,
.mobileSheetHead>button:last-child{
  box-sizing:border-box!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--ui-border,#445a66)!important;
  border-radius:7px!important;
  background:var(--ui-surface-2,#14222b)!important;
  color:var(--ui-text,#e8f0f4)!important;
  font:var(--weight-regular) var(--text-section)/1 var(--font-sans)!important;
  box-shadow:none!important
}
button.uiCloseButton:hover,
.modalHead>button[data-close]:hover,
button[aria-label^="Close"]:hover{background:var(--ui-hover,#20323d)!important;border-color:var(--ui-muted,#78909c)!important}

/* Compact status ring and fixed-size lock badge tangent to its lower-right edge. */
#plans .planMarker>.markerLockBadge{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
  min-height:11px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:4px!important;
  color:#fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.38)!important;
  transform:translate(var(--lock-offset,10px),var(--lock-offset,10px)) scale(var(--plan-compensation))!important;
  transform-origin:center!important;
  pointer-events:none!important;
  z-index:35!important
}
#plans .planMarker>.markerLockBadge .markerLockIcon{width:7px!important;height:7px!important;stroke-width:1.8!important}
#plans .planMarker.selected:not(.markerLocked)>.rotateHandle,
#plans .planMarker.selected:not(.markerLocked)>.resizeHandle{z-index:50!important}
#plans .planMarker.selected:not(.markerLocked)>.rotateHandle{cursor:grab!important}
#plans .planMarker .labelLeader{transform-origin:0 50%!important;z-index:19!important}
#plans .planMarker .labelLeader::after{right:-1px!important;top:50%!important;transform:translateY(-50%) rotate(45deg)!important}

/* Keep labels compact and readable beneath the centered ring. */
#plans .planMarker .label{
  top:var(--annotation-top,29px)!important;
  font-size:var(--text-small)!important;
  line-height:1!important;
  padding:3px 5px!important;
  border-radius:4px!important;
  transform:translate(calc(-50% + var(--label-x,0px)),var(--label-y,0px)) scale(var(--plan-compensation,1))!important;
  transform-origin:top center!important;
  background:#13232e!important;
  color:#f7fbfd!important;
  border:1px solid #344f5e!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important
}

/* ===== v3.28.9 — FINAL ACTIVE OVERRIDES (must remain last in this file) ===== */
/* Status-qualified rules defeat the legacy compact-symbol border:0 selector. */
#plans .planMarker .markerCore,
#plans .planMarker.statusNew .markerCore,
#plans .planMarker.statusAssigned .markerCore,
#plans .planMarker.statusProgress .markerCore,
#plans .planMarker.statusWaiting .markerCore,
#plans .planMarker.statusBlocked .markerCore,
#plans .planMarker.statusCompleted .markerCore,
#plans .planMarker.statusClosed .markerCore{
  box-sizing:border-box!important;
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  border:3px solid var(--status-color,#2387e8)!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#102b3b!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
  transform:scale(var(--marker-render-scale,.55))!important;
  transform-origin:center!important;
  animation:none!important
}
#plans .planMarker.selected .markerCore,
#plans .planMarker.selected.statusNew .markerCore,
#plans .planMarker.selected.statusAssigned .markerCore,
#plans .planMarker.selected.statusProgress .markerCore,
#plans .planMarker.selected.statusWaiting .markerCore,
#plans .planMarker.selected.statusBlocked .markerCore,
#plans .planMarker.selected.statusCompleted .markerCore,
#plans .planMarker.selected.statusClosed .markerCore{
  border:3px solid var(--status-color,#2387e8)!important;
  outline:2px solid rgba(35,135,232,.32)!important;
  outline-offset:3px!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape),
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  width:34px!important;
  height:34px!important
}
#plans .planMarker .markerCore :is(.cameraShape,.planDeviceShape) svg{
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.96))!important;
  overflow:visible!important
}
#plans .planMarker.detection .markerCore{
  width:40px!important;
  height:40px!important;
  border:3px dashed #bd8a16!important;
  border-radius:50%!important;
  background:rgba(255,249,232,.72)!important;
  color:#684b00!important
}
@media(min-width:761px){
  #plans .planRail.compactToolRail,
  #plans .compactToolRail .selectTool,
  #plans .planCategoryList,
  #plans .planCategoryButton,
  #plans .selectedPlanTool{
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important
  }
  #plans .planCategoryFlyout:not(.planCameraSubmenu){
    left:62px!important;
    width:var(--plan-tools-width,174px)!important;
    min-width:158px!important;
    max-width:320px!important;
    top:0!important;
    bottom:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important
  }
  #plans .planCategoryFlyout.planCameraSubmenu{
    left:calc(62px + var(--plan-tools-width,174px) + 8px)!important
  }
  #plans .planCategoryFlyout:not(.planCameraSubmenu)>.planFlyoutGrid{
    flex:1 1 auto!important;
    align-content:start!important;
    justify-content:center!important;
    place-content:start center!important;
    padding-top:10px!important
  }
  #plans .planCategoryFlyout[data-category="security"]>.planFlyoutGrid{
    grid-template-columns:repeat(2,44px)!important;
    grid-auto-rows:44px!important;
    gap:8px 10px!important
  }
  #plans .toolsPanelHandle{
    left:68px!important;
    top:50%!important;
    transform:translate(0,-50%)!important
  }
  #plans .planWorkspace.toolsOpen .toolsPanelHandle{
    left:calc(62px + var(--plan-tools-width,174px) + 6px)!important
  }
  #plans .planWorkspace.cameraToolsOpen .toolsPanelHandle{
    left:calc(62px + var(--plan-tools-width,174px) + 8px + 174px + 6px)!important
  }
  #plans .planWorkspace.railCollapsed .toolsPanelHandle{
    left:0!important;
    transform:translate(0,-50%)!important
  }
  #plans .inspectorPanelHandle{
    right:340px!important;
    top:50%!important;
    transform:translate(0,-50%)!important
  }
  #plans .planWorkspace.inspectorCollapsed .inspectorPanelHandle{
    right:0!important;
    transform:translate(0,-50%)!important
  }
}
@media(min-width:761px) and (max-width:1100px){
  #plans .inspectorPanelHandle{right:310px!important}
}

#plans .planMarquee{
  position:absolute!important;
  z-index:95!important;
  pointer-events:none!important;
  border:1px solid #58aef5!important;
  background:rgba(35,135,232,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important
}
#plans .planMarquee[hidden]{display:none!important}
#plans .planCanvasWrap:not(.placingTool){cursor:default!important}
#plans .planCanvasWrap.panning{cursor:grabbing!important}
#plans .planCanvasWrap.marqueeSelecting{cursor:crosshair!important;user-select:none!important}
#plans .planMarker.marqueeSelected .markerCore,
#plans .planMarker.selected .markerCore{
  outline:2px solid #58aef5!important;
  outline-offset:3px!important
}

#plans .planMarker.selected:not(.markerLocked)>.resizeHandle{
  cursor:ew-resize!important;
  border-radius:4px!important;
  font-size:var(--text-small)!important
}
#plans .fovRangeHandle{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  margin:-9px 0 0 -9px!important;
  transform:translate(var(--fov-x),var(--fov-y))!important;
  cursor:ns-resize!important;
  touch-action:none!important;
  z-index:44!important
}
#plans .fovRangeHandle::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  border:2px solid #b4232f!important;
  background:#ef3340!important;
  box-shadow:0 1px 3px rgba(0,0,0,.35)!important;
  transform:translate(-50%,-50%) scale(var(--plan-compensation,1))!important;
  transform-origin:center!important
}
#plans .planMarker:not(.selected)>.fovRangeHandle,
#plans .planMarker.markerLocked>.fovRangeHandle{display:none!important}
#plans .deviceTaskLinkNotice{
  padding:10px 12px!important;
  border:1px solid color-mix(in srgb,var(--ui-accent,#31a7d8) 45%,var(--ui-border,#344651))!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--ui-accent,#31a7d8) 8%,transparent)!important;
  color:var(--ui-muted,#a8bac3)!important;
  font-size:var(--text-body)!important}


/* ===== v3.29.6 — Dashboard heading and role subtitle (QA-289-020) ===== */
#projecthome.view.active .projectHomeHead .dashboardRoleSubtitle{
  margin:2px 0 0!important;
  font-size:var(--text-body)!important;
  font-weight:var(--weight-semibold)!important;
  letter-spacing:.2px!important;
  line-height:1.25!important;
  color:var(--ui-muted,#92a3af)!important;
  text-transform:none!important;
}
#projecthome.view.active .projectHomeHead #projectHomeHint{
  margin:2px 0 0!important;
  font-size:var(--text-body)!important;
  color:color-mix(in srgb,var(--ui-muted,#92a3af) 78%,transparent)!important;
}


/* ===== v3.31.0 — Roles editor, role preview banner and Security Audit ===== */
/* The role list items are buttons: "#appShell #roles .roleList button" outranks the legacy
   "#appShell button:not(...)" rule, which would otherwise paint every item as selected. */
#previewBanner.previewBanner{
  position:sticky!important;top:0!important;z-index:40!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  margin:0 0 8px!important;padding:9px 14px!important;border-radius:10px!important;
  background:var(--ui-blue-soft,#eaf4ff)!important;color:var(--ui-text,#18232d)!important;
  border:1px solid color-mix(in srgb,var(--ui-blue,#137fe5) 45%,transparent)!important;font-size:var(--text-body)!important;
}
#previewBanner.previewBanner[hidden]{display:none!important}
#previewBanner .previewBannerText b{color:var(--ui-blue,#137fe5)!important}
#previewBanner button{flex:0 0 auto!important;min-height:30px!important;padding:5px 12px!important}

#roles .rolesLayout{display:grid!important;grid-template-columns:minmax(220px,260px) minmax(0,1fr)!important;gap:14px!important;align-items:start!important}
#roles .rolesListCard,#roles .roleDetailCard{margin:0!important;min-width:0!important}
#roles .roleList{display:flex!important;flex-direction:column!important;gap:4px!important;margin-top:8px!important}
#appShell #roles .roleList button.roleListItem{
  display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;column-gap:8px!important;row-gap:1px!important;
  width:100%!important;min-height:0!important;height:auto!important;padding:8px 10px!important;text-align:left!important;
  background:transparent!important;color:var(--ui-text,#18232d)!important;border:1px solid transparent!important;border-radius:8px!important;box-shadow:none!important;
}
#appShell #roles .roleList button.roleListItem:hover{background:var(--ui-surface2,#f8fafc)!important;border-color:var(--ui-border,#dde5ec)!important}
#appShell #roles .roleList button.roleListItem.active{background:var(--ui-blue-soft,#eaf4ff)!important;border-color:color-mix(in srgb,var(--ui-blue,#137fe5) 40%,transparent)!important}
#roles .roleListName{grid-column:1!important;grid-row:1!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-body)!important}
#roles .roleListMeta{grid-column:1!important;grid-row:2!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}
#appShell #roles .roleList button.roleListItem .roleBadge{grid-column:2!important;grid-row:1 / span 2!important;align-self:center!important}
#roles .roleBadge{display:inline-block!important;padding:2px 8px!important;border-radius:999px!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;
  background:var(--ui-surface2,#f8fafc)!important;color:var(--ui-muted,#71808d)!important;border:1px solid var(--ui-border,#dde5ec)!important}
#roles .roleBadgeEdited{background:color-mix(in srgb,var(--ui-amber,#dc9225) 14%,transparent)!important;color:var(--ui-amber,#dc9225)!important;border-color:color-mix(in srgb,var(--ui-amber,#dc9225) 40%,transparent)!important}
#roles .roleBadgeFixed{background:color-mix(in srgb,var(--ui-blue,#137fe5) 12%,transparent)!important;color:var(--ui-blue,#137fe5)!important;border-color:color-mix(in srgb,var(--ui-blue,#137fe5) 35%,transparent)!important}

#roles .roleDetailHead{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;padding-bottom:10px!important;margin-bottom:6px!important;border-bottom:1px solid var(--ui-border,#dde5ec)!important}
#roles .roleDetailHead h3{margin:2px 0!important}
#roles .roleDetailHead p{margin:0!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}
#roles .roleViewOnly,#roles .rolePending{flex:0 0 auto!important;padding:3px 10px!important;border-radius:999px!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
#roles .roleViewOnly{background:var(--ui-surface2,#f8fafc)!important;color:var(--ui-muted,#71808d)!important;border:1px solid var(--ui-border,#dde5ec)!important}
#roles .rolePending{background:color-mix(in srgb,var(--ui-amber,#dc9225) 14%,transparent)!important;color:var(--ui-amber,#dc9225)!important}

#roles .rolePermTable{display:flex!important;flex-direction:column!important}
#roles .rolePermRow{display:grid!important;grid-template-columns:minmax(130px,170px) minmax(0,1fr)!important;gap:10px!important;align-items:center!important;padding:6px 0!important;border-bottom:1px solid color-mix(in srgb,var(--ui-border,#dde5ec) 70%,transparent)!important}
#roles .rolePermRow:last-child{border-bottom:0!important}
#roles .rolePermModule{font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;color:var(--ui-text,#18232d)!important}
#roles .rolePermChips{display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-width:0!important}
#roles .rolePermChip{
  position:relative!important;display:inline-flex!important;align-items:center!important;gap:6px!important;margin:0!important;
  padding:4px 10px 4px 8px!important;border-radius:8px!important;font-size:var(--text-body)!important;cursor:pointer!important;user-select:none!important;
  background:var(--ui-surface,#fff)!important;color:var(--ui-muted,#71808d)!important;border:1px solid var(--ui-border,#dde5ec)!important;
}
#roles .rolePermChip input{margin:0!important;width:14px!important;height:14px!important;accent-color:var(--ui-blue,#137fe5)!important}
#roles .rolePermChip.on{color:var(--ui-text,#18232d)!important;background:var(--ui-blue-soft,#eaf4ff)!important;border-color:color-mix(in srgb,var(--ui-blue,#137fe5) 35%,transparent)!important}
#roles .rolePermChip.adding{border-color:var(--ui-green,#27a66f)!important;box-shadow:inset 0 0 0 1px var(--ui-green,#27a66f)!important}
#roles .rolePermChip.removing{border-color:var(--ui-red,#df5966)!important;box-shadow:inset 0 0 0 1px var(--ui-red,#df5966)!important}
#roles .rolePermChip.removing span{text-decoration:line-through!important}
#roles .rolePermChip.locked{cursor:not-allowed!important;opacity:.7!important;border-style:dashed!important}
#roles .rolePermChip.mini{padding:1px 7px!important;font-size:var(--text-body)!important;vertical-align:middle!important}
#roles .roleDefaultDot{display:inline-block!important;width:6px!important;height:6px!important;border-radius:50%!important;background:var(--ui-amber,#dc9225)!important;flex:0 0 auto!important}
#roles .roleLegend{margin:10px 0 0!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}
#roles .roleFixedNote{padding:14px!important;border-radius:10px!important;background:var(--ui-surface2,#f8fafc)!important;border:1px solid var(--ui-border,#dde5ec)!important;color:var(--ui-text,#18232d)!important}
#roles .roleFixedNote p{margin:6px 0 0!important;color:var(--ui-muted,#71808d)!important;font-size:var(--text-body)!important}

#modal .roleConfirm{font-size:var(--text-body)!important;color:var(--ui-text,#18232d)!important;max-width:560px!important}
#modal .roleConfirm .roleImpact{margin:0 0 10px!important}
#modal .roleConfirm .roleChangeLine{margin:6px 0!important;line-height:1.9!important}
#modal .roleConfirm code{display:inline-block!important;padding:0 6px!important;margin:0 2px 2px 0!important;border-radius:6px!important;font-size:var(--text-body)!important;background:var(--ui-surface2,#f8fafc)!important;border:1px solid var(--ui-border,#dde5ec)!important;color:var(--ui-text,#18232d)!important}
#modal .roleConfirm .roleConfirmNote{margin:10px 0 0!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}

#audit .auditFilterCard{padding-top:10px!important;padding-bottom:10px!important}
#audit .auditFilters{display:flex!important;flex-wrap:wrap!important;align-items:flex-end!important;gap:10px!important;margin:0!important}
#audit .auditFilters label{display:flex!important;flex-direction:column!important;gap:3px!important;margin:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;color:var(--ui-muted,#71808d)!important;min-width:150px!important;flex:1 1 150px!important;max-width:240px!important}
#audit .auditFilters input,#audit .auditFilters select{min-height:34px!important;width:100%!important}
#audit .auditFilterButtons{display:flex!important;gap:6px!important;flex:0 0 auto!important}
#audit .auditTableWrap{overflow-x:auto!important;max-width:100%!important}
#audit .auditTable{width:100%!important;border-collapse:collapse!important;font-size:var(--text-body)!important}
#audit .auditTable th{text-align:left!important;font-size:var(--text-body)!important;text-transform:uppercase!important;letter-spacing:.4px!important;color:var(--ui-muted,#71808d)!important;padding:7px 8px!important;border-bottom:1px solid var(--ui-border,#dde5ec)!important;white-space:nowrap!important}
#audit .auditTable td{padding:7px 8px!important;border-bottom:1px solid color-mix(in srgb,var(--ui-border,#dde5ec) 70%,transparent)!important;color:var(--ui-text,#18232d)!important;vertical-align:top!important}
#audit .auditWhen{white-space:nowrap!important;color:var(--ui-muted,#71808d)!important}
#audit .auditDetail{color:var(--ui-muted,#71808d)!important;max-width:420px!important;overflow-wrap:anywhere!important}
#audit .auditEvent{display:inline-block!important;padding:2px 8px!important;border-radius:999px!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;white-space:nowrap!important;background:var(--ui-surface2,#f8fafc)!important;color:var(--ui-muted,#71808d)!important;border:1px solid var(--ui-border,#dde5ec)!important}
#audit .auditEvent.auditTone-bad{background:color-mix(in srgb,var(--ui-red,#df5966) 12%,transparent)!important;color:var(--ui-red,#df5966)!important;border-color:color-mix(in srgb,var(--ui-red,#df5966) 35%,transparent)!important}
#audit .auditEvent.auditTone-change{background:color-mix(in srgb,var(--ui-blue,#137fe5) 12%,transparent)!important;color:var(--ui-blue,#137fe5)!important;border-color:color-mix(in srgb,var(--ui-blue,#137fe5) 35%,transparent)!important}
#audit .auditEvent.auditTone-ok{background:color-mix(in srgb,var(--ui-green,#27a66f) 12%,transparent)!important;color:var(--ui-green,#27a66f)!important;border-color:color-mix(in srgb,var(--ui-green,#27a66f) 35%,transparent)!important}
#audit .auditFoot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding-top:10px!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}

@media (max-width:900px){
  #roles .rolesLayout{grid-template-columns:minmax(0,1fr)!important}
  #roles .roleList{flex-direction:row!important;flex-wrap:wrap!important}
  #appShell #roles .roleList button.roleListItem{width:auto!important;flex:1 1 150px!important}
  #roles .rolePermRow{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
  #audit .auditFilters label{max-width:none!important}
  #previewBanner.previewBanner{flex-direction:column!important;align-items:flex-start!important}
}


/* ===== v3.31.0 — navigation items a role cannot use stay hidden ===== */
/* .contextNav371 .navBtn{display:flex!important} outranked the global .hidden rule, so some
   items (Employees, Administration, and the new Roles and Security Audit) stayed in the menu for
   roles that cannot open them. The server always refused them; the menu now agrees. */
.contextNav371 .navBtn.hidden,
body.compactNav .contextNav371 .navBtn.hidden{display:none!important}


/* ===== v3.32.0 — Roles C: create shown through Edit, project permission overrides, preview note ===== */
#appShell #roles .rolePermChip.implied{border-style:dashed!important;color:var(--ui-text,#18232d)!important}
#appShell #roles .rolePermChip em{font-style:normal!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}
#previewBanner .previewBannerNote{display:block!important;margin-top:2px!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important}
#modal .permissionGroupTitle{grid-column:1 / -1!important;margin:10px 0 2px!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.4px!important;text-transform:uppercase!important;color:var(--ui-muted,#71808d)!important}
#modal .projectPermDialog{font-size:var(--text-body)!important;color:var(--ui-text,#18232d)!important}
#modal .projectPermDialog > p{margin:0 0 8px!important;color:var(--ui-muted,#71808d)!important}
#modal .projectPermList{max-height:min(62vh,640px)!important;overflow:auto!important;border:1px solid var(--ui-border,#dde5ec)!important;border-radius:8px!important;padding:0 10px!important}
#modal .projectPermGroup{position:sticky!important;top:0!important;z-index:1!important;padding:8px 0 4px!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;letter-spacing:.4px!important;text-transform:uppercase!important;color:var(--ui-muted,#71808d)!important;background:var(--ui-surface,#fff)!important}
#modal .projectPermRow{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(150px,190px)!important;gap:10px!important;align-items:center!important;padding:5px 0!important;margin:0!important;border-top:1px solid color-mix(in srgb,var(--ui-border,#dde5ec) 70%,transparent)!important}
#modal .projectPermName code{margin-left:6px!important;font-size:var(--text-body)!important;color:var(--ui-muted,#71808d)!important;background:transparent!important}
#modal .projectPermBase{font-size:var(--text-body)!important;padding:2px 8px!important;border-radius:999px!important;white-space:nowrap!important;border:1px solid var(--ui-border,#dde5ec)!important}
#modal .projectPermBase.yes{color:var(--ui-green,#27a66f)!important;border-color:color-mix(in srgb,var(--ui-green,#27a66f) 40%,transparent)!important}
#modal .projectPermBase.no{color:var(--ui-muted,#71808d)!important}
@media (max-width:700px){#modal .projectPermRow{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}}

/* ===== v3.33.0 — design tokens =====
   The foundation every new rule uses. Guide: DESIGN_TOKENS.md. Checked by tools/qa_css_tokens.js:
   after this marker, colours and font sizes are written ONLY between TOKEN VALUES START and TOKEN VALUES END;
   every other rule uses var(--...). Old CSS above was moved onto the scale by tools/convert_css_tokens_v3330.js.
   ":not(#legacy#legacy#legacy)" raises a rule above the old !important overrides; it goes away with the old CSS
   (Batch 7). */

/* TOKEN VALUES START */
/* Inter, bundled locally (public/fonts, SIL Open Font License 1.1 - public/fonts/inter-font-notice.txt). No external loading. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-ext-400.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-ext-600.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* v3.35.0: Cyrillic from Inter itself; Armenian from Noto Sans Armenian under the same family name (Inter has no Armenian letters). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-cyrillic-400.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-cyrillic-600.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-cyrillic-ext-400.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-cyrillic-ext-600.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/noto-sans-armenian-400.woff2") format("woff2");unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/noto-sans-armenian-600.woff2") format("woff2");unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}

:root{
  --font-sans:"Inter",system-ui,"Segoe UI",Arial,sans-serif;
  --text-title:24px;      /* page title - one size on every page */
  --text-section:18px;    /* section and card titles, dialog titles */
  --text-body:14px;--text-input-touch:16px;       /* body text, tables, form fields, regular buttons */
  --text-small:12px;      /* labels, captions, badges, small buttons - the smallest reading size */
  --text-overline:11px;   /* v3.39.0: ALL-CAPS group headings only (sidebar sections) - capitals read larger than their size */
  --tracking-overline:.04em; /* v3.39.0: the letter spacing of those headings */
  /* v3.53.0 (owner, 2026-09-22, rule B): Plan Studio has ONE type scale of its own - a drawing screen is denser than
     a page of records, and the owner's mockup 11-tools-open.html is drawn at these four sizes and no others. */
  --plan-text-label:11px;  /* CAPS section labels and tile labels */
  --plan-text-ui:12px;     /* buttons, chips, hints, the status bar */
  --plan-text-body:13px;   /* body text and lists */
  --plan-text-title:15px;  /* panel titles */
  --weight-regular:400;
  --weight-semibold:600;
  --line-height-body:1.45;
  --line-height-tight:1.25;
  --control-height:36px;
  --control-height-sm:28px;
  --radius:8px;
  --radius-pill:999px;
}
:root,html[data-theme="dark"]{
  --color-bg:#0f151b;
  --color-surface:#161e25;
  --color-surface-2:#1d2730;
  --color-text:#e8eef2;
  --color-text-muted:#a6b3bd;
  --color-border:#34434f;
  --color-border-strong:#4a5c69;
  --color-accent:#5aa9ff;
  --color-accent-strong:#2468c0;
  --color-accent-soft:#16304a;
  --color-on-accent:#ffffff;
  --color-danger:#ff8a80;
  --color-danger-strong:#c62828;
  --color-danger-soft:#3a1c1f;
  --color-on-danger:#ffffff;
  --color-success:#5fd39a;
  --color-success-soft:#15352a;
  --color-status-progress-soft:#231a42;--color-warning-soft:#2a1d0c;--color-warning-line:#4a2a0f;--color-warning-faint:#17120b; /* v3.56.0 (detail 7) */
  --color-warning:#f0b35a;
  --color-status-new:#2f6fdb;
  --color-status-progress:#7a4fc9;
  --color-status-completed:#23804f;
  --color-status-review:#d2510a;
  --color-on-status-review:#ffffff;
  --color-status-review-edge:#ffb27a;
  --color-status-blocked:#b3261e;
  --color-status-waiting:#93590a;
  --color-status-transit:#0e7490; /* Batch 7: out of the warehouse, on its way to the site (Material Staging "Checked out") */
  --color-on-status:#ffffff;
  --color-scrim:rgba(6,10,14,.86);
  --color-on-scrim:#ffffff;
  /* v3.41.0: Plan Studio marks drawn on the plan - the plan is paper in both themes, so these are the same in both */
  --color-plan-chip:#13232e;
  --color-on-plan-chip:#f7fbfd;
  --color-plan-chip-border:#344f5e;
  --color-plan-ink:#102b3b;
  --color-plan-paper:#ffffff; /* v3.43.0: a plan is paper in both themes */
  --color-plan-detection:#d97706; /* v3.47.1: a detection waiting for review - an amber ring on the paper (mockup 01) */
  --color-port-poe:#ef6a3f; /* Batch 7: the RJ45 rule - orange + green = PoE + data, green = data only (same in both themes) */
  --color-port-data:#20c978;
  --color-fiber-sm:#2f6fed; /* Single-Mode blue, Multimode cyan (the existing fiber rule) */
  --color-fiber-mm:#31cbd6;
  --color-strand-1:#2f6fed;--color-strand-2:#f28a22;--color-strand-3:#18a55b;--color-strand-4:#8b5a2b;--color-strand-5:#7f8b94;--color-strand-6:#f4f6f8; /* TIA-598 */
  --color-strand-7:#e9493d;--color-strand-8:#1b1f23;--color-strand-9:#e4bd13;--color-strand-10:#8a4fd7;--color-strand-11:#ec4e9a;--color-strand-12:#31cbd6;

  /* v3.49.0 - Plan Studio build (D2 / D3 / D8): the same in both themes, because the plan is paper in both */
  --color-plan-lock:#f0b35a;--color-on-plan-lock:#1c1300;--color-plan-unlock:#3fb27f;--color-on-plan-unlock:#04150d;--color-plan-cone:rgba(68,178,220,.075);--color-plan-cone-line:rgba(37,150,194,.52);--color-plan-lock-note:#f5c451;
  --color-on-plan-chip-muted:#b8c2cf;--color-plan-chip-hover:#1b2a3d;--color-plan-placed:#8a94a3;
  --shadow-plan-handle:0 1px 3px rgba(0,0,0,.35);--shadow-plan-card:0 10px 30px rgba(0,0,0,.45);--shadow-plan-bar:0 6px 20px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --color-bg:#f3f5f8;
  --color-surface:#ffffff;
  --color-surface-2:#eaeff3;
  --color-text:#17232d;
  --color-text-muted:#566570;
  --color-border:#cfd8df;
  --color-border-strong:#9aa9b4;
  --color-accent:#0b62c4;
  --color-accent-strong:#0b62c4;
  --color-accent-soft:#e3eefb;
  --color-on-accent:#ffffff;
  --color-danger:#b42318;
  --color-danger-strong:#c62828;
  --color-danger-soft:#fbe9e7;
  --color-on-danger:#ffffff;
  --color-success:#1c7a4b;
  --color-success-soft:#e3f3ea;
  --color-status-progress-soft:#ede7fb;--color-warning-soft:#fdf1dc;--color-warning-line:#f0c989;--color-warning-faint:#fffaf1; /* v3.56.0 (detail 7) */
  --color-warning:#8a5a00;
  --color-status-new:#1d5fd1;
  --color-status-progress:#6b3fb5;
  --color-status-completed:#1c7a4b;
  --color-status-review:#b8460a;
  --color-on-status-review:#ffffff;
  --color-status-review-edge:#7a2d05;
  --color-status-blocked:#b3261e;
  --color-status-waiting:#8a5a00;
  --color-status-transit:#0e7490;
  --color-on-status:#ffffff;
  --color-scrim:rgba(6,10,14,.86);
  --color-on-scrim:#ffffff;
  /* v3.41.0: Plan Studio marks drawn on the plan - the plan is paper in both themes, so these are the same in both */
  --color-plan-chip:#13232e;
  --color-on-plan-chip:#f7fbfd;
  --color-plan-chip-border:#344f5e;
  --color-plan-ink:#102b3b;
  --color-plan-paper:#ffffff; /* v3.43.0: a plan is paper in both themes */
  --color-plan-detection:#d97706; /* v3.47.1: a detection waiting for review - an amber ring on the paper (mockup 01) */
  --color-port-poe:#ef6a3f; /* Batch 7: the RJ45 rule - orange + green = PoE + data, green = data only (same in both themes) */
  --color-port-data:#20c978;
  --color-fiber-sm:#2f6fed; /* Single-Mode blue, Multimode cyan (the existing fiber rule) */
  --color-fiber-mm:#31cbd6;
  --color-strand-1:#2f6fed;--color-strand-2:#f28a22;--color-strand-3:#18a55b;--color-strand-4:#8b5a2b;--color-strand-5:#7f8b94;--color-strand-6:#f4f6f8; /* TIA-598 */
  --color-strand-7:#e9493d;--color-strand-8:#1b1f23;--color-strand-9:#e4bd13;--color-strand-10:#8a4fd7;--color-strand-11:#ec4e9a;--color-strand-12:#31cbd6;

  /* v3.49.0 - Plan Studio build (D2 / D3 / D8): the same in both themes, because the plan is paper in both */
  --color-plan-lock:#f0b35a;--color-on-plan-lock:#1c1300;--color-plan-unlock:#3fb27f;--color-on-plan-unlock:#04150d;--color-plan-cone:rgba(68,178,220,.075);--color-plan-cone-line:rgba(37,150,194,.52);--color-plan-lock-note:#f5c451;
  --color-on-plan-chip-muted:#b8c2cf;--color-plan-chip-hover:#1b2a3d;--color-plan-placed:#8a94a3;
  --shadow-plan-handle:0 1px 3px rgba(0,0,0,.35);--shadow-plan-card:0 10px 30px rgba(0,0,0,.45);--shadow-plan-bar:0 6px 20px rgba(0,0,0,.35);
}
/* TOKEN VALUES END */

/* The old colour variables now point at the tokens, in both themes (so the old CSS follows the theme). */
html[data-theme][data-theme]{
  --ios-bg:var(--color-bg)!important;--ios-page:var(--color-bg)!important;--ios-bg-elevated:var(--color-surface)!important;
  --ios-panel:var(--color-surface)!important;--ios-panel-2:var(--color-surface-2)!important;--ios-panel-3:var(--color-surface-2)!important;
  --ios-surface:var(--color-surface)!important;--ios-surface-2:var(--color-surface-2)!important;--ios-surface-3:var(--color-surface-2)!important;
  --ios-card:var(--color-surface)!important;--ios-card-hover:var(--color-surface-2)!important;--ios-field:var(--color-surface)!important;
  --ios-text:var(--color-text)!important;--ios-text-2:var(--color-text)!important;--ios-muted:var(--color-text-muted)!important;
  --ios-border:var(--color-border)!important;--ios-border-soft:var(--color-border)!important;--ios-border-strong:var(--color-border-strong)!important;
  --ios-line:var(--color-border)!important;--ios-line-soft:var(--color-border)!important;
  --ios-accent:var(--color-accent)!important;--ios-accent-soft:var(--color-accent-soft)!important;--ios-primary:var(--color-accent-soft)!important;--ios-primary-hover:var(--color-accent-soft)!important;
  --ios-danger:var(--color-danger)!important;--ios-danger-bg:var(--color-danger-soft)!important;--ios-danger-soft:var(--color-danger-soft)!important;
  --ios-font:var(--font-sans)!important;
  --ui-bg:var(--color-bg)!important;--ui-surface:var(--color-surface)!important;--ui-surface2:var(--color-surface-2)!important;--ui-surface-2:var(--color-surface-2)!important;--ui-panel:var(--color-surface)!important;
  --ui-text:var(--color-text)!important;--ui-muted:var(--color-text-muted)!important;--ui-border:var(--color-border)!important;
  --ui-blue:var(--color-accent)!important;--ui-accent:var(--color-accent)!important;--ui-blue-soft:var(--color-accent-soft)!important;--ui-accent-soft:var(--color-accent-soft)!important;
  --ui-green:var(--color-success)!important;--ui-red:var(--color-danger)!important;--ui-amber:var(--color-warning)!important;--ui-hover:var(--color-surface-2)!important;
  --v382-bg:var(--color-bg)!important;--v382-panel:var(--color-surface)!important;--v382-soft:var(--color-surface-2)!important;--v382-text:var(--color-text)!important;
  --v382-muted:var(--color-text-muted)!important;--v382-line:var(--color-border)!important;--v382-accent:var(--color-accent)!important;
  --v3-line:var(--color-border)!important;--v3-muted:var(--color-text-muted)!important;
  --bg:var(--color-bg)!important;--panel:var(--color-surface)!important;--panel2:var(--color-surface-2)!important;--card:var(--color-surface)!important;
  --surface:var(--color-surface)!important;--surface2:var(--color-surface-2)!important;--surface-2:var(--color-surface-2)!important;--soft:var(--color-surface-2)!important;
  --text:var(--color-text)!important;--muted:var(--color-text-muted)!important;--line:var(--color-border)!important;--border:var(--color-border)!important;
  --accent:var(--color-accent)!important;
}

/* One family everywhere (pages, dialogs, Plan Studio), no synthesized bold: Inter ships 400 and 600. */
html body:not(#legacy#legacy#legacy){font-family:var(--font-sans)!important;font-size:var(--text-body)!important;line-height:var(--line-height-body);font-synthesis:none;background:var(--color-bg)}
html body :is(*):not(svg *):not(#legacy#legacy#legacy){font-family:var(--font-sans)!important;font-synthesis:none}
html body :is(b,strong,th,h1,h2,h3,h4,h5,h6):not(svg *):not(#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important}

/* Type scale: page title one size everywhere; dialog titles use the section size. */
html body :is(.view>.pageHead h1,.view>.pageHead h2,.projectHomeHead h2):not(#legacy#legacy#legacy){font-size:var(--text-title)!important;line-height:var(--line-height-tight)!important;font-weight:var(--weight-semibold)!important}
html body :is(.view>.pageHead p):not(#legacy#legacy#legacy){font-size:var(--text-body)!important;color:var(--color-text-muted)!important}
html body #modal .modalHead h3:not(#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text)!important}

/* Buttons: Primary, Secondary, Danger, Ghost - two heights. */
html body :is(#appShell,#modal) :is(button.primaryAction,button.goodBtn,button.networkPrimaryAction,button.trainPrimary,button.wizardCreate,.modalFoot button[type="submit"],.pageHead [id$="Actions"]>button:not(.secondary,.danger,.ghost,.smallBtn,.compactBtn),.headActions>button:not(.secondary,.danger,.ghost,.smallBtn,.compactBtn)):not(#legacy#legacy#legacy),
html body .loginScreen button.authPrimary:not(#legacy#legacy#legacy){
  background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border:1px solid var(--color-accent-strong)!important;
  height:var(--control-height)!important;min-height:var(--control-height)!important;padding:0 14px!important;border-radius:var(--radius)!important;
  font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;box-shadow:none!important;white-space:nowrap}
html body :is(#appShell,#modal) :is(button.secondary,button.smallBtn:not(.danger,.ghost),button.compactBtn:not(.danger,.ghost),.modalFoot button[data-close],.moduleSelectionTools button:not(.danger,.ghost),.rowActions button:not(.danger,.ghost),td>button:not(.danger,.ghost,.primaryAction)):not(#legacy#legacy#legacy){
  background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;
  height:var(--control-height)!important;min-height:var(--control-height)!important;padding:0 14px!important;border-radius:var(--radius)!important;
  font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;box-shadow:none!important;white-space:nowrap}
html body :is(#appShell,#modal) :is(button.danger:not(.ghost),button.dangerDelete):not(#legacy#legacy#legacy){
  background:var(--color-danger-strong)!important;color:var(--color-on-danger)!important;border:1px solid var(--color-danger-strong)!important;
  height:var(--control-height)!important;min-height:var(--control-height)!important;padding:0 14px!important;border-radius:var(--radius)!important;
  font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;box-shadow:none!important;white-space:nowrap}
html body :is(#appShell,#modal) :is(button.ghost,button.uiCloseButton,button.iconBtn,.modalHead button[data-close]):not(#legacy#legacy#legacy),
html body .loginScreen button.authBack:not(#legacy#legacy#legacy){
  background:transparent!important;color:var(--color-text)!important;border:1px solid transparent!important;
  height:var(--control-height)!important;min-height:var(--control-height)!important;padding:0 10px!important;border-radius:var(--radius)!important;
  font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;box-shadow:none!important}
html body :is(#appShell,#modal) button.danger.ghost:not(#legacy#legacy#legacy){color:var(--color-danger)!important}
html body :is(#appShell,#modal) :is(button.ghost,button.uiCloseButton,button.iconBtn,.modalHead button[data-close]):hover:not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;border-color:var(--color-border)!important}
/* small height */
html body :is(#appShell,#modal) :is(button.smallBtn,button.compactBtn,td>button,.rowActions button,.moduleSelectionTools button,.modalHead button[data-close],button.uiCloseButton):not(#legacy#legacy#legacy){
  height:var(--control-height-sm)!important;min-height:var(--control-height-sm)!important;padding:0 10px!important;font-size:var(--text-small)!important}
html body :is(#appShell,#modal) .modalHead button[data-close]:not(#legacy#legacy#legacy){width:var(--control-height-sm)!important;padding:0!important;font-size:var(--text-section)!important;line-height:1!important;border-color:var(--color-border)!important}
html body :is(#appShell,#modal,.loginScreen) button:is(.primaryAction,.secondary,.danger,.ghost,.smallBtn,.compactBtn,.authPrimary,[data-close],[type="submit"]):focus-visible:not(#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:2px!important}
html body :is(#appShell,#modal) button:is(.primaryAction,.goodBtn,.secondary,.danger,.smallBtn,.compactBtn,[type="submit"]):disabled:not(#legacy#legacy#legacy){opacity:.55!important;cursor:not-allowed!important}

/* Status colours: New blue, In Progress purple, Completed green - everywhere. */
html body :is(.statusNew,.statusAssigned):not(#legacy#legacy#legacy){--status-color:var(--color-status-new)!important}
html body .statusProgress:not(#legacy#legacy#legacy){--status-color:var(--color-status-progress)!important}
html body :is(.statusCompleted,.statusClosed):not(#legacy#legacy#legacy){--status-color:var(--color-status-completed)!important}
html body .statusBlocked:not(#legacy#legacy#legacy){--status-color:var(--color-status-blocked)!important}
html body .statusWaiting:not(#legacy#legacy#legacy){--status-color:var(--color-status-waiting)!important}
html body .dashboardStatusPill:not(#legacy#legacy#legacy){color:var(--color-on-status)!important;font-size:var(--text-small)!important;border:1px solid transparent!important}
html body .dashboardStatusPill.status-new:not(#legacy#legacy#legacy){background:var(--color-status-new)!important;border-color:var(--color-status-new)!important}
html body .dashboardStatusPill.status-in_progress:not(#legacy#legacy#legacy){background:var(--color-status-progress)!important;border-color:var(--color-status-progress)!important}
html body .dashboardStatusPill.status-completed:not(#legacy#legacy#legacy){background:var(--color-status-completed)!important;border-color:var(--color-status-completed)!important}
html body .dashboardStatusPill.status-blocked:not(#legacy#legacy#legacy){background:var(--color-status-blocked)!important;border-color:var(--color-status-blocked)!important}
html body .dashboardStatusPill.status-waiting:not(#legacy#legacy#legacy){background:var(--color-status-waiting)!important;border-color:var(--color-status-waiting)!important}

/* Text over pictures sits on a solid scrim, never on a gradient. */
html body :is(.projectThumbShade,.projectPageShade):not(#legacy#legacy#legacy){background:var(--color-scrim)!important}

/* Light-mode texts that were below 3:1 (visual audit v3.32.4), now on tokens in both themes. */
html body :is(.bad,.error):not(#legacy#legacy#legacy){color:var(--color-danger)!important}
html body #appShell a:not(.navBtn):not(#legacy#legacy#legacy){color:var(--color-accent)!important}
html body #plans .saveState:not(#legacy#legacy#legacy){color:var(--color-success)!important}
html body #plans :is(#planZoomReadout,.zoomTools span,.trainingHelp):not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body .workspacePlanBadge:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;font-size:var(--text-small)!important}
html body .contextNav371 #mainNav .navSection:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body :is(.moduleSelectionTools span,.workflowGuideFooter .guideCenter span,.workflowGuideFooter .guideCenter small,#projectHomeHint,.trustedDeviceMeta,.trustedDeviceMeta span,.trustedDeviceMeta b):not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #audit .auditEvent:not(#legacy#legacy#legacy){font-size:var(--text-small)!important}
html body #audit .auditEvent.auditTone-ok:not(#legacy#legacy#legacy){background:var(--color-success-soft)!important;color:var(--color-success)!important}
html body #audit .auditEvent.auditTone-bad:not(#legacy#legacy#legacy){background:var(--color-danger-soft)!important;color:var(--color-danger)!important}
html body #audit .auditEvent.auditTone-change:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-accent)!important}
html body .estimateCard:not(#legacy#legacy#legacy){background:var(--color-surface)!important;border-color:var(--color-border)!important;color:var(--color-text)!important}
html body .estimateCard :is(.estimateMetrics>div,.estimateSurveySummary,.estimateProcurementSummary,.engineeringRelease,.engineeringRouteCard,.estimateApprovalNotice,.estimateCommercialNotes):not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;border-color:var(--color-border)!important;color:var(--color-text)!important}

/* Controls the old CSS painted with the accent colour: they take the button variants, so their label
   is always readable (visual audit v3.32.4 -> v3.33.0). */
html body :is(#appShell,#modal) :is(.pageHead button:not(.secondary,.danger,.ghost,.smallBtn,.compactBtn),button.checkInBtn,button#roleSaveBtn,.projectsViewModes button.active,.projectsViewSizes button.active,.layoutToggle.active):not(#legacy#legacy#legacy){
  background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border:1px solid var(--color-accent-strong)!important;background-image:none!important}
html body :is(#appShell,#modal) :is(button.guidePrev,button.guideNext,.projectsViewModes button:not(.active),.projectsViewSizes button:not(.active),button#logoutBtn,button#sidebarToggle,.headerProjectTrigger,button#userProfileBtn,button#notificationBell,button#themeToggle):not(#legacy#legacy#legacy){
  background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;background-image:none!important}
html body :is(#appShell,#modal) :is(button,.headerProjectTrigger) :is(span,b,small,i,em,strong):not(.dashboardStatusPill,.statusBadge,.pill,.auditEvent,.estimateStatus,[class*=status-]):not(svg *):not(#legacy#legacy#legacy){color:inherit!important}

/* Text over a project photo sits on the scrim, with or without a picture. */
html body :is(.projectPageIdentity,.projectThumbInfo):not(#legacy#legacy#legacy){background:var(--color-scrim)!important;border-radius:var(--radius)!important;padding:8px 10px!important}
html body :is(.projectPageIdentity,.projectThumbInfo) :is(h3,p,small,span,b):not(#legacy#legacy#legacy){color:var(--color-on-scrim)!important}

/* Remaining muted and state texts from the audit. */
html body :is(.view .pageHead p,.view .pageHead small):not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body .estimateStatus:not(#legacy#legacy#legacy){color:var(--color-text)!important}
html body :is(.estimateStatus.approved,.estimateStatus.ready):not(#legacy#legacy#legacy){color:var(--color-success)!important}

html body .planStudioTitle p:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}

/* Page head: title and subtitle keep their width; actions wrap under them when the row is full. */
html body .view .pageHead:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:12px!important}
html body .view .pageHead>div:first-child:not(#legacy#legacy#legacy){flex:1 1 320px!important;min-width:0!important}
html body .view .pageHead>div:last-child:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:flex-end!important;margin-left:auto!important}

/* Rack and plan labels that the v3.33.0 audit found unreadable in one theme. */
html body .rackDeviceThumb:not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important}
html body :is(.rackFaceText,.rackFaceText b,.rackFaceText small,.rackItemFace b,.rackItemFace strong):not(#legacy#legacy#legacy){color:var(--color-text)!important}
html body #plans .issueFlag:not(#legacy#legacy#legacy){background:var(--color-danger-strong)!important;color:var(--color-on-danger)!important}

html body :is(.good,b.good,span.good):not(#legacy#legacy#legacy){color:var(--color-success)!important}


/* ===== v3.33.1 — sidebar collapse, project photos, settings cards, avatar ===== */

/* 1. The collapse button sits in the sidebar footer next to Sign Out, so it is visible in both states
   and never squeezes the product name. Ctrl+B does the same; collapsed is icons only with tooltips. */
html body .contextNav371 .navFooterRow:not(#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;padding:0 8px 8px!important}
html body .contextNav371 .navFooterRow #sidebarToggle:not(#legacy#legacy#legacy){flex:0 0 auto!important;width:var(--control-height)!important;height:var(--control-height)!important;min-height:0!important;padding:0!important;display:grid!important;place-items:center!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important;line-height:1!important}
html body .contextNav371 .navFooterRow #sidebarToggle:hover:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body .contextNav371 .navFooterRow #logoutBtn:not(#legacy#legacy#legacy){flex:1 1 auto!important;margin:0!important;min-width:0!important}
html body.compactNav .contextNav371 .navFooterRow:not(#legacy#legacy#legacy){flex-direction:column!important;gap:6px!important;padding:0 6px 8px!important}
html body.compactNav .contextNav371 .navFooterRow>:is(#sidebarToggle,#logoutBtn):not(#legacy#legacy#legacy){width:100%!important}
/* 2 + 3. Project photo: the picture fills the thumbnail; without one the placeholder is centred
   (initials over "Add photo") and the photo button sits in the middle instead of the corner. */
html body .projectPageThumb:not(#legacy#legacy#legacy){position:relative!important;overflow:hidden!important;background:var(--color-surface-2)!important}
html body .projectPageThumb>img:not(#legacy#legacy#legacy){width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
html body .projectThumbFallback:not(#legacy#legacy#legacy){position:absolute!important;inset:0!important;display:grid!important;place-content:center!important;justify-items:center!important;gap:4px!important;background:var(--color-surface-2)!important;color:var(--color-text-muted)!important}
html body .projectThumbFallback b:not(#legacy#legacy#legacy){font-size:var(--text-title)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text-muted)!important;line-height:var(--line-height-tight)!important}
html body .projectThumbFallback .projectThumbHint:not(#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
/* v3.33.3: the photo controls sit in the top-right corner of the thumbnail, their icons centred.
   With a photo: Replace and Remove, shown on hover or keyboard focus. Without one: a single Add button,
   always visible, next to the centred placeholder. */
html body .projectPhotoTools:not(#legacy#legacy#legacy){position:absolute!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;z-index:3!important;display:flex!important;gap:6px!important;align-items:center!important}
html body .projectPhotoTools .projectPhotoBtn:not(#legacy#legacy#legacy){position:static!important;display:grid!important;place-items:center!important;width:var(--control-height-sm)!important;height:var(--control-height-sm)!important;min-height:0!important;padding:0!important;flex:0 0 auto!important;box-sizing:border-box!important;border-radius:var(--radius)!important;background:var(--color-scrim)!important;color:var(--color-on-scrim)!important;border:1px solid var(--color-border)!important;line-height:1!important;font-size:var(--text-small)!important;transform:none!important}
html body .projectPhotoTools .projectPhotoBtn svg:not(#legacy#legacy#legacy){display:block!important;width:16px!important;height:16px!important}
html body .projectPhotoTools .projectPhotoBtn.removePhoto:not(#legacy#legacy#legacy){color:var(--color-on-danger)!important;background:var(--color-danger-strong)!important;border-color:var(--color-danger-strong)!important}
html body .projectPhotoTools .projectPhotoBtn:hover:not(#legacy#legacy#legacy){border-color:var(--color-on-scrim)!important}
/* with a photo the controls appear on hover or focus; without one the Add button stays visible */
html body .projectPageThumb:has(img) .projectPhotoTools:not(#legacy#legacy#legacy){opacity:0!important;transition:opacity .12s ease-in-out}
html body .projectPageThumb:has(img):hover .projectPhotoTools:not(#legacy#legacy#legacy),html body .projectPageThumb:has(img):focus-within .projectPhotoTools:not(#legacy#legacy#legacy){opacity:1!important}


/* 4. Settings: every card is on the surface token; the notices use the neutral surface, not a tinted one. */
html body #settings :is(.settingsCard,.commercialSettingsCard):not(#legacy#legacy#legacy){background:var(--color-surface)!important;border:1px solid var(--color-border)!important}
html body #settings :is(.securityNotice,.securityNotice.neutral,.securityFacts>span):not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important}

/* 5. The initials sit in the middle of the avatar circle. */
/* v3.33.2: the initials sit in a real circle, centred in both directions; the dropdown arrow is an icon
   like the other header buttons, centred on the same line. */
/* v3.33.3: the button is sized by what it holds (circle + gap + arrow + padding), so nothing spills
   over its border or its neighbour. It used to be pinned to 36x36 while its content needed 60px. */
html body #userProfileBtn:not(#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;line-height:1!important;padding:0 8px!important;width:auto!important;min-width:auto!important;max-width:none!important;flex:0 0 auto!important;box-sizing:border-box!important;overflow:visible!important}
html body #userProfileInitials:not(#legacy#legacy#legacy){display:grid!important;place-items:center!important;flex:0 0 24px!important;aspect-ratio:1!important;box-sizing:border-box!important;width:24px!important;height:24px!important;border-radius:var(--radius-pill)!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:1!important;padding:0!important;text-align:center!important}
html body .profileChevron:not(#legacy#legacy#legacy){display:grid!important;place-items:center!important;width:14px!important;height:14px!important;line-height:1!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .profileChevron svg:not(#legacy#legacy#legacy){width:14px!important;height:14px!important;display:block!important}

/* v3.33.3: without a photo there is nothing to darken - the name band keeps its own scrim - so the placeholder
   (initials over "Add photo") is centred in the free area above the name band and stays readable. */
html body .projectPageThumb:not(:has(img)) .projectPageShade:not(#legacy#legacy#legacy){display:none!important}
html body .projectPageThumb .projectThumbFallback:not(#legacy#legacy#legacy){inset:0 0 auto 0!important;height:55%!important;width:100%!important;padding:0!important}

/* ===== v3.34.0 — Administration hub, My Profile, Security ===== */
/* The hub: tabs on the left, the tab's content on the right; on a phone the tabs become a scrolling row. */
html body #admin .adminHub:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
html body #admin .adminHubTabs:not(#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important;padding:8px!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;position:sticky!important;top:12px!important}
html body #admin .adminHubTabs .adminHubTab:not(#legacy#legacy#legacy){appearance:none!important;display:flex!important;justify-content:space-between!important;align-items:center!important;width:100%!important;height:var(--control-height)!important;min-height:var(--control-height)!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:var(--radius)!important;background:transparent!important;box-shadow:none!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important;font-weight:var(--weight-regular)!important;text-align:left!important;cursor:pointer!important}
html body #admin .adminHubTabs .adminHubTab:hover:not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important}
html body #admin .adminHubTabs .adminHubTab.active:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-text)!important;font-weight:var(--weight-semibold)!important;box-shadow:inset 3px 0 0 var(--color-accent)!important}
html body #admin .adminHubTabs .adminHubTab small:not(#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;font-weight:var(--weight-regular)!important}
html body #admin .adminHubTabs .adminHubTab:focus-visible:not(#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:-2px!important}
html body #admin .adminHubPanel:not(#legacy#legacy#legacy){min-width:0!important}
html body #admin .adminTabHead:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 12px!important}
html body #admin .adminTabHint:not(#legacy#legacy#legacy){margin:0!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important;flex:1 1 280px!important}
html body #admin .adminTabHead>div:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body #admin .adminPlaceholder:not(#legacy#legacy#legacy){background:var(--color-surface)!important;border:1px dashed var(--color-border-strong)!important;color:var(--color-text)!important;padding:20px!important;border-radius:var(--radius)!important}
html body #admin .adminPlaceholder p:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;margin:6px 0 0!important}

/* Company tab */
html body #admin .companyGrid:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
html body #admin .companyGrid .settingsCard:not(#legacy#legacy#legacy){margin:0!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important}
html body #admin .companyFacts:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(120px,170px) minmax(0,1fr)!important;gap:8px 12px!important;margin-top:8px!important}
html body #admin .companyFacts b:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-weight:var(--weight-regular)!important}
html body #admin .companyFacts span:not(#legacy#legacy#legacy){color:var(--color-text)!important;overflow-wrap:anywhere!important}
html body #admin .companyEmpty:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #admin .companyNote:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:10px 0 0!important}
html body #admin .companyControl:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(120px,170px) minmax(0,220px)!important;align-items:center!important;gap:12px!important;color:var(--color-text-muted)!important;margin-top:8px!important}
html body #admin .companyControl select:not(#legacy#legacy#legacy){height:var(--control-height)!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important}
html body #admin .companyControl select:disabled:not(#legacy#legacy#legacy){opacity:.7!important}

/* My Profile */
html body #profile .profileIdentity:not(#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:12px!important}
html body #profile .profileAvatarLarge:not(#legacy#legacy#legacy){display:grid!important;place-items:center!important;flex:0 0 48px!important;width:48px!important;height:48px!important;aspect-ratio:1!important;border-radius:var(--radius-pill)!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;line-height:1!important}
html body #profile .profileNote:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:10px 0 0!important}
html body :is(#profile,#security) .settingsCard:not(#legacy#legacy#legacy){background:var(--color-surface)!important;border:1px solid var(--color-border)!important}
html body :is(#profile,#security) :is(.securityNotice,.securityFacts>span):not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important}

/* Narrow screens: tabs across the top, cards stacked */
@media (max-width:900px){
  html body #admin .adminHub:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #admin .adminHubTabs:not(#legacy#legacy#legacy){flex-direction:row!important;overflow-x:auto!important;position:static!important}
  html body #admin .adminHubTabs .adminHubTab:not(#legacy#legacy#legacy){width:auto!important;flex:0 0 auto!important;white-space:nowrap!important}
  html body #admin .adminHubTabs .adminHubTab.active:not(#legacy#legacy#legacy){box-shadow:inset 0 -3px 0 var(--color-accent)!important}
  html body #admin .companyGrid:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #admin :is(.companyFacts,.companyControl):not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
}

/* v3.34.0: a sidebar heading with no item the person can use is not shown (the old rule was out-ranked by an
   id selector, so empty headings such as COMPANY stayed visible for a Technician). */
html body #mainNav .navSection.scopeHidden:not(#legacy#legacy#legacy){display:none!important}
/* Inside the hub the Roles tab has 220px less width: a narrower role list, and a gap between the 2FA buttons and the trusted devices list. */
html body #admin #roles .rolesLayout:not(#legacy#legacy#legacy){grid-template-columns:minmax(200px,240px) minmax(0,1fr)!important}
html body #security .trustedDevicesSection:not(#legacy#legacy#legacy){margin-top:18px!important;padding-top:14px!important;border-top:1px solid var(--color-border)!important}
@media (max-width:1100px){html body #admin #roles .rolesLayout:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}

/* ===== v3.34.1 — company branding (logo on the sign-in page, in the sidebar and on Administration > Company) ===== */
html body .contextNav371 .brand .companyBrand:not(#legacy#legacy#legacy),html body .authBrand .authCompanyBrand:not(#legacy#legacy#legacy){display:none!important}
html body .contextNav371 .brand.hasCompanyLogo .companyBrand:not(#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;min-width:0!important;margin:0 auto 0 0!important;padding:0!important;font-size:var(--text-small)!important}
html body .contextNav371 .brand.hasCompanyLogo>.brandLogoIcon:not(#legacy#legacy#legacy),html body .contextNav371 .brand.hasCompanyLogo>b:not(#legacy#legacy#legacy){display:none!important}
html body .contextNav371 .brand .companyLogo:not(#legacy#legacy#legacy){display:block!important;height:32px!important;width:auto!important;max-width:150px!important;object-fit:contain!important;object-position:left center!important}
html body :is(.contextNav371 .brand,.authBrand) .poweredBy:not(#legacy#legacy#legacy){display:block!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;line-height:1.3!important;color:var(--color-text-muted)!important;white-space:nowrap!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important}
html body :is(.contextNav371 .brand,.authBrand) .poweredBy[hidden]:not(#legacy#legacy#legacy){display:none!important}
/* collapsed sidebar: the logo shrinks into the rail, the "Powered by" line hides */
html body.compactNav .contextNav371 .brand.hasCompanyLogo .companyLogo:not(#legacy#legacy#legacy){height:auto!important;max-height:28px!important;max-width:40px!important}
html body.compactNav .contextNav371 .brand.hasCompanyLogo .poweredBy:not(#legacy#legacy#legacy){display:none!important}
/* sign-in page */
html body .authBrand.hasCompanyLogo .authCompanyBrand:not(#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
html body .authBrand.hasCompanyLogo>.authLogoMark:not(#legacy#legacy#legacy),html body .authBrand.hasCompanyLogo>.authBrandText:not(#legacy#legacy#legacy){display:none!important}
html body .authBrand .authCompanyLogo:not(#legacy#legacy#legacy){display:block!important;height:56px!important;width:auto!important;max-width:min(320px,80vw)!important;object-fit:contain!important;object-position:left center!important}
/* Administration > Company: branding card across both columns */
/* v3.39.0: Branding is an ordinary card in the .cardFlow columns */
html body #admin .companyBrandActions:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body #admin .companyBrandBody:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(180px,260px) minmax(0,1fr)!important;gap:16px!important;align-items:start!important;margin-top:8px!important}
html body #admin .companyBrandBody>.companyNote:not(#legacy#legacy#legacy){grid-column:1/-1!important}
html body #admin .companyLogoFrame:not(#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:center!important;min-height:96px!important;padding:12px!important;border:1px dashed var(--color-border-strong)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;color:var(--color-text-muted)!important;text-align:center!important}
html body #admin .companyLogoFrame img:not(#legacy#legacy#legacy){display:block!important;max-height:64px!important;max-width:100%!important;width:auto!important;object-fit:contain!important}
html body #admin .companyLogoFrame img[hidden]:not(#legacy#legacy#legacy){display:none!important}
html body #admin .companyLinkRow:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;min-width:0!important}
html body #admin .companyLinkRow code:not(#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;padding:4px 8px!important;overflow-wrap:anywhere!important}
@media (max-width:900px){
  html body #admin .companyBrandBody:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
}
/* the company brand block is a plain column: no pill from the old ".brand span" rules */
html body .contextNav371 .brand .companyBrand:not(#legacy#legacy#legacy){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;height:auto!important;width:auto!important}
/* collapsed sidebar: one centred mark - the company logo, or the IntegratorOS logo - and no version badge
   (it did not fit the 58px rail and covered the logo; the version stays visible in the expanded sidebar) */
html body.compactNav .contextNav371 .brand .buildVersion:not(#legacy#legacy#legacy){display:none!important}
html body.compactNav .contextNav371 .brand:not(.hasCompanyLogo)>.brandLogoIcon:not(#legacy#legacy#legacy){display:flex!important}
html body.compactNav .contextNav371 .brand.hasCompanyLogo .companyBrand:not(#legacy#legacy#legacy){margin:0 auto!important;align-items:center!important}
/* phones (the sidebar is a 64px rail below 760px): the same single centred mark as the collapsed sidebar */
@media (max-width:760px){
  html body .contextNav371 .brand .buildVersion:not(#legacy#legacy#legacy),html body .contextNav371 .brand.hasCompanyLogo .poweredBy:not(#legacy#legacy#legacy){display:none!important}
  html body .contextNav371 .brand.hasCompanyLogo .companyLogo:not(#legacy#legacy#legacy){height:auto!important;max-height:28px!important;max-width:44px!important}
  html body .contextNav371 .brand.hasCompanyLogo .companyBrand:not(#legacy#legacy#legacy){margin:0 auto!important;align-items:center!important}
}

/* ===== v3.35.0 — languages: fonts for every planned alphabet, the Estimating Standards dialog on tokens, My Profile pickers ===== */
/* Estimating Standards: the four cards were hard-coded dark (#091b23) in both themes */
html body #modal .commercialSettingsTabs section:not(#legacy#legacy#legacy){background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important}
html body #modal .commercialSettingsTabs h3:not(#legacy#legacy#legacy){color:var(--color-text)!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #modal .commercialSettingsTabs :is(label,small):not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #modal .commercialSettingsTabs label small:not(#legacy#legacy#legacy){display:block!important;font-size:var(--text-small)!important;margin-top:4px!important}
/* My Profile: language and time zone pickers */
html body #profile .companyControl:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(120px,170px) minmax(0,260px)!important;align-items:center!important;gap:12px!important;color:var(--color-text-muted)!important;margin-top:10px!important}
html body #profile .companyControl select:not(#legacy#legacy#legacy){height:var(--control-height)!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important}
html body #profile .profileAbout:not(#legacy#legacy#legacy){background:var(--color-surface)!important;border:1px solid var(--color-border)!important}
@media (max-width:900px){html body #profile .companyControl:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}
/* Dialogs and cards the v3.35.0 theme audit found off the tokens (same fault as Estimating Standards): */
/* the wizards' progress badge (#66c8ef text: 1.62:1 in light) */
html body #modal .projectWizardHeading>span:not(#legacy#legacy#legacy){color:var(--color-accent)!important;background:var(--color-accent-soft)!important;border:1px solid var(--color-border)!important}
/* the project overview's small labels (4.09:1 in light) and its cards */
html body #modal :is(.overviewCardHead small,.projectOverviewCard small,.overviewInfoList>span):not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #modal .projectOverviewCard:not(#legacy#legacy#legacy){background:var(--color-surface)!important;border-color:var(--color-border)!important}
/* the fact labels on My Profile and Security (#718893: 3.21:1 light, 4.08:1 dark) */
html body :is(#profile,#security,#admin) .securityFacts b:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #modal.projectOverviewDialog small:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
/* the Plan pages dialog: the page-number badge on each thumbnail (1.17:1 in light) */
html body #modal .planPageThumb em:not(#legacy#legacy#legacy){background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important}

/* ===== v3.35.1 — time zone prompts; My Profile layout ===== */
html body :is(#profile .profileSuggest,#admin .companyZoneNotice):not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;margin:10px 0 0!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #projecthome .companyZonePrompt:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 14px!important;padding:10px 14px!important;background:var(--color-accent-soft)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;color:var(--color-text)!important;font-size:var(--text-body)!important}
/* the About card sits under Account, beside Preferences, instead of below everything */
html body #profile .profileGrid:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:min-content 1fr!important;align-items:start!important;gap:18px!important}
/* v3.39.0: replaced by .cardFlow (cards go into the shorter column) */

@media (max-width:900px){
  html body #profile .profileGrid:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important}
  html body #profile .profileGrid>:is(.settingsCard:nth-child(2),.profileAbout):not(#legacy#legacy#legacy){grid-column:1!important;grid-row:auto!important}
}
/* v3.35.1 - the running-timer digits were a fixed light green (1.27:1 on light surfaces); now the success token */
html body .bigTimer:not(#legacy#legacy#legacy){color:var(--color-success)!important}
/* ===== v3.35.2 — longer languages: a navigation label that does not fit takes a second line instead of "…" ===== */
html body .navLabel:not(#legacy#legacy#legacy){white-space:normal!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-height:1.25!important;overflow-wrap:anywhere!important}
/* ===== v3.36.0 — tables: the sticky actions column stays compact in longer languages ===== */
/* the buttons wrap onto a second line instead of widening the column over the last data columns (Armenian, Tasks) */
html body .dataTableViewport.hasActions td:last-child:not(#legacy#legacy#legacy){min-width:0!important;max-width:15rem!important;white-space:normal!important}
html body .dataTableViewport.hasActions td:last-child:not(#legacy#legacy#legacy)>:is(button,a){margin:2px 2px 2px 0!important}
/* ===== v3.36.0 — estimating standards: the rate card, the yes / no control, estimate sections ===== */
html body .yesNo:not(#legacy#legacy#legacy){display:inline-flex!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius-pill)!important;overflow:hidden!important;background:var(--color-surface)!important;width:max-content!important}
html body .yesNo label:not(#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;margin:0!important;cursor:pointer!important;font-size:var(--text-small)!important;color:var(--color-text)!important}
html body .yesNo input:not(#legacy#legacy#legacy){position:absolute!important;opacity:0!important;width:1px!important;height:1px!important}
html body .yesNo span:not(#legacy#legacy#legacy){display:inline-block!important;padding:4px 14px!important;min-width:3.5em!important;text-align:center!important}
html body .yesNo input:checked+span:not(#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body .yesNo input:focus-visible+span:not(#legacy#legacy#legacy){outline:2px solid var(--color-accent-strong)!important;outline-offset:-2px!important}
html body .yesNo input:disabled+span:not(#legacy#legacy#legacy){opacity:.6!important;cursor:default!important}
html body .yesNoField:not(#legacy#legacy#legacy){display:grid!important;gap:6px!important;align-content:start!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body .rateInput:not(#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important}
html body .rateInput input:not(#legacy#legacy#legacy){flex:1 1 7em!important;min-width:0!important}
html body .rateInput small:not(#legacy#legacy#legacy){white-space:nowrap!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .rateCardIntro:not(#legacy#legacy#legacy),html body .sectionsHint:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:0 0 10px!important}
html body .rateCard:not(#legacy#legacy#legacy){display:grid!important;gap:8px!important;margin-bottom:12px!important}
html body .rateCardRow:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:10px 12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important}
html body .rateCardMode:not(#legacy#legacy#legacy){display:grid!important;gap:2px!important;color:var(--color-text)!important}
html body .rateCardMode small:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .rateCardRate:not(#legacy#legacy#legacy){display:grid!important;gap:4px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body .rateCardCategories:not(#legacy#legacy#legacy){border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;padding:10px 12px!important;margin:12px 0 0!important;color:var(--color-text)!important}
html body .rateCardCategories legend:not(#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important;font-size:var(--text-small)!important;padding:0 4px!important}
html body .rateCardCategories>small:not(#legacy#legacy#legacy){display:block!important;color:var(--color-text-muted)!important;margin-bottom:8px!important}
html body .rateCardCategories>div:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px 14px!important}
html body .rateCardCategories label:not(#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:var(--text-body)!important;color:var(--color-text)!important}
html body .rateCardNotice:not(#legacy#legacy#legacy){display:grid!important;gap:6px!important;padding:10px 12px!important;margin-bottom:12px!important;border:1px solid var(--color-warning)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important}
html body .rateCardNotice.ok:not(#legacy#legacy#legacy){border-color:var(--color-success)!important}
html body .rateCardNotice ul:not(#legacy#legacy#legacy){margin:0!important;padding-left:18px!important}
html body .rateCardNotice button:not(#legacy#legacy#legacy){justify-self:start!important}
html body .sectionsTableWrap:not(#legacy#legacy#legacy){overflow-x:auto!important;max-width:100%!important}
html body .sectionsTable:not(#legacy#legacy#legacy){width:100%!important;border-collapse:collapse!important}
html body .sectionsTable th:not(#legacy#legacy#legacy),html body .sectionsTable td:not(#legacy#legacy#legacy){padding:6px 8px!important;border-bottom:1px solid var(--color-border)!important;vertical-align:top!important;text-align:left!important;color:var(--color-text)!important}
html body .sectionsTable th:not(#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;font-weight:var(--weight-semibold)!important}
html body .sectionsTable td small:not(#legacy#legacy#legacy){display:block!important;margin-top:3px!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .sectionsTable td.num:not(#legacy#legacy#legacy){text-align:right!important;white-space:nowrap!important;font-variant-numeric:tabular-nums!important}
html body .sectionsAdd:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:10px 0!important}
html body .sectionsAdd input:not(#legacy#legacy#legacy){flex:1 1 16em!important;min-width:0!important}
html body .sectionsTax:not(#legacy#legacy#legacy){margin-top:12px!important}
html body .sectionsTax h4:not(#legacy#legacy#legacy){margin:0 0 8px!important;font-size:var(--text-body)!important;color:var(--color-text)!important}
html body .sectionsTax>small:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body .sectionsTotals:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:auto auto!important;justify-content:end!important;gap:4px 18px!important;margin-top:12px!important;color:var(--color-text)!important;font-variant-numeric:tabular-nums!important}
html body .sectionsTotals b:not(#legacy#legacy#legacy){text-align:right!important}
html body .estimateSectionHead:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:4px 12px!important;margin:14px 0 6px!important;padding-bottom:4px!important;border-bottom:1px solid var(--color-border)!important;color:var(--color-text)!important}
html body .estimateSectionHead span:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .estimateSectionHead strong:not(#legacy#legacy#legacy){margin-left:auto!important;font-variant-numeric:tabular-nums!important}
@media (max-width:700px){html body .rateCardRow:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}
/* v3.36.0: the rate card takes the dialog's full width; rate fields keep a usable width */
html body #modal .commercialSettingsTabs>.rateCardSection:not(#legacy#legacy#legacy){grid-column:1/-1!important}
html body .rateCardRow:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1.6fr) auto minmax(14em,1fr)!important}
html body .rateInput:not(#legacy#legacy#legacy){flex-wrap:wrap!important}
html body .rateInput input:not(#legacy#legacy#legacy){min-width:6em!important}
/* Sections & rates: the table fits the dialog - fixed column shares, fields fill their cell, units under the field */
html body .sectionsTable:not(#legacy#legacy#legacy){table-layout:fixed!important;min-width:640px!important}
html body .sectionsTable th:nth-child(1):not(#legacy#legacy#legacy){width:24%!important}
html body .sectionsTable th:nth-child(2):not(#legacy#legacy#legacy){width:26%!important}
html body .sectionsTable th:nth-child(3):not(#legacy#legacy#legacy){width:20%!important}
html body .sectionsTable th:nth-child(4):not(#legacy#legacy#legacy){width:11%!important}
html body .sectionsTable th:nth-child(5):not(#legacy#legacy#legacy){width:12%!important}
html body .sectionsTable th:nth-child(6):not(#legacy#legacy#legacy){width:7%!important}
html body .sectionsTable :is(input,select):not(#legacy#legacy#legacy){width:100%!important;min-width:0!important}
html body .sectionsTable .rateInput small:not(#legacy#legacy#legacy){white-space:normal!important}
html body .sectionsAdd:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto!important;align-items:center!important}
html body .sectionsAdd :is(input,select):not(#legacy#legacy#legacy){width:100%!important;min-width:0!important}
@media (max-width:700px){html body .sectionsAdd:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}html body .rateCardRow:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}
/* v3.36.0: record tables fit their box at 1366 (English and longer languages): cells may wrap instead of forcing the
   table to its unwrapped width (which pushed the last columns under the sticky actions column); a table that still
   cannot fit keeps scrolling sideways (phones) */
html body .dataTableViewport table:not(#legacy#legacy#legacy){min-width:100%!important;width:100%!important}
html body .dataTableViewport :is(th,td):not(#legacy#legacy#legacy){white-space:normal!important;overflow-wrap:break-word!important}
html body .dataTableViewport td :is(button,.smallBtn):not(#legacy#legacy#legacy){white-space:nowrap!important;overflow-wrap:normal!important}
/* ===== v3.36.1 — the per-unit note: shown while no category is chosen ===== */
html body .perUnitNote:not(#legacy#legacy#legacy){margin:0 0 8px!important;padding:6px 10px!important;border-left:3px solid var(--color-warning)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important}
html body .perUnitNote[hidden]:not(#legacy#legacy#legacy){display:none!important}
/* ===== v3.37.0 — departments: Administration > Departments and My departments ===== */
html body .departmentsLayout:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
html body .departmentList:not(#legacy#legacy#legacy){display:grid!important;gap:10px!important}
html body .departmentCard:not(#legacy#legacy#legacy){border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;padding:12px!important;display:grid!important;gap:10px!important;color:var(--color-text)!important}
html body .departmentCard.archived:not(#legacy#legacy#legacy){opacity:.8!important}
html body .departmentHead:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;gap:8px!important;align-items:flex-start!important}
html body .departmentHead h3:not(#legacy#legacy#legacy){margin:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
html body .departmentHead small:not(#legacy#legacy#legacy),html body .myDeptTitle:not(#legacy#legacy#legacy){display:block!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .departmentActions:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
html body .departmentManagers:not(#legacy#legacy#legacy){display:grid!important;gap:6px!important;font-size:var(--text-small)!important}
html body .departmentChips:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:center!important}
html body .departmentChip:not(#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:4px!important;padding:2px 4px 2px 10px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius-pill)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;max-width:100%!important}
html body .departmentChip span:not(#legacy#legacy#legacy){overflow-wrap:break-word!important;min-width:0!important}
html body .departmentChip button:not(#legacy#legacy#legacy){border:0!important;background:transparent!important;color:var(--color-text-muted)!important;min-height:0!important;height:auto!important;padding:2px 6px!important;cursor:pointer!important;font-size:var(--text-body)!important;line-height:1!important}
html body .departmentChip button:hover:not(#legacy#legacy#legacy){color:var(--color-danger)!important}
html body .departmentAddManager:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
html body .departmentAddManager select:not(#legacy#legacy#legacy){flex:1 1 12em!important;min-width:0!important}
html body .departmentNote:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:10px 0 0!important}
html body .departmentArchived:not(#legacy#legacy#legacy){margin-top:10px!important;color:var(--color-text)!important}
html body .departmentArchived summary:not(#legacy#legacy#legacy){cursor:pointer!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;margin-bottom:8px!important}
html body #mydepartments .myDepartment:not(#legacy#legacy#legacy){margin-bottom:16px!important}
@media (max-width:1600px){html body .departmentsLayout:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}
/* v3.37.0: the department picker in the employees table keeps a readable width */
html body .departmentsLayout .dataTableViewport select:not(#legacy#legacy#legacy){min-width:11em!important;width:100%!important}
/* v3.37.0: on phones My departments shows each employee as a stacked block instead of a clipped table */
@media (max-width:700px){html body #mydepartments table:not(#legacy#legacy#legacy){min-width:0!important;width:100%!important;table-layout:auto!important}html body #mydepartments thead:not(#legacy#legacy#legacy){display:none!important}html body #mydepartments tr:not(#legacy#legacy#legacy),html body #mydepartments td:not(#legacy#legacy#legacy){display:block!important;width:auto!important;border-right:0!important}html body #mydepartments td:not(#legacy#legacy#legacy){padding:6px 12px!important;overflow-wrap:anywhere!important;height:auto!important;min-height:0!important;position:static!important;box-shadow:none!important}html body #mydepartments tr:not(#legacy#legacy#legacy){border-bottom:1px solid var(--color-border)!important;padding:6px 0!important}}
/* v3.38.0: logins without an employee record (Employees page), and the Time check-in without a chosen project */
html body .employeeRecordNotice:not(#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;border-left:4px solid var(--color-warning)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important}
html body .timeNeedsProject:not(#legacy#legacy#legacy){display:flex!important;align-items:flex-end!important;padding-bottom:8px!important}
html body .timeNeedsProject small:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
/* v3.39.0: the searchable picker (public/search-select.js) for long lists - time zones, locales, currencies, products */
html body .searchSelect:not(#legacy#legacy#legacy){position:relative!important;display:block!important;width:100%!important;min-width:0!important}
html body .searchSelect .searchSelectNative:not(#legacy#legacy#legacy){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;pointer-events:none!important;z-index:-1!important}
html body .searchSelect .searchSelectInput:not(#legacy#legacy#legacy){width:100%!important;padding-right:32px!important;background-color:var(--color-surface)!important;color:var(--color-text)!important;text-overflow:ellipsis!important}
html body .searchSelect:not(#legacy#legacy#legacy)::after{content:''!important;position:absolute!important;right:14px!important;top:50%!important;width:7px!important;height:7px!important;border-right:2px solid var(--color-text-muted)!important;border-bottom:2px solid var(--color-text-muted)!important;transform:translateY(-70%) rotate(45deg)!important;pointer-events:none!important}
html body .searchSelect.isDisabled .searchSelectInput:not(#legacy#legacy#legacy){opacity:.6!important;cursor:not-allowed!important}
html body .searchSelectList:not(#legacy#legacy#legacy){position:absolute!important;left:0!important;right:0!important;top:calc(100% + 4px)!important;z-index:60!important;max-height:min(320px,50vh)!important;overflow-y:auto!important;margin:0!important;padding:4px 0!important;list-style:none!important;background:var(--color-surface)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;box-shadow:0 8px 24px var(--color-scrim)!important}
html body .searchSelectList[hidden]:not(#legacy#legacy#legacy){display:none!important}
html body .searchSelectOption:not(#legacy#legacy#legacy){padding:8px 12px!important;font-size:var(--text-body)!important;color:var(--color-text)!important;cursor:pointer!important;overflow-wrap:anywhere!important;text-transform:none!important;letter-spacing:normal!important}
html body .searchSelectOption.isActive:not(#legacy#legacy#legacy),html body .searchSelectOption:hover:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body .searchSelectOption[aria-selected="true"]:not(#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important;color:var(--color-accent-strong)!important}
html body .searchSelectOption[aria-disabled="true"]:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;cursor:default!important}
html body .searchSelectGroup:not(#legacy#legacy#legacy){padding:8px 12px 4px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text-muted)!important;text-transform:uppercase!important;letter-spacing:.04em!important}
html body .searchSelectEmpty:not(#legacy#legacy#legacy){padding:10px 12px!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
@media (max-width:700px){html body .searchSelectOption:not(#legacy#legacy#legacy){padding:12px 14px!important;min-height:44px!important}html body .searchSelectList:not(#legacy#legacy#legacy){max-height:min(360px,55vh)!important}html body .searchSelect .searchSelectInput:not(#legacy#legacy#legacy){font-size:var(--text-body)!important}}
/* v3.39.0: one style for every sidebar section heading (MAIN, SALES & DESIGN, MATERIALS, ENGINEERING & INSTALLATION,
   PROJECT CONTROL, COMPANY): clearly smaller and quieter than the menu items (11px against 14px), tight letter spacing
   so two-word headings do not stretch, a real line height when a heading wraps (balanced over its lines), and more
   space above each group (with its divider line) than below it. Muted text on the sidebar passes 4.5:1 in both themes. */
html body #mainNav .navSection:not(#legacy#legacy#legacy),html body .contextNav371 #mainNav .navSection:not(#legacy#legacy#legacy),html body .contextNav371 #mainNav .navSection.navPhase:not(#legacy#legacy#legacy){font-size:var(--text-overline)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;line-height:var(--line-height-body)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important;margin:10px 8px 4px!important;padding:12px 2px 0!important;border:0!important;border-top:1px solid var(--color-border-strong)!important;text-wrap:balance!important;overflow-wrap:normal!important;white-space:normal!important}
html body #mainNav .navSection:first-child:not(#legacy#legacy#legacy){margin-top:4px!important;padding-top:0!important;border-top:0!important}
/* v3.39.0: the calendar - month / week / day, the Unscheduled list, the task and Reschedule dialogs. Built for 1366 x 768
   first: the list sits beside the grid down to 1200 px, then under it; the time grid scrolls inside its own box. */
html body #calendar .calNotice:not(#legacy#legacy#legacy){border-left:4px solid var(--color-warning)!important;font-size:var(--text-small)!important;margin-bottom:12px!important}
html body .calToolbar:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 12px!important;padding:8px 12px!important;margin-bottom:10px!important}
html body .calNav:not(#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}
html body .calNav button:not(#legacy#legacy#legacy){min-height:var(--control-height-sm)!important}
html body .calArrow:not(#legacy#legacy#legacy){width:32px!important;padding:0!important;font-size:var(--text-section)!important;line-height:1!important}
html body .calRangeTitle:not(#legacy#legacy#legacy){margin:0 0 0 8px!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;white-space:nowrap!important}
html body .calViews:not(#legacy#legacy#legacy){display:inline-flex!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;overflow:hidden!important}
html body .calViews button:not(#legacy#legacy#legacy){border:0!important;border-radius:0!important;background:var(--color-surface)!important;color:var(--color-text)!important;min-height:var(--control-height-sm)!important;padding:0 14px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body .calViews button+button:not(#legacy#legacy#legacy){border-left:1px solid var(--color-border-strong)!important}
html body .calViews button.isOn:not(#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important}
html body .calFilters:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-left:auto!important;min-width:0!important}
html body .calFilter:not(#legacy#legacy#legacy){display:block!important;width:150px!important;min-width:0!important}
html body .calFilterLabel:not(#legacy#legacy#legacy){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body .calFilter select:not(#legacy#legacy#legacy),html body .calFilter .searchSelectInput:not(#legacy#legacy#legacy){min-height:var(--control-height-sm)!important;font-size:var(--text-small)!important}
html body .calLayout:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
html body .calLayout.withSide:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) 250px!important}
html body .calMain:not(#legacy#legacy#legacy){padding:0!important;overflow:hidden!important;min-width:0!important}
/* month */
html body .calMonth:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}
html body .calHead:not(#legacy#legacy#legacy){padding:6px 8px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text-muted)!important;border-bottom:1px solid var(--color-border)!important;text-transform:capitalize!important}
html body .calCell:not(#legacy#legacy#legacy){min-height:104px!important;padding:4px!important;border-right:1px solid var(--color-border)!important;border-bottom:1px solid var(--color-border)!important;display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important}
html body .calCell:nth-child(7n):not(#legacy#legacy#legacy){border-right:0!important}
html body .calCell.isOther:not(#legacy#legacy#legacy){background:var(--color-bg)!important}
html body .calCell.isOther .calDate:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body .calDate:not(#legacy#legacy#legacy){align-self:flex-start!important;border:0!important;background:transparent!important;color:var(--color-text)!important;min-height:0!important;height:24px!important;min-width:24px!important;padding:0 6px!important;border-radius:var(--radius-pill)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body .calCell.isToday .calDate:not(#legacy#legacy#legacy){background:var(--color-accent)!important;color:var(--color-on-accent)!important}
html body .calMore:not(#legacy#legacy#legacy){border:0!important;background:transparent!important;color:var(--color-accent-strong)!important;min-height:0!important;padding:0 4px!important;font-size:var(--text-small)!important;text-align:left!important;justify-content:flex-start!important}
/* entries: the status colour on the left edge, a light tint of it behind */
html body .calChip:not(#legacy#legacy#legacy),html body .calBlock:not(#legacy#legacy#legacy){--calStatus:var(--color-status-new);display:flex!important;align-items:baseline!important;gap:4px!important;width:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:2px 6px!important;border:0!important;border-left:3px solid var(--calStatus)!important;border-radius:4px!important;background:color-mix(in srgb,var(--calStatus) 14%,var(--color-surface))!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;text-align:left!important;justify-content:flex-start!important;cursor:pointer!important;overflow:hidden!important;white-space:nowrap!important}
html body .calChip:hover:not(#legacy#legacy#legacy),html body .calBlock:hover:not(#legacy#legacy#legacy){background:color-mix(in srgb,var(--calStatus) 24%,var(--color-surface))!important}
html body .calChip:focus-visible:not(#legacy#legacy#legacy),html body .calBlock:focus-visible:not(#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:1px!important}
html body .calProgress:not(#legacy#legacy#legacy){--calStatus:var(--color-status-progress)}
html body .calWaiting:not(#legacy#legacy#legacy){--calStatus:var(--color-status-waiting)}
html body .calBlocked:not(#legacy#legacy#legacy){--calStatus:var(--color-status-blocked)}
html body .calCompleted:not(#legacy#legacy#legacy){--calStatus:var(--color-status-completed)}
html body .calOwn:not(#legacy#legacy#legacy){border-left-style:dashed!important}
html body .calChipTime:not(#legacy#legacy#legacy){flex:none!important;font-weight:var(--weight-semibold)!important}
html body .calChipTitle:not(#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;font-weight:var(--weight-semibold)!important}
html body .calChipWho:not(#legacy#legacy#legacy){flex:0 1 auto!important;min-width:0!important;max-width:45%!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--color-text-muted)!important}
html body .calOff:not(#legacy#legacy#legacy){padding:1px 6px!important;border-radius:4px!important;background:var(--color-bg)!important;border:1px dashed var(--color-border-strong)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
/* week and day: an all-day row, then the hours; the hours scroll inside the box */
html body .calTimeGrid:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:68px repeat(var(--calCols),minmax(0,1fr))!important}
html body .calTimeGrid.calLanes:not(#legacy#legacy#legacy){grid-template-columns:68px repeat(var(--calCols),minmax(130px,1fr))!important}
html body .calMonth .calChipWho:not(#legacy#legacy#legacy){display:none!important}
html body .calHeadGrid:not(#legacy#legacy#legacy){overflow:hidden!important;scrollbar-gutter:stable!important;border-bottom:1px solid var(--color-border-strong)!important}
html body .calScroll:not(#legacy#legacy#legacy){max-height:max(360px,calc(100vh - 330px))!important;overflow:auto!important;scrollbar-gutter:stable!important}
html body .calCorner:not(#legacy#legacy#legacy),html body .calSpanLabel:not(#legacy#legacy#legacy){border-right:1px solid var(--color-border)!important}
html body .calSpanLabel:not(#legacy#legacy#legacy){padding:4px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;text-align:right!important;border-top:1px solid var(--color-border)!important}
html body .calColHead:not(#legacy#legacy#legacy){padding:6px!important;text-align:center!important;border-right:1px solid var(--color-border)!important;min-width:0!important}
html body .calColDate:not(#legacy#legacy#legacy){display:inline-flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;border:0!important;background:transparent!important;color:var(--color-text)!important;min-height:0!important;padding:2px 8px!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important}
html body .calColDate span:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;text-transform:capitalize!important}
html body .calColDate b:not(#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body .calColHead.isToday .calColDate b:not(#legacy#legacy#legacy){color:var(--color-accent-strong)!important}
html body .calLaneName:not(#legacy#legacy#legacy){display:block!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body .calSpanCell:not(#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important;padding:3px!important;min-height:30px!important;border-right:1px solid var(--color-border)!important;border-top:1px solid var(--color-border)!important;min-width:0!important}
html body .calHours:not(#legacy#legacy#legacy){border-right:1px solid var(--color-border)!important}
html body .calHour:not(#legacy#legacy#legacy){position:relative!important;box-sizing:border-box!important}
html body .calHour span:not(#legacy#legacy#legacy){position:absolute!important;top:-7px!important;right:6px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;white-space:nowrap!important}
html body .calDayCol:not(#legacy#legacy#legacy){position:relative!important;border-right:1px solid var(--color-border)!important;min-width:0!important}
html body .calDayCol.isToday:not(#legacy#legacy#legacy){background:color-mix(in srgb,var(--color-accent) 5%,transparent)!important}
html body .calSlot:not(#legacy#legacy#legacy){box-sizing:border-box!important;border-bottom:1px solid var(--color-border)!important}
html body .calBlock:not(#legacy#legacy#legacy){position:absolute!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:3px 6px!important;white-space:normal!important;z-index:1!important}
html body .calBlockTime:not(#legacy#legacy#legacy),html body .calBlockWho:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body .calBlockTitle:not(#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
html body .calNow:not(#legacy#legacy#legacy){position:absolute!important;left:0!important;right:0!important;height:0!important;border-top:2px solid var(--color-danger)!important;z-index:2!important;pointer-events:none!important}
html body .calDayEmpty:not(#legacy#legacy#legacy){padding:40px 20px!important;text-align:center!important;color:var(--color-text-muted)!important}
/* the Unscheduled list */
html body .calSide:not(#legacy#legacy#legacy){padding:12px!important;max-height:calc(100vh - 200px)!important;overflow:auto!important;min-width:0!important}
html body .calSideHead h3:not(#legacy#legacy#legacy){margin:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
html body .calSideHead small:not(#legacy#legacy#legacy){display:block!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:2px 0 8px!important}
html body .calSideList:not(#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:6px!important}
html body .calSideItem:not(#legacy#legacy#legacy){--calStatus:var(--color-status-new);display:flex!important;align-items:center!important;gap:6px!important;padding:6px 6px 6px 8px!important;border:1px solid var(--color-border)!important;border-left:3px solid var(--calStatus)!important;border-radius:var(--radius)!important}
html body .calSideOpen:not(#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important;border:0!important;background:transparent!important;color:var(--color-text)!important;padding:0!important;min-height:0!important;text-align:left!important;font-size:var(--text-small)!important}
html body .calSideOpen b:not(#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important;overflow-wrap:anywhere!important}
html body .calSideOpen small:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
/* dialogs */
html body .calDetail:not(#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important}
html body .calDetailRow:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;gap:12px!important;align-items:center!important}
html body .calDetailRow.top:not(#legacy#legacy#legacy){align-items:start!important}
html body .calDetailRow>span:first-child:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .calDetailRow small:not(#legacy#legacy#legacy),html body .calMuted:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:0!important}
html body .calPeople:not(#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:4px!important}
html body .calPeople small:not(#legacy#legacy#legacy){display:block!important}
html body .calLead:not(#legacy#legacy#legacy){display:inline-block!important;padding:0 8px!important;border-radius:var(--radius-pill)!important;background:var(--color-accent-soft)!important;color:var(--color-accent-strong)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body .calDetailActions:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding-top:6px!important;border-top:1px solid var(--color-border)!important}
html body .calCheck:not(#legacy#legacy#legacy){display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}
html body .calWarn:not(#legacy#legacy#legacy){padding:8px 12px!important;border-left:4px solid var(--color-warning)!important;background:var(--color-bg)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important}
html body .calWarn ul:not(#legacy#legacy#legacy){margin:4px 0!important;padding-left:18px!important}
html body .calOk:not(#legacy#legacy#legacy){padding:8px 12px!important;border-left:4px solid var(--color-success)!important;background:var(--color-success-soft)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important}
@media (max-width:1200px){html body .calLayout.withSide:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}html body .calSide:not(#legacy#legacy#legacy){max-height:none!important}html body .calFilters:not(#legacy#legacy#legacy){margin-left:0!important}}
@media (max-width:700px){html body .calFilter:not(#legacy#legacy#legacy){width:calc(50% - 4px)!important}html body .calCell:not(#legacy#legacy#legacy){min-height:64px!important;padding:2px!important}html body .calCell .calChipWho:not(#legacy#legacy#legacy),html body .calCell .calChipTime:not(#legacy#legacy#legacy){display:none!important}html body .calTimeGrid:not(#legacy#legacy#legacy){grid-template-columns:52px repeat(var(--calCols),minmax(84px,1fr))!important}html body .calTimeGrid.calLanes:not(#legacy#legacy#legacy){grid-template-columns:52px repeat(var(--calCols),minmax(120px,1fr))!important}html body .calRangeTitle:not(#legacy#legacy#legacy){white-space:normal!important;font-size:var(--text-body)!important}html body .calDetailRow:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important;gap:2px!important}}
html body .calDetailRow>*:not(:first-child):not(#legacy#legacy#legacy){justify-self:start!important;max-width:100%!important}
/* v3.39.0: one rule for pages of cards - the next card goes into the shorter column (see watchCardFlow in app.js).
   Two columns from 1000 px of content, one below; cards keep their own height (never stretched to a row). */
html body .cardFlow:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:4px!important;grid-template-rows:none!important;column-gap:14px!important;row-gap:0!important;align-items:start!important}
html body .cardFlow>*:not(#legacy#legacy#legacy#legacy#legacy){grid-column:auto!important;grid-row-start:auto!important;margin:0 0 14px!important;align-self:start!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important}
@media (max-width:1100px){html body .cardFlow:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}
html body .cardFlow .companyBrandBody:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
html body .cardFlow .companyFacts:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:max-content minmax(0,1fr)!important;column-gap:16px!important}
html body .cardFlow .settingsCard>.trustedDevicesSection:first-child:not(#legacy#legacy#legacy#legacy#legacy){border-top:0!important;margin-top:0!important;padding-top:0!important}
/* v3.39.0: planning by drag, the People dialog and availability */
html body [data-drag]:not(#legacy#legacy#legacy){cursor:grab!important;touch-action:auto!important}
html body.calDragging:not(#legacy#legacy#legacy),html body.calDragging *:not(#legacy#legacy#legacy){cursor:grabbing!important;user-select:none!important}
html body .calGhost:not(#legacy#legacy#legacy){position:fixed!important;z-index:1000!important;pointer-events:none!important;opacity:.85!important;outline:2px solid var(--color-accent)!important;margin:0!important}
html body .calDragSource:not(#legacy#legacy#legacy){opacity:.35!important}
html body .calDropOver:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body .calResize:not(#legacy#legacy#legacy){position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:7px!important;cursor:ns-resize!important;border-bottom:2px solid transparent!important}
html body .calBlock:hover .calResize:not(#legacy#legacy#legacy){border-bottom-color:var(--calStatus)!important}
html body .calPeopleEdit:not(#legacy#legacy#legacy),html body .availEdit:not(#legacy#legacy#legacy){display:grid!important;gap:12px!important}
html body .calPersonRow:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:max-content minmax(90px,120px) max-content minmax(150px,1fr) minmax(150px,1fr) max-content!important;gap:6px 12px!important;align-items:end!important;margin:0 0 8px!important;padding:8px 10px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;min-width:0!important}
html body .calPersonRow legend:not(#legacy#legacy#legacy){padding:0 4px!important;font-weight:var(--weight-semibold)!important}
html body .calPersonRow label:not(#legacy#legacy#legacy){margin:0!important}
html body .calAddPerson:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:end!important}
html body .calAddPerson label:not(#legacy#legacy#legacy){flex:1 1 220px!important;margin:0!important}
html body .availEdit h4:not(#legacy#legacy#legacy){margin:0 0 4px!important;font-size:var(--text-body)!important}
html body .availEdit section:not(#legacy#legacy#legacy){display:grid!important;gap:6px!important;padding-bottom:10px!important;border-bottom:1px solid var(--color-border)!important}
html body .availEdit section:last-child:not(#legacy#legacy#legacy){border-bottom:0!important}
html body .hoursGrid:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(120px,max-content) minmax(96px,140px) minmax(96px,140px)!important;gap:6px 10px!important;align-items:center!important}
html body .hoursGrid input[type="time"]:not(#legacy#legacy#legacy){min-height:34px!important}
html body .availList:not(#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:4px!important}
html body .availList li:not(#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important;padding:6px 8px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body .availList small:not(#legacy#legacy#legacy){display:block!important}
html body .availAdd:not(#legacy#legacy#legacy){margin-top:4px!important}
@media (max-width:520px){html body .hoursGrid:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}html body .hoursGrid .hoursDay:not(#legacy#legacy#legacy){grid-column:1/-1!important}}
@media (max-width:760px){html body .calPersonRow:not(#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}html body .calPersonRow>button:not(#legacy#legacy#legacy){justify-self:start!important}}
html body .calPersonRow>.calCheck:not(#legacy#legacy#legacy){min-height:40px!important}
html body .calPersonRow>button:not(#legacy#legacy#legacy){align-self:end!important;min-height:40px!important}
/* v3.39.0: in a card column a setting's label keeps its width and the control takes the rest (nothing cut off at 1366) */
html body .cardFlow .companyControl:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(96px,max-content) minmax(0,1fr)!important}
html body .cardFlow .hoursGrid:not(#legacy#legacy#legacy#legacy#legacy),html body .availEdit .hoursGrid:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(88px,1fr) minmax(118px,150px) minmax(118px,150px)!important}
html body .hoursGrid input[type="time"]:not(#legacy#legacy#legacy#legacy#legacy){padding-inline:8px!important;min-width:0!important}
@media (max-width:520px){html body .cardFlow .hoursGrid:not(#legacy#legacy#legacy#legacy#legacy),html body .availEdit .hoursGrid:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}
/* v3.39.1: the drop preview - the task at its real size where it would land */
html body .calPreview:not(#legacy#legacy#legacy){position:absolute!important;left:2px!important;right:2px!important;z-index:3!important;display:flex!important;flex-direction:column!important;gap:0!important;padding:3px 6px!important;overflow:hidden!important;pointer-events:none!important;border:2px dashed var(--color-accent-strong)!important;border-left:4px solid var(--calStatus,var(--color-status-new))!important;border-radius:4px!important;background:color-mix(in srgb,var(--calStatus,var(--color-status-new)) 30%,var(--color-surface))!important;color:var(--color-text)!important;font-size:var(--text-small)!important;box-shadow:0 2px 8px color-mix(in srgb,var(--color-text) 18%,transparent)!important}
html body .calPreview.calPreviewDay:not(#legacy#legacy#legacy){position:relative!important;left:auto!important;right:auto!important;flex-direction:row!important;gap:4px!important;margin-top:2px!important;white-space:nowrap!important}
html body .calPreview .calBlockTime:not(#legacy#legacy#legacy),html body .calPreview .calChipTime:not(#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important}
html body .calPreview .calBlockTitle:not(#legacy#legacy#legacy),html body .calPreview .calChipTitle:not(#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body .calDropDay:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important;box-shadow:inset 0 0 0 2px var(--color-accent-strong)!important}
/* the task's menu */
html body .calMenu:not(#legacy#legacy#legacy){position:fixed!important;z-index:1100!important;min-width:200px!important;display:flex!important;flex-direction:column!important;padding:4px!important;background:var(--color-surface)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;box-shadow:0 8px 24px color-mix(in srgb,var(--color-text) 22%,transparent)!important}
html body .calMenu button:not(#legacy#legacy#legacy){display:block!important;width:100%!important;text-align:left!important;margin:0!important;padding:7px 10px!important;min-height:0!important;border:0!important;border-radius:4px!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--text-body)!important;font-weight:var(--weight-regular)!important}
html body .calMenu button:hover:not(#legacy#legacy#legacy),html body .calMenu button:focus-visible:not(#legacy#legacy#legacy){background:var(--color-accent-soft)!important;outline:none!important}
html body .calMenu button.isDanger:not(#legacy#legacy#legacy){color:var(--color-danger)!important;border-top:1px solid var(--color-border)!important;border-radius:0 0 4px 4px!important}
html body .calMenu button[aria-disabled="true"]:not(#legacy#legacy#legacy){color:var(--color-text-muted)!important;cursor:not-allowed!important}
html body .calUnplanRow:not(#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;padding-top:8px!important;border-top:1px solid var(--color-border)!important}
/* typed times, and a date with a time */
html body input.timeField:not(#legacy#legacy#legacy){min-width:0!important;font-variant-numeric:tabular-nums!important}
html body input.timeField[aria-invalid="true"]:not(#legacy#legacy#legacy){border-color:var(--color-danger)!important;box-shadow:0 0 0 1px var(--color-danger)!important}
html body .dateTimePair:not(#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(88px,1fr)!important;gap:6px!important}
/* the working-hours editor (Company, Employees, My Profile) */
html body .hoursEditor:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:8px!important}
html body .hoursEditor .hoursZone:not(#legacy#legacy#legacy#legacy#legacy){margin:0!important;padding:6px 10px!important;border-left:3px solid var(--color-accent-strong)!important;background:var(--color-bg)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important;color:var(--color-text)!important}
html body .hoursEditor .hoursPreset:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;align-items:center!important;gap:10px!important;margin:0!important;color:var(--color-text-muted)!important}
html body .hoursEditor .hoursGrid:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
html body .hoursEditor .hoursRow:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(80px,1fr) minmax(96px,130px) minmax(96px,130px)!important;gap:8px!important;align-items:center!important}
html body .hoursEditor .hoursRow.isOff input.timeField:not(#legacy#legacy#legacy#legacy#legacy){opacity:.5!important}
html body .hoursEditor .hoursRow.isOff .hoursDay:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body .hoursEditor .hoursCopy:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;padding:0 0 6px!important;margin-bottom:2px!important;border-bottom:1px dashed var(--color-border)!important}
html body .hoursEditor .hoursCopy small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
@media (max-width:520px){html body .hoursEditor .hoursRow:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}html body .hoursEditor .hoursRow .hoursDay:not(#legacy#legacy#legacy#legacy#legacy){grid-column:1/-1!important}html body .hoursEditor .hoursPreset:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}}
html body .hoursEditor .hoursCopy small:not(#legacy#legacy#legacy#legacy#legacy){flex-basis:100%!important}
/* v3.40.0: Plan Studio - a save that failed, an empty search, and "copy the hours of" */
html body #planSaveState.failed:not(#legacy#legacy#legacy){color:var(--color-danger)!important;font-weight:var(--weight-semibold)!important}
html body #planSearchResults .searchEmpty:not(#legacy#legacy#legacy){padding:8px 10px!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .hoursEditor .hoursCopy label:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;flex:1 1 100%!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .hoursEditor .hoursCopy select:not(#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-height:32px!important;padding:4px 8px!important}

/* ===== v3.41.0 - Plan Studio on the tokens (the local --plan-* controls read the theme tokens; marks on the plan use the plan tokens) ===== */
html body #appShell #plans:not(#legacy#legacy#legacy#legacy#legacy){--plan-control:var(--color-surface)!important;--plan-control-hover:var(--color-surface-2)!important;--plan-control-active:var(--color-accent-strong)!important;--plan-control-border:var(--color-border-strong)!important;--plan-control-text:var(--color-text)!important;--plan-brand-blue:var(--color-accent)!important;--plan-light-button:var(--color-surface)!important;--plan-light-border:var(--color-border-strong)!important;--plan-light-hover:var(--color-surface-2)!important}
html body #plans .planMarker .label:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;border-color:var(--color-plan-chip-border)!important}
html body #plans .planMarker .markerCore:not(#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker .planDeviceShape:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-plan-ink)!important}
html body #plans .markerLockBadge:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important;border-color:var(--color-status-completed)!important;color:var(--color-on-status)!important}
html body #plans .engineeringQueueGroup:not(#legacy#legacy#legacy#legacy#legacy),html body #plans .engineeringEquipmentQueue:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;color:var(--color-text)!important;border-color:var(--color-border)!important}
html body #plans .engineeringQueueGroup :is(div,b,.engineeringQueueIcon):not(#legacy#legacy#legacy#legacy#legacy),html body #plans .engineeringEquipmentQueue .cardHead:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important}
html body #plans .engineeringQueueGroup :is(small,em):not(#legacy#legacy#legacy#legacy#legacy),html body #plans .recognitionSectionTitle:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #plans .engineeringQueueStats span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;border-color:var(--color-border)!important;background:var(--color-surface)!important}
html body #plans :is(input,select,textarea):not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;background:var(--color-surface)!important;border-color:var(--color-border-strong)!important}
html body #plans .planLayerBar button.active:not(#legacy#legacy#legacy#legacy#legacy),html body #plans .planSideTabs button.active:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important}
html body #plans button span:not(#legacy#legacy#legacy#legacy#legacy){background:transparent!important}
html body #plans .layerDivider:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-border)!important}
html body #plans :is(.planRail,.planInspector,.planSideTabs):not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important;border-color:var(--color-border)!important}
html body #plans .planCategoryList:not(#legacy#legacy#legacy#legacy#legacy),html body #plans .selectedPlanTool:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;border-color:var(--color-border)!important}
html body #plans .selectedPlanTool b:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-accent)!important}
html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy),html body #plans #planCanvasSizer:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-bg)!important;border-color:var(--color-border-strong)!important}
html body #plans .resizeHandle:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;border-color:var(--color-accent)!important;color:var(--color-accent)!important}
html body #plans .workflowPageFooter:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-border)!important}
html body #plans h2:not(#legacy#legacy#legacy#legacy#legacy),html body #plans .card:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important}
html body #plans .pill:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;border-color:var(--color-border)!important;color:var(--color-text)!important}
html body #plans .planPanelHandle small:not(#legacy#legacy#legacy#legacy#legacy),html body #plans .planPanelHandle span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #plans :is(.labelPositionTools span,.recognitionSectionTitle span):not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
/* ===== v3.41.0 - Plan Studio layout: nothing clipped or overlapping at 1366 and up ===== */
html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:76px minmax(0,1fr) 310px!important}
html body #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) 310px!important}
html body #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:76px minmax(0,1fr)!important}
html body #plans .planWorkspace.railCollapsed.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
html body #plans .compactToolRail:not(#legacy#legacy#legacy#legacy#legacy){width:76px!important;min-width:76px!important;align-items:center!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy){width:66px!important;min-height:54px!important;height:auto!important;padding:6px 4px!important;white-space:normal!important;overflow:visible!important;font-size:var(--text-small)!important;line-height:1.2!important;position:relative!important;text-align:center!important;word-break:normal!important;overflow-wrap:normal!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton) span:not(#legacy#legacy#legacy#legacy#legacy){white-space:normal!important;overflow:visible!important;max-width:100%!important}
html body #plans .planStudioCommandHeader:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:8px!important}
html body #plans .planTopTools:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 12px!important}
html body #plans .planTopTools .planContextGroup:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;flex:0 1 auto!important;min-width:0!important}
html body #plans .planTopTools .projectCrumb:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planPageSelector:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;flex-wrap:nowrap!important}
html body #plans .planPageGalleryTrigger:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;column-gap:8px!important;row-gap:0!important;align-items:center!important;width:auto!important;max-width:300px!important;min-width:0!important;text-align:left!important}
html body #plans .planPageGalleryTrigger>span:not(#legacy#legacy#legacy#legacy#legacy){grid-row:span 2!important}
html body #plans .planPageGalleryTrigger :is(b,small):not(#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important}
html body #plans .planPageSelector>button:not(.planPageGalleryTrigger):not(#legacy#legacy#legacy#legacy#legacy){flex:0 0 auto!important;white-space:nowrap!important}
html body #plans .planTopTools .planSearch:not(#legacy#legacy#legacy#legacy#legacy){flex:1 1 220px!important;max-width:380px!important;min-width:180px!important;display:flex!important;gap:6px!important;position:relative!important}
html body #plans .planTopTools .planCommandGroup:not(#legacy#legacy#legacy#legacy#legacy){flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important;margin-left:auto!important}
html body #plans .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;min-width:0!important;width:auto!important}
html body #plans .planSideTabs button:not(#legacy#legacy#legacy#legacy#legacy){min-width:0!important;width:auto!important;padding:0 6px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:var(--text-small)!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton,.selectedPlanTool):not(#legacy#legacy#legacy#legacy#legacy){max-width:none!important;min-width:66px!important}
html body #plans #planToolRail :is(.planCategoryList,.selectedPlanTool):not(#legacy#legacy#legacy#legacy#legacy){width:66px!important;max-width:none!important}
html body #plans .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:auto auto auto!important;justify-content:stretch!important}
html body #plans .planSideTabs button:not(#legacy#legacy#legacy#legacy#legacy){padding:0 4px!important;letter-spacing:0!important;text-overflow:clip!important}
html body #plans .planSideTabs button span:not(#legacy#legacy#legacy#legacy#legacy){margin:0 0 0 3px!important;padding:0 4px!important;min-width:0!important;display:inline!important;font-size:var(--text-small)!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton)>span:not(#legacy#legacy#legacy#legacy#legacy){width:auto!important;max-width:none!important;display:block!important;padding:0!important}
/* v3.41.0: several selected - actions, and the keys list */
html body #plans .planSelectionActions:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:10px 0!important}
html body #plans .planSelectionActions button:not(#legacy#legacy#legacy#legacy#legacy){min-height:34px!important;padding:0 10px!important;font-size:var(--text-small)!important}
html body #plans .planKeysHelp:not(#legacy#legacy#legacy#legacy#legacy){margin-top:10px!important;padding-top:8px!important;border-top:1px solid var(--color-border)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #plans .planKeysHelp summary:not(#legacy#legacy#legacy#legacy#legacy){cursor:pointer!important;color:var(--color-text)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planKeysHelp ul:not(#legacy#legacy#legacy#legacy#legacy){margin:6px 0 0!important;padding-left:16px!important;display:grid!important;gap:3px!important}
/* ===== v3.41.0 - Plan Studio on a phone: the field mode (600px wide or less, or a phone on its side) =====
   The plan fills the screen between a slim top bar and a bottom bar; every button is at least 56px high for one hand
   and gloves; the sheets open above the bottom bar. Tablets and computers keep the full tools. */
.phonePlanTop,.phonePlanBar,#phoneSheetHost{display:none}
html body.phonePlan:not(#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;overscroll-behavior:none!important}
html body.phonePlan #appShell:not(#legacy#legacy#legacy#legacy#legacy){display:block!important;min-height:100dvh!important}
html body.phonePlan :is(#appShell>aside,main>header,#workflowRibbon,#plans>.pageHead,.desktopPlanControls,.mobilePlanTopBar,.mobilePlanDock,.mobileToolsSheet,.planPanelHandle,.planStatusBar,.planSymbolPopup,.planTrainingBanner,.planConfirmBanner,.workflowPageFooter,.workflowRibbon):not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.phonePlan #plans .planWorkspace>:is(.planRail,.planInspector,#planToolRail):not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.phonePlan :is(main,.content,#plans,#plansBody):not(#legacy#legacy#legacy#legacy#legacy){width:100vw!important;max-width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
html body.phonePlan #plans .phonePlanTop:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;height:64px!important;padding:4px 8px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;box-sizing:border-box!important;position:relative!important;z-index:150!important}
html body.phonePlan #plans .phonePlanTop select:not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;height:52px!important;min-height:52px!important;font-size:var(--text-body)!important;border-radius:var(--radius)!important}
html body.phonePlan #plans .phoneIconBtn:not(#legacy#legacy#legacy#legacy#legacy){width:56px!important;min-width:56px!important;height:56px!important;min-height:56px!important;padding:0!important;display:grid!important;place-items:center!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;font-size:var(--text-section)!important}
html body.phonePlan #plans :is(.phoneIconBtn,.phonePlanBar,.phoneAction,.phoneNext) svg:not(#legacy#legacy#legacy#legacy#legacy){width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;flex:none!important}
html body.phonePlan #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){display:block!important;position:relative!important;width:100vw!important;height:calc(100dvh - 64px - 76px - env(safe-area-inset-bottom,0px))!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
html body.phonePlan #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;overscroll-behavior:contain!important;touch-action:none!important}
html body.phonePlan #plans #planCanvasSizer:not(#legacy#legacy#legacy#legacy#legacy){min-width:100%!important;min-height:100%!important}
/* a symbol is easy to hit: 48px around it on the screen, at any zoom */
html body.phonePlan #plans .planMarker:not(.detection)::before{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:calc(48px * var(--plan-compensation,1))!important;height:calc(48px * var(--plan-compensation,1))!important;transform:translate(-50%,-50%)!important;border-radius:50%!important;background:transparent!important}
html body.phonePlan #plans .planMarker.selected:not(#legacy#legacy#legacy#legacy#legacy){outline:calc(3px * var(--plan-compensation,1)) solid var(--color-accent)!important;outline-offset:calc(6px * var(--plan-compensation,1))!important;border-radius:50%!important}
/* the bottom bar: My work, Layers, Fit, Find */
html body.phonePlan #plans .phonePlanBar:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:calc(76px + env(safe-area-inset-bottom,0px))!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))!important;background:var(--color-surface)!important;border-top:1px solid var(--color-border)!important;z-index:230!important;box-sizing:border-box!important}
html body.phonePlan #plans .phonePlanBar button:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;min-height:62px!important;height:62px!important;padding:4px!important;background:transparent!important;color:var(--color-text)!important;border:1px solid transparent!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:var(--line-height-tight)!important}
html body.phonePlan #plans .phonePlanBar button span:not(#legacy#legacy#legacy#legacy#legacy){max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body.phonePlan #plans .phonePlanBar button.active:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-accent)!important;border-color:var(--color-accent)!important}
/* the sheets */
html body.phonePlan #plans #phoneSheetHost:not(#legacy#legacy#legacy#legacy#legacy){display:block!important}
html body.phonePlan #plans .phoneSheet:not(#legacy#legacy#legacy#legacy#legacy){position:fixed!important;left:0!important;right:0!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;max-height:calc(100dvh - 64px - 76px - 12px)!important;display:flex!important;flex-direction:column!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-bottom:0!important;border-radius:14px 14px 0 0!important;z-index:240!important;box-sizing:border-box!important}
html body.phonePlan #plans .phoneSheetHead:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:8px 8px 8px 16px!important;border-bottom:1px solid var(--color-border)!important}
html body.phonePlan #plans .phoneSheetHead b:not(#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body.phonePlan #plans .phoneSheetBody:not(#legacy#legacy#legacy#legacy#legacy){padding:12px 16px 16px!important;overflow:auto!important;display:grid!important;gap:12px!important;align-content:start!important}
html body.phonePlan #plans .phoneItemState:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px 10px!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneMyTask:not(#legacy#legacy#legacy#legacy#legacy){margin:0!important;display:grid!important;gap:2px!important}
html body.phonePlan #plans .phoneMyTask small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body.phonePlan #plans .phonePrimary:not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-height:64px!important;padding:8px 16px!important;background:var(--color-status-completed)!important;color:var(--color-on-status)!important;border:0!important;border-radius:var(--radius)!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body.phonePlan #plans .phonePrimary.phoneStart:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body.phonePlan #plans .phoneHint:not(#legacy#legacy#legacy#legacy#legacy){margin:0!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneActions:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
html body.phonePlan #plans .phoneAction:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-height:64px!important;padding:6px 4px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;line-height:var(--line-height-tight)!important;text-align:center!important}
html body.phonePlan #plans .phoneDoneBar:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:64px!important;padding:6px 6px 6px 14px!important;background:var(--color-success-soft)!important;color:var(--color-text)!important;border:1px solid var(--color-status-completed)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneDoneBar button:not(#legacy#legacy#legacy#legacy#legacy){min-height:52px!important;min-width:88px!important;padding:0 14px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-weight:var(--weight-semibold)!important}
html body.phonePlan #plans .phoneNext:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:56px!important;padding:6px 14px!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;border:1px solid var(--color-accent)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important;text-align:left!important}
html body.phonePlan #plans .phoneNext b:not(#legacy#legacy#legacy#legacy#legacy){flex:1!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body.phonePlan #plans .phoneNext span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
/* note */
html body.phonePlan #plans .phonePhrases:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body.phonePlan #plans .phonePhrases button:not(#legacy#legacy#legacy#legacy#legacy){min-height:48px!important;padding:6px 14px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-pill)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneSheet textarea:not(#legacy#legacy#legacy#legacy#legacy),html body.phonePlan #plans .phoneSheet input[type="search"]:not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-height:56px!important;padding:12px!important;font-size:var(--text-section)!important;border-radius:var(--radius)!important;box-sizing:border-box!important}
/* my work */
html body.phonePlan #plans .phoneWorkSheet h4:not(#legacy#legacy#legacy#legacy#legacy){margin:4px 0 0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text)!important;display:flex!important;gap:6px!important;align-items:center!important}
html body.phonePlan #plans .phoneWorkSheet h4 span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-weight:var(--weight-regular)!important}
html body.phonePlan #plans .phoneWorkRow:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:8px!important;padding:10px 12px!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body.phonePlan #plans .phoneWorkRow>div:first-child:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:4px!important}
html body.phonePlan #plans .phoneWorkRow small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body.phonePlan #plans .phoneOverdue:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important;font-weight:var(--weight-semibold)!important}
html body.phonePlan #plans .phoneWorkItems:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body.phonePlan #plans .phoneWorkItems button:not(#legacy#legacy#legacy#legacy#legacy),html body.phonePlan #plans .phoneFindRow:not(#legacy#legacy#legacy#legacy#legacy){min-height:48px!important;padding:6px 14px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
html body.phonePlan #plans .phoneFindRow:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:2px!important;width:100%!important;min-height:56px!important;text-align:left!important}
html body.phonePlan #plans .phoneFindRow span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
#phoneFindResults{display:grid;gap:8px}
/* layers */
html body.phonePlan #plans .phoneLayerGrid:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
html body.phonePlan #plans .phoneLayerGrid button:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;padding:6px 14px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneLayerGrid button.active:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important;color:var(--color-text)!important}
html body.phonePlan #plans .phoneLayerGrid button span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body.phonePlan #plans .phoneToggle:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:12px!important;min-height:56px!important;font-size:var(--text-body)!important;color:var(--color-text)!important}
html body.phonePlan #plans .phoneToggle input:not(#legacy#legacy#legacy#legacy#legacy){width:28px!important;height:28px!important;min-height:0!important}
/* a phone on its side: the sheet takes the right half so the plan stays visible */
@media (orientation:landscape){
  html body.phonePlan #plans .phoneSheet:not(#legacy#legacy#legacy#legacy#legacy){left:auto!important;width:min(460px,55vw)!important;border-radius:14px 0 0 0!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;max-height:calc(100dvh - 60px - 64px - 8px)!important}
  html body.phonePlan #plans .phonePlanTop:not(#legacy#legacy#legacy#legacy#legacy){height:60px!important;padding:2px 8px!important}
  html body.phonePlan #plans .phonePlanTop .phoneIconBtn:not(#legacy#legacy#legacy#legacy#legacy){height:56px!important;min-height:56px!important}
  html body.phonePlan #plans .phonePlanTop select:not(#legacy#legacy#legacy#legacy#legacy){height:48px!important;min-height:48px!important}
  html body.phonePlan #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){height:calc(100dvh - 60px - 64px - env(safe-area-inset-bottom,0px))!important}
  html body.phonePlan #plans .phonePlanBar:not(#legacy#legacy#legacy#legacy#legacy){height:calc(64px + env(safe-area-inset-bottom,0px))!important;padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px))!important}
  html body.phonePlan #plans .phonePlanBar button:not(#legacy#legacy#legacy#legacy#legacy){flex-direction:row!important;gap:8px!important;height:56px!important;min-height:56px!important;font-size:var(--text-body)!important}
}
/* the Company card: phrases, and a field note shown as text in the evidence lists */
.fieldPhrasesControl textarea{width:100%;min-height:140px;font-size:var(--text-body)}
html body .evidenceCard.evidenceNote:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important;align-content:start!important;padding:10px!important;cursor:default!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body .evidenceCard.evidenceNote .evidenceNoteText:not(#legacy#legacy#legacy#legacy#legacy){white-space:pre-wrap!important;overflow-wrap:anywhere!important;font-size:var(--text-body)!important;display:-webkit-box!important;-webkit-line-clamp:5!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

/* ===== v3.42.0 - what a photo shows: chosen in one tap after the shot, changeable later (owner, 2026-09-19) ===== */
html body.phonePlan #plans .phonePhotoPreview:not(#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important;max-height:34dvh!important;object-fit:contain!important;background:var(--color-bg)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body.phonePlan #plans .phonePhotoCats:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
html body.phonePlan #plans .phonePhotoCats button:not(#legacy#legacy#legacy#legacy#legacy){min-height:64px!important;padding:6px 12px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body.phonePlan #plans .phonePhotoCats button.phoneFirstCat:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important;color:var(--color-on-status)!important;border-color:var(--color-status-completed)!important}
html body.phonePlan #plans .phonePhotoCats button.active:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important;color:var(--color-text)!important}
html body.phonePlan #plans .phonePhotoCats button[disabled]:not(#legacy#legacy#legacy#legacy#legacy){opacity:.6!important}
html body.phonePlan #plans .phoneSavedAs:not(#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text)!important}
html body .evidenceCats:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;margin-top:10px!important}
html body .evidenceCats small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .evidenceCats button:not(#legacy#legacy#legacy#legacy#legacy){min-height:var(--control-height)!important;padding:0 12px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-pill)!important;font-size:var(--text-body)!important}
html body .evidenceCats button.active:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important}

/* ===== v3.42.0 - the plan jobs panel: what the server is doing with this project's plans, and Cancel ===== */
html body .planJobsPanel:not(#legacy#legacy#legacy#legacy#legacy){position:fixed!important;right:18px!important;bottom:18px!important;z-index:250!important;display:grid!important;gap:8px!important;width:min(360px,calc(100vw - 36px))!important}
html body .planJobCard:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important;padding:12px 14px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-left:3px solid var(--color-accent)!important;border-radius:var(--radius)!important}
html body .planJobCard.completed:not(#legacy#legacy#legacy#legacy#legacy){border-left-color:var(--color-status-completed)!important}
html body .planJobCard.failed:not(#legacy#legacy#legacy#legacy#legacy){border-left-color:var(--color-danger)!important}
html body .planJobCard.cancelled:not(#legacy#legacy#legacy#legacy#legacy){border-left-color:var(--color-border-strong)!important}
html body .planJobCard header:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important}
html body .planJobCard header b:not(#legacy#legacy#legacy#legacy#legacy){flex:1!important;min-width:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body .planJobCard .planJobPct:not(#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;color:var(--color-accent)!important}
html body .planJobTrack:not(#legacy#legacy#legacy#legacy#legacy){height:6px!important;border-radius:var(--radius-pill)!important;background:var(--color-surface-2)!important;overflow:hidden!important}
html body .planJobTrack>div:not(#legacy#legacy#legacy#legacy#legacy){height:100%!important;background:var(--color-accent)!important;transition:width .25s ease!important}
html body .planJobCard .planJobStage:not(#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-body)!important;color:var(--color-text)!important}
html body .planJobCard small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body .planJobCancel:not(#legacy#legacy#legacy#legacy#legacy){justify-self:start!important;min-height:var(--control-height-sm)!important;padding:0 12px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important}
html body.phonePlan .planJobsPanel:not(#legacy#legacy#legacy#legacy#legacy){right:8px!important;left:8px!important;width:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}

/* ===== v3.43.0 (D1, owner approved 2026-09-19) - one symbol family, one handle, the legend ===== */
/* the family is drawn on a 24 grid: the toolbar picture at 1.9, the plan symbol at 2.2 */
html body #plans svg.symbolArt:not(#legacy#legacy#legacy#legacy#legacy){fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important;overflow:visible!important}
html body #plans .planMarker svg.symbolArt:not(#legacy#legacy#legacy#legacy#legacy){stroke-width:2.2!important}
html body #plans svg.symbolArt .symbolLens:not(#legacy#legacy#legacy#legacy#legacy){fill:currentColor!important;stroke:currentColor!important}
html body #plans .planCategoryButton svg.symbolArt:not(#legacy#legacy#legacy#legacy#legacy){width:24px!important;height:24px!important}
html body #plans .planFlyoutGrid>button svg.symbolArt:not(#legacy#legacy#legacy#legacy#legacy){width:26px!important;height:26px!important;flex:0 0 26px!important;stroke-width:1.9!important}
/* the one handle: 30px drawn, 44px to the finger */
html body #plans .planMarker .aimHandle:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;width:30px!important;height:30px!important;margin:-15px 0 0 -15px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--color-surface)!important;color:var(--color-accent)!important;border:2px solid var(--color-accent)!important;cursor:grab!important;touch-action:none!important;transform:translate(var(--aim-x,0px),var(--aim-y,0px)) scale(var(--plan-compensation,1))!important;z-index:6!important}
html body #plans .planMarker .aimHandle svg:not(#legacy#legacy#legacy#legacy#legacy){width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body #plans .planMarker:not(.selected)>.aimHandle:not(#legacy#legacy#legacy#legacy#legacy),
html body #plans .planMarker.markerLocked>.aimHandle:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* the lock badge sits beside the symbol: blue locked, green unlocked (owner, 2026-09-19) */
html body #plans .planMarker.markerLocked .markerLockBadge:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-new)!important;border-color:var(--color-status-new)!important;color:var(--color-on-status)!important}
html body #plans .planMarker.markerUnlocked .markerLockBadge:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important;border-color:var(--color-status-completed)!important;color:var(--color-on-status)!important}
/* a fisheye sees all round */
html body #plans .cameraFov.fisheyeFov circle:not(#legacy#legacy#legacy#legacy#legacy){fill:var(--color-accent-soft)!important;stroke:var(--color-accent)!important;stroke-opacity:.45!important}
/* the legend on the sheet */
html body #plans .planLegend:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:10px!important;bottom:10px!important;z-index:5!important;max-width:calc(100% - 20px)!important;display:flex!important;flex-wrap:wrap!important;gap:10px 14px!important;padding:8px 10px!important;background:var(--color-plan-paper)!important;border:1px solid var(--color-border-strong)!important;border-radius:8px!important}
html body #plans .planLegend .legendTitle:not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;color:var(--color-plan-ink)!important;opacity:.7!important;font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important}
html body #plans .planLegend .legendItem:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;justify-items:center!important;gap:3px!important;width:58px!important;color:var(--color-plan-ink)!important;font-size:var(--text-small)!important;line-height:1.2!important;text-align:center!important}
html body #plans .planLegend .legendPuck:not(#legacy#legacy#legacy#legacy#legacy){width:26px!important;height:26px!important;display:grid!important;place-items:center!important;border:1.4px solid var(--color-plan-ink)!important;border-radius:50%!important}
html body #plans .planLegend .legendPuck svg:not(#legacy#legacy#legacy#legacy#legacy){width:17px!important;height:17px!important;stroke-width:2.2!important}
html body #plans .planLegendToggle:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:10px!important;bottom:10px!important;z-index:5!important;min-height:30px!important;padding:0 12px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important}
/* v3.43.0: the legend sits on the drawing but must never swallow a click meant for a symbol */
html body #plans .planLegend:not(#legacy#legacy#legacy#legacy#legacy){pointer-events:none!important}
html body #plans .planLegend button:not(#legacy#legacy#legacy#legacy#legacy){pointer-events:auto!important;background:transparent!important;border:0!important;color:var(--color-plan-ink)!important;font-size:var(--text-body)!important;line-height:1!important;padding:0 2px!important}

/* ===== v3.43.0 (owner, 2026-09-19) - the panel tabs: push and pull, nothing else =====
   Each tab is fixed to the edge of its own panel and centred on the workspace, open or collapsed, at every width.
   It is placed with top/margin, never with a transform, because the old hover rule removed that transform and the
   tab jumped by 46px as the pointer arrived. Hover now only changes the colour. */
html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html body #plans .planPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:var(--plan-tab-mid,50%)!important;bottom:auto!important;margin-top:-46px!important;height:92px!important;transform:none!important;translate:none!important;transition:background-color .12s ease,border-color .12s ease,color .12s ease!important;z-index:7!important}
html body #plans .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){left:76px!important;right:auto!important;margin-left:-1px!important;border-radius:0 var(--radius) var(--radius) 0!important}
html body #plans .planWorkspace.railCollapsed .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){left:0!important;margin-left:0!important}
html body #plans .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){right:310px!important;left:auto!important;margin-right:-1px!important;border-radius:var(--radius) 0 0 var(--radius)!important}
html body #plans .planWorkspace.inspectorCollapsed .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){right:0!important;margin-right:0!important}
html body #plans .planPanelHandle:hover:not(#legacy#legacy#legacy#legacy#legacy){transform:none!important;translate:none!important;background:var(--color-surface-2)!important;border-color:var(--color-accent)!important;color:var(--color-accent)!important}
html body #plans .planPanelHandle:active:not(#legacy#legacy#legacy#legacy#legacy){transform:none!important;translate:none!important}

/* ===== v3.44.0 (owner, 2026-09-19) - Plan Studio D2: the palette is docked, not floating =====
   B1: the panel was position:absolute over the drawing, and the camera styles opened a SECOND panel over that.
   Now the rail and one panel are columns of the workspace grid: opening the palette makes the plan narrower
   instead of hiding it, and a group REPLACES its category in the same panel, with a back arrow.
   B2: the category rail is always there, so any category is one click away without closing anything.
   B3: a tile is as wide as its longest word needs and wraps to two lines - nothing is ever cut. */
@media(min-width:1101px){
  html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){
    grid-template-columns:var(--plan-rail-col,76px) var(--plan-palette-col,0px) minmax(0,1fr) var(--plan-inspector-col,340px)!important;
    column-gap:8px!important;align-items:start!important
  }
  html body #plans .planWorkspace.toolsOpen:not(#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:var(--plan-tools-width,174px)}
  html body #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:0px;--plan-palette-col:0px}
  html body #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy){--plan-inspector-col:0px}
  /* the panel sits in its own column: in the flow, full height, no shadow, nothing underneath it */
  html body #plans #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy){grid-column:2!important;grid-row:1!important;min-width:0!important;height:100%!important}
  html body #plans #planToolFlyoutHost:empty:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #plans .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy){
    position:static!important;left:auto!important;top:auto!important;width:auto!important;max-width:none!important;
    height:100%!important;box-shadow:none!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;gap:8px!important;overflow:auto!important
  }
  html body #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy){grid-column:1!important;grid-row:1!important}
  html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy){grid-column:3!important;grid-row:1!important}
  html body #plans .planInspector:not(#legacy#legacy#legacy#legacy#legacy){grid-column:4!important;grid-row:1!important}
  /* the TOOLS tab rides the edge of whatever is furthest right on that side (measured in applyPlanViewport) */
  html body #plans .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){left:var(--plan-tools-edge,76px)!important;margin-left:-1px!important}
}
/* B3 - tiles fit the longest name in any language, Armenian included, and wrap instead of clipping */
html body #plans .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))!important;gap:6px!important}
html body #plans .planCategoryFlyout .symbolTool:not(#legacy#legacy#legacy#legacy#legacy){
  display:grid!important;justify-items:center!important;align-content:start!important;gap:4px!important;
  min-height:72px!important;height:auto!important;padding:8px 4px!important;width:auto!important;min-width:0!important;overflow:visible!important
}
html body #plans .planCategoryFlyout .symbolTool>span:not(#legacy#legacy#legacy#legacy#legacy){
  display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
  overflow:visible!important;text-overflow:clip!important;text-align:center!important;line-height:1.15!important;font-size:var(--text-small)!important
}
html body #plans .planCategoryFlyout .symbolTool>b:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:4px!important;top:4px!important;font-size:var(--text-small)!important;opacity:.7!important}
html body #plans .planCategoryFlyout .symbolTool.planGroupTile:not(#legacy#legacy#legacy#legacy#legacy){position:relative!important;border-color:var(--color-border-strong)!important}
/* the panel head with its back arrow, the search box, and a shelf of tiles */
html body #plans .planCategoryFlyout>header:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;flex:none!important}
html body #plans .planPaletteBack:not(#legacy#legacy#legacy#legacy#legacy){width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;flex:none!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;font-size:var(--text-section)!important;line-height:1!important}
html body #plans .planPaletteSearch:not(#legacy#legacy#legacy#legacy#legacy){display:block!important;flex:none!important}
html body #plans .planPaletteSearch input:not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;min-height:36px!important;box-sizing:border-box!important;font-size:var(--text-small)!important}
html body #plans .planPaletteShelf:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:5px!important;flex:none!important}
html body #plans .planPaletteShelf>small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important}
html body #plans .planPaletteEmpty:not(#legacy#legacy#legacy#legacy#legacy){margin:0!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;line-height:1.4!important}
/* 601-1100px (a tablet, a folding phone unfolded): one panel at a time over the plan, opened from the dock.
   Inside that sheet the palette flows under the category rail - it never floats, and it never covers the rail. */
html body.mobilePlanStudio #plans .mobileToolsSheet:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:8px!important;max-height:min(70dvh,560px)!important;overflow:auto!important}
html body.mobilePlanStudio #plans .mobileToolsSheet #planToolRail:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:auto!important;height:auto!important;overflow-x:auto!important;position:static!important;gap:6px!important}
html body.mobilePlanStudio #plans .mobileToolsSheet .planCategoryList:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:auto!important;max-width:none!important;gap:6px!important}
html body.mobilePlanStudio #plans .mobileToolsSheet :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy){flex:0 0 auto!important;min-width:84px!important;min-height:56px!important}
html body.mobilePlanStudio #plans .mobileToolsSheet .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy){position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;box-shadow:none!important;display:grid!important;gap:8px!important}
html body.mobilePlanStudio #plans .mobileToolsSheet .planToolsResizeGrip:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* a finger, not a mouse: every tile in the sheet is a 56px target */
html body.mobilePlanStudio #plans .mobileToolsSheet .symbolTool:not(#legacy#legacy#legacy#legacy#legacy){min-height:76px!important}
html body.mobilePlanStudio #plans .mobileToolsSheet .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(auto-fill,minmax(92px,1fr))!important}

/* ===== v3.44.0 (owner, 2026-09-19) - the camera's three adjustments =====
   One handle aims it (direction + distance). Two handles on the cone edges set how wide it sees - the lens.
   All three live in the same space as the cone, so a handle always sits ON the shape it controls: the aim handle
   used to be multiplied by 1/zoom, which threw it off the cone at every zoom but 100% and made merely grabbing it
   rewrite the range. */
html body #plans .planMarker .fovEdgeHandle:not(#legacy#legacy#legacy#legacy#legacy){
  position:absolute!important;left:50%!important;top:50%!important;width:26px!important;height:26px!important;margin:-13px 0 0 -13px!important;
  display:grid!important;place-items:center!important;border-radius:50%!important;
  background:var(--color-surface)!important;color:var(--color-accent)!important;border:2px solid var(--color-accent)!important;
  transform:translate(var(--aim-x,0px),var(--aim-y,0px)) scale(var(--plan-compensation,1))!important;
  cursor:ew-resize!important;touch-action:none!important;z-index:52!important
}
html body #plans .planMarker .fovEdgeHandle svg:not(#legacy#legacy#legacy#legacy#legacy){width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important}
html body #plans .planMarker:not(.selected)>.fovEdgeHandle:not(#legacy#legacy#legacy#legacy#legacy),
html body #plans .planMarker.markerLocked>.fovEdgeHandle:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* a finger-sized target on a tablet without a bigger picture */
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */
  html:where(.inputTouch) body #plans .planMarker :is(.aimHandle,.fovEdgeHandle):not(#legacy#legacy#legacy#legacy#legacy){width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important}

/* selection highlights, it never resizes - a thin ring on the symbol itself, and nothing painted over the drawing */
html body #plans .planMarker.selected .markerCore:not(#legacy#legacy#legacy#legacy#legacy){
  outline:2px solid var(--color-accent)!important;outline-offset:2px!important;
  transform:scale(var(--marker-render-scale,1))!important;background:transparent!important;box-shadow:none!important;filter:none!important
}

/* ===== v3.44.0 (owner, 2026-09-19) - the legend is docked, and the bars keep out of each other's way =====
   It used to float at the bottom-left of the drawing, half outside it, and on a 140-device sheet it covered a
   third of the canvas - the whole screen on a phone. Now it is a strip of its own under the plan: it pushes the
   drawing instead of covering it, it starts closed above 20 kinds of symbol, and it scrolls instead of growing.
   On a phone it is not drawn at all - it lives behind the Layers button. */
html body #plans .planLegendDock:not(#legacy#legacy#legacy#legacy#legacy){
  display:flex!important;align-items:flex-start!important;gap:8px!important;min-width:0!important;
  margin:6px 0 0!important;padding:0!important;background:transparent!important
}
html body #plans .planLegend:not(#legacy#legacy#legacy#legacy#legacy){
  position:static!important;left:auto!important;bottom:auto!important;max-width:none!important;width:100%!important;
  max-height:112px!important;overflow:auto!important;box-sizing:border-box!important;
  display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:8px 14px!important;
  padding:8px 10px!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;
  pointer-events:auto!important
}
html body #plans .planLegendToggle:not(#legacy#legacy#legacy#legacy#legacy){position:static!important;left:auto!important;bottom:auto!important}
html body #plans .planLegend .legendHide:not(#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;align-self:flex-start!important;flex:none!important}
html body #plans .planLegend .legendTitle:not(#legacy#legacy#legacy#legacy#legacy){width:auto!important;align-self:center!important;flex:none!important;color:var(--color-text-muted)!important}
html body #plans .planLegend .legendItem:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important}
html body #plans .planLegend .legendPuck:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-border-strong)!important;color:var(--color-text)!important}
/* the legend takes a row of its own under the plan; the side panels span both rows */
@media(min-width:1101px){
  html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){grid-template-rows:minmax(0,1fr) auto!important}
  html body #plans :is(#planToolRail,#planToolFlyoutHost,.planInspector):not(#legacy#legacy#legacy#legacy#legacy){grid-row:1/3!important}
  html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy){grid-row:1!important}
  html body #plans .planLegendDock:not(#legacy#legacy#legacy#legacy#legacy){grid-column:3!important;grid-row:2!important}
}
/* the phone keeps the legend inside the Layers sheet, where it cannot cover the drawing */
html body.phonePlan #plans .phoneLegend:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important;margin-top:4px!important}
html body.phonePlan #plans .phoneLegend>small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important}
html body.phonePlan #plans .phoneLegendGrid:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;gap:8px!important;max-height:38dvh!important;overflow:auto!important}
html body.phonePlan #plans .phoneLegendGrid .legendItem:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;justify-items:center!important;gap:3px!important;color:var(--color-text)!important;font-size:var(--text-small)!important;text-align:center!important}
html body.phonePlan #plans .phoneLegendGrid .legendPuck:not(#legacy#legacy#legacy#legacy#legacy){width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border:1.4px solid var(--color-border-strong)!important;border-radius:50%!important}
/* the rail labels wrap instead of running out of their button ("Draw / Review" was the one that overflowed) */
html body #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy){
  display:grid!important;justify-items:center!important;align-content:center!important;gap:2px!important;
  padding:6px 3px!important;min-height:52px!important;height:auto!important;overflow:visible!important;position:relative!important
}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton)>span:not(#legacy#legacy#legacy#legacy#legacy){
  display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
  overflow:visible!important;text-overflow:clip!important;text-align:center!important;line-height:1.1!important;font-size:var(--text-small)!important
}
html body #plans #planToolRail .planCategoryButton>b:not(#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:3px!important;top:3px!important;font-size:var(--text-small)!important;opacity:.65!important}
/* The workspace must actually BE a grid for the docked columns to mean anything: something outside these rules
   was laying it out as a flex row, which let the legend strip sit beside the plan and squeeze it to 14px wide at
   1366. Stated here at full strength, with the plan filling the height it is given. */
@media(min-width:1101px){
  html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;align-content:stretch!important;min-height:0!important}
  html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;height:100%!important;min-height:0!important;flex:none!important;align-self:stretch!important}
  html body #plans :is(#planToolRail,#planToolFlyoutHost,.planInspector):not(#legacy#legacy#legacy#legacy#legacy){align-self:stretch!important;min-width:0!important}
  html body #plans .planLegendDock:not(#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;flex:none!important}
}
/* The palette's tiles: two equal columns that fit whatever width the panel has, each tile stretching to its column.
   v3.43.0 pinned Security's tiles to 44px squares, which is why the names spilled out of them. */
html body #plans .planCategoryFlyout .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;
  place-content:start stretch!important;justify-items:stretch!important;align-items:stretch!important;
  gap:6px!important;padding-top:0!important;width:100%!important
}
html body #plans .planCategoryFlyout .planFlyoutGrid>button:not(#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;justify-self:stretch!important}
/* The rail is wide enough for a whole word - "Security" and "Pathways" were breaking in the middle - and a word
   only breaks when it genuinely cannot fit, which is what a longer language needs. */
@media(min-width:1101px){
  html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:92px}
}
html body #plans #planToolRail :is(.planCategoryList,.selectedPlanTool):not(#legacy#legacy#legacy#legacy#legacy){width:100%!important}
html body #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;box-sizing:border-box!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;box-sizing:border-box!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton)>span:not(#legacy#legacy#legacy#legacy#legacy){overflow-wrap:break-word!important;word-break:normal!important;hyphens:auto!important}
/* Stated one step stronger than the v3.43.0 rules they replace: the rail column and the palette tiles were still
   pinned to 66px and 44px squares, which is what cut "Security" in half and spilled the tile names. */
html body #plans #planToolRail :is(.planCategoryList,.selectedPlanTool):not(#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;box-sizing:border-box!important}
html body #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important}
html body #plans .planCategoryFlyout .planFlyoutGrid>button:not(#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;max-height:none!important;justify-self:stretch!important}
html body #plans .planCategoryFlyout .planFlyoutGrid>button>svg:not(#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important}
/* The rail column is sized by its buttons: v3.43.0 gave them min-width:66px, which is why "Security", "Network",
   "Pathways" and "Sensors" all broke in the middle. 84px fits every English word and leaves room for a longer
   language to wrap between words instead of inside one. */
html body #plans #planToolRail :is(.selectTool,.planCategoryButton,.selectedPlanTool):not(#legacy#legacy#legacy#legacy#legacy#legacy){min-width:84px!important}
/* ...and the button's own grid column was pinned at 44px, so the label had 44px no matter how wide the button was.
   One column that fills the button is what lets "Security" and "Pathways" sit on one line. */
html body #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important;grid-auto-columns:minmax(0,1fr)!important}

/* ===== v3.44.0 (owner, 2026-09-19) - the device workspace window on the design tokens =====
   It carried three different dark backgrounds on one screen (the window, the header card, the section cards),
   a blue tint on the cards, a fourth shade behind the tab row, and section labels and empty states dim enough to
   fail 4.5:1. Two surfaces only now - the window on --color-surface, everything sitting on it on --color-surface-2
   - with one border token and --color-text-muted for every secondary line, which is 7.9:1 on dark and 7.0:1 on
   light. Tokens only, so both themes follow automatically. */
html body :is(.deviceWorkspace,.connectedWorkspace):not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;color:var(--color-text)!important;gap:8px!important}
html body :is(.deviceWorkspaceHero,.relationCard,.deviceQuickNav button,.workspaceBlockerDock):not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important
}
html body :is(.deviceWorkspaceHero,.relationCard):not(#legacy#legacy#legacy#legacy#legacy){border-radius:var(--radius)!important;padding:10px 12px!important}
/* the tab row sits on the window itself, and every tab gets the same width */
html body .deviceQuickNav:not(#legacy#legacy#legacy#legacy#legacy){
  display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;
  gap:6px!important;background:transparent!important;border:0!important;padding:0!important;overflow-x:auto!important
}
html body .deviceQuickNav button:not(#legacy#legacy#legacy#legacy#legacy){
  min-width:0!important;width:auto!important;justify-content:center!important;text-align:center!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:36px!important
}
html body .deviceQuickNav b:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;color:var(--color-text)!important;flex:none!important}
/* secondary text: the section labels and the empty states were the two that failed the contrast check */
html body :is(.deviceWorkspaceHero,.relationCard,.connectedWorkspace) :is(.relationHead small,>small,.empty,.empty.mini):not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;opacity:1!important}
html body :is(.deviceWorkspace,.connectedWorkspace) .empty:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;opacity:1!important;padding:8px 0!important;font-size:var(--text-small)!important}
html body :is(.deviceWorkspace,.connectedWorkspace) .relationHead small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;opacity:1!important;letter-spacing:var(--tracking-overline)!important}
html body .deviceWorkspaceHero small:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;opacity:1!important}
html body .deviceWorkspaceNotice:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;border:1px solid var(--color-status-completed,var(--color-border))!important;color:var(--color-text)!important}
html body .deviceWorkspaceNotice span:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body .deviceWorkspaceFooter:not(#legacy#legacy#legacy#legacy#legacy){border-top:1px solid var(--color-border)!important}
/* "Complete Device" was cut off: the action buttons size to their words */
html body .fieldQuickActions:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-width:0!important}
html body .fieldQuickActions button:not(#legacy#legacy#legacy#legacy#legacy){
  width:auto!important;min-width:0!important;max-width:none!important;flex:0 1 auto!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;height:auto!important;min-height:36px!important;padding:6px 12px!important
}
/* less air inside the cards, so the window stops scrolling for content that would fit */
html body :is(.deviceWorkspace,.connectedWorkspace) .relationCard>:is(div,section):not(#legacy#legacy#legacy#legacy#legacy){margin:0!important}
html body :is(.deviceWorkspace,.connectedWorkspace) .relationHead:not(#legacy#legacy#legacy#legacy#legacy){margin-bottom:6px!important;gap:8px!important}
html body .deviceWorkspaceGrid:not(#legacy#legacy#legacy#legacy#legacy){gap:8px!important}
html body .deviceWorkspaceFlow:not(#legacy#legacy#legacy#legacy#legacy){gap:8px!important}
/* Even tabs, but never a cut word: each tab is at least as wide as its own label, and they share what is left. */
html body .deviceQuickNav:not(#legacy#legacy#legacy#legacy#legacy){grid-auto-columns:minmax(max-content,1fr)!important}
html body .deviceQuickNav button:not(#legacy#legacy#legacy#legacy#legacy){overflow:visible!important;text-overflow:clip!important;padding:6px 10px!important}
/* cards keep their own height instead of stretching to match the tallest one in the row */
html body :is(.deviceWorkspaceGrid,.deviceWorkspaceFlow,.workspaceColumn):not(#legacy#legacy#legacy#legacy#legacy){align-items:start!important;align-content:start!important}
html body :is(.deviceWorkspace,.connectedWorkspace) .relationCard:not(#legacy#legacy#legacy#legacy#legacy){align-self:start!important}
/* Both tabs are mirror images: each sits flat on its own panel's edge, same 92px height, same vertical centre,
   arrow pointing outward from its panel. TOOLS was measured against the canvas, which left it floating in the
   8px column gap (owner, 2026-09-19). */
html body #plans .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){left:var(--plan-tools-edge,76px)!important;right:auto!important;margin-left:-1px!important;margin-right:0!important;border-radius:0 var(--radius) var(--radius) 0!important}
html body #plans .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){right:var(--plan-inspect-edge,340px)!important;left:auto!important;margin-right:-1px!important;margin-left:0!important;border-radius:var(--radius) 0 0 var(--radius)!important}
html body #plans .planWorkspace.railCollapsed .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){left:0!important;margin-left:0!important}
html body #plans .planWorkspace.inspectorCollapsed .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){right:0!important;margin-right:0!important}
html body #plans .planPanelHandle:not(#legacy#legacy#legacy#legacy#legacy){width:26px!important;min-width:26px!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;box-sizing:border-box!important}

/* ===== v3.44.0 (owner, 2026-09-19) - the collapsed sidebar shows its icon and nothing else =====
   Each button draws a real icon (span.navGlyph > svg). An older rule also painted the short text abbreviation from
   data-icon ("TM", "NW", "SV", "AS") through ::before, on top of that icon - which is the overlap on the rail.
   The label is hidden by hiding its own span, not by pushing the button's text off-screen. */
html body.compactNav .navBtn:not(#legacy#legacy#legacy#legacy#legacy)::before{content:none!important;display:none!important}
html body.compactNav .navBtn:not(#legacy#legacy#legacy#legacy#legacy){text-indent:0!important;display:grid!important;place-items:center!important;overflow:visible!important}
html body.compactNav .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.compactNav .navBtn .navGlyph:not(#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;width:100%!important;height:100%!important;color:inherit!important}
html body.compactNav .navBtn .navGlyph svg:not(#legacy#legacy#legacy#legacy#legacy){width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
/* the active item stays obvious when there is no text to read */
html body.compactNav .navBtn.active:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-accent)!important;box-shadow:inset 3px 0 0 var(--color-accent)!important}
html body.compactNav .navBtn:focus-visible:not(#legacy#legacy#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:2px!important}

/* ===== v3.44.0 - the layer switches, the cone setting, the label notice, the size buttons ===== */
html body #plans .planLayerBar .layerSwitch:not(#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important}
html body #plans .planLayerBar .layerSwitch .layerDot:not(#legacy#legacy#legacy#legacy#legacy){
  width:9px!important;height:9px!important;flex:none!important;border-radius:50%!important;
  border:1.5px solid var(--color-border-strong)!important;background:transparent!important
}
html body #plans .planLayerBar .layerSwitch.active .layerDot:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent)!important;border-color:var(--color-accent)!important}
html body #plans .planLayerBar .layerSwitch:not(.active):not(#legacy#legacy#legacy#legacy#legacy){opacity:.72!important}
html body #plans .planLayerBar :is(.coneModeBtn,.sizeScopeBtn):not(#legacy#legacy#legacy#legacy#legacy){
  min-height:30px!important;padding:0 10px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;
  border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important;white-space:nowrap!important
}
/* the notice sits on the drawing, out of the way of the work, and never takes a click */
html body #plans .planLabelNotice:not(#legacy#legacy#legacy#legacy#legacy){
  position:absolute!important;right:10px!important;top:10px!important;z-index:6!important;pointer-events:none!important;
  padding:5px 10px!important;background:var(--color-surface)!important;color:var(--color-text-muted)!important;
  border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;font-size:var(--text-small)!important
}
/* door hardware: badges around the door at working zoom, one chip carrying the worst status when zoomed out */
html body #plans .planMarker .doorBadges:not(#legacy#legacy#legacy#legacy#legacy){
  position:absolute!important;left:50%!important;top:50%!important;display:flex!important;gap:2px!important;
  transform:translate(-50%,calc(-50% - 22px * var(--plan-compensation,1))) scale(var(--plan-compensation,1))!important;
  pointer-events:none!important;z-index:9!important
}
html body #plans .planMarker .doorBadge:not(#legacy#legacy#legacy#legacy#legacy){
  width:16px!important;height:16px!important;display:grid!important;place-items:center!important;border-radius:50%!important;
  background:var(--color-surface)!important;border:1.4px solid var(--color-border-strong)!important;color:var(--color-text)!important;font-size:var(--text-small)!important
}
html body #plans .planMarker .doorBadge svg:not(#legacy#legacy#legacy#legacy#legacy){width:10px!important;height:10px!important}
html body #plans .planMarker .doorChip:not(#legacy#legacy#legacy#legacy#legacy){
  position:absolute!important;left:50%!important;top:50%!important;min-width:16px!important;height:16px!important;padding:0 3px!important;
  display:grid!important;place-items:center!important;border-radius:9px!important;
  background:var(--color-surface)!important;border:1.5px solid var(--color-border-strong)!important;color:var(--color-text)!important;
  font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;
  transform:translate(calc(-50% + 13px * var(--plan-compensation,1)),calc(-50% - 13px * var(--plan-compensation,1))) scale(var(--plan-compensation,1))!important;
  pointer-events:none!important;z-index:10!important
}
html body #plans .planMarker :is(.doorChip,.doorBadge).statusBlocked:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-blocked,var(--color-danger))!important;color:var(--color-status-blocked,var(--color-danger))!important}
html body #plans .planMarker :is(.doorChip,.doorBadge).statusCompleted:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-completed)!important;color:var(--color-status-completed)!important}
html body #plans .planMarker :is(.doorChip,.doorBadge).statusProgress:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-progress)!important;color:var(--color-status-progress)!important}
html body #plans .planMarker :is(.doorChip,.doorBadge).statusNew:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-new)!important;color:var(--color-status-new)!important}
/* Lock / Unlock in the properties card, on tokens. The card is now positioned reliably, so these two buttons are
   on screen where they were not before - and they were carrying their own colours. */
html body #plans #planSymbolPopup :is(.lockBtn,.unlockBtn):not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important
}
html body #plans #planSymbolPopup .unlockBtn:not(#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;color:var(--color-accent)!important}

/* ===== v3.44.1 (owner, 2026-09-20) - collapsing a panel gives its space to the drawing =====
   The collapsed states still carried the two-column grid from before the palette existed, while the canvas is
   placed in column 3. The canvas therefore landed in an IMPLICIT column sized by its content - 356px wide and
   14px tall - and the freed space stayed empty. Every combination now names all four columns, so column 3 is
   always the drawing and always takes what the collapsed panels give up. */
@media(min-width:1101px){
  html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy),
  html body #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy),
  html body #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy),
  html body #plans .planWorkspace.railCollapsed.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy){
    display:grid!important;
    grid-template-columns:var(--plan-rail-col,76px) var(--plan-palette-col,0px) minmax(0,1fr) var(--plan-inspector-col,340px)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    column-gap:8px!important
  }
  html body #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:0px;--plan-palette-col:0px}
  html body #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy){--plan-inspector-col:0px}
  /* a collapsed panel takes no space and leaves no gap behind it */
  html body #plans .planWorkspace.railCollapsed :is(#planToolRail,#planToolFlyoutHost):not(#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #plans .planWorkspace.inspectorCollapsed .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy){column-gap:8px!important}
  /* the drawing fills the column and the row it is given, in every combination */
  html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy){
    grid-column:3!important;grid-row:1!important;width:auto!important;min-width:0!important;
    height:100%!important;min-height:0!important;align-self:stretch!important;justify-self:stretch!important
  }
  html body #plans .planLegendDock:not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:3!important;grid-row:2!important}
}
/* Each tab gets a column of its own, so it sits on its panel's outer edge like a bookmark and never covers the
   rail, the palette, the inspector or the drawing - and the palette can no longer paint over it.
   The workspace also keeps a real height of its own: it used to borrow it from the side panels, so with both of
   them collapsed the drawing had nothing to stand on and fell to 14px tall (my own min-height:0 did that). */
@media(min-width:1101px){
  html body #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy),
  html body #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy),
  html body #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy),
  html body #plans .planWorkspace.railCollapsed.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy){
    grid-template-columns:var(--plan-rail-col,76px) var(--plan-palette-col,0px) 26px minmax(0,1fr) 26px var(--plan-inspector-col,340px)!important;
    min-height:clamp(480px,calc(100dvh - 175px),1400px)!important;
    column-gap:4px!important
  }
  html body #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1!important;grid-row:1/3!important}
  html body #plans #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:2!important;grid-row:1/3!important}
  html body #plans .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy){
    position:static!important;grid-column:3!important;grid-row:1!important;align-self:center!important;
    left:auto!important;right:auto!important;top:auto!important;margin:0!important;width:26px!important;height:92px!important
  }
  html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:4!important}
  html body #plans .planLegendDock:not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:4!important;grid-row:2!important}
  html body #plans .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy){
    position:static!important;grid-column:5!important;grid-row:1!important;align-self:center!important;
    left:auto!important;right:auto!important;top:auto!important;margin:0!important;width:26px!important;height:92px!important
  }
  html body #plans .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:6!important;grid-row:1/3!important}
}

/* ===== v3.45.0 (owner, 2026-09-20) - the handles, the label and the detections =====
   The handles were three different sizes (30px aim, 26px edges, 14px resize), the resize one was half the size of
   the others and sat on the symbol, and in dark mode they carried a bright blue fill. They are one size now, quiet
   until you touch them, and only the ones the current action needs stay on screen while you drag. */
html body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle):not(#legacy#legacy#legacy#legacy#legacy){
  width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;
  margin:-10px 0 0 -10px!important;padding:0!important;border-radius:50%!important;
  background:var(--color-surface)!important;color:var(--color-text-muted)!important;
  border:1.5px solid var(--color-border-strong)!important;box-shadow:none!important;scale:none!important;
  transition:border-color .12s ease,color .12s ease!important
}
html body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle) svg:not(#legacy#legacy#legacy#legacy#legacy){width:12px!important;height:12px!important}
/* colour only when the pointer is on it, or while it is being dragged */
html body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle):hover:not(#legacy#legacy#legacy#legacy#legacy),
html body #plans .planMarker:is(.aiming,.spreading,.resizing) :is(.aimHandle,.fovEdgeHandle,.resizeHandle):not(#legacy#legacy#legacy#legacy#legacy){
  border-color:var(--color-accent)!important;color:var(--color-accent)!important
}
/* the resize handle keeps the same size as the others and sits clear of the symbol, never on it */
html body #plans .planMarker .resizeHandle:not(#legacy#legacy#legacy#legacy#legacy){
  left:50%!important;top:50%!important;position:absolute!important;
  font-size:var(--text-small)!important;line-height:1!important
}
/* while a handle is being dragged, the others get out of the drawing's way */
html body #plans .planMarker.aiming :is(.fovEdgeHandle,.resizeHandle):not(#legacy#legacy#legacy#legacy#legacy),
html body #plans .planMarker.spreading :is(.aimHandle,.resizeHandle):not(#legacy#legacy#legacy#legacy#legacy),
html body #plans .planMarker.resizing :is(.aimHandle,.fovEdgeHandle):not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* a finger still gets a 44px target without a bigger picture */
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */
  html:where(.inputTouch) body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle):not(#legacy#legacy#legacy#legacy#legacy){width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important;background:transparent!important;border-color:transparent!important}
  html:where(.inputTouch) body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle)::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:20px!important;height:20px!important;margin:-10px 0 0 -10px!important;border-radius:50%!important;background:var(--color-surface)!important;border:1.5px solid var(--color-border-strong)!important}

/* the label belongs to the symbol, so it grows and shrinks with it (0.45 is the default size, drawn as it is today) */
html body #plans .planMarker .label:not(#legacy#legacy#legacy#legacy#legacy){
  transform:translate(calc(-50% + var(--label-x,0px)),var(--label-y,0px)) scale(calc(var(--plan-compensation,1) * (var(--label-scale,.45) / .45)))!important
}
/* a detection is something to review: it reads at a glance on a busy drawing, unlike the pale cream it wore */
html body #plans .planMarker.detection .markerCore:not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-status-review)!important;color:var(--color-on-status-review)!important;
  border:2px solid var(--color-status-review-edge)!important
}
html body #plans .planMarker.detection .label:not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-status-review)!important;color:var(--color-on-status-review)!important;border-color:var(--color-status-review-edge)!important
}

/* ===== v3.45.0 - the design audit's clear findings (owner, item 9) ===== */
/* the leader line between a symbol and its label carried its own blue-grey */
html body #plans .planMarker .labelLeader:not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-plan-chip-border)!important;border-left-color:var(--color-plan-chip-border)!important}
/* the tablet's plan bar had its own near-black */
html body.mobilePlanStudio #plans :is(.mobilePlanTopBar,.mobilePlanDock):not(#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;border-color:var(--color-border)!important}
/* a tablet is a touch screen: every control on the plan bars gets a 44px target */
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */
  html:where(.inputTouch) body #plans :is(.mobilePlanTopBar,.mobilePlanDock,.planLayerBar,.planLegendDock,.planInspector,.planSideTabs,.planCategoryFlyout,.mobileToolsSheet) :is(button,select,label):not(#legacy#legacy#legacy#legacy#legacy){min-height:44px!important}
  html:where(.inputTouch) body #plans .planLegend .legendHide:not(#legacy#legacy#legacy#legacy#legacy){min-width:44px!important;min-height:44px!important}
  html:where(.inputTouch) body #plans .planStudioCommandHeader button:not(#legacy#legacy#legacy#legacy#legacy){min-height:44px!important}

/* focus has to be visible in both themes - it was missing on the light one */
html body #plans :is(button,select,input,[tabindex]):focus-visible:not(#legacy#legacy#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:2px!important}

/* v3.45.2: the backup warning. It shares the preview banner's shape but must never be mistaken
   for information - a stopped backup is the one thing on this screen that loses work. */
html body #backupBanner.backupBanner:not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-danger-soft)!important;
  border:1px solid var(--color-danger)!important;
  border-left:4px solid var(--color-danger)!important;
  color:var(--color-text)!important;
}
html body #backupBanner.backupBanner[hidden]:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #backupBanner .backupBannerText:not(#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important}
html body #backupBanner .backupBannerText b:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger-strong)!important}
html body #backupBanner .backupBannerNote:not(#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}

/* v3.46.0: the Plan Studio header is four named groups, not three rows ordered by when each control
   was added. The eye finds the group first and the control second. Measured before: 27 controls over
   seven rows and 275px at 1366, five control heights and four paddings. */
html body #plans .planStudioCommandHeader:not(#legacy#legacy#legacy#legacy#legacy){
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:8px!important;padding:8px 10px!important;margin:0 0 8px!important;
  background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:10px!important;
}
html body #plans .headerGroup:not(#legacy#legacy#legacy#legacy#legacy){
  display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;
  padding:5px 9px!important;border:1px solid var(--color-border)!important;border-radius:8px!important;
  background:transparent!important;
}
html body #plans .headerGroupTag:not(#legacy#legacy#legacy#legacy#legacy){
  font-size:var(--text-small)!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--color-text-muted)!important;margin-right:2px!important;white-space:nowrap!important;
}
/* one height and one padding for every control in the header */
html body #plans .planStudioCommandHeader :is(button,select,input):not(#legacy#legacy#legacy#legacy#legacy){
  height:32px!important;min-height:32px!important;padding:0 11px!important;
  font-size:var(--text-small)!important;border-radius:8px!important;
  background:var(--color-surface-2)!important;color:var(--color-text)!important;
  border:1px solid var(--color-border)!important;white-space:nowrap!important;
}
html body #plans .planStudioCommandHeader .headerSearch input:not(#legacy#legacy#legacy#legacy#legacy){min-width:180px!important;flex:1 1 180px!important}
html body #plans .planStudioCommandHeader :is(button,select,input):disabled:not(#legacy#legacy#legacy#legacy#legacy){opacity:.45!important}
/* a switch that is on reads as on, but it is state - never the one accent */
html body #plans .planStudioCommandHeader button.active:not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-accent-soft)!important;
  border-color:var(--color-border-strong)!important;color:var(--color-text)!important;font-weight:600!important;
}
/* the accent marks the common action, not the rarest one: Review, and only when there is something to review */
html body #plans .planStudioCommandHeader button.reviewPrimary:not(#legacy#legacy#legacy#legacy#legacy){
  background:var(--color-accent)!important;border-color:var(--color-accent)!important;color:var(--color-on-accent)!important;font-weight:600!important;
}
html body #plans .planStudioCommandHeader .headerDivider:not(#legacy#legacy#legacy#legacy#legacy){
  width:1px!important;height:20px!important;background:var(--color-border)!important;margin:0 2px!important;
}
html body #plans .planStudioCommandHeader .zoomReadout:not(#legacy#legacy#legacy#legacy#legacy){
  font-size:var(--text-small)!important;color:var(--color-text-muted)!important;min-width:40px!important;text-align:center!important;
}
html body #plans .planStudioCommandHeader .headerSearch:not(#legacy#legacy#legacy#legacy#legacy){
  display:flex!important;align-items:center!important;gap:6px!important;flex:1 1 220px!important;position:relative!important;
}
html body #plans .planStudioCommandHeader .headerProject:not(#legacy#legacy#legacy#legacy#legacy){
  display:flex!important;flex-direction:column!important;line-height:1.15!important;max-width:200px!important;
  overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
}
html body #plans .planStudioCommandHeader .headerProject small:not(#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #plans .planStudioCommandHeader .headerProject b:not(#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #plans .planStatusBar .saveState:not(#legacy#legacy#legacy#legacy#legacy){font-weight:600!important}
/* a finger needs 44px; the picture stays 32 */
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */
  html:where(.inputTouch) body #plans .planStudioCommandHeader :is(button,select,input):not(#legacy#legacy#legacy#legacy#legacy){min-height:44px!important;height:44px!important}


/* Three rows at 1366, not five: the View group takes a row of its own rather than wrapping through the
   others, and the project name - which the page head and the global picker both already show - steps
   aside below 1500px. Measured before: seven rows and 275px. */
html body #plans .planStudioCommandHeader:not(#legacy#legacy#legacy#legacy#legacy){gap:6px!important;padding:6px 8px!important}
html body #plans .headerGroup:not(#legacy#legacy#legacy#legacy#legacy){padding:3px 8px!important;gap:5px!important}
html body #plans .headerGroup[data-header-group="view"]:not(#legacy#legacy#legacy#legacy#legacy){flex:1 1 100%!important}
html body #plans .planStudioCommandHeader .layerSwitch .layerCount:not(#legacy#legacy#legacy#legacy#legacy){opacity:.7!important;margin-left:3px!important}
@media (max-width:1500px){
  html body #plans .planStudioCommandHeader .headerProject:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
}

/* At 1366 the dividers and the wide search cost a row that the drawing needs more than they do. */
@media (max-width:1500px){
  html body #plans .planStudioCommandHeader .headerDivider:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #plans .planStudioCommandHeader:not(#legacy#legacy#legacy#legacy#legacy){gap:5px!important}
  html body #plans .headerGroup:not(#legacy#legacy#legacy#legacy#legacy){padding:2px 7px!important;gap:4px!important}
  html body #plans .planStudioCommandHeader :is(button,select,input):not(#legacy#legacy#legacy#legacy#legacy){padding:0 9px!important}
  html body #plans .planStudioCommandHeader .headerSearch:not(#legacy#legacy#legacy#legacy#legacy){flex:1 1 160px!important}
  html body #plans .planStudioCommandHeader .headerSearch input:not(#legacy#legacy#legacy#legacy#legacy){min-width:120px!important;flex:1 1 120px!important}
}

/* The page button carried the whole page name, which pushed Recognition onto a row of its own at 1366.
   The name is ellipsized there and kept in full in its tooltip and in the page selector itself. */
@media (max-width:1500px){
  html body #plans .headerGroup[data-header-group="plan"] .planPageSelector button:not(#legacy#legacy#legacy#legacy#legacy){
    max-width:140px!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}

/* Below 1440 the layer counts are mostly zeros, and a row of zeros says nothing the drawing needs the
   room for (owner, 2026-09-20). The count moves into the tooltip rather than appearing on hover, because
   a button that changes width under the pointer is the hover jump that was fixed in v3.43.0. */
@media (max-width:1440px){
  html body #plans .planStudioCommandHeader .layerSwitch .layerCount:not(#legacy#legacy#legacy#legacy#legacy){display:none!important}
}

/* Levers 2 and 3, owner 2026-09-20: cap the page-name button and the device select, and leave "Page
   settings" as a word - an icon there would be a guess, and the collapsed sidebar already proved that
   unreadable. The full page name is in the button's tooltip and repeated in the row below. */
@media (max-width:1500px){
  html body #plans .headerGroup[data-header-group="plan"] .planPageSelector button:not(#legacy#legacy#legacy#legacy#legacy){
    max-width:100px!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  html body #plans .headerGroup[data-header-group="recognition"] .recognitionTypePicker select:not(#legacy#legacy#legacy#legacy#legacy){
    max-width:110px!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}

/* Plan (439px) and Recognition (619px) now come to 1058 in a 1060px header and miss sharing a row by the
   gap alone. Four pixels of group padding is what a whole row costs here. */
@media (max-width:1500px){
  html body #plans .headerGroup:not(#legacy#legacy#legacy#legacy#legacy){padding:2px 5px!important}
  html body #plans .planStudioCommandHeader:not(#legacy#legacy#legacy#legacy#legacy){gap:4px!important}
}

/* The content box is 1044, not 1060 - the header's own padding. Plan and Recognition came to 1054, so one
   pixel of padding either side of each control is the last thing between them and sharing a row. */
@media (max-width:1500px){
  html body #plans .planStudioCommandHeader :is(button,select,input):not(#legacy#legacy#legacy#legacy#legacy){padding:0 8px!important}
}

/* Plan and Recognition land on exactly the content width, where rounding decides the row. Two pixels of
   gap and letting a group shrink rather than wrap settles it. The page button and the device select are
   both capped with an ellipsis, so shrinking costs nothing that was readable. */
@media (max-width:1500px){
  html body #plans .planStudioCommandHeader:not(#legacy#legacy#legacy#legacy#legacy){gap:3px!important}
  html body #plans .headerGroup:not(#legacy#legacy#legacy#legacy#legacy){min-width:0!important}
  html body #plans .headerGroup[data-header-group="plan"]:not(#legacy#legacy#legacy#legacy#legacy){flex:0 1 auto!important}
  html body #plans .headerGroup[data-header-group="recognition"]:not(#legacy#legacy#legacy#legacy#legacy){flex:0 1 auto!important}
}


/* v3.46.1: opening Recognition "locked" the Inspect panel - Equipment and Inspector could not be clicked.
   The tab strip is a flex item with overflow-x:auto, and overflow other than visible lets flexbox shrink an
   item below its content. Open a long queue and it squeezed the strip from its full height to 17px, which
   clipped its own 34px buttons: the half a person clicks on was cut away, so the click landed on the panel.
   With a short list there was no pressure to shrink, which is why it only happened after opening the queue. */
html body #plans .planInspector .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy){
  flex-shrink:0!important;min-height:max-content!important;
}

/* v3.46.1: "not to scale" sits ON the drawing, top-left, never in the status bar. Until v3.47.0 makes Plan Studio
   fill the window, the drawing runs past the bottom of the screen at 1366 AND 1920 - so a notice anchored to its bottom
   edge was below the fold (the test caught it), and a disclaimer nobody sees is not a disclaimer. */
html body #plans .planScaleNotice:not(#legacy#legacy#legacy#legacy#legacy){
  position:absolute!important;left:10px!important;top:10px!important;z-index:6!important;pointer-events:none!important;
  max-width:min(460px,55%)!important;padding:5px 10px!important;
  background:var(--color-surface)!important;color:var(--color-text)!important;
  border:1px solid var(--color-warning)!important;border-left:4px solid var(--color-warning)!important;
  border-radius:var(--radius)!important;font-size:var(--text-small)!important;line-height:1.35!important;
}
html body #plans .planScaleNotice b:not(#legacy#legacy#legacy#legacy#legacy){font-weight:700!important}

/* v3.47.0: the review summary leads with how many are waiting; the two parts sit under it */
html body .recognitionSummary [data-count="waiting"]:not(#legacy#legacy#legacy#legacy#legacy){grid-column:1 / -1!important}

/* ===== v3.47.0 - Plan Studio is a full-screen workspace (owner, 2026-09-21 and 2026-09-20) =====
   It fills exactly the window below the top bar and nothing scrolls: the page used to be 271-295px taller than the
   window, so the bottom of the plan, the legend and the status bar sat below the fold and the wheel scrolled the
   page everywhere except over the plan. The plan runs from the tool rail to the panel. The collapse tabs keep a
   slim column each, as the panel's own edge: "like a bookmark, never over any content" (owner, v3.44.1). body.planDesk is set only while Plan Studio is open
   on a computer (wider than 1100px); the tablet and phone layouts keep their own rules. */
@media(min-width:1101px){
  html body.planDesk:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important}
  html body.planDesk main:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:100vh!important;height:100dvh!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  html body.planDesk main>:not(.content):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 auto!important}
  html body.planDesk main>.content:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding-top:8px!important;padding-bottom:8px!important}
  html body.planDesk main>.content>:not(#plans):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 auto!important}
  html body.planDesk #plans.view.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;margin:0!important;padding:0!important}
  html body.planDesk #plans>.pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planDesk #plans .workflowPageFooter:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body.planDesk #plansBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:6px!important;overflow:hidden!important}
  html body.planDesk #plansBody>:not(#planWorkspace):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 auto!important}
  html body.planDesk #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
  html body.planDesk #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
  html body.planDesk #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
  html body.planDesk #plans .planWorkspace.railCollapsed.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){
    flex:1 1 auto!important;position:relative!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;
    display:grid!important;grid-template-columns:var(--plan-rail-col,56px) var(--plan-palette-col,0px) 14px minmax(0,1fr) 14px var(--plan-inspector-col,340px)!important;
    grid-template-rows:minmax(0,1fr)!important;column-gap:0!important;row-gap:0!important
  }
  html body.planDesk #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:56px}
  html body.planDesk #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:0px;--plan-palette-col:0px}
  html body.planDesk #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-inspector-col:0px}
  html body.planDesk #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1!important;grid-row:1!important;height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
  html body.planDesk #plans #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:2!important;grid-row:1!important;min-height:0!important}
  html body.planDesk #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:4!important;grid-row:1!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;align-self:stretch!important;justify-self:stretch!important;margin:0!important}
  html body.planDesk #plans .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:6!important;grid-row:1!important;position:relative!important;top:auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
  /* the collapse tabs: a slim column each on the panel's edge, centred on the drawing, covering nothing */
  html body.planDesk #plans .planPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;transform:none!important;align-self:center!important;justify-self:stretch!important;z-index:2!important;width:14px!important;min-width:0!important;height:84px!important;margin:0!important;padding:0!important;grid-row:1!important;left:auto!important;right:auto!important;top:auto!important}
  html body.planDesk #plans .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:3!important;border-radius:0 6px 6px 0!important}
  html body.planDesk #plans .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:5!important;border-radius:6px 0 0 6px!important}
}

/* ===== v3.47.0 - one slim toolbar row, grouped (owner, 2026-09-20 D and 2026-09-21 items 5-7) =====
   Each group names itself in a small tag above its controls, so the controls stay one line. States and views are
   icons that say what they are when pointed at; actions keep their words. The groups start at the left; the search
   box has a width of its own; the project name is not repeated (it is in the project selector at the top). */
html body #plans .planStudioCommandHeader.v47:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important;justify-content:flex-start!important;gap:0 12px!important;padding:3px 8px 5px!important;margin:0!important;min-height:0!important;height:auto!important;overflow:visible!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body #plans .planStudioCommandHeader.v47 .headerGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;padding:15px 0 0!important;margin:0!important;border:0!important;background:transparent!important;min-width:0!important}
html body #plans .planStudioCommandHeader.v47 .headerGroupTag:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:0!important;left:1px!important;margin:0!important;padding:0!important;font-size:var(--text-small)!important;line-height:14px!important;letter-spacing:.04em!important;text-transform:uppercase!important;white-space:nowrap!important;color:var(--color-text-muted)!important;background:transparent!important;border:0!important}
html body #plans .planStudioCommandHeader.v47 :is(button,summary):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;height:32px!important;min-height:32px!important;padding:0 8px!important;margin:0!important;white-space:nowrap!important;font-size:var(--text-small)!important;line-height:1!important;border-radius:var(--radius)!important;width:auto!important;min-width:0!important;flex:0 0 auto!important}
html body #plans .planStudioCommandHeader.v47 .iconOnly:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:32px!important;min-width:32px!important;padding:0!important}
html body #plans .planStudioCommandHeader.v47 .planMenu>summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--plan-control,var(--color-surface))!important;border:1px solid var(--color-border-strong)!important;color:var(--color-text)!important;cursor:pointer!important}
html body #plans .planStudioCommandHeader.v47 .sizeMenu>summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:32px!important;min-width:32px!important;padding:0!important}
html body #plans :is(.planUiIcon,.layerIcon):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-grid!important;place-items:center!important;width:18px!important;height:18px!important;flex:none!important;font-style:normal!important;background:transparent!important}
html body #plans .planUiIcon svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body #plans .layerIcon svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:16px!important;height:16px!important}
html body #plans .planStudioCommandHeader.v47 .layerSwitch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 8px!important}
html body #plans .planStudioCommandHeader.v47 .layerCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;opacity:.8!important;padding:0!important;margin:0!important}
html body #plans .planStudioCommandHeader.v47 .headerSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:flex!important;align-items:center!important;gap:3px!important;flex:0 1 240px!important;min-width:110px!important;max-width:240px!important;margin:0 0 0 auto!important}
html body #plans .planStudioCommandHeader.v47 #planSearchInput:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;padding:0 8px!important;font-size:var(--text-small)!important}
html body #plans .planStudioCommandHeader.v47 .headerProject:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* below 1600px the layer switches show their icon and count; the name is in the tooltip. From 1600px there is
   room for the words. */
@media(max-width:1599px){
  html body #plans .planStudioCommandHeader.v47 .layerName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
}
@media(max-width:1439px){
  html body #plans .planStudioCommandHeader.v47 .toolWord>.planUiIcon:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #plans .planStudioCommandHeader.v47 .headerGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:2px!important}
  html body #plans .planStudioCommandHeader.v47:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:0 8px!important}
}
/* the small menus: Scan, Size, and the symbol key */
html body #plans details.planMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:inline-block!important;flex:0 0 auto!important}
html body #plans details.planMenu>summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;user-select:none!important}
html body #plans details.planMenu>summary::-webkit-details-marker{display:none!important}
html body #plans details.planMenu>summary::marker{content:""!important}
html body #plans .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:calc(100% + 4px)!important;left:0!important;z-index:60!important;display:grid!important;gap:4px!important;min-width:200px!important;max-width:min(360px,80vw)!important;padding:6px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;box-shadow:var(--ios-shadow)!important}
html body #plans .planMenuList button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-content:flex-start!important;width:100%!important;height:34px!important;min-height:34px!important;padding:0 10px!important}
html body #plans .planMenuField:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:3px!important;margin:0 0 4px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #plans .planMenuField select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:32px!important;min-height:32px!important}

/* ===== v3.47.0 - the sheet bar inside the canvas: which sheet, previous and next, the zoom, Fit, box and lock ===== */
html body #plans .planSheetNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;bottom:10px!important;transform:translateX(-50%)!important;z-index:6!important;display:flex!important;align-items:center!important;gap:3px!important;max-width:calc(100% - 60px)!important;padding:4px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;box-shadow:var(--ios-shadow)!important}
html body #plans .planSheetNav button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;height:32px!important;min-height:32px!important;min-width:32px!important;padding:0 8px!important;margin:0!important;font-size:var(--text-small)!important;white-space:nowrap!important;flex:0 0 auto!important}
html body #plans .planSheetNav .planSheetName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 1 auto!important;min-width:0!important;max-width:320px!important;gap:8px!important}
html body #plans .planSheetNav .planSheetName b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-weight:var(--weight-semibold)!important}
html body #plans .planSheetNav .sheetNo:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-variant-numeric:tabular-nums!important}
html body #plans .planSheetNav .zoomReadout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:42px!important;text-align:center!important;font-size:var(--text-small)!important;font-variant-numeric:tabular-nums!important;color:var(--color-text-muted)!important}
html body #plans .planSheetNav .navDivider:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:1px!important;align-self:stretch!important;margin:2px 3px!important;background:var(--color-border)!important}
html body #plans .planSheetNav button.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-accent)!important;border-color:var(--color-accent)!important}
html body #plans .planSheetNav button.planLockOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important;border-color:var(--color-warning)!important;box-shadow:inset 0 0 0 1px var(--color-warning)!important}
@media(max-width:1439px){
  html body #plans .planSheetNav [data-nav="lock"]>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #plans .planSheetNav .planSheetName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:220px!important}
}
/* a locked plan says so on the canvas edge too, not only on its button */
html body #plans .planCanvasWrap.planLocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-shadow:inset 0 0 0 2px var(--color-warning)!important}

/* ===== v3.47.0 - one status bar: Saved, the selection, the scale, the lock, how to move and select, the key ===== */
html body #plans .planStatusBar.v47:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:14px!important;min-height:28px!important;height:auto!important;padding:2px 10px!important;margin:0!important;position:relative!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;overflow:visible!important;white-space:nowrap!important}
html body #plans .planStatusBar.v47>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:5px!important;min-width:0!important}
html body #plans .planStatusBar.v47 .statusSpacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #plans .planStatusBar.v47 .statusHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;flex:0 1 auto!important}
html body #plans .planStatusBar.v47 .statusNotToScale:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;font-weight:var(--weight-semibold)!important;padding:0 6px!important;border-left:3px solid var(--color-warning)!important}
html body #plans .planStatusBar.v47 .statusLocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planStatusBar.v47 .statusLocked :is(.planUiIcon,.planUiIcon svg):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:14px!important;height:14px!important}
html body #plans .planStatusBar.v47 .legendMenu>summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;height:24px!important;min-height:24px!important;padding:0 8px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:transparent!important;color:var(--color-text)!important;cursor:pointer!important;font-size:var(--text-small)!important}
html body #plans .planStatusBar.v47 .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){top:auto!important;bottom:calc(100% + 6px)!important;left:auto!important;right:0!important;max-height:50vh!important;overflow:auto!important;white-space:normal!important}
html body #plans .planStatusBar.v47 .planLegend:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px 12px!important;padding:2px!important;background:transparent!important;border:0!important;position:static!important}

/* ===== v3.47.0 - the tools as one vertical strip of icons, each naming itself when pointed at ===== */
@media(min-width:1101px){
  html body.planDesk #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:56px!important;min-width:0!important;padding:4px!important;gap:4px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important}
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;padding:0!important;display:grid!important;place-items:center!important}
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton)>span:not(:first-child):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body.planDesk #plans #planToolRail .planCategoryList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important;margin:0!important;padding:0!important;flex:0 0 auto!important}
  html body.planDesk #plans #planToolRail .selectedPlanTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:4px 0 0!important;padding:4px 0 0!important;width:100%!important;display:grid!important;justify-items:center!important;gap:1px!important;text-align:center!important;flex:0 0 auto!important;border-top:1px solid var(--color-border)!important}
  html body.planDesk #plans #planToolRail .selectedPlanTool :is(small,b):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;line-height:1.2!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* ===== v3.47.0 - the panel summarises the sheet when nothing is selected (owner, 2026-09-21 item 8) ===== */
html body #plans .planSheetSummary .sheetTypeList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;margin:8px 0!important;padding:0!important;display:grid!important;gap:4px!important}
html body #plans .planSheetSummary .sheetTypeList li:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:24px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;padding:3px 6px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text)!important}
html body #plans .planSheetSummary .sheetTypeList .legendPuck svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important}
html body #plans .planSheetSummary .sheetFacts:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:8px 0!important}
html body #plans .planSheetSummary .sheetFact:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;justify-items:start!important;align-content:start!important;gap:2px!important;height:auto!important;min-height:52px!important;padding:6px 8px!important;text-align:left!important;white-space:normal!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text)!important}
html body #plans .planSheetSummary .sheetFact span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #plans .planSheetSummary .scaleFact:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1 / -1!important}
html body #plans .planSheetSummary .scaleFact.uncalibrated:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-left:4px solid var(--color-warning)!important}

/* ===== v3.47.0 - no hint line under the heading in any of the 31 modules; the heading stays (owner, 2026-09-21 #7) ===== */
html body .view>.pageHead p[id$="Hint"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans details.planMenu:not([open])>.planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}

/* ===== v3.47.0 - symbols scale WITH the plan; pins, handles and badges stay fixed (owner, 2026-09-21 and 2026-09-20 A) =====
   The sizes are computed in app.js (planMarkerGeometry) and arrive as variables: the core is drawn from a known 52px
   box, the marker's own box is the target you can hit (28px for a mouse, 44px for a finger, or the symbol if it is
   bigger) instead of a box that grew with the drawing, and the label carries its own scale and a width of at most
   twice the symbol. */
html body #plans .planMarker:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:var(--marker-box,34px)!important;height:var(--marker-box,34px)!important;min-width:0!important;min-height:0!important}
html body #plans .planMarker .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;flex:none!important;transform:scale(var(--marker-render-scale,.45))!important;transform-origin:center!important}
html body #plans .planMarker .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;line-height:1.1!important;max-width:var(--label-max,240px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  transform:translate(calc(-50% + var(--label-x,0px)),var(--label-y,0px)) scale(var(--label-render,1))!important;transform-origin:top center!important}
/* a pin to review is quieter than the design: a small outlined ring in the review colour, its label only when you
   point at it or pick it (100 orange chips buried the drawing) - "visible but quieter" (owner, 2026-09-20 C2) */
html body #plans .planMarker.detection .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-sizing:border-box!important;background:color-mix(in srgb,var(--color-status-review) 14%,transparent)!important;border:0!important;border-radius:50%!important;color:var(--color-status-review)!important;box-shadow:inset 0 0 0 calc(2px / var(--marker-render-scale,.3)) var(--color-status-review)!important;opacity:.9!important}
html body #plans .planMarker.detection .markerCore :is(svg,.planDeviceShape,.cameraShape):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.75!important}
html body #plans .planMarker.detection:not(.selected):not(:hover) .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker.detection.selected .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-review)!important;color:var(--color-on-status-review)!important;opacity:1!important}
/* v3.47.0: the icon strip's own display must not bring back a rail that was collapsed */
html body.planDesk #plans .planWorkspace.railCollapsed #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body.planDesk #plans #planToolRail[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* v3.47.0: the symbol's box is its target now and can be smaller than the 52px core, so the core is centred on the
   symbol's point explicitly - a grid does not centre a child bigger than itself, and every symbol sat 12px off */
html body #plans .planMarker>.markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;margin:-26px 0 0 -26px!important}

/* ===== v3.47.0 - removing detections is apart from everyday actions, and can be undone (owner, 2026-09-20 C4) ===== */
html body #plans .recognitionRemove:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-end!important;margin:10px 0 0!important;padding:8px 0 0!important;border-top:1px dashed var(--color-border)!important}
html body #plans .recognitionRemove .removeMenu>summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important;height:32px!important;min-height:32px!important;padding:0 10px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;background:transparent!important;color:var(--color-text-muted)!important;cursor:pointer!important;font-size:var(--text-small)!important}
html body #plans .recognitionRemove .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:auto!important;right:0!important}
html body #plans .planMenuList .dangerItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important;background:transparent!important;border:1px solid transparent!important}
html body #plans .planMenuList .dangerItem:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;border-color:var(--color-danger)!important}
html body #toast.withAction:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:12px!important;pointer-events:auto!important}
html body #toast .toastUndo:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 10px!important;border:1px solid var(--color-accent)!important;border-radius:var(--radius)!important;background:transparent!important;color:var(--color-accent)!important;font-weight:var(--weight-semibold)!important;cursor:pointer!important}

/* ===== v3.47.0 - the sheet list: folders, each sheet's number and title, and its open tasks (owner, 2026-09-20 D) ===== */
html body .planPageGallery .planFolder:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0 0 14px!important}
html body .planPageGallery .planFolder>h4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 8px!important;font-size:var(--text-small)!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--color-text-muted)!important}
html body .planPageGallery .planFolder>h4 span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-weight:var(--weight-semibold)!important;color:var(--color-text)!important}
html body .planPageGallery .planFolder>h4:empty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body .planPageGallery .thumbImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:block!important}
html body .planPageGallery .sheetNumber:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:6px!important;top:6px!important;min-width:24px!important;height:22px!important;padding:0 6px!important;display:grid!important;place-items:center!important;font-style:normal!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important}
html body .planPageGallery .openTaskBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:6px!important;top:6px!important;min-width:22px!important;height:22px!important;padding:0 6px!important;display:grid!important;place-items:center!important;font-style:normal!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;background:var(--color-status-new)!important;color:var(--color-on-status)!important;border-radius:11px!important}
/* the other six of the thirty: the Dashboard's line under its heading and the five Administration tabs' lines
   (the "Trust this device" note on the two-step form is not a module description and stays) */
html body #projectHomeHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body .adminTabHead p[id$="Hint"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}

/* ===== v3.47.0 - Plan Studio to the approved mockups (docs/design/plan-studio-v3.47-design, screens 01-07) =====
   Everything below overrides the first v3.47.0 build where the mockups differ: two grouped rows of words in the
   toolbar, a tool rail of icons WITH their names, four tabs in the panel, the sheet bar in two clusters, a short
   Not-to-scale chip at the top right, and the page selector as a panel above the sheet button. */

/* --- the toolbar: two rows, the group names inline to the left of each group --- */
html body #plans .planStudioCommandHeader.v47.twoRows:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:6px 10px!important}
html body #plans .planStudioCommandHeader.twoRows .planToolbarRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px 16px!important;min-width:0!important;flex-wrap:nowrap!important}
html body #plans .planStudioCommandHeader.twoRows .headerGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;padding:0!important;flex:0 0 auto!important;position:static!important}
html body #plans .planStudioCommandHeader.twoRows .headerGroup+.headerGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:16px!important;border-left:1px solid var(--color-border)!important}
html body #plans .planStudioCommandHeader.twoRows .headerGroupTag:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;margin:0 4px 0 0!important;font-size:var(--text-small)!important;line-height:1!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #plans .planStudioCommandHeader.twoRows :is(button,summary):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 12px!important;font-size:var(--text-small)!important;border-radius:var(--radius)!important;white-space:nowrap!important;gap:4px!important}
html body #plans .planStudioCommandHeader.twoRows .recognitionTypePicker select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 26px 0 10px!important;font-size:var(--text-small)!important;width:auto!important;max-width:150px!important}
/* the layers are pills with their counts; an empty layer is quieter */
html body #plans .planStudioCommandHeader.twoRows .layerSwitch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:30px!important;padding:0 12px!important;border-radius:var(--radius-pill)!important}
html body #plans .planStudioCommandHeader.twoRows .layerSwitch .layerName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important}
html body #plans .planStudioCommandHeader.twoRows .layerSwitch.layerEmpty:not(.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body #plans .planStudioCommandHeader.twoRows .layerSwitch.layerEmpty.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;color:var(--color-text-muted)!important;border-color:var(--color-border)!important}
html body #plans .planStudioCommandHeader.twoRows .viewTick:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-accent)!important;background:transparent!important}
html body #plans .planStudioCommandHeader.twoRows .headerSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;flex:0 1 320px!important;max-width:320px!important;min-width:160px!important}
html body #plans .planStudioCommandHeader.twoRows #planSearchInput:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 10px!important}
@media(max-width:1599px){
  html body #plans .planStudioCommandHeader.twoRows .planToolbarRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:6px 10px!important}
  html body #plans .planStudioCommandHeader.twoRows .headerGroup+.headerGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:10px!important}
  html body #plans .planStudioCommandHeader.twoRows :is(button,summary):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 8px!important}
  html body #plans .planStudioCommandHeader.twoRows .layerSwitch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 8px!important}
  html body #plans .planStudioCommandHeader.twoRows .headerSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-basis:200px!important}
}

/* --- the tool rail: icons with their names, as in the mockups --- */
@media(min-width:1101px){
  html body.planDesk #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:78px}
  html body.planDesk #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:0px;--plan-palette-col:0px}
  html body.planDesk #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:78px!important;padding:8px!important;gap:6px!important}
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:auto!important;min-height:52px!important;padding:6px 2px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;border-radius:8px!important}
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton)>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;font-size:var(--text-small)!important;line-height:1.15!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton)>span:first-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:visible!important}
  html body.planDesk #plans #planToolRail .selectedPlanTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
}
/* the palette's note while placing, and its hint (mockups 02 and 03) */
html body #plans .palettePlacingNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:10px 0 0!important;padding:10px!important;border:1px solid var(--color-accent)!important;border-radius:var(--radius)!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;line-height:1.5!important}
html body #plans .paletteHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:auto 0 0!important;padding:12px 2px 2px!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;line-height:1.5!important}
html body #plans .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important}

/* --- the canvas: Not to scale is a short chip at the top right --- */
html body #plans .planScaleNotice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:auto!important;right:14px!important;top:12px!important;max-width:none!important;padding:5px 10px!important;border:1px solid var(--color-warning)!important;border-left-width:1px!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important}

/* --- the sheet bar: the sheet on the left, the lock and zoom on the right --- */
html body #plans .planSheetNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:12px!important;right:12px!important;bottom:10px!important;transform:none!important;max-width:none!important;justify-content:space-between!important;gap:12px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;pointer-events:none!important}
html body #plans .planSheetNav .sheetNavGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;pointer-events:auto!important;min-width:0!important}
html body #plans .planSheetNav button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:36px!important;min-height:36px!important;min-width:36px!important;padding:0 12px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;box-shadow:var(--ios-shadow)!important}
html body #plans .planSheetNav .planSheetName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:min(460px,40vw)!important;gap:8px!important}
html body #plans .planSheetNav .planSheetName.open:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body #plans .planSheetNav .zoomReadout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:48px!important;color:var(--color-text)!important}

/* --- the page selector: a panel above the sheet button (mockup 04) --- */
html body #plans .planSheetPanel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:12px!important;bottom:56px!important;z-index:30!important;width:min(740px,calc(100% - 24px))!important;max-height:calc(100% - 76px)!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:14px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;box-shadow:var(--ios-shadow)!important}
html body #plans .planSheetPanel .sheetPanelHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:8px!important;align-items:center!important}
html body #plans .planSheetPanel .sheetSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 10px!important;height:36px!important;border:1px solid var(--color-accent)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;color:var(--color-text-muted)!important}
html body #plans .planSheetPanel .sheetSearch input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;border:0!important;background:transparent!important;height:34px!important;min-height:34px!important;padding:0!important;outline:none!important}
html body #plans .planSheetPanel .sheetPanelHead>button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:36px!important;min-height:36px!important;padding:0 12px!important;white-space:nowrap!important}
html body #plans .planSheetPanel .sheetPanelBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:auto!important;min-height:0!important;display:grid!important;gap:12px!important}
html body #plans .planSheetPanel .planFolder h4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 8px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #plans .planSheetPanel .folderToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:auto!important;min-height:0!important;padding:2px 4px!important;border:0!important;background:transparent!important;color:var(--color-text)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planSheetPanel .planPageGalleryGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;gap:10px!important}
html body #plans .planSheetPanel.listView .planPageGalleryGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:1fr!important}
html body #plans .planSheetPanel .planPageThumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;align-content:start!important;gap:3px!important;padding:6px!important;height:auto!important;min-height:0!important;text-align:left!important;white-space:normal!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;color:var(--color-text)!important}
html body #plans .planSheetPanel .planPageThumb.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #plans .planSheetPanel .planPageThumb:focus-visible:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:2px!important}
html body #plans .planSheetPanel .thumbImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:block!important;height:74px!important;overflow:hidden!important;border-radius:4px!important;background:var(--color-plan-paper)!important}
html body #plans .planSheetPanel.listView .thumbImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planSheetPanel .thumbImage img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:100%!important;object-fit:cover!important}
html body #plans .planSheetPanel .planPageThumb b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #plans .planSheetPanel .planPageThumb small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #plans .planSheetPanel .currentTag:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-accent)!important}
html body #plans .planSheetPanel :is(.sheetNumber,.openTaskBadge):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:4px!important;min-width:22px!important;height:20px!important;padding:0 6px!important;display:grid!important;place-items:center!important;font-style:normal!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;border-radius:var(--radius-pill)!important}
html body #plans .planSheetPanel .sheetNumber:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:4px!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important}
html body #plans .planSheetPanel .openTaskBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:4px!important;background:var(--color-status-new)!important;color:var(--color-on-status)!important}
html body #plans .planSheetPanel .sheetPanelFoot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;gap:12px!important;padding-top:8px!important;border-top:1px solid var(--color-border)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}

/* --- chips (review, tasks, sheet filters) --- */
html body #plans .reviewChips:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:center!important}
html body #plans .reviewChip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 11px!important;border-radius:var(--radius-pill)!important;font-size:var(--text-small)!important;background:transparent!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;white-space:nowrap!important}
html body #plans .reviewChip.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important}

/* --- the panel: four tabs, and what is in them --- */
html body #plans .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;grid-auto-flow:column!important;gap:4px!important;padding:6px!important}
html body #plans .planSideTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 6px!important;font-size:var(--text-small)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #plans .planSideBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:0!important;overflow:auto!important;padding:0 2px 10px!important}
html body #plans .planSideBody .card:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 6px!important;display:grid!important;gap:10px!important}
html body #plans .sheetBlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important;padding-top:10px!important;border-top:1px solid var(--color-border)!important}
html body #plans .sheetBlock>h4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #plans .planSheetSummary .sheetTypeList li:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:0!important;background:transparent!important;padding:2px 0!important}
html body #plans .sheetProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;height:6px!important;border-radius:var(--radius-pill)!important;overflow:hidden!important;background:var(--color-surface-2)!important}
html body #plans .sheetProgress i:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;height:100%!important}
html body #plans .sheetProgress .statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #plans .sheetProgress .statusProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #plans .sheetProgress .statusNew:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-new)!important}
html body #plans .sheetProgressLegend:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:12px!important;font-size:var(--text-small)!important}
html body #plans .sheetProgressLegend .statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-completed)!important;background:transparent!important}
html body #plans .sheetProgressLegend .statusProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-progress)!important;background:transparent!important}
html body #plans .sheetProgressLegend .statusNew:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-new)!important;background:transparent!important}
html body #plans .attentionRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font-size:var(--text-small)!important;color:var(--color-text)!important}
html body #plans .attentionRow .sheetFact:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:28px!important;height:28px!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important}
html body #plans .attentionRow.scaleFact.uncalibrated>b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:4px 10px!important;border:1px solid var(--color-warning)!important;border-radius:var(--radius)!important;font-weight:var(--weight-semibold)!important}
html body #plans .selectedDeviceCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:8px!important;padding:12px!important;border:1px solid var(--color-accent)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #plans .selectedDeviceCard .cardTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body #plans .deviceTab .deviceHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:8px!important}
html body #plans .selectedDeviceCard dl:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:auto 1fr!important;gap:3px 14px!important;margin:0!important;font-size:var(--text-small)!important}
html body #plans .selectedDeviceCard dt:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #plans .selectedDeviceCard dd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important}
html body #plans :is(.selectedDeviceCard .cardActions,.deviceTab .deviceButtons):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important}
html body #plans .selectedDeviceCard .cardActions .primaryAction:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #plans .statusPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;height:22px!important;padding:0 8px!important;border-radius:var(--radius-pill)!important;font-size:var(--text-small)!important;white-space:nowrap!important;border:1px solid currentColor!important;background:transparent!important}
html body #plans .statusPill.statusNew:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-new)!important}
html body #plans .statusPill:is(.statusProgress,.statusAssigned,.statusWaiting):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-progress)!important}
html body #plans .statusPill.statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-completed)!important}
html body #plans .statusPill.statusBlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-blocked)!important}
html body #plans .warnText:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #plans .deviceTab h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-section)!important}
html body #plans .deviceTab .deviceHead small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #plans .deviceFields:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important}
html body #plans .deviceFields>label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body #plans .deviceFields>.fieldRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body #plans .sheetBlock>.fieldRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;margin:0!important;font-size:var(--text-small)!important}
html body #plans .deviceFields :is(label,.fieldRow)>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),
html body #plans .sheetBlock>.fieldRow>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #plans .deviceFields :is(input,select):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;width:100%!important}
html body #plans .deviceFields .fieldRow small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-weight:400!important}
html body #plans .deviceTaskRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:10px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;font-size:var(--text-small)!important}
html body #plans .deviceTaskRow small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #plans :is(.dashedBtn,.newPinTask):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 10px!important;background:transparent!important;border:1px dashed var(--color-border-strong)!important;border-radius:var(--radius)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;justify-self:start!important}
html body #plans .newPinTask:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-self:stretch!important}
html body #plans .newPinTask.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;color:var(--color-accent)!important}
html body #plans .linkBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-self:start!important;height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--color-accent)!important;text-decoration:underline!important;font-size:var(--text-small)!important}
html body #plans .fullWidth:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important}
html body #plans .deviceDanger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-top:10px!important;border-top:1px solid var(--color-border)!important}
html body #plans .deviceDanger .danger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;border:1px solid var(--color-danger)!important;color:var(--color-danger)!important}
/* Review */
html body #plans .recognitionQueue.v47 .reviewStats:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:0 0 8px!important}
html body #plans .recognitionQueue.v47 .reviewStats>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:2px!important;padding:8px 10px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #plans .recognitionQueue.v47 .reviewStats b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-section)!important;color:var(--color-text)!important}
html body #plans .recognitionQueue.v47 .recognitionSummary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;margin:0!important}
html body #plans .recognitionQueue.v47 .recognitionSummary [data-count="waiting"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:auto!important}
html body #plans .reviewSelectionBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;padding:8px!important;border:1px solid var(--color-accent)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #plans .reviewSelectionBar .selectedWord:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;font-size:var(--text-small)!important}
html body #plans .reviewSelectionBar>button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:30px!important;padding:0 10px!important;font-size:var(--text-small)!important}
html body #plans .reviewSelectionBar .recognitionRemove:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;padding:0!important;border:0!important}
html body #plans .reviewRows:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important}
html body #plans .recognitionQueue.v47 .recognitionSelectRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:auto 14px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;padding:6px 8px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #plans .recognitionQueue.v47 .recognitionSelectRow.bulkSelected:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body #plans .reviewRing:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:12px!important;height:12px!important;border-radius:50%!important;border:2px solid var(--color-status-review)!important;display:block!important}
html body #plans .recognitionQueue.v47 .recognitionItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;justify-items:start!important;gap:1px!important;padding:0!important;height:auto!important;min-height:0!important;border:0!important;background:transparent!important;text-align:left!important;min-width:0!important}
html body #plans .recognitionQueue.v47 .recognitionItem span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important}
html body #plans .rowAction:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 10px!important;font-size:var(--text-small)!important}
html body #plans :is(.panelFootNote,.reviewMore):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;line-height:1.5!important}
/* Tasks */
html body #plans .planTaskList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:6px!important}
html body #plans .planTaskRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:stretch!important;gap:6px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #plans .planTaskRow.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body #plans .planTaskOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;display:grid!important;grid-template-columns:10px minmax(0,1fr) auto!important;align-items:center!important;gap:2px 8px!important;padding:8px 10px!important;height:auto!important;min-height:0!important;border:0!important;background:transparent!important;text-align:left!important;min-width:0!important;color:var(--color-text)!important}
html body #plans .planTaskOpen b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:var(--text-small)!important}
html body #plans .planTaskOpen small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:2 / 4!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #plans .planTaskOpen time:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #plans .planTaskOpen time.overdue:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-blocked)!important}
html body #plans .planTaskRow .rowAction:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:center!important;margin-right:6px!important}
html body #plans .taskDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:10px!important;height:10px!important;border-radius:50%!important;background:var(--color-status-new)!important}
html body #plans .taskDot.statusProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #plans .taskDot.statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #plans .taskDot.statusBlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-blocked)!important}
/* a task pinned to the plan: a fixed-size annotation in its own status colour */
html body #plans .planTaskPin:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;z-index:12!important;width:20px!important;height:20px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:2px solid var(--color-surface)!important;border-radius:50% 50% 50% 0!important;background:var(--color-status-new)!important;box-shadow:0 0 0 1px var(--color-border-strong)!important;transform:translate(-50%,-100%) scale(var(--plan-pin-comp,1)) rotate(-45deg)!important;transform-origin:50% 100%!important;cursor:pointer!important}
html body #plans .planTaskPin.statusProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #plans .planTaskPin.statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #plans .planTaskPin.statusBlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-blocked)!important}
html body #plans .planTaskPin.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-shadow:0 0 0 3px var(--color-accent)!important}

/* --- the status bar: the sheet and the zoom at the right --- */
html body #plans .planStatusBar.v47 .statusHint.placing:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-accent)!important}
html body #plans .planStatusBar.v47 :is(.statusSheet,.statusZoom):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
/* --- the top bar: "/ Plan Studio" after the project --- */
html body .headerCrumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:center!important;margin:0 8px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;color:var(--color-text)!important;white-space:nowrap!important}
html body .headerCrumb:empty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* v3.47.0 corrections after the first comparison with the mockups at 1920 */
@media(min-width:1101px){
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-width:0!important;max-width:none!important}
}
html body #plans .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:4px!important}
html body #plans .planSideTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;width:auto!important;padding:0 8px!important;text-overflow:clip!important}
html body #plans .planSheetSummary .sheetTypeList .legendItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:22px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;padding:2px 0!important;border:0!important;background:transparent!important;font-size:var(--text-small)!important;color:var(--color-text)!important}
html body #plans .planSheetSummary .sheetTypeList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;gap:2px!important;margin:0!important;padding:0!important;position:static!important;background:transparent!important;border:0!important}
html body #plans .planSheetSummary .sheetTypeList .legendPuck:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:22px!important;height:22px!important;display:grid!important;place-items:center!important}
html body #plans .planSheetSummary .sheetTypeList .legendPuck svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:18px!important;height:18px!important}
html body #plans .planStudioCommandHeader.twoRows .sizeMenu>summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;padding:0 12px!important}
html body #plans .planSheetSummary :is(.sheetTypeList,.sheetTypeList .legendItem):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;box-sizing:border-box!important}
@media(min-width:1101px){
  html body.planDesk #plans #planToolRail .planCategoryList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-items:stretch!important;width:100%!important}
  html body.planDesk #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:stretch!important;width:100%!important}
  html body.planDesk #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:8px 5px!important;align-items:stretch!important}
}
@media(min-width:1101px){
  html body.planDesk #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){scrollbar-width:none!important;scrollbar-gutter:auto!important}
  html body.planDesk #plans #planToolRail::-webkit-scrollbar{display:none!important;width:0!important}
}
/* v3.47.0 - the palette as in mockups 02 and 03: 260px wide; Recent as chips; groups (and loose tools) as rows with a
   count and a chevron; a group's symbols as a two-column grid of tiles */
@media(min-width:1101px){
  html body.planDesk #plans .planWorkspace.toolsOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:max(260px,var(--plan-tools-width,260px))}
}
html body #plans .planCategoryFlyout:not(.groupLevel)>header small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planCategoryFlyout .planPaletteShelf>small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #plans .planCategoryFlyout:not(.groupLevel) .planPaletteShelf .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
html body #plans .planCategoryFlyout:not(.groupLevel) .planPaletteShelf .symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;height:28px!important;min-height:28px!important;padding:0 10px!important;border-radius:var(--radius-pill)!important;display:inline-flex!important;flex-direction:row!important}
html body #plans .planCategoryFlyout:not(.groupLevel) .planPaletteShelf .symbolTool svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planCategoryFlyout:not(.groupLevel)>.planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
html body #plans .planCategoryFlyout:not(.groupLevel)>.planFlyoutGrid>.symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:24px minmax(0,1fr) auto auto!important;align-items:center!important;justify-items:start!important;gap:10px!important;width:100%!important;height:44px!important;min-height:44px!important;padding:0 12px!important;text-align:left!important;flex-direction:row!important}
html body #plans .planCategoryFlyout:not(.groupLevel)>.planFlyoutGrid>.symbolTool svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:22px!important;height:22px!important}
html body #plans .planCategoryFlyout .groupCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-style:normal!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #plans .planCategoryFlyout.groupLevel>.planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
html body #plans .planCategoryFlyout.groupLevel>.planFlyoutGrid>.symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:74px!important;min-height:74px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important}
/* the device tab's Remove is an outline, apart at the bottom (mockup 05) */
html body #plans .deviceTab .deviceDanger button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;border:1px solid var(--color-danger)!important;color:var(--color-danger)!important;height:32px!important;min-height:32px!important;padding:0 12px!important}
/* This sheet: the names left-aligned, and the status pill never squeezed by a long name */
html body #plans .planSheetSummary .sheetTypeList .legendName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-self:start!important;text-align:left!important}
html body #plans :is(.selectedDeviceCard .cardTop,.deviceTab .deviceHead)>:first-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;overflow-wrap:anywhere!important}
html body #plans .statusPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important}
@media(min-width:1600px){
  html body.planDesk #plans .planWorkspace.toolsOpen.paletteGroupOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:548px}
  html body.planDesk #plans #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:row!important;align-items:stretch!important}
  html body.planDesk #plans #planToolFlyoutHost>.planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 0!important;min-width:0!important}
  html body.planDesk #plans #planToolFlyoutHost>.planCategoryFlyout+.planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-left:1px solid var(--color-border)!important}
}
html body #plans .planCategoryFlyout .planGroupTile.open:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #plans .planCategoryFlyout:not(.groupLevel)>.planFlyoutGrid>.symbolTool>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-self:start!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
html body #plans .planCategoryFlyout .planPaletteShelf .symbolTool>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important}
@media(min-width:1600px){
  html body.planDesk #plans #planToolFlyoutHost>.planCategoryFlyout+.planCategoryFlyout.groupLevel .planPaletteSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
}
html body #plans .reviewChip b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;margin-left:3px!important}
html body #plans .reviewSelectionBar .selectedWord:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important}
/* ===== Batch 7 - the Dashboard, to the approved mockup (docs/design/app-page-designs/01-main) =====
   The page name is in the top bar; one toolbar row; five counts; the work in groups; a side column. */
html body #projecthome .projectHomeHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #projecthome .dashboardShell:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;max-width:none!important}
html body #projecthome .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:14px!important;padding:8px 16px!important;margin:0 0 16px!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important;flex-wrap:wrap!important}
html body #projecthome .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important}
html body #projecthome .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #projecthome .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #projecthome .b7Select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--control-height-sm)!important;min-width:0!important;width:auto!important;font-size:var(--text-small)!important}
html body #projecthome .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important}
html body #projecthome .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;min-height:0!important}
html body #projecthome .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #projecthome #dashboardDynamic:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:16px!important;padding:0 20px 16px!important}
html body #projecthome .dashboardMetricGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin:0!important}
html body #projecthome .dashboardMetric:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:12px!important;height:64px!important;min-height:0!important;padding:0 16px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important}
html body #projecthome .dashboardMetric.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body #projecthome .dashboardMetric>b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-title)!important;font-weight:var(--weight-semibold)!important;line-height:1!important}
html body #projecthome .dashboardMetric>span:last-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #projecthome .dashDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;flex:none!important;width:10px!important;height:10px!important;border-radius:50%!important;background:var(--color-status-new)!important}
html body #projecthome .dashDot.tone-in_progress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #projecthome .dashDot.tone-completed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #projecthome .dashDot.tone-blocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-blocked)!important}
html body #projecthome .dashDot.tone-waiting:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-waiting)!important}
html body #projecthome .dashDot.tone-overdue:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-danger)!important}
html body #projecthome .dashboardGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:16px!important;align-items:start!important;margin:0!important}
html body #projecthome .dashboardPanel.dashWork:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:14px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-width:0!important}
html body #projecthome .dashWorkHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
html body #projecthome .dashWorkHead h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
html body #projecthome .dashWorkHead small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #projecthome .dashboardTaskList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:14px!important;max-height:none!important;overflow:visible!important}
html body #projecthome .dashGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:6px!important}
html body #projecthome .dashOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #projecthome .dashRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto 96px!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:54px!important;padding:8px 14px 8px 16px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important;font-weight:var(--weight-regular)!important}
html body #projecthome .dashRow:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-border-strong)!important}
html body #projecthome .dashRowMain:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
html body #projecthome .dashRowMain strong:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #projecthome .dashRowMain small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;white-space:normal!important;overflow-wrap:anywhere!important} /* v3.48.0: the project line wraps rather than being cut off in a longer language */
html body #projecthome .dashProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-style:normal!important;font-size:var(--text-small)!important;color:var(--color-warning)!important;white-space:nowrap!important}
html body #projecthome .dashAvatar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;border-radius:50%!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border-strong)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body #projecthome .dashRow .dashboardStatusPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-self:end!important;white-space:nowrap!important}
html body #projecthome .dashDate:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-self:end!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;white-space:nowrap!important}
html body #projecthome .dashMore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #projecthome .dashSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:16px!important;min-width:0!important}
html body #projecthome .dashCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;padding:14px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #projecthome .dashCardHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
html body #projecthome .dashAttnRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:30px!important;font-size:var(--text-small)!important}
html body #projecthome .dashAttnBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 10px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border-strong)!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;white-space:nowrap!important}
html body #projecthome .dashAttnBtn.isProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:1px dashed var(--color-warning)!important;color:var(--color-warning)!important}
html body #projecthome .dashAttnBtn.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body #projecthome .dashAttnNone:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;padding:0 10px!important}
html body #projecthome .dashLegend:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:5px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #projecthome .dashLegend .dashDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:7px!important;height:7px!important;margin-left:6px!important}
html body #projecthome .dashProject:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;width:100%!important;padding:10px 12px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important;min-height:0!important}
html body #projecthome .dashProjectTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;gap:8px!important;font-size:var(--text-small)!important}
html body #projecthome .dashProjectTop b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #projecthome .dashBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;height:5px!important;border-radius:var(--radius-pill)!important;overflow:hidden!important;background:var(--color-border)!important}
html body #projecthome .dashSeg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;height:100%!important}
html body #projecthome .dashSeg.tone-completed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #projecthome .dashSeg.tone-in_progress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #projecthome .dashSeg.tone-blocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-blocked)!important}
html body #projecthome .dashSeg.tone-new:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-new)!important}
html body #projecthome .dashToday p:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important}
html body #projecthome .dashToday>button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:flex-start!important}
html body #projecthome .dashTodayList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:4px!important}
html body #projecthome .dashTodayList button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:none!important;border:0!important;padding:2px 0!important;color:var(--color-text)!important;font-size:var(--text-small)!important;text-align:left!important;min-height:0!important;box-shadow:none!important}
@media(max-width:1100px){
  html body #projecthome .dashboardGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #projecthome .dashboardMetricGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
}
@media(max-width:640px){
  html body #projecthome #dashboardDynamic:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 12px 12px!important}
  html body #projecthome .dashRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:auto minmax(0,1fr) auto!important}
  html body #projecthome .dashRow .dashboardStatusPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #projecthome .dashRow .dashAvatar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #projecthome .dashRow>.dashProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
}
/* Batch 7 Dashboard: the page runs edge to edge under the top bar, as drawn; sentence case, a date column that fits */
html body main>.content:has(>#projecthome.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 0 16px!important}
html body #projecthome .companyZonePrompt:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:12px 16px 0!important}
html body #projecthome .dashboardMetric>span:last-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #projecthome .dashRow .dashboardStatusPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){text-transform:none!important;letter-spacing:normal!important}
html body #projecthome .dashRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:auto minmax(0,1fr) auto auto minmax(96px,auto)!important}
@media(max-width:640px){html body #projecthome .dashRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:auto minmax(0,1fr) auto!important}}
/* ===== Batch 7 - the Calendar, to the approved mockup (docs/design/app-page-designs/03-calendar) =====
   The page name is in the top bar; one toolbar row under it; the week fills the page; Unscheduled is a column on the
   right edge. What the calendar shows is unchanged. */
html body main>.content:has(>#calendar.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #calendar .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #calendar .calNotice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:12px 20px 0!important}
html body #calendar .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--color-border)!important;border-radius:0!important;background:var(--color-surface)!important;box-shadow:none!important}
html body #calendar .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important}
html body #calendar .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #calendar .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #calendar .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important;min-height:var(--control-height-sm)!important}
html body #calendar .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #calendar .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #calendar .calViews:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;gap:4px!important;border:0!important;border-radius:0!important;overflow:visible!important}
html body #calendar .calViews button+button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-left:1px solid var(--color-border)!important}
html body #calendar .calViews button.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body #calendar .calFilters:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:0!important;flex-wrap:nowrap!important}
html body #calendar .calFilter:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;max-width:170px!important}
html body #calendar .calZoneNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;white-space:nowrap!important}
html body #calendar .calLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:20px!important;padding:16px 0 16px 20px!important}
html body #calendar .calLayout:not(.withSide):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-right:20px!important}
html body #calendar .calLayout.withSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) 368px!important;padding-bottom:0!important}
html body #calendar .calSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:stretch!important;margin:-16px 0 0!important;padding:14px 16px!important;border:0!important;border-left:1px solid var(--color-border)!important;border-radius:0!important;box-shadow:none!important;max-height:none!important;min-height:calc(100vh - 110px)!important;display:flex!important;flex-direction:column!important;gap:8px!important}
html body #calendar .calSideHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
html body #calendar .calSideHead h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important}
html body #calendar .calCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:none!important;padding:0!important;color:inherit!important;font-weight:var(--weight-semibold)!important}
html body #calendar .calSideClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:30px!important;height:30px!important;min-height:0!important;padding:0!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text-muted)!important}
html body #calendar .calSideHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #calendar .calSortChips:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important;flex-wrap:wrap!important;margin:2px 0 4px!important}
html body #calendar .calSideItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:10px 8px 10px 12px!important;background:var(--color-surface-2)!important;border-radius:var(--radius)!important}
html body #calendar .calLead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-warning)!important}
html body #calendar .calLead.calNoLead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #calendar .calGrip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:flex-start!important;color:var(--color-text-muted)!important;cursor:grab!important;user-select:none!important}
@media(max-width:1200px){
  html body #calendar .calLayout.withSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important;padding-right:20px!important}
  html body #calendar .calSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;min-height:0!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
}
@media(max-width:640px){
  html body #calendar .calLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:12px!important}
  html body #calendar .calFilters:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-wrap:wrap!important}
}
/* ===== Batch 7 - Estimates, to the approved mockup (docs/design/app-page-designs/07-estimates) =====
   One grouped toolbar; the estimates on the left, the chosen one in the middle, Summary / Approval / Parts on the right. */
html body main>.content:has(>#estimates.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #estimates .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #estimates .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #estimates .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
html body #estimates .b7Group+.b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:14px!important;border-left:1px solid var(--color-border)!important}
html body #estimates .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #estimates .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #estimates .b7Select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--control-height-sm)!important;width:auto!important;max-width:240px!important;font-size:var(--text-small)!important}
html body #estimates .b7Toolbar button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:var(--control-height-sm)!important;white-space:nowrap!important}
html body #estimates .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important}
html body #estimates .estMenuWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:inline-flex!important}
html body #estimates .estMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:calc(100% + 4px)!important;left:0!important;z-index:40!important;display:flex!important;flex-direction:column!important;min-width:170px!important;padding:4px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;box-shadow:var(--ios-shadow)!important}
html body #estimates .estMenu[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #estimates .estMenu.estMenuRight:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:auto!important;right:0!important}
html body #estimates .estMenu button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-content:flex-start!important;text-align:left!important;border:0!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #estimates .estMenu button:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body #estimates .estMenu button.danger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important}
html body #estimates .estLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:284px minmax(0,1fr) 360px!important;align-items:stretch!important;min-height:calc(100vh - 110px)!important}
html body #estimates .estList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;padding:14px 12px!important;border-right:1px solid var(--color-border)!important;min-width:0!important}
html body #estimates .estOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #estimates .estListItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;width:100%!important;padding:9px 11px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important;min-height:0!important}
html body #estimates .estListItem.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #estimates .estListItem small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #estimates .estListItem .estState:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:none!important;padding:0!important;border:0!important}
html body #estimates .estListItem .estState.approved:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important}
html body #estimates .estNew:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estNewSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;border:1px dashed var(--color-border-strong)!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #estimates .estNewSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;align-self:flex-start!important}
html body #estimates .estMain:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:14px!important;padding:16px 20px!important;min-width:0!important}
html body #estimates .estHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
html body #estimates .estHead h2:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #estimates .estVer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estSource:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #estimates .estSource.isOverride:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #estimates .estTotals:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important;margin:0!important}
html body #estimates .estTotals>div:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important;padding:10px 14px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #estimates .estTotals>div.isTotal:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #estimates .estTotals b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #estimates .estTotals span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #estimates .estSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;overflow-x:auto!important;background:var(--color-surface)!important}
html body #estimates .estSection .estimateSectionHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;margin:0!important;padding:10px 12px!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;font-size:var(--text-small)!important}
html body #estimates .estSection .estimateSectionHead span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #estimates .estSection table:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;border:0!important}
html body #estimates .estSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:12px!important;padding:12px 16px!important;border-left:1px solid var(--color-border)!important;min-width:0!important}
html body #estimates .estTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
html body #estimates .estTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:var(--control-height-sm)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;box-shadow:none!important}
html body #estimates .estTabs button.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important;font-weight:var(--weight-semibold)!important}
html body #estimates .estTabBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;font-size:var(--text-small)!important}
html body #estimates .estTabBody p:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important}
html body #estimates .estTabBody .estOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-top:8px!important;padding-top:10px!important;border-top:1px solid var(--color-border)!important}
html body #estimates .estTabBody .estOverline:first-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-top:0!important;padding-top:0!important;border-top:0!important}
html body #estimates .estApproved:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important}
html body #estimates .estMuted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #estimates .estKV:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;gap:10px!important}
html body #estimates .estKV.isProblem b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #estimates .estKV.isGood b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important}
html body #estimates .estLinks:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estParts:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:8px!important}
html body #estimates .estLinks li:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estParts li:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important;padding:8px 10px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body #estimates .estLinks small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estParts small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
@media(max-width:1400px){
  html body #estimates .estLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:240px minmax(0,1fr) 300px!important}
}
@media(max-width:1100px){
  html body #estimates .estLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #estimates .estList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #estimates .estSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:0!important;border-bottom:1px solid var(--color-border)!important}
}
@media(max-width:640px){
  html body #estimates .estMain:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:12px!important}
  html body #estimates .estSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow-x:auto!important}
}
html body #estimates .estTotals span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){text-transform:none!important;letter-spacing:normal!important}
/* v3.47.0: the This sheet progress legend - the words in readable text, the status colour as a dot (dark-theme contrast) */
html body #plans .sheetProgressLegend :is(.statusCompleted,.statusProgress,.statusNew):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;display:inline-flex!important;align-items:center!important;gap:5px!important}
html body #plans .sheetProgressLegend :is(.statusCompleted,.statusProgress,.statusNew):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{content:''!important;width:8px!important;height:8px!important;border-radius:50%!important;background:var(--color-status-new)!important}
html body #plans .sheetProgressLegend .statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{background:var(--color-status-completed)!important}
html body #plans .sheetProgressLegend .statusProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{background:var(--color-status-progress)!important}
/* v3.47.1: a detection to review is a small amber OUTLINE ring, quieter than the real symbols (mockup 01, owner 2026-09-21):
   no fill, no glyph, a thin line. Its icon and label come back when it is pointed at or picked. */
html body #plans .planMarker.detection:not(.selected) .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;color:transparent!important;box-shadow:inset 0 0 0 calc(1.5px / var(--marker-render-scale,.3)) var(--color-plan-detection)!important;opacity:1!important}
html body #plans .planMarker.detection:not(.selected):not(:hover) .markerCore>*:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:0!important}
html body #plans .planMarker.detection:not(.selected):hover .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-plan-detection)!important;background:var(--color-plan-paper)!important}
/* Batch 7 Calendar: the People view - one row per person, the days of the week as columns (owner, 2026-09-21) */
html body #calendar .calPeople:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:180px repeat(7,minmax(0,1fr))!important;overflow:auto!important}
html body #calendar .calPeople>div:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-right:1px solid var(--color-border)!important;border-bottom:1px solid var(--color-border)!important;min-width:0!important}
html body #calendar .calPeopleCorner:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #calendar .calPeople .calHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:6px 8px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;background:var(--color-surface-2)!important}
html body #calendar .calPeopleName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:8px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #calendar .calPeopleCell:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:3px!important;padding:4px!important;min-height:64px!important}
html body #calendar .calPeopleCell.isToday:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #calendar .calPeople .calHead.isToday:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
@media(max-width:900px){html body #calendar .calPeople:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:120px repeat(7,minmax(110px,1fr))!important}}
/* ===== Batch 7 - Projects, to the approved mockup (docs/design/app-page-designs/05-projects) =====
   One toolbar row; cards with the photo / first sheet / initials, the open tasks, what waits for review, the next
   planned task and the team; Edit and Delete under the card's ⋯ menu. */
html body main>.content:has(>#projects.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #projects .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #projects .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #projects .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
html body #projects .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #projects .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #projects .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #projects .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #projects .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important}
html body #projects .b7Toolbar button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:var(--control-height-sm)!important;white-space:nowrap!important}
html body #projects .projSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:280px!important;max-width:100%!important;height:var(--control-height-sm)!important;font-size:var(--text-small)!important}
html body #projects #projectsDisplay:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:16px 20px 8px!important}
html body #projects .projNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0 20px 16px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #projects .projCards:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important;gap:16px!important}
html body #projects .projCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;overflow:hidden!important;cursor:pointer!important;min-width:0!important}
html body #projects .projCard:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #projects .projCard:focus-visible:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body #projects .projPicture:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:120px!important;background:var(--color-surface-2)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-bottom:1px solid var(--color-border)!important}
html body #projects .projPicture img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
html body #projects .projPicture img.projSheet:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){object-fit:contain!important;background:var(--color-plan-paper)!important}
html body #projects .projInitials:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;color:var(--color-text-muted)!important}
html body #projects .projInitials b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-title)!important;font-weight:var(--weight-regular)!important;color:var(--color-text)!important}
html body #projects .projInitials small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important}
html body #projects .projBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;padding:12px!important;min-width:0!important}
html body #projects .projTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important}
html body #projects .projTop small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #projects .projBody h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #projects .projBody>p:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;min-height:1.2em!important}
html body #projects .projBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;height:5px!important;border-radius:var(--radius-pill)!important;overflow:hidden!important;background:var(--color-border)!important}
html body #projects .dashSeg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;height:100%!important}
html body #projects .dashSeg.tone-completed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #projects .dashSeg.tone-in_progress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #projects .dashSeg.tone-blocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-blocked)!important}
html body #projects .dashSeg.tone-new:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-new)!important}
html body #projects .projFacts:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:12px!important;font-size:var(--text-small)!important}
html body #projects .projProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #projects .projFoot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:26px!important}
html body #projects .projFoot small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #projects .projTeam:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:4px!important}
html body #projects .dashAvatar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;border-radius:50%!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border-strong)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body #projects .projMenuWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:inline-flex!important}
html body #projects .projMenuBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:28px!important;height:26px!important;min-height:0!important;padding:0!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #projects .projMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:calc(100% + 4px)!important;right:0!important;z-index:40!important;display:flex!important;flex-direction:column!important;min-width:190px!important;padding:4px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;box-shadow:var(--ios-shadow)!important}
html body #projects .projMenu[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #projects .projMenu button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-content:flex-start!important;text-align:left!important;border:0!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #projects .projMenu button:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body #projects .projMenu button.danger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important}
html body #projects .projRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:64px minmax(0,1fr) auto auto auto!important;align-items:center!important;gap:12px!important}
html body #projects .projRow .projectListImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:64px!important;height:44px!important;overflow:hidden!important;border-radius:var(--radius)!important}
html body #projects .projRow .projectListImage img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:100%!important;object-fit:cover!important}
html body #projects .projRow .projInitials small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
@media(max-width:640px){
  html body #projects #projectsDisplay:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:12px!important}
  html body #projects .projCards:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #projects .projSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important}
  html body #projects .projRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:48px minmax(0,1fr) auto!important}
  html body #projects .projRow .projFacts:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #projects .projRow .projectStatusBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
}
/* Batch 7 Projects: the photo keeps its own controls (v3.33.3, confirmed): top-right on the picture, shown on hover when there is a photo */
html body #projects .projPicture:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html body #projects .projPicture:has(img) .projectPhotoTools:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:0!important;transition:opacity .12s ease-in-out}
html body #projects .projCard:hover .projPicture .projectPhotoTools:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #projects .projPicture:focus-within .projectPhotoTools:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:1!important}
html body #projects .projInitials .projectThumbHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-accent)!important}
/* ===== Batch 7 - Survey / Design, to the approved mockup (docs/design/app-page-designs/06-survey) =====
   One toolbar row; the counts and the surveys on the left; the chosen survey on the right with each system's completion
   and the handoff. */
html body main>.content:has(>#design.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #design .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #design .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #design .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
html body #design .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #design .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #design .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #design .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #design .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important;min-height:var(--control-height-sm)!important}
html body #design .surveySearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:220px!important;max-width:100%!important;height:var(--control-height-sm)!important;font-size:var(--text-small)!important}
html body #design .surveyLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:460px minmax(0,1fr)!important;gap:16px!important;padding:16px 20px!important;align-items:start!important}
html body #design .surveyList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important}
html body #design .surveyCounts:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1.4fr 1.2fr!important;gap:8px!important;margin-bottom:6px!important}
html body #design .surveyCounts>div:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;padding:10px 12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #design .surveyCounts b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #design .surveyCounts span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #design .surveyOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #design .surveyItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;width:100%!important;padding:12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important;min-height:0!important}
html body #design .surveyItem.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #design .surveyItemTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important}
html body #design .surveyItem small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #design .surveyItemBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important}
html body #design .surveyItemBar i:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;height:5px!important;border-radius:var(--radius-pill)!important;background:var(--color-border)!important;overflow:hidden!important;display:block!important}
html body #design .surveyItemBar em:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;height:100%!important;background:var(--color-status-new)!important}
html body #design .surveyItemBar b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important}
html body #design .surveyAnother:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:1px dashed var(--color-border-strong)!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #design .surveyDetail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:14px!important;min-width:0!important}
html body #design .surveyHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
html body #design .surveyHead h2:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #design .surveyCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;padding:14px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #design .surveySys:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 48px!important;align-items:center!important;column-gap:12px!important;row-gap:2px!important}
html body #design .surveySysName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body #design .surveySysBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:5px!important;border-radius:var(--radius-pill)!important;background:var(--color-border)!important;overflow:hidden!important;display:block!important}
html body #design .surveySysBar i:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;height:100%!important;background:var(--color-status-new)!important}
html body #design .surveySysBar i.isDone:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #design .surveySys b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;text-align:right!important}
html body #design .surveySys small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1 / -1!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #design .surveySteps:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #design .surveyStep:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:0!important;background:none!important;box-shadow:none!important;padding:2px 0!important;min-height:0!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #design .surveyStep.isDone:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important;font-weight:var(--weight-semibold)!important}
html body #design .surveyProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;padding:8px 10px!important;border:1px dashed var(--color-warning)!important;border-radius:var(--radius)!important;color:var(--color-warning)!important;font-size:var(--text-small)!important}
html body #design .surveyDanger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-end!important}
@media(max-width:1100px){
  html body #design .surveyLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:640px){
  html body #design .surveyLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:12px!important}
  html body #design .surveyCounts:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body #design .surveySearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important}
}
/* ===== Batch 7 - Search everything (Ctrl K): the box in the top bar and its dialog (owner, 2026-09-21) ===== */
html body header.globalUtilityHeader .searchEverything:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;width:280px!important;max-width:34vw!important;height:var(--control-height-sm)!important;min-height:0!important;padding:0 12px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;box-shadow:none!important}
html body header.globalUtilityHeader .searchEverything span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body header.globalUtilityHeader .searchEverything kbd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-family:var(--font-sans)!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important;background:none!important;border:0!important}
html body header.globalUtilityHeader .searchEverything+.shellHeaderActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:12px!important}
html body .searchDialog .searchBox:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;min-width:min(640px,86vw)!important}
html body .searchDialog #searchInput:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;font-size:var(--text-body)!important}
html body .searchDialog .searchResults:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;max-height:60vh!important;overflow:auto!important}
html body .searchDialog .searchGroup h4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0 0 4px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body .searchDialog .searchItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important;width:100%!important;padding:7px 10px!important;border:1px solid transparent!important;border-radius:var(--radius)!important;background:transparent!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important;min-height:0!important}
html body .searchDialog .searchItem.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body .searchDialog .searchItem:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body .searchDialog .searchItem small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body .searchDialog .searchHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;margin:0!important}
@media(max-width:820px){html body header.globalUtilityHeader .searchEverything:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:40px!important;padding:0!important;justify-content:center!important}html body header.globalUtilityHeader .searchEverything span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body header.globalUtilityHeader .searchEverything kbd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}html body header.globalUtilityHeader .searchEverything:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{content:'\2315'!important;color:var(--color-text)!important}}
/* Batch 7: the Security part of the Edit user dialog - sign out everywhere, reset two-step (owner, 2026-09-21) */
html body #modal .userSecurity:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-top:14px!important;padding-top:12px!important;border-top:1px solid var(--color-border)!important;display:flex!important;flex-direction:column!important;gap:8px!important}
html body #modal .userSecurity h4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #modal .userSecurityRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:8px!important;flex-wrap:wrap!important}
html body #modal .userSecurity small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
/* Batch 7 Calendar: with the People chip the toolbar still fits one row at 1920 - narrower filters, tighter groups */
html body #calendar .calFilter:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:128px!important}
html body #calendar .calToolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:8px 10px!important}
html body #calendar .calToolbar .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 10px!important}
html body #calendar .calRangeTitle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important}
/* Batch 7 Calendar: Unscheduled grouped by project - one heading per project (owner, 2026-09-21) */
html body #calendar .calSideGroup:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;margin:8px 0 2px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
/* ===== Batch 7 - Material Staging, to the approved mockup (docs/design/app-page-designs/10-staging) =====
   Five columns (the approved mapping of the nine statuses), Board or List, Print pick list. */
html body main>.content:has(>#staging.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #staging .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #staging .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #staging .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important}
html body #staging .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #staging .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #staging .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #staging .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #staging .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important;min-height:var(--control-height-sm)!important}
html body #staging .stagingBoard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;padding:16px 20px!important;align-items:stretch!important;min-height:calc(100vh - 110px)!important}
html body #staging .stagingCol:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important}
html body #staging .stagingCol h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
html body #staging .stagingCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-weight:var(--weight-regular)!important}
html body #staging .stagingCards:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding:8px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;min-height:120px!important}
html body #staging .stagingEmpty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:4px!important;font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #staging .stagingCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:flex!important;flex-direction:column!important;gap:2px!important;padding:9px 34px 9px 11px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;cursor:grab!important}
html body #staging .stagingCard b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;overflow-wrap:anywhere!important}
html body #staging .stagingCard small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #staging .stagingCard .stagingWhere:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-accent)!important}
html body #staging .stagingCard .stagingProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #staging .stagingMenuWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:6px!important;right:6px!important}
html body #staging .stagingMove:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:26px!important;height:24px!important;min-height:0!important;padding:0!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #staging .stagingMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:calc(100% + 4px)!important;right:0!important;z-index:40!important;display:flex!important;flex-direction:column!important;min-width:180px!important;padding:4px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;box-shadow:var(--ios-shadow)!important}
html body #staging .stagingMenu[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #staging .stagingMenu button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-content:flex-start!important;text-align:left!important;border:0!important;background:transparent!important;color:var(--color-text)!important;box-shadow:none!important}
html body #staging .stagingMenu button:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body #staging .dashDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;flex:none!important;width:10px!important;height:10px!important;border-radius:50%!important;background:var(--color-status-new)!important}
html body #staging .dashDot.tone-in_progress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #staging .dashDot.tone-waiting:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-waiting)!important}
html body #staging .dashDot.tone-teal:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-transit)!important}
html body #staging .dashDot.tone-completed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
@media(max-width:1100px){
  html body #staging .stagingBoard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(5,minmax(220px,1fr))!important;overflow-x:auto!important}
}
@media(max-width:640px){
  html body #staging .stagingBoard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important;padding:12px!important;min-height:0!important}
}
/* ===== Batch 7 - Administration, to the approved mockup (docs/design/app-page-designs/29-admin-users) =====
   The sections as a list on the left; Users & access with a filter row, the people and a User / Sessions / Activity panel. */
html body main>.content:has(>#admin.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #admin .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #admin .adminHub:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:0!important;align-items:stretch!important;min-height:calc(100vh - 48px)!important}
html body #admin .adminHubTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important;padding:14px 10px!important;border:0!important;border-right:1px solid var(--color-border)!important;background:var(--color-surface)!important;overflow:visible!important;flex-wrap:nowrap!important}
html body #admin .adminHubTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{content:attr(aria-label)!important;display:block!important;margin:0 8px 8px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #admin .adminHubTab:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important;text-align:left!important;padding:8px 12px!important;min-height:0!important;border:1px solid transparent!important;border-radius:var(--radius)!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--text-body)!important;font-weight:var(--weight-regular)!important;box-shadow:none!important}
html body #admin .adminHubTab.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important;font-weight:var(--weight-semibold)!important}
html body #admin .adminHubPanel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;padding:0!important}
html body #admin .adminTabPanel[data-tab="users"] .adminTabHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #admin .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #admin .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
html body #admin .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #admin .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #admin .b7Select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--control-height-sm)!important;width:auto!important;font-size:var(--text-small)!important}
html body #admin .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #admin .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #admin .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important;min-height:var(--control-height-sm)!important}
html body #admin .visuallyHidden:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body #admin .adminUsersLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;align-items:stretch!important;min-height:calc(100vh - 110px)!important}
html body #admin .adminUsersTable:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:6px!important;padding:14px 20px!important;min-width:0!important}
html body #admin .adminUsersHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .adminUserRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.4fr)!important;align-items:center!important;gap:12px!important}
html body #admin .adminUsersHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 12px!important;font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #admin .adminUserRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;min-height:52px!important;padding:8px 12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #admin .adminUserRow.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #admin .adminUserRow.isOff:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.7!important}
html body #admin .adminUserWho:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
html body #admin .adminUserWho>span:last-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;min-width:0!important}
html body #admin .adminUserWho b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #admin .adminUserWho small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .adminUserHead small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #admin .dashAvatar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;flex:none!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border-strong)!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important}
html body #admin .adminRolePill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .admin2fa:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;padding:1px 8px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border-strong)!important;font-size:var(--text-small)!important}
html body #admin .admin2fa.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important;border-color:var(--color-success)!important}
html body #admin .admin2fa.isOff:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important;border:1px dashed var(--color-warning)!important}
html body #admin .adminUserPanel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:12px!important;padding:14px 16px!important;border-left:1px solid var(--color-border)!important;min-width:0!important}
html body #admin .adminUserHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important}
html body #admin .adminUserHead>span:last-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;min-width:0!important}
html body #admin .adminUserHead b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #admin .adminUserTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
html body #admin .adminUserTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:var(--control-height-sm)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;box-shadow:none!important}
html body #admin .adminUserTabs button.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important;font-weight:var(--weight-semibold)!important}
html body #admin .adminUserBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;font-size:var(--text-small)!important}
html body #admin .adminKV:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:130px minmax(0,1fr)!important;gap:10px!important}
html body #admin .adminKV span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #admin .adminKV b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-weight:var(--weight-regular)!important}
html body #admin .adminOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:8px 0 0!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #admin .adminActionsRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body #admin .adminList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:6px!important}
html body #admin .adminSession:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .adminActivity:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;padding:8px 10px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body #admin .adminActivity:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-direction:column!important;align-items:flex-start!important;gap:1px!important}
html body #admin .adminSession>span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;min-width:0!important}
html body #admin .adminSession small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .adminActivity small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .adminEmpty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #admin .adminNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important;margin:0!important}
html body #admin .adminNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-top:auto!important;padding-top:10px!important;border-top:1px solid var(--color-border)!important}
@media(max-width:1200px){
  html body #admin .adminUsersLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #admin .adminUserPanel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-left:0!important;border-top:1px solid var(--color-border)!important}
}
@media(max-width:900px){
  html body #admin .adminHub:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important}
  html body #admin .adminHubTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-direction:row!important;flex-wrap:wrap!important;border-right:0!important;border-bottom:1px solid var(--color-border)!important}
  html body #admin .adminHubTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{display:none!important}
  html body #admin .adminHubTab:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important}
  html body #admin .adminUsersHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #admin .adminUserRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr) auto!important}
  html body #admin .adminUserRow>span:nth-child(n+3):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
}
/* ===== Batch 7 - Network & Cabling, to the approved mockups (docs/design/app-page-designs/15, 19, 20) =====
   The switches and panels on the left, a face with its ports in blocks of 12, the ports in use, the selected port on the
   right. The RJ45 rule: orange + green = PoE + data, green = data only. No "Online" (no live status yet). */
html body main>.content:has(>#network.view.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important}
html body #network .pageHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #network .b7Toolbar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 14px!important;padding:8px 16px!important;margin:0!important;border-bottom:1px solid var(--color-border)!important;background:var(--color-surface)!important}
html body #network .b7Group:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
html body #network .b7GroupLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #network .b7Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important}
html body #network .b7Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:0!important;padding:0 12px!important;border-radius:var(--radius-pill)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important}
html body #network .b7Chip.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;font-weight:var(--weight-semibold)!important}
html body #network .b7Chip:disabled:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.6!important;cursor:default!important}
html body #network .b7Primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-strong)!important;color:var(--color-on-accent)!important;border-color:var(--color-accent-strong)!important;font-weight:var(--weight-semibold)!important;min-height:var(--control-height-sm)!important}
html body #network .nwCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.8!important;margin-left:2px!important}
html body #network .nwProblemsChip.hasProblems:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-warning)!important;color:var(--color-warning)!important}
html body #network .nwLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:260px minmax(0,1fr) 360px!important;align-items:stretch!important;min-height:calc(100vh - 110px)!important}
html body #network .nwLayout.isWide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:260px minmax(0,1fr)!important}
html body #network .nwList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;padding:14px 12px!important;border-right:1px solid var(--color-border)!important;background:var(--color-surface)!important;min-width:0!important;height:auto!important;position:static!important;overflow:visible!important}
html body #network .nwOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0 0 2px!important;font-size:var(--text-small)!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #network .nwDevice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;width:100%!important;min-height:0!important;padding:9px 11px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;text-align:left!important;box-shadow:none!important}
html body #network .nwDevice.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #network .nwDevice b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important;overflow-wrap:anywhere!important}
html body #network .nwDevice small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #network .nwMuted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #network .nwFaceHead small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-small)!important;color:var(--color-text-muted)!important}
html body #network .nwTag:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;margin-left:6px!important;padding:0 7px!important;border:1px solid var(--color-border-strong)!important;border-radius:var(--radius-pill)!important;font-style:normal!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;color:var(--color-text-muted)!important}
html body #network .nwAddRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:4px!important}
html body #network .nwMain:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:12px!important;padding:14px 18px!important;min-width:0!important}
html body #network .nwProblems:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:10px 14px!important;border:1px solid var(--color-warning)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important}
html body #network .nwProblems b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #network .nwProblems ul:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:4px 0 0!important;padding-left:18px!important}
html body #network .nwLink:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--color-accent)!important;text-align:left!important;text-decoration:underline!important;font-size:inherit!important;font-weight:inherit!important;box-shadow:none!important}
html body #network .nwFace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px 14px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #network .nwFaceHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important}
html body #network .nwFaceHead>div:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important}
html body #network .nwFaceHead b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;font-weight:var(--weight-semibold)!important}
html body #network .nwFaceActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-end!important}
html body #network .nwBlocks:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:flex-start!important}
html body #network .nwSfp:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:10px!important}
html body #network .nwBlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(var(--nw-cols),minmax(34px,auto))!important;gap:4px!important;padding:5px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important}
html body #network .nwPort:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-width:34px!important;white-space:nowrap!important;padding-left:4px!important;padding-right:4px!important;height:30px!important;min-height:0!important;padding:3px 0 0!important;border:2px solid var(--color-border)!important;border-radius:5px!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;font-weight:var(--weight-regular)!important;line-height:1.1!important;box-shadow:none!important}
html body #network .nwPort.isData:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-port-data)!important}
html body #network .nwPort.isPoeData:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-port-poe)!important}
html body #network .nwPort.isConfigured:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-style:dashed!important;border-color:var(--color-border-strong)!important}
html body #network .nwPort.isTrunk:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-shadow:inset 0 3px 0 var(--color-port-data)!important}
html body #network .nwPort.hasProblem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-style:dashed!important;border-color:var(--color-warning)!important}
html body #network .nwPort.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:1px!important;background:var(--color-accent-soft)!important}
html body #network .nwLeds:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:4px!important;right:4px!important;bottom:3px!important;display:flex!important;gap:2px!important}
html body #network .nwLed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 0!important;height:3px!important;border-radius:2px!important}
html body #network .nwLed.poe:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-port-poe)!important}
html body #network .nwLed.data:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-port-data)!important}
html body #network .nwFiberRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
html body #network .nwPort.nwFiber:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:48px!important;height:42px!important;gap:4px!important;padding-top:5px!important}
html body #network .nwPort.nwFiber.isSm:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-shadow:inset 0 3px 0 var(--color-fiber-sm)!important}
html body #network .nwPort.nwFiber.isMm:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-shadow:inset 0 3px 0 var(--color-fiber-mm)!important}
html body #network .nwPort.nwFiber.isFiberUsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-port-data)!important}
html body #network .nwStrands:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:4px!important}
html body #network .nwStrand:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;flex:none!important;width:10px!important;height:10px!important;border-radius:50%!important;border:1px solid var(--color-border-strong)!important}
html body #network .nwStrand.s1:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-1)!important}
html body #network .nwStrand.s2:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-2)!important}
html body #network .nwStrand.s3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-3)!important}
html body #network .nwStrand.s4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-4)!important}
html body #network .nwStrand.s5:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-5)!important}
html body #network .nwStrand.s6:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-6)!important}
html body #network .nwStrand.s7:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-7)!important}
html body #network .nwStrand.s8:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-8)!important}
html body #network .nwStrand.s9:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-9)!important}
html body #network .nwStrand.s10:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-10)!important}
html body #network .nwStrand.s11:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-11)!important}
html body #network .nwStrand.s12:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-strand-12)!important}
html body #network .nwTableWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow-x:auto!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important}
html body #network .nwTable:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;border-collapse:collapse!important;font-size:var(--text-small)!important}
html body #network .nwTable th:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:8px 12px!important;text-align:left!important;font-weight:var(--weight-semibold)!important;letter-spacing:var(--tracking-overline)!important;text-transform:uppercase!important;color:var(--color-text-muted)!important;border-bottom:1px solid var(--color-border)!important}
html body #network .nwTable td:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:8px 12px!important;border-bottom:1px solid var(--color-border)!important;vertical-align:middle!important;color:var(--color-text)!important}
html body #network .nwTable td small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;color:var(--color-text-muted)!important}
html body #network .nwTable tr.isOn td:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important}
html body #network .nwTable tr.hasProblem td:first-child:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){box-shadow:inset 3px 0 0 var(--color-warning)!important}
html body #network .nwRowBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:0!important;padding:2px 8px!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--text-small)!important;box-shadow:none!important}
html body #network .nwTest.tone-pass:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important}
html body #network .nwTest.tone-fail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important;font-weight:var(--weight-semibold)!important}
html body #network .nwTest.tone-none:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #network .nwSectionHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important}
html body #network .nwSectionHead b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #network .nwEmpty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:24px!important;text-align:center!important;color:var(--color-text-muted)!important;border:1px dashed var(--color-border)!important;border-radius:var(--radius)!important}
html body #network .nwLegend:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:8px 12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;font-size:var(--text-small)!important}
html body #network .nwLegend summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){cursor:pointer!important;font-weight:var(--weight-semibold)!important}
html body #network .nwLegend summary small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:6px!important;font-weight:var(--weight-regular)!important;color:var(--color-text-muted)!important}
html body #network .nwLegendItems:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #network .nwStrandKey:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 16px!important;margin:8px 0 0!important}
html body #network .nwLegendItem:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #network .nwStrandLine:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important}
html body #network .nwPort.nwSwatch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;width:26px!important;height:18px!important;padding:0!important}
html body #network .nwPort.nwSwatch.nwFiber:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:26px!important;height:18px!important;padding:0!important}
html body #network .nwSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;padding:14px 16px!important;border-left:1px solid var(--color-border)!important;background:var(--color-surface)!important;min-width:0!important;height:auto!important;position:static!important;overflow:visible!important}
html body #network .nwSide h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:4px 0 0!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important}
html body #network .nwTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
html body #network .nwTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:var(--control-height-sm)!important;border:1px solid var(--color-border)!important;background:var(--color-surface)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;box-shadow:none!important}
html body #network .nwTabs button.isOn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important;font-weight:var(--weight-semibold)!important}
html body #network .nwTabs button:disabled:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.5!important}
html body #network .nwKV:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;gap:7px 10px!important;margin:0!important;font-size:var(--text-small)!important}
html body #network .nwKV dt:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #network .nwKV dd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;min-width:0!important;overflow-wrap:anywhere!important;display:flex!important;flex-direction:column!important;gap:3px!important;align-items:flex-start!important}
html body #network .nwActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body #network .nwPortMap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0!important;margin:0!important}
@media(max-width:1300px){
  html body #network .nwLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:230px minmax(0,1fr)!important}
  html body #network .nwSide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1/-1!important;border-left:0!important;border-top:1px solid var(--color-border)!important}
}
@media(max-width:760px){
  html body #network .nwLayout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #network .nwLayout.isWide:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
  html body #network .nwList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;border-right:0!important;border-bottom:1px solid var(--color-border)!important}
  html body #network .nwList .nwOverline:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
  html body #network .nwDevice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 200px!important;width:200px!important}
  html body #network .nwAddRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;flex-wrap:nowrap!important;margin:0!important}
  html body #network .nwMain:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:12px!important}
  html body #network .nwFaceHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-direction:column!important}
}

/* ===== v3.48.1 - Plan Studio, from the owner's live test on Rink_T-02 (2026-09-21, group A) ===== */
/* A2 - handles as mockup 01: small and outlined, a different mark for each job, the hit area unchanged (20px mouse,
   44px finger). The visible mark is drawn by ::after inside a transparent target. */
html body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;border-color:transparent!important;color:transparent!important}
html body #plans .planMarker :is(.fovEdgeHandle,.resizeHandle) svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* the turn arrow sits on the blue mark */
html body #plans .planMarker .aimHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;position:absolute!important;left:50%!important;top:50%!important;width:10px!important;height:10px!important;margin:-5px 0 0 -5px!important;z-index:1!important;fill:none!important;stroke:var(--color-on-accent)!important;stroke-width:3!important;stroke-linecap:round!important;pointer-events:none!important}
html body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle)::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;box-sizing:border-box!important;pointer-events:none!important}
/* the cone edges (how wide it sees): a small white circle with a blue outline, as drawn */
html body #plans .planMarker .fovEdgeHandle::after{width:10px!important;height:10px!important;margin:-5px 0 0 -5px!important;border-radius:50%!important;background:var(--color-plan-paper)!important;border:2px solid var(--color-accent-strong)!important}
/* turning (and how far it sees): clearly different - a filled blue circle with a turn arrow */
html body #plans .planMarker .aimHandle::after{width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;border-radius:50%!important;border:2px solid var(--color-plan-paper)!important;background-color:var(--color-accent-strong)!important}
/* the size of the whole symbol: a small square at its corner - neither a circle nor on the cone */
html body #plans .planMarker .resizeHandle::after{width:9px!important;height:9px!important;margin:-4.5px 0 0 -4.5px!important;border-radius:2px!important;background:var(--color-plan-paper)!important;border:2px solid var(--color-accent-strong)!important}
html body #plans .planMarker :is(.aimHandle,.fovEdgeHandle,.resizeHandle):hover::after{box-shadow:0 0 0 3px var(--color-accent-soft)!important}
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */
  html:where(.inputTouch) body #plans .planMarker .fovEdgeHandle::after{width:14px!important;height:14px!important;margin:-7px 0 0 -7px!important}
  html:where(.inputTouch) body #plans .planMarker .aimHandle::after{width:20px!important;height:20px!important;margin:-10px 0 0 -10px!important}
  html:where(.inputTouch) body #plans .planMarker .aimHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:12px!important;height:12px!important;margin:-6px 0 0 -6px!important}
  html:where(.inputTouch) body #plans .planMarker .resizeHandle::after{width:13px!important;height:13px!important;margin:-6.5px 0 0 -6.5px!important}

/* A1 - the lock badge unlocks a locked symbol for people who may edit it; a selected locked symbol says so */
html body #plans .planMarker .markerLockBadge.canUnlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){pointer-events:auto!important;cursor:pointer!important}
html body #plans .planMarker .markerLockBadge.canUnlock::before{content:""!important;position:absolute!important;inset:-6px!important}
html body #plans .planMarker .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:calc(50% - var(--annotation-top,20px) - 8px)!important;transform:translate(-50%,-100%) scale(var(--plan-compensation,1))!important;transform-origin:50% 100%!important;white-space:nowrap!important;padding:2px 8px!important;border-radius:var(--radius-pill)!important;background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important;font-size:var(--text-small)!important;line-height:1.4!important;box-shadow:none!important;z-index:4!important;pointer-events:none!important}
html body #plans .planMarker .markerLockHint.canUnlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){pointer-events:auto!important;cursor:pointer!important;border-color:var(--color-accent)!important}
/* A4 - the collapse tabs are the panels' own edges: full height, in the panel's colour, never on the drawing */
@media(min-width:900px){
  html body.planDesk #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:var(--plan-rail-col,56px) var(--plan-palette-col,0px) 20px minmax(0,1fr) 20px var(--plan-inspector-col,340px)!important}
  html body.planDesk #plans .planPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){align-self:stretch!important;height:auto!important;width:20px!important;border-radius:0!important;border-top:0!important;border-bottom:0!important;background:var(--color-surface)!important;color:var(--color-text-muted)!important;box-shadow:none!important}
  html body.planDesk #plans .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-left:0!important;border-right:1px solid var(--color-border)!important}
  html body.planDesk #plans .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-right:0!important;border-left:1px solid var(--color-border)!important}
  html body.planDesk #plans .planPanelHandle:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;background:var(--color-surface-2)!important}
}
/* A5 - the zoom readout has its own surface, like the buttons beside it: it read on the dark margin but vanished on the
   white paper whenever the sheet filled the view */
html body #plans .planSheetNav .zoomReadout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;height:var(--control-height-sm)!important;padding:0 8px!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;border:1px solid var(--color-border-strong)!important;color:var(--color-text)!important;font-weight:var(--weight-semibold)!important}
/* the plan area never scrolls (panning moves the drawing): a scroll there carried the sheet bar into the plan */
html body #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:clip!important}

/* ===== v3.49.0 - Plan Studio build to the approved design (mockups 01-07 + D1-D8, owner 2026-09-21) ===== */
/* the tiled plan image: a light base level of the whole sheet, sharper tiles on top where the zoom needs them */
html body #plans .planSurface .planImageLayer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:0!important;top:0!important;width:1000px!important;background:var(--color-plan-paper)!important;pointer-events:none!important;overflow:hidden!important}
html body #plans .planSurface .planImageLayer img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;display:block!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;pointer-events:none!important;user-select:none!important;image-rendering:auto!important}
html body #plans .planSurface .planImageLayer img.planBaseImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;width:1000px!important;height:auto!important}
html body #plans .planSurface .planTileDetail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;inset:0!important}
/* D1 - under 8 px a symbol is a coloured dot in its status colour; the touch area around it stays */
html body #plans .planMarker .markerDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker.asDot .markerDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;position:absolute!important;left:50%!important;top:50%!important;width:var(--dot-size,6px)!important;height:var(--dot-size,6px)!important;border-radius:50%!important;background:var(--status-color,var(--color-status-new))!important;transform:translate(-50%,-50%)!important;box-shadow:0 0 0 calc(1px * var(--plan-compensation,1)) var(--color-plan-paper)!important;pointer-events:none!important}
html body #plans .planMarker.asDot .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:hidden!important}
html body #plans .planMarker.asDot .cameraFov:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.55!important}
/* D1 - under 8 px text a label hides; hover or selection shows it at a readable size. Labels are never cut (D3). */
html body #plans .planMarker .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:none!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
html body #plans .planMarker.labelTiny .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:hidden!important}
html body #plans .planMarker.labelTiny .labelLeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:hidden!important}
html body #plans .planMarker.labelTiny:hover .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker.labelTiny.selected .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:visible!important;transform:translate(calc(-50% + var(--label-x,0px)),var(--label-y,0px)) scale(var(--label-read,1))!important;z-index:5!important}
html body #plans .planMarker.labelTiny:hover,html body #plans .planMarker.labelTiny.selected{z-index:30!important}
/* D2 - the one app confirm dialog (replaces the browser's confirm() in Plan Studio) */
html body dialog.appConfirmDialog:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:min(440px,calc(100vw - 32px))!important;max-width:none!important;padding:0!important;border:1px solid var(--color-border-strong)!important;border-radius:12px!important;background:var(--color-surface)!important;color:var(--color-text)!important;box-shadow:var(--shadow-plan-card)!important}
html body dialog.appConfirmDialog::backdrop{background:var(--color-scrim)}
html body dialog.appConfirmDialog .appConfirmForm:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:10px!important;padding:18px 18px 16px!important;margin:0!important}
html body dialog.appConfirmDialog .appConfirmTitle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold,600)!important;line-height:1.3!important}
html body dialog.appConfirmDialog .appConfirmBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important;line-height:1.5!important}
html body dialog.appConfirmDialog .appConfirmFoot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-end!important;gap:8px!important;margin-top:8px!important}
html body dialog.appConfirmDialog .appConfirmFoot button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--control-height,36px)!important;padding:0 14px!important;border-radius:var(--radius,8px)!important;font-weight:var(--weight-semibold,600)!important;cursor:pointer!important}
html body dialog.appConfirmDialog .appConfirmCancel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border-strong)!important}
html body dialog.appConfirmDialog .appConfirmOk.primary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-accent)!important}
html body dialog.appConfirmDialog .appConfirmOk.danger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-danger)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-danger)!important}
/* D2 - handles: small white dots with a blue ring, only on the cone (aim on the axis, the two view-angle edges), and a
   separate rotate handle outside the symbol. Fixed size on screen; a 44 px touch area on a touch screen. */
html body #plans .planMarker .aimHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker .fovEdgeHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:14px!important;height:14px!important;margin:-7px 0 0 -7px!important;padding:0!important;border-radius:50%!important;background:var(--color-plan-paper)!important;border:2px solid var(--color-accent)!important;box-shadow:var(--shadow-plan-handle)!important;color:transparent!important;cursor:grab!important;z-index:12!important}
html body #plans .planMarker .aimHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker .fovEdgeHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker .rotateHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--color-plan-paper)!important;border:2px solid var(--color-accent)!important;box-shadow:var(--shadow-plan-handle)!important;color:var(--color-accent)!important;cursor:grab!important;z-index:12!important;transform:rotate(var(--rot-deg,0deg)) translateY(calc(-1 * var(--rot-r,24px))) rotate(calc(-1 * var(--rot-deg,0deg))) scale(var(--plan-compensation,1))!important;pointer-events:auto!important}
html body #plans .planMarker .rotateHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:11px!important;height:11px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.6!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body #plans .planMarker .aimHandle:hover,html body #plans .planMarker .fovEdgeHandle:hover,html body #plans .planMarker .rotateHandle:hover{background:var(--color-accent-soft)!important}
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */html:where(.inputTouch) body #plans .planMarker .aimHandle::before,html:where(.inputTouch) body #plans .planMarker .fovEdgeHandle::before,html:where(.inputTouch) body #plans .planMarker .rotateHandle::before{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:44px!important;height:44px!important;transform:translate(-50%,-50%)!important;border-radius:50%!important}
html body #plans .planMarker .resizeHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* D2 - states. Selected: a dashed ring in the accent colour around the status ring. Locked and selected: the same ring
   in amber, and no handles. Several selected: every one gets the ring, none gets handles. */
html body #plans .planMarker:not(.detection).selected .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:calc(1.6px * var(--core-unit,1)) dashed var(--color-accent)!important;outline-offset:calc(3px * var(--core-unit,1))!important}
html body #plans .planMarker:not(.detection).selected.markerLocked .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline-color:var(--color-warning)!important}
html body #plans .planMarker:not(.detection).marqueeSelected .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:calc(1.6px * var(--core-unit,1)) dashed var(--color-accent)!important;outline-offset:calc(3px * var(--core-unit,1))!important}
/* the lock badge: amber, on the symbol's lower right, a real button when you may unlock */
html body #plans .planMarker .markerLockBadge.unlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker .markerLockBadge.locked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--color-plan-lock)!important;color:var(--color-on-plan-lock)!important;border:1.5px solid var(--color-plan-paper)!important;box-shadow:var(--shadow-plan-handle)!important;transform:translate(var(--lock-offset,10px),var(--lock-offset,10px)) scale(var(--plan-compensation,1))!important;z-index:11!important;opacity:1!important;visibility:visible!important}
html body #plans .planMarker .markerLockBadge.locked.canUnlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){cursor:pointer!important;pointer-events:auto!important}
html body #plans .planMarker .markerLockBadge.locked.canUnlock:hover{filter:brightness(1.12)!important}
html body #plans .planMarker .markerLockBadge.locked svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:10px!important;height:10px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important}
html body #plans .planMarker.asDot .markerLockBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* who locked it, while it is selected: a small dark card beside the badge */
html body #plans .planMarker .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;display:flex!important;flex-direction:column!important;gap:1px!important;padding:5px 9px!important;border-radius:6px!important;background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;font-size:var(--text-small)!important;line-height:1.3!important;white-space:nowrap!important;box-shadow:var(--shadow-plan-bar)!important;pointer-events:none!important;transform-origin:0 0!important;transform:translate(calc(var(--lock-offset,10px) + 10px * var(--plan-compensation,1)),calc(var(--lock-offset,10px) + 2px * var(--plan-compensation,1))) scale(var(--plan-compensation,1))!important;z-index:40!important}
html body #plans .planMarker .markerLockHint b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-plan-lock-note)!important;font-weight:600!important}
html body #plans .planMarker .markerLockHint small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-on-plan-chip-muted)!important;font-size:var(--text-small)!important}
/* D2 - the selection bar: bottom of the plan, above the sheet bar; its menus open upwards */
html body #plans .planSelectionBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:12px!important;right:12px!important;bottom:62px!important;z-index:30!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important;min-height:44px!important;padding:5px 8px 5px 12px!important;border-radius:10px!important;background:color-mix(in srgb,var(--color-surface) 92%,var(--color-accent))!important;border:1px solid var(--color-accent)!important;box-shadow:var(--shadow-plan-bar)!important;color:var(--color-text)!important;overflow:visible!important}
html body #plans .planSelectionBar .selCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;font-weight:600!important}
html body #plans .planSelectionBar .selSummary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;max-width:220px!important}
html body #plans .planSelectionBar .selDivider:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:1px!important;align-self:stretch!important;margin:4px 4px!important;background:var(--color-border-strong)!important}
html body #plans .planSelectionBar .planMenu > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planSelectionBar .selAction:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planSelectionBar .selClear:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important;height:32px!important;padding:0 11px!important;border-radius:8px!important;background:var(--color-surface)!important;border:1px solid var(--color-border-strong)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;white-space:nowrap!important;cursor:pointer!important;list-style:none!important}
html body #plans .planSelectionBar .selClear:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;background:transparent!important;color:var(--color-text-muted)!important}
html body #plans .planSelectionBar .planMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html body #plans .planSelectionBar .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){top:auto!important;bottom:calc(100% + 6px)!important;left:0!important;right:auto!important;min-width:170px!important;max-height:min(360px,60vh)!important;overflow:auto!important}
html body #plans .planSelectionBar .statusDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;width:9px!important;height:9px!important;border-radius:50%!important;margin-right:8px!important;background:var(--status-color)!important}
html body #plans .planMarker .markerLockBadge.locked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){z-index:60!important}
/* the badge's larger hit area grows only away from the symbol (down and right) - a click on the symbol must select it,
   never unlock it (v3.48.1's all-round area reached the symbol's centre at 250%) */
html body #plans .planMarker .markerLockBadge.canUnlock::before{inset:-2px -8px -8px -2px!important}
/* (D2 handles, continued) the legacy "scale" property shrank the rotate handle a second time; one size for all */
html body #plans .planMarker .aimHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker .fovEdgeHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker .rotateHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){scale:none!important;width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;margin:-7px 0 0 -7px!important;box-sizing:border-box!important;border-width:2px!important;background:var(--color-plan-paper)!important}
html body #plans .planMarker .rotateHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:9px!important;height:9px!important}
/* D3 - collapsing the panels: the controls live inside the panels (« at the bottom of the tool rail, » at the end of the
   right panel's tabs); a collapsed panel is a 14 px strip in its own column with one button. Nothing floats over the plan.
   Every part has its own column, so a hidden part never moves the plan into another one. */
@media(min-width:900px){
  html body.planDesk #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:var(--plan-rail-col,56px) var(--plan-palette-col,0px) var(--plan-strip-left,0px) minmax(0,1fr) var(--plan-strip-right,0px) var(--plan-inspector-col,340px)!important;column-gap:0!important}
  html body.planDesk #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-strip-left:14px}
  html body.planDesk #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-strip-right:14px}
  html body.planDesk #plans .planWorkspace > #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1!important;grid-row:1!important}
  html body.planDesk #plans .planWorkspace > #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:2!important;grid-row:1!important}
  html body.planDesk #plans .planWorkspace > .toolsPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:3!important;grid-row:1!important}
  html body.planDesk #plans .planWorkspace > .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:4!important;grid-row:1!important}
  html body.planDesk #plans .planWorkspace > .inspectorPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:5!important;grid-row:1!important}
  html body.planDesk #plans .planWorkspace > .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:6!important;grid-row:1!important}
  html body.planDesk #plans .planPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;transform:none!important;align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;width:14px!important;min-width:14px!important;height:auto!important;padding:0!important;margin:0!important;border-radius:0!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;line-height:1!important;cursor:pointer!important;box-shadow:none!important}
  html body.planDesk #plans .planPanelHandle[hidden]{display:none!important}
  html body.planDesk #plans .planPanelHandle small{display:none!important}
  html body.planDesk #plans .planPanelHandle:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important}
}
html body #plans .planCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border-radius:7px!important;background:var(--color-surface)!important;border:1px solid var(--color-border-strong)!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important;line-height:1!important;cursor:pointer!important}
html body #plans .planCollapseBtn:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;background:var(--color-surface-2)!important}
html body #plans .railCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:auto auto 6px!important;flex:none!important}
html body #plans .planSideTabs .inspectorCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;flex:none!important;align-self:center!important}
/* D3 - "Reset label": a small chip beside a moved label while its symbol is selected, always fully visible, one size
   on screen whatever the zoom (the mockup cut it off at its picture's edge - the app does not) */
html body #plans .planMarker .label .labelReset:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:100%!important;top:50%!important;margin-left:6px!important;display:inline-flex!important;align-items:center!important;gap:4px!important;padding:3px 8px!important;border-radius:6px!important;background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-plan-chip-border)!important;font-size:var(--text-small)!important;font-weight:500!important;line-height:1.2!important;white-space:nowrap!important;cursor:pointer!important;pointer-events:auto!important;transform-origin:0 50%!important;transform:translateY(-50%) scale(calc(var(--plan-compensation,1) / var(--label-applied,1)))!important;z-index:50!important;box-shadow:var(--shadow-plan-bar)!important}
html body #plans .planMarker .label .labelReset:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-plan-chip-hover)!important}
/* D8 - detections: small, amber, and always below the devices */
html body #plans .planMarker.detection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){z-index:2!important}
html body #plans .planMarker:not(.detection):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){z-index:6!important}
html body #plans .planMarker:not(.detection).selected:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){z-index:9!important}
/* a found symbol: a small amber ring with a dot, fixed size on screen */
html body #plans .planMarker.detection:not(.positionReview) .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;border:0!important;box-shadow:inset 0 0 0 calc(2px * var(--core-unit,1)) var(--color-plan-detection)!important;border-radius:50%!important;color:transparent!important}
html body #plans .planMarker.detection:not(.positionReview) .markerCore *:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:hidden!important}
/* a label-only result: an amber dashed box round the text on the drawing (the text scales with the plan, so does the box) */
html body #plans .planMarker.detection.positionReview .detBox:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;width:var(--det-w,8px)!important;height:var(--det-h,8px)!important;transform:translate(-50%,-50%)!important;border:calc(1.5px * var(--plan-compensation,1)) dashed var(--color-plan-detection)!important;border-radius:calc(2px * var(--plan-compensation,1))!important;background:color-mix(in srgb,var(--color-plan-detection) 8%,transparent)!important;pointer-events:none!important}
html body #plans .planMarker.detection.positionReview .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:0!important}
html body #plans .planMarker.detection.selected .detBox:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-style:solid!important;box-shadow:0 0 0 calc(3px * var(--plan-compensation,1)) color-mix(in srgb,var(--color-plan-detection) 35%,transparent)!important}
html body #plans .planMarker.detection.selected:not(.positionReview) .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:calc(1.6px * var(--core-unit,1)) dashed var(--color-plan-detection)!important;outline-offset:calc(3px * var(--core-unit,1))!important}
/* already placed: only a small grey check, which never takes a click */
html body #plans .planDetectionPlaced:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;display:flex!important;align-items:center!important;gap:4px!important;transform:translate(10px,-22px) scale(var(--plan-pin-comp,1))!important;transform-origin:0 50%!important;pointer-events:none!important;color:var(--color-plan-placed)!important;font-size:var(--text-small)!important;white-space:nowrap!important;z-index:1!important}
html body #plans .planDetectionPlaced .placedCheck:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-grid!important;place-items:center!important;width:14px!important;height:14px!important;border-radius:50%!important;border:1px dashed var(--color-plan-placed)!important;font-size:var(--text-small)!important;background:var(--color-plan-paper)!important}
/* the review card beside a detection */
html body #plans .planReviewCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;z-index:35!important;width:240px!important;display:flex!important;flex-direction:column!important;gap:6px!important;padding:12px!important;border-radius:10px!important;background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-plan-chip-border)!important;box-shadow:var(--shadow-plan-card)!important}
html body #plans .planReviewCard .reviewCardHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
html body #plans .planReviewCard .reviewCardHead b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-body)!important;font-weight:600!important}
html body #plans .planReviewCard small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-on-plan-chip-muted)!important;font-size:var(--text-small)!important}
html body #plans .planReviewCard .reviewCardActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:4px!important}
html body #plans .planReviewCard .reviewCardActions button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;padding:0 8px!important;border-radius:7px!important;background:var(--color-plan-chip-hover)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-plan-chip-border)!important;font-size:var(--text-small)!important;white-space:nowrap!important;cursor:pointer!important}
html body #plans .planReviewCard .reviewCardActions .primaryAction:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent)!important;border-color:var(--color-accent)!important}
html body #plans .planReviewCard .reviewCardActions .reviewNext:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:transparent!important;border-color:transparent!important;color:var(--color-on-plan-chip-muted)!important}
html body #plans .planReviewCard .reviewCardActions button:disabled{opacity:.45!important;cursor:default!important}
/* (D3, continued) a panel strip exists only while its panel is collapsed - the hidden attribute must win over the strip's
   display rule; and the » button leaves the four tabs room to show their names whole */
html body.planDesk #plans .planWorkspace > .planPanelHandle[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:3px!important}
html body #plans .planSideTabs button[role="tab"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;padding:0 6px!important}
html body #plans .planSideTabs .inspectorCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 24px!important;width:24px!important;min-width:24px!important;height:28px!important;padding:0!important}

html body #plans .planMarker.detection:not(.positionReview) .markerCore::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:26%!important;height:26%!important;border-radius:50%!important;background:var(--color-plan-detection)!important;transform:translate(-50%,-50%)!important}
html body #plans .planLabelNotice[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}

/* ===== v3.50.0 - Plan Studio build, part 2 (D4 D5 D6 D7 and mockups 01-07, owner 2026-09-21) ===== */
/* D5 - the device workspace inside Plan Studio: the plan on the left, the workspace on the right; the toolbar rows,
   the tool rail and the right panel step aside while it is open */
html body #plans .planWorkspace.deviceWsOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(320px,36%) minmax(0,1fr)!important;column-gap:0!important}
html body #plans .planWorkspace.deviceWsOpen > :is(#planToolRail,#planToolFlyoutHost,.planPanelHandle,.planInspector):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planWorkspace.deviceWsOpen > .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:1!important;grid-row:1!important}
html body #plans .planWorkspace.deviceWsOpen > .planDeviceWsHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-column:2!important;grid-row:1!important;min-width:0!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:var(--color-bg)!important;border-left:1px solid var(--color-border)!important}
html body #plans:has(.planWorkspace.deviceWsOpen) .desktopPlanControls{display:none!important}
html body #plans .planCanvasWrap .wsBackToPlan:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:12px!important;top:12px!important;z-index:40!important;height:var(--control-height-sm)!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-plan-chip-border)!important;font-size:var(--text-small)!important;cursor:pointer!important}
html body #plans .planDeviceWs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;min-height:0!important;height:100%!important;color:var(--color-text)!important}
html body #plans .planDeviceWs .wsHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:12px!important;padding:16px 20px 10px!important}
html body #plans .planDeviceWs .wsRing:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:44px!important;height:44px!important;border-radius:50%!important;background:var(--color-plan-paper)!important;border:4px solid var(--status-color,var(--color-status-new))!important}
html body #plans .planDeviceWs .wsTitle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;flex:0 1 auto!important}
html body #plans .planDeviceWs .wsTitle h2:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--text-section)!important;font-weight:var(--weight-semibold)!important;line-height:1.2!important}
html body #plans .planDeviceWs .wsTitle small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #plans .planDeviceWs .wsHead .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important}
html body #plans .planDeviceWs .wsActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:0 20px 10px!important;align-items:center!important}
html body #plans .planDeviceWs .wsActions > button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planDeviceWs .wsActions .planMenu > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--control-height-sm)!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;border:1px solid var(--color-border-strong)!important;color:var(--color-text)!important;font-size:var(--text-small)!important;display:inline-flex!important;align-items:center!important;gap:6px!important;cursor:pointer!important;list-style:none!important}
html body #plans .planDeviceWs .wsActions .startWork:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important;border-color:var(--color-status-completed)!important;color:var(--color-on-status)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planDeviceWs .wsActions .wsMoreMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;position:relative!important}
html body #plans .planDeviceWs .wsActions .wsMoreMenu .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:0!important;left:auto!important}
html body #plans .planDeviceWs .wsTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:2px!important;padding:0 20px!important;border-bottom:1px solid var(--color-border)!important;overflow-x:auto!important;flex:none!important}
html body #plans .planDeviceWs .wsTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:38px!important;padding:0 12px!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;color:var(--color-text-muted)!important;font-size:var(--text-body)!important;white-space:nowrap!important;cursor:pointer!important}
html body #plans .planDeviceWs .wsTabs button.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;border-bottom-color:var(--color-accent)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planDeviceWs .wsBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:16px 20px!important}
html body #plans .planDeviceWs .wsGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;gap:14px!important;align-items:start!important}
html body #plans .planDeviceWs :is(.wsCard,.wsSection):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:10px!important;padding:14px!important;min-width:0!important}
html body #plans .planDeviceWs .wsCardHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:8px!important}
html body #plans .planDeviceWs .wsCardHead small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;letter-spacing:.04em!important;text-transform:uppercase!important}
html body #plans .planDeviceWs .wsKV:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:max-content 1fr!important;gap:4px 16px!important;margin:0!important;font-size:var(--text-body)!important}
html body #plans .planDeviceWs .wsKV dt:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body #plans .planDeviceWs .wsKV dd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;min-width:0!important;overflow-wrap:anywhere!important}
html body #plans .planDeviceWs .wsTaskRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;padding:5px 0!important}
html body #plans .planDeviceWs .wsTaskRow .wsTaskTitle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important}
html body #plans .planDeviceWs .wsTaskRow small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;white-space:nowrap!important}
html body #plans .planDeviceWs :is(.wsTaskActions,.wsButtons):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;gap:6px!important;margin-left:8px!important}
html body #plans .planDeviceWs .wsList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:4px!important}
html body #plans .planDeviceWs .wsList li.good:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-success)!important}
html body #plans .planDeviceWs .wsList li.bad:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important}
html body #plans .planDeviceWs .wsPhotos:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:8px!important}
html body #plans .planDeviceWs .wsPhoto:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:92px!important;height:64px!important;border-radius:6px!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;display:flex!important;align-items:flex-end!important;padding:4px 6px!important;color:var(--color-text)!important;font-size:var(--text-small)!important;cursor:pointer!important}
html body #plans .planDeviceWs .wsPhotoAdd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){justify-content:center!important;align-items:center!important;border-style:dashed!important;font-size:var(--text-section)!important}
html body #plans .planDeviceWs .wsHistory:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:6px!important}
html body #plans .planDeviceWs .wsHistory time:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin-right:10px!important}
html body #plans .planDeviceWs :is(.wsBlocked,.wsIssue.open):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important}
html body #plans .planDeviceWs .wsIssue:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:4px 10px!important;align-items:center!important;padding:6px 0!important;border-bottom:1px solid var(--color-border)!important}
html body #plans .planDeviceWs .wsIssues:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-bottom:12px!important}
html body #plans .planDeviceWs .wsFoot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;padding:10px 20px!important;border-top:1px solid var(--color-border)!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body #plans .planDeviceWs .wsLoading:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:24px!important;color:var(--color-text-muted)!important}
/* D7 - the Device tab: the angle and the lens side by side, the lock toggle, Advanced */
html body #plans .deviceTab.d7 .fieldPair:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:var(--device-label-col,92px) 1fr!important;align-items:center!important;gap:8px!important}
html body #plans .deviceTab.d7 .fieldPair .pair:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:72px 1fr!important;gap:6px!important}
html body #plans .deviceTab.d7 .lockToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important}
html body #plans .deviceTab.d7 .lockToggle .markerLockIcon:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:13px!important;height:13px!important;fill:none!important;stroke:var(--color-plan-lock)!important;stroke-width:1.6!important}
html body #plans .deviceTab.d7 .deviceAdvanced:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;padding:6px 10px!important;margin:8px 0!important}
html body #plans .deviceTab.d7 .deviceAdvanced summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){cursor:pointer!important;font-size:var(--text-body)!important}
html body #plans .deviceTab.d7 .fieldNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:6px 0 0!important}
html body #plans .deviceTab.d7 .mutedText:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-weight:400!important}
/* D4 - tablet portrait and the folding phone open: top bar, layer chips, the plan in the middle, the bottom summary and
   the tool dock; the right panel and the palette open as sheets above the dock */
@media(max-width:1100px){
html body.mobilePlanStudio:not(.phonePlan) #plansBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;height:100dvh!important;background:var(--color-bg)!important}
html body.mobilePlanStudio:not(.phonePlan) #plansBody > .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;height:auto!important;min-height:0!important;display:block!important;position:relative!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .planCanvasWrap:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:clip!important;background:var(--color-bg)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;display:flex!important;align-items:center!important;gap:8px!important;height:52px!important;padding:6px 12px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;position:relative!important;z-index:150!important}
html body.mobilePlanStudio:not(.phonePlan) #plans :is(.d4Top,.d4Chips) .d4Spacer{flex:1 1 auto!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top .d4Icon:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:40px!important;height:40px!important;padding:0!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-section)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top .d4Project:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;max-width:40vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-body)!important;padding:8px 12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top .d4Review:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:40px!important;padding:0 16px!important;border-radius:var(--radius)!important;background:var(--color-accent)!important;color:var(--color-on-accent)!important;border:1px solid var(--color-accent)!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-body)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top .d4Review.empty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important;border-color:var(--color-border)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans :is(.d4Top,.d4Chips) .planMenu > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:4px!important;height:40px!important;min-width:40px!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-body)!important;list-style:none!important;cursor:pointer!important}
html body.mobilePlanStudio:not(.phonePlan) #plans :is(.d4Top,.d4Chips) .planMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top .d4More .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.mobilePlanStudio:not(.phonePlan) #plans .d4Chips .d4View .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:0!important;left:auto!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Find:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;padding:8px 12px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;position:relative!important;z-index:149!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Find input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:40px!important;font-size:var(--text-body)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Chips:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;display:flex!important;align-items:center!important;gap:6px!important;padding:8px 12px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;position:relative!important;z-index:148!important;overflow:visible!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:36px!important;padding:0 14px!important;border-radius:var(--radius-pill)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-body)!important;white-space:nowrap!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Chip.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent)!important;border-color:var(--color-accent)!important;color:var(--color-on-accent)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;position:relative!important;z-index:230!important;background:var(--color-surface)!important;border-top:1px solid var(--color-border)!important;border-radius:14px 14px 0 0!important;padding:4px 12px 10px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Grab:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important;height:18px!important;padding:0!important;background:transparent!important;border:0!important;cursor:pointer!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Grab span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:44px!important;height:4px!important;margin:6px auto!important;border-radius:2px!important;background:var(--color-border-strong)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4SheetLine:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:10px!important;padding:6px 2px 10px!important;min-width:0!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4SheetLine small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important;font-size:var(--text-small)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4SheetLine button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:40px!important;padding:0 14px!important;flex:none!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;gap:6px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;height:56px!important;min-width:0!important;padding:4px!important;border-radius:10px!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-small)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock button.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock .d4DockIcon svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:84px!important;left:0!important;right:0!important;border-radius:14px 14px 0 0!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;box-shadow:var(--shadow-plan-card)!important;height:min(56dvh,620px)!important;max-height:min(56dvh,620px)!important;backdrop-filter:none!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:84px!important;left:0!important;right:0!important;border-radius:14px 14px 0 0!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;box-shadow:var(--shadow-plan-card)!important;backdrop-filter:none!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:auto!important;max-width:none!important;border:0!important;box-shadow:none!important;background:transparent!important}
}
/* D6 - the device on the phone: one tall sheet that scrolls, big actions, the sections as tabs you swipe along */
html body.phonePlan #plans .phoneBackToPlan:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;left:10px!important;top:10px!important;z-index:260!important;height:36px!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-plan-chip-border)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneSheet.phoneDeviceSheet:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-height:84dvh!important;display:flex!important;flex-direction:column!important}
html body.phonePlan #plans .phoneSheet.phoneDeviceSheet .phoneSheetBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow-y:auto!important;min-height:0!important;flex:1 1 auto!important;-webkit-overflow-scrolling:touch!important}
html body.phonePlan #plans .phoneDeviceHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;margin:-4px 0 10px!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important}
html body.phonePlan #plans .phoneDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.mobilePlanStudio #plans .phoneDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-block!important;flex:none!important;width:10px!important;height:10px!important;border-radius:50%!important;background:var(--status-color,var(--color-status-new))!important}
html body.phonePlan #plans .phoneBigActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important}
html body.phonePlan #plans .phoneBig:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:64px!important;padding:6px!important;border-radius:12px!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneBig svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
html body.phonePlan #plans .phoneBig.phoneStart:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important;border-color:var(--color-status-completed)!important;color:var(--color-on-status)!important;font-weight:var(--weight-semibold)!important}
html body.phonePlan #plans .phoneBig.phoneStart svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:currentColor!important}
html body.phonePlan #plans .phoneBig.phoneStartOff:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;border-color:var(--color-border)!important;color:var(--color-text-muted)!important;font-weight:400!important}
html body.phonePlan #plans .phoneTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important;overflow-x:auto!important;scroll-snap-type:x proximity!important;padding-bottom:6px!important;margin-bottom:8px!important;-webkit-overflow-scrolling:touch!important}
html body.phonePlan #plans .phoneTabs button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;height:36px!important;padding:0 14px!important;border-radius:var(--radius-pill)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-body)!important;scroll-snap-align:start!important;white-space:nowrap!important}
html body.phonePlan #plans .phoneTabs button.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent)!important;border-color:var(--color-accent)!important;color:var(--color-on-accent)!important}
html body.phonePlan #plans .phoneCard:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface)!important;border:1px solid var(--color-border)!important;border-radius:12px!important;padding:12px!important;margin-bottom:10px!important}
html body.phonePlan #plans .phoneCard > small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;letter-spacing:.04em!important;margin-bottom:6px!important}
html body.phonePlan #plans .phoneMyTaskRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:10px!important}
html body.phonePlan #plans .phoneCompleteMine:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:60px!important;border-radius:10px!important;background:var(--color-accent-soft)!important;border:1px solid var(--color-accent)!important;color:var(--color-text)!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneSwipeHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){text-align:center!important;color:var(--color-text-muted)!important;font-size:var(--text-small)!important;margin:4px 0 8px!important}
html body.phonePlan #plans .phoneSheet .wsKV:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:max-content 1fr!important;gap:6px 16px!important;margin:0!important;font-size:var(--text-body)!important}
html body.phonePlan #plans .phoneSheet .wsKV dt:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
html body.phonePlan #plans .phoneSheet .wsKV dd:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;overflow-wrap:anywhere!important}
/* D5 on a tablet: there is no room beside the plan, so the workspace opens over it, full screen, with its x and Show on plan */
@media(max-width:1100px){html body.mobilePlanStudio:not(.phonePlan) #plans .planDeviceWsHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;position:fixed!important;inset:0!important;z-index:320!important;background:var(--color-bg)!important;overflow:hidden!important}}
/* tablet landscape (1180): the right panel is one column - an older rule split it in two and cut the tabs to "This / Dev / Revie / Tasl" */
html body.planDesk #plans .planWorkspace > .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;grid-template-columns:none!important}
html body.planDesk #plans .planInspector > .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;flex:none!important;height:auto!important}
html body.planDesk #plans .planInspector > .planSideBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;width:100%!important}
/* D4 (suite run 2 screenshots): the app rail is hidden on the tablet layout, so the page starts at the left edge and is
   exactly the screen wide - it kept the rail's 64 px margin and ran 64 px past the right edge (Review, Not to scale,
   the dock cut off). No page title and no workflow footer under the dock: the D4 top bar is the page's header, its
   menu button opens the app menu. */
html body.mobilePlanStudio:not(.phonePlan) #appShell.shell371 > main:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:0!important;width:100%!important;max-width:100%!important}
html body.mobilePlanStudio:not(.phonePlan) #appShell.shell371 :is(.content,#plans,#plansBody):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:100%!important}
html body.mobilePlanStudio:not(.phonePlan) #plans > :is(.pageHead,.workflowPageFooter):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* D6 (suite run 2 screenshots): while a device's sheet is open the phone shows only "← Plan" at the top (the sheet
   selector sat under it) and the sheet reaches the bottom of the screen (the tool bar showed under it). */
html body.phonePlan #plans:has(.phoneDeviceSheet) :is(.phonePlanTop,.phonePlanBar):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.phonePlan #plans:has(.phoneDeviceSheet) .phoneSheet.phoneDeviceSheet:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:0!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;max-height:84dvh!important}

/* ===== v3.52.0 - the owner's hand test of v3.51.1 (2026-09-22) ===== */
/* item 3: the lock state is always on the symbol - amber closed = locked, green open = unlocked, both clickable */
html body #plans .planMarker .markerLockBadge.unlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--color-plan-unlock)!important;color:var(--color-on-plan-unlock)!important;border:1px solid var(--color-on-plan-unlock)!important;transform:translate(var(--lock-offset,10px),var(--lock-offset,10px)) scale(var(--plan-compensation,1))!important;transform-origin:50% 50%!important;z-index:60!important;cursor:pointer!important;box-shadow:var(--shadow-plan-handle)!important;pointer-events:auto!important}
html body #plans .planMarker .markerLockBadge.unlocked .markerLockIcon:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:10px!important;height:10px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.4!important}
html body #plans .planMarker.asDot .markerLockBadge.unlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* item 4: every symbol type turns and resizes - the size handle at its lower-left corner, 14 px at every zoom */
html body #plans .planMarker .sizeHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:50%!important;top:50%!important;width:14px!important;height:14px!important;margin:-7px 0 0 -7px!important;display:grid!important;place-items:center!important;border-radius:4px!important;background:var(--color-plan-chip)!important;color:var(--color-on-plan-chip)!important;border:1px solid var(--color-border-strong)!important;box-shadow:var(--shadow-plan-handle)!important;transform:translate(calc(-1 * var(--size-offset,16px)),var(--size-offset,16px)) scale(var(--plan-compensation,1))!important;transform-origin:50% 50%!important;cursor:nwse-resize!important;z-index:58!important;scale:none!important;touch-action:none!important}
html body #plans .planMarker .sizeHandle svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:10px!important;height:10px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.4!important;stroke-linecap:round!important}
html body #plans .planMarker.asDot .sizeHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker.resizing .rotateHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker.resizing .aimHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker .symbolRotate:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;width:100%!important;height:100%!important;transform-origin:50% 50%!important}
/* item 5a: a fisheye circle is a cone like any other - the same pale fill and line in both themes (it was the
   accent colour, a dark navy in the dark theme) */
html body #plans .planMarker .cameraFov.fisheyeFov circle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:var(--color-plan-cone)!important;stroke:var(--color-plan-cone-line)!important;stroke-opacity:1!important;stroke-width:1!important}
/* item 3 as the owner drew it (D2b, 2026-09-22): locked = amber closed padlock and an amber dashed ring, always
   visible; unlocked = a green open padlock only while the symbol is selected or under the pointer; never a task
   status colour (those stay on the symbol itself) */
html body #plans .planMarker:not(.detection).markerLocked .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:calc(1.6px * var(--core-unit,1)) dashed var(--color-plan-lock)!important;outline-offset:calc(3px * var(--core-unit,1))!important}
html body #plans .planMarker:not(.detection).selected.markerLocked .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline-color:var(--color-plan-lock)!important}
html body #plans .planMarker .markerLockBadge.unlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker:hover .markerLockBadge.unlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker.selected .markerLockBadge.unlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important}
/* items 6 and 7: each panel hides itself from the middle of its own outer edge, where the collapsed strip already
   puts the button back - not the bottom of the rail, not the top corner of the panel */
html body #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html body #plans #planToolRail > .railCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:2px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:6!important}
html body #plans .planInspector > .inspectorCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:2px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:6!important}
/* item 9: the open panel fills its own column, so its right edge lines up with the top bar and the status bar -
   it was 310 px inside a 340 px column and ended 30 px short (the collapsed strip already lined up) */
html body.planDesk #plans .planWorkspace > .planInspector:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important}
/* item 11: the two notices in the top right corner never overlap - "Labels hidden" sits under "Not to scale"
   (they were on the same line, overlapping by 95 px, so only "Labels h..." could be read) */
html body #plans .planLabelNotice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:14px!important;top:10px!important}
html body #plans #planCanvasWrap:has(.planScaleNotice) .planLabelNotice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){top:50px!important}
/* item 13: the palette floats over the plan instead of pushing it, one narrow column of icon tiles (a group replaces
   the list, back arrow), a second column only when the plan still keeps 900 px - and it closes after placing unless pinned */
html body.planDesk #plans .planWorkspace.toolsOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planDesk #plans .planWorkspace.toolsOpen.paletteGroupOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:0px!important}
html body.planDesk #plans .planWorkspace > #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;left:var(--plan-rail-col,76px)!important;top:0!important;bottom:0!important;width:auto!important;max-width:none!important;display:flex!important;align-items:stretch!important;gap:0!important;z-index:30!important;pointer-events:none!important}
html body.planDesk #plans #planToolFlyoutHost > *:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){pointer-events:auto!important;width:180px!important;max-width:180px!important;min-width:0!important;box-shadow:var(--shadow-plan-card)!important;border-right:1px solid var(--color-border)!important}
html body.planDesk #plans #planToolFlyoutHost .symbolToolGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planDesk #plans #planToolFlyoutHost .planToolGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
html body.planDesk #plans #planToolFlyoutHost .symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-width:0!important;height:64px!important;min-height:64px!important;padding:4px 2px!important;font-size:var(--text-small)!important;gap:2px!important}
html body.planDesk #plans #planToolFlyoutHost .symbolTool span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planDesk #plans #planToolFlyoutHost .symbolTool small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.1!important;text-align:center!important}
html body #plans .planPalettePin:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;border-radius:var(--radius)!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text-muted)!important;cursor:pointer!important}
html body #plans .planPalettePin.pinned:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;color:var(--color-accent)!important;border-color:var(--color-accent)!important}
html body #plans .planPalettePin svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.4!important}

/* v3.52.0 (the first full suite): a symbol small enough to be a dot carries no lock badge - the badge is 16 px and the
   dot is 8, so it covered the symbol and took the tap. This has to beat the "show it while hovered or selected" rule
   above it, and a finger leaves a hover behind on a touch screen. */
html body #plans .planMarker.asDot .markerLockBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}

/* ============================================================================================================
   v3.53.0 - Plan Studio built to the owner's mockup 11-tools-open.html (approved 2026-09-22).
   A: the rail and the palettes - one tile (64 x 56), one icon family, attached 240 px panels, no float, no pin.
   B: one type scale inside Plan Studio - 11 / 12 / 13 / 15, nothing else.
   C: the collapse tabs on the plan's own edge, 16 x 44, centred, the same place open or closed.
   Everything here replaces the floating palette of v3.52.0 (item 13 of the hand test), at the owner's decision.
   ============================================================================================================ */

/* B. the scale, and Plan Studio's own tokens */
html body #plans:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){
  --plan-text-label:11px;   /* CAPS section labels and tile labels */
  --plan-text-ui:12px;      /* buttons, chips, hints, the status bar */
  --plan-text-body:13px;    /* body text and lists */
  --plan-text-title:15px;   /* panel titles */
  font-size:var(--plan-text-body)!important;
}
html body #plans :is(.planCategoryFlyout,#planToolRail,.planInspector,.planStatusBar,.planSheetNav,.planSelectionBar):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-family:var(--font-sans)!important;font-size:var(--plan-text-body)!important}
html body #plans :is(.planCategoryFlyout,#planToolRail) :is(button,input,select,.paletteHint,.palettePlacingNote):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important}
html body #plans .planStatusBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planStatusBar span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important}
html body #plans .planCategoryFlyout header b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-title)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planCategoryFlyout header small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important;letter-spacing:0!important}
html body #plans .planPaletteShelf > small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important;font-weight:500!important;letter-spacing:.08em!important;color:var(--color-text-muted)!important;text-transform:uppercase!important}
html body #plans :is(.symbolTool,.planCategoryButton,.selectTool) span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important;font-weight:500!important;line-height:1.1!important}

/* A6. the palette attaches to the rail: no gap, one divider, 240 px, and it never floats over the sheet bar */
html body.planDesk #plans .planWorkspace > #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;display:flex!important;align-items:stretch!important;gap:0!important;width:auto!important;max-width:none!important;z-index:auto!important;pointer-events:auto!important;min-height:0!important}
html body.planDesk #plans .planWorkspace.toolsOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:240px!important}
html body.planDesk #plans .planWorkspace.toolsOpen.paletteGroupOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:480px!important}
@media(max-width:1599px){html body.planDesk #plans .planWorkspace.toolsOpen.paletteGroupOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:240px!important}}
html body.planDesk #plans #planToolFlyoutHost > .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:240px!important;max-width:240px!important;min-width:240px!important;flex:0 0 240px!important;box-sizing:border-box!important;background:var(--color-surface)!important;border:0!important;border-right:1px solid var(--color-border)!important;border-radius:0!important;box-shadow:none!important;padding:16px!important;display:flex!important;flex-direction:column!important;gap:16px!important;overflow-x:hidden!important;overflow-y:auto!important}
html body.planDesk #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:80px!important;background:var(--color-surface)!important;border:0!important;border-right:1px solid var(--color-border)!important;border-radius:0!important;padding:16px 0!important;gap:8px!important;align-items:center!important;overflow-y:auto!important;overflow-x:hidden!important}
html body.planDesk #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:80px}
html body.planDesk #plans .planWorkspace.railCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-rail-col:0px;--plan-palette-col:0px;--plan-strip-left:0px}
html body.planDesk #plans .planWorkspace.inspectorCollapsed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-strip-right:0px}

/* A3. one tile everywhere: 64 x 56, radius 8, icon 20, label 11 */
html body #plans :is(.planCategoryButton,.selectTool,.symbolTool,.planGroupTile):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:64px!important;min-width:64px!important;max-width:64px!important;height:56px!important;min-height:56px!important;border-radius:8px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:0!important;position:relative!important;box-shadow:none!important}
html body #plans :is(.planCategoryButton,.selectTool,.symbolTool,.planGroupTile).active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .symbolTool.open:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important}
html body #plans :is(.planCategoryButton,.selectTool) svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important}
html body #plans .planRailGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body #plans .planRailGlyph.filled:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:currentColor!important;stroke:none!important}
html body #plans .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,64px)!important;gap:8px!important;justify-content:start!important}
html body #plans .planGroupTile .groupCount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:4px!important;right:5px!important;font-size:var(--plan-text-label)!important;font-style:normal!important;color:var(--color-text-muted)!important;background:transparent!important;border:0!important;padding:0!important}

/* A4. a symbol tile wears the white disc it wears on the plan */
html body #plans .toolbarSymbolGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:28px!important;height:28px!important}
html body #plans .toolbarSymbolGlyph .toolDisc:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:var(--color-plan-paper)!important;stroke:var(--color-accent)!important;stroke-width:2!important}
html body #plans .toolbarSymbolGlyph .toolGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:none!important;stroke:var(--color-plan-ink)!important;stroke-width:1.6!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* A5. the close and back buttons, and A7/A8 recent and search */
html body #plans .planCategoryFlyout :is(.uiCloseButton,.planPaletteBack):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border-radius:6px!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text-muted)!important;display:grid!important;place-items:center!important;padding:0!important;font-size:var(--plan-text-body)!important}
html body #plans .planCategoryFlyout header:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;height:28px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
html body #plans .planCategoryFlyout header > b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-right:auto!important}
html body #plans .planCategoryFlyout header.groupHead > b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-right:0!important}
html body #plans .planRecentRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
html body #plans .planRecentPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 10px!important;border-radius:14px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important;width:auto!important;max-width:none!important}
html body #plans .planRecentPill.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body #plans .planPaletteSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;height:32px!important;padding:0 10px!important;border-radius:6px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text-muted)!important;margin:0!important}
html body #plans .planPaletteSearch svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important;flex:none!important}
html body #plans .planPaletteSearch input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:0!important;outline:none!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important;width:100%!important;min-height:0!important;height:auto!important;padding:0!important}
html body #plans .planPaletteShelf:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
html body #plans .paletteHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:auto 0 0!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important;line-height:1.5!important}
html body #plans .palettePlacingNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border:1px solid var(--color-accent-strong)!important;background:var(--color-accent-soft)!important;border-radius:8px!important;padding:10px 12px!important;font-size:var(--plan-text-ui)!important;line-height:1.5!important;color:var(--color-text)!important;margin:0!important}

/* C. the collapse tabs, on the plan's own edge */
html body #plans #planCanvasWrap > .planCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:50%!important;margin-top:-22px!important;width:16px!important;min-width:16px!important;height:44px!important;min-height:44px!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important;z-index:20!important;box-shadow:none!important}
html body #plans #planCanvasWrap > .railCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:0!important;right:auto!important;border-left:0!important;border-radius:0 6px 6px 0!important}
html body #plans #planCanvasWrap > .inspectorCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:0!important;left:auto!important;border-right:0!important;border-radius:6px 0 0 6px!important}
html body #plans .planPanelHandle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}

/* D. a fisheye is mounted, not aimed: the Ceiling / Wall pair */
html body #plans .fisheyeMount .mountChoice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--control-height-sm)!important;min-height:var(--control-height-sm)!important;padding:0 10px!important;border-radius:6px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important;width:auto!important}
html body #plans .fisheyeMount .mountChoice.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}

/* B (continued). The right panel was still on the app-wide scale: 14 px rows and 18 px headings inside a 13 px
   screen. Inside Plan Studio every panel now speaks the four sizes: 15 for a title, 13 for text, 12 for a control. */
html body #plans .planInspector :is(span,b,small,p,li,div,label,em,strong,td,th,dt,dd):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-body)!important}
html body #plans .planInspector :is(button,summary,select,input,textarea):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important}
html body #plans .planInspector :is(h1,h2,h3,h4):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-title)!important;font-weight:var(--weight-semibold)!important}
html body #plans .planInspector :is(.planPaletteShelf,.sideTabRow) > small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important}

/* E4 (owner's live test): the lock note stayed on the plan after the pointer had gone, because it was tied to the
   selection and not to the pointer. It is a tooltip: it belongs to hover and to keyboard focus, and it leaves with
   them. v3.53.0. */
html body #plans .planMarker .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker:hover .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker:focus-within .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important}
/* v3.57.0: was @media(pointer:coarse) - the one input detector sets html.inputTouch */html:where(.inputTouch) body #plans .planMarker:hover .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planMarker .markerLockHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker .markerLockHint small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important}

/* E5 (owner's live test): a label was drawn OVER its symbol - it was placed from the top of the symbol's hit box,
   not from the symbol itself, so at 200% it covered the thing it names by 13 px and at 300% by 21 px. A label now
   hangs from the centre of the symbol, always below it. And when a label that was too small to read is shown for
   the selected symbol, its leader line is shown with it, so it is clear which symbol it belongs to. v3.53.0. */
html body #plans .planMarker .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){top:50%!important;transform:translate(calc(-50% + var(--label-x,0px)),calc(var(--annotation-top,20px) + var(--label-y,0px))) scale(var(--label-render,1))!important;transform-origin:top center!important}
/* v3.53.0 (suite, 2026-09-23): the rule above first carried the old v3.46 scale (compensation x size), which made every
   label a fixed 12 px on screen - D1 has labels scaling 1:1 with the plan (--label-render, v3.49.0) - and left "Reset
   label", which cancels the label's own scale through --label-applied, at half size from 500%. E5 changed only where a
   label hangs; the scale is D1's again. */
html body #plans .planMarker.labelTiny:hover .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker.labelTiny.selected .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:visible!important;transform:translate(calc(-50% + var(--label-x,0px)),calc(var(--annotation-top,20px) + var(--label-y,0px))) scale(var(--label-read,1))!important}
html body #plans .planMarker.labelTiny:hover .labelLeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planMarker.labelTiny.selected .labelLeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:visible!important}

/* v3.53.0: the one tile, said once more where the v3.52.0 palette rules used to set 76 x 64 */
html body #plans #planToolFlyoutHost :is(.symbolTool,.planGroupTile):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:64px!important;min-width:64px!important;max-width:64px!important;height:56px!important;min-height:56px!important;padding:0!important;gap:4px!important;font-size:var(--plan-text-label)!important}
html body #plans #planToolFlyoutHost .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans #planToolFlyoutHost .symbolToolGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans #planToolFlyoutHost .planToolGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,64px)!important;gap:8px!important}
html body #plans #planToolFlyoutHost :is(.symbolTool,.planGroupTile) span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.1!important;text-align:center!important;font-size:var(--plan-text-label)!important}

/* v3.53.0 (owner, after seeing the build beside mockup 11):
   - a tile label is one line; the tile carries the short name and the full one stays in the tooltip
   - both palette panels are the same 240 px, whichever is open
   - the right panel is padded like the palettes, 16 px on every side, so nothing touches its edge */
html body #plans #planToolFlyoutHost :is(.symbolTool,.planGroupTile) span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:60px!important;line-height:1.1!important}
html body.planDesk #plans #planToolFlyoutHost > .planCategoryFlyout.groupLevel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:240px!important;min-width:240px!important;max-width:240px!important;flex:0 0 240px!important}
html body #plans .planInspector .planSideBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:16px!important}
html body #plans .planInspector .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:16px 16px 0!important;gap:6px!important}
html body #plans .planInspector .planSideBody > :is(.card,.inspectorCard,section,div):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:0!important;padding-right:0!important}

/* v3.53.0 (touch drag): a finger on a symbol moves the symbol. Until v3.53.0 the label lay over the symbol and carried
   touch-action:none, so a finger on the symbol landed on the label, which handed the drag on (v3.51.1). E5 hangs the
   label below the symbol, so the finger now lands on the symbol itself - and with touch-action:auto there the browser
   took the gesture and cancelled the drag after two moves. The phone field mode opens items and never drags them. */
html body:not(.phonePlan) #plans .planMarker:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){touch-action:none!important}

/* v3.53.1 (owner, side-by-side of live and mockup 11): the group tiles had no icons. An older rule hid the icon of every
   tile on a palette shelf (it made them text pills); the Groups row and the search results are shelves too, so their
   tiles lost the icon the mockup draws. Every tile in a shelf's grid shows its icon again; the Recent pills are their
   own buttons and stay text only. */
html body #plans .planCategoryFlyout .planPaletteShelf .planFlyoutGrid .symbolTool svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important}
html body #plans .planCategoryFlyout .planFlyoutGrid .symbolTool svg.planGroupGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:20px!important;height:20px!important;min-width:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important}


/* v3.55.0 (Part 2 item 10, owner 2026-09-23): the plan's tiles never fade and never pop in. A new tile of a sharper level
   waits hidden until every tile of its level has decoded; then one frame shows them and takes the old level away. */
html body #plans .planSurface .planImageLayer img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transition:none!important}
html body #plans .planSurface .planImageLayer img.planTilePending:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:0!important}
/* v3.55.0 (Part 2 item 9): the lens field - a dropdown, and the mm setting for a varifocal lens beside it */
html body #plans .planLensField .lensMmInput:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:76px!important}
/* v3.55.0 (Part 2 item 10): during a pinch or wheel zoom a one-size-on-screen part is held steady by --plan-gz */
html body #plans .planSurface .planMarker.detection .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:scale(calc(var(--marker-render-scale,.45) * var(--plan-gz,1)))!important}
html body #plans .planSurface .planMarker.asDot .markerDot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:calc(var(--dot-size,6px) * var(--plan-gz,1))!important;height:calc(var(--dot-size,6px) * var(--plan-gz,1))!important}

/* ===== v3.55.0 - Part 2 (owner, Z Fold hand test 2026-09-22, designs T1-T4 / P1-P2): the tablet and the phone ===== */
/* items 5, 6: the desktop status bar does not appear on touch */
html body.mobilePlanStudio #plans .planStatusBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* the zoom pill on the plan - the one zoom number */
html body #plans .planZoomPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:12px!important;bottom:12px!important;z-index:120!important;display:flex!important;align-items:center!important;gap:2px!important;height:36px!important;padding:0 4px!important;border-radius:var(--radius)!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;box-shadow:var(--shadow-plan-bar)!important}
html body #plans .planZoomPill button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:32px!important;min-height:32px!important;height:32px!important;padding:0 8px!important;border:0!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--plan-text-body)!important}
html body #plans .planZoomPill .zoomReadout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:44px!important;text-align:center!important;font-size:var(--plan-text-ui)!important;font-weight:600!important;color:var(--color-text)!important}
html body #plans .planZoomPill .pillSep:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:1px!important;height:18px!important;background:var(--color-border)!important;margin:0 2px!important}
/* the sheet row: saved state, sheet button, previous / next */
html body #plans .planSheetRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;height:40px!important}
html body #plans .planSheetRow .saveState:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;font-size:var(--plan-text-ui)!important;color:var(--color-success)!important;white-space:nowrap!important}
html body #plans .planSheetRow .saveState.saving:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important}
html body #plans .planSheetRow .saveState.failed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-danger)!important}
html body #plans .planSheetRow .planSheetName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;height:36px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--plan-text-body)!important;white-space:nowrap!important;overflow:hidden!important;text-align:left!important}
html body #plans .planSheetRow .planSheetName .sheetTitle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planSheetRow .planSheetName .sheetNo:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important}
html body #plans .planSheetRow .planSheetName > span[aria-hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important;color:var(--color-text-muted)!important}
html body #plans .planSheetRow .sheetStep:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--plan-text-title)!important}
html body #plans .planSheetRow .d4ToolsOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;height:36px!important;min-height:36px!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important}
/* item 1: the dock - handle, sheet row, one 64 x 56 tile each (Select, five categories, More); closed = a 44 px strip */
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 12px 10px!important;display:flex!important;flex-direction:column!important;gap:8px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom.dockClosed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:44px!important;padding:0 12px 4px!important;gap:0!important;overflow:hidden!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Grab:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:14px!important;min-height:14px!important;touch-action:none!important;cursor:grab!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Grab span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:5px auto!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom.dockClosed .planSheetRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom.dockClosed .planSheetRow :is(.planSheetName,.sheetStep,.d4ToolsOpen):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:30px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-start!important;gap:8px!important;grid-auto-flow:unset!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock > button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock > .d4DockMore > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:64px!important;min-width:64px!important;height:56px!important;min-height:56px!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;border-radius:8px!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;list-style:none!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock > button.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important;background:var(--color-accent-soft)!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock .d4DockIcon:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important;display:grid!important;place-items:center!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock .d4DockIcon svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock .d4DockLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:60px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Dock .d4DockMore .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){top:auto!important;bottom:calc(100% + 6px)!important;right:0!important;left:auto!important}
/* item 3: the project picker and the account menu in the top bar (tablet and phone) */
html body.mobilePlanStudio #plans .topProjectPick > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:6px!important;height:40px!important;max-width:44vw!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;list-style:none!important;min-width:0!important}
html body.mobilePlanStudio #plans .topProjectPick .topProjectLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body.mobilePlanStudio #plans .topProjectPick .topProjectName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-body)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important}
html body.mobilePlanStudio #plans .topProjectPick .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){left:0!important;right:auto!important;max-height:60dvh!important;overflow:auto!important;min-width:240px!important}
html body.mobilePlanStudio #plans .topAccount > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:4px!important;height:40px!important;padding:0 6px!important;list-style:none!important;border:0!important;background:transparent!important;color:var(--color-text)!important}
html body.mobilePlanStudio #plans .topAccount .topAvatar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:32px!important;height:32px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--color-accent)!important;color:var(--color-on-accent)!important;font-size:var(--plan-text-ui)!important;font-weight:600!important}
html body.mobilePlanStudio #plans .topAccount .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:0!important;left:auto!important}
html body.phonePlan #plans .phonePlanTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:6px!important}
html body.phonePlan #plans .phonePlanTop .topProjectPick > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:52vw!important}
html body.phonePlan #plans .phonePlanTop .topProjectLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* the phone: the sheet row above the field bar (items 5, 8) */
html body.phonePlan #plans .phoneBottom:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:230!important;display:flex!important;flex-direction:column!important;padding:6px 8px 0!important;background:var(--color-surface)!important;border-top:1px solid var(--color-border)!important}
html body.phonePlan #plans .phoneBottom .planSheetRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:44px!important;gap:6px!important}
html body.phonePlan #plans .phoneBottom .planSheetRow .saveState:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;width:16px!important;overflow:hidden!important;color:transparent!important}
html body.phonePlan #plans .phoneBottom .planSheetRow .saveState:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::after{content:"\2713";position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--color-success);font-size:var(--plan-text-title)}
html body.phonePlan #plans .phoneBottom .planSheetRow .saveState.saving:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::after{content:"\2026";color:var(--color-warning)}
html body.phonePlan #plans .phoneBottom .planSheetRow .saveState.failed:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::after{content:"!";color:var(--color-danger)}
html body.phonePlan #plans .phoneBottom .phonePlanBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;border-top:0!important;padding-left:0!important;padding-right:0!important;height:calc(70px + env(safe-area-inset-bottom,0px))!important}
html body.phonePlan #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:calc(100dvh - 64px - 121px - env(safe-area-inset-bottom,0px))!important}
html body.phonePlan #plans .phonePlanTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:64px!important;padding:4px 8px!important}
html body.phonePlan #plans .phonePlanTop .phoneIconBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:44px!important;height:44px!important;min-height:44px!important}
html body.phonePlan #plans .phonePlanTop .topProjectPick:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important}
html body.phonePlan #plans .phonePlanTop .topProjectPick > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:none!important;width:100%!important;height:44px!important;box-sizing:border-box!important}
html body.phonePlan #plans .phonePlanTop .topProjectPick > summary > span[aria-hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:auto!important}
html body.phonePlan #plans .phonePlanTop .d4Spacer:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.phonePlan #plans .phonePlanTop .topAccount > summary > span[aria-hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* item 2: every bottom panel comes up from the bottom, full width, with the same handle and a 28 x 28 close */
html body.mobilePlanStudio:not(.phonePlan) #plans :is(.planInspector.mobileSheetOpen,.mobileToolsSheet):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:auto!important;left:0!important;right:0!important;bottom:0!important;z-index:250!important;border-radius:14px 14px 0 0!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet.mobileSheetOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:var(--d4-h,137px)!important;z-index:225!important;max-height:calc(100dvh - var(--d4-h,137px) - 120px)!important}
html body.mobilePlanStudio #plans .sheetGrabRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:sticky!important;top:0!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:center!important;height:24px!important;background:inherit!important}
html body.mobilePlanStudio #plans .sheetGrab:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:24px!important;min-height:24px!important;padding:0!important;border:0!important;background:transparent!important;touch-action:none!important;cursor:grab!important}
html body.mobilePlanStudio #plans .sheetGrab span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:44px!important;height:4px!important;margin:0 auto!important;border-radius:2px!important;background:var(--color-border-strong)!important}
html body.mobilePlanStudio #plans .sheetClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:8px!important;top:4px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important}
/* item 8: the page selector as a bottom sheet - three columns on the tablet, one on the phone; the search box 32 px */
html body.mobilePlanStudio #plans .planSheetPanel.asSheet:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;max-width:none!important;max-height:72dvh!important;z-index:255!important;display:flex!important;flex-direction:column!important;padding:0 16px 16px!important;border-radius:14px 14px 0 0!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;box-shadow:var(--shadow-plan-card)!important;transform:none!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .touchHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;padding:4px 0 10px!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .touchHead b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-title)!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .touchHead small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .sheetFolderPick:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;font-size:var(--plan-text-ui)!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .sheetSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;height:32px!important;min-height:32px!important;padding:0 10px!important;margin-bottom:12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .sheetSearch svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important;flex:none!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .sheetSearch input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:30px!important;min-height:30px!important;border:0!important;background:transparent!important;font-size:var(--plan-text-body)!important;flex:1 1 auto!important;min-width:0!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .sheetPanelBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:auto!important;min-height:0!important;flex:1 1 auto!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planFolder h4:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;font-size:var(--plan-text-label)!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important;margin:4px 0 8px!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .planSheetPanel.asSheet .planPageGalleryGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planPageThumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-rows:60px auto auto!important;gap:2px!important;padding:0 0 8px!important;border-radius:8px!important;overflow:hidden!important;text-align:left!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;min-height:0!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planPageThumb.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-accent)!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planPageThumb .thumbImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:60px!important;overflow:hidden!important;background:var(--color-plan-paper)!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planPageThumb .thumbImage img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:60px!important;object-fit:cover!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planPageThumb b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 8px!important;font-size:var(--plan-text-ui)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.mobilePlanStudio #plans .planSheetPanel.asSheet .planPageThumb small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 8px!important;font-size:var(--plan-text-label)!important;color:var(--color-text-muted)!important}
html body.phonePlan #plans .planSheetPanel.asSheet .planPageGalleryGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
html body.phonePlan #plans .planSheetPanel.asSheet .planPageThumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:96px 1fr!important;grid-template-rows:auto auto!important;align-items:center!important;min-height:74px!important;height:74px!important;padding:0 8px 0 0!important}
html body.phonePlan #plans .planSheetPanel.asSheet .planPageThumb .thumbImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-row:1 / span 2!important;height:74px!important}
html body.phonePlan #plans .planSheetPanel.asSheet .planPageThumb .thumbImage img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:74px!important}
/* item 4: an 18 px symbol on touch is one size on screen - held steady during a pinch like the other one-size parts */
/* held in the same one write as the other sizes (--held), so crossing 18 px is not a second change (item 10) */
html body #plans .planSurface .planMarker:not(.detection) .markerCore:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:scale(calc(var(--marker-render-scale,.45) * (1 + var(--held,0) * (var(--plan-gz,1) - 1))))!important}
/* item 11: the Recent pills are 28 px on touch too (the 44 px touch rule does not reach them) */
html body.mobilePlanStudio #plans .planRecentPill:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 12px!important;font-size:var(--plan-text-ui)!important}
/* item 13: every inspector list ends 16 px from the panel edge and never runs under the scrollbar */
html body #plans .planInspector .planSideBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){scrollbar-gutter:stable!important;padding-right:calc(16px - var(--plan-sb-w,0px))!important}
/* the device panel (T4): up to 70 % of the screen, its lists 16 px from the edge like the PC (item 13) - the v3.53.0 rule that anchors the collapse tab made it relative, and on the tablet it opened below the dock */
html body.mobilePlanStudio:not(.phonePlan) #plans .planInspector.mobileSheetOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-height:70dvh!important;height:auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding-left:0!important;padding-right:0!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .planInspector.mobileSheetOpen .planSideTabs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:16px!important;padding-right:16px!important;flex:none!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .planInspector.mobileSheetOpen .planSideBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;overflow:auto!important}

/* v3.55.0 (Part 2 items 14-16, owner 2026-09-23, board 11 updated): one icon family in the palette - the rail, the
   group tiles, the symbol tiles and the Draw tiles are line icons, 20 px, one stroke, one colour; no white disc on a
   tile. The disc is the plan's, the placing note's preview and the cursor's. */
html body #plans .planCategoryFlyout .planFlyoutGrid .symbolTool svg.planTileGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:20px!important;height:20px!important;min-width:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
html body #plans .planCategoryFlyout .planFlyoutGrid .symbolTool svg.planTileGlyph .symbolLens:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){fill:currentColor!important;stroke:none!important}
/* item 14: the Draw tiles are the same 64 x 56 tiles; the three that are not built yet are switched off */
html body #plans .planCategoryFlyout .planFlyoutGrid.utilityTools:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:repeat(3,64px)!important;gap:8px!important}
html body #plans .planCategoryFlyout .planFlyoutGrid.utilityTools > .symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:64px!important;height:56px!important;min-height:56px!important}
html body #plans .planCategoryFlyout .planFlyoutGrid .symbolTool.utilityOff:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.45!important;cursor:not-allowed!important}
html body #plans .planCategoryFlyout .planFlyoutGrid .symbolTool.utilityOff:hover:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;border-color:var(--color-border)!important}
/* the placing note: the preview on its disc, then the words (board 11) */
html body #plans .palettePlacingNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:10px!important;align-items:flex-start!important}
html body #plans .palettePlacingNote .planPreviewDisc:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:28px!important;height:28px!important}
html body #plans .palettePlacingNote .previewNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text-muted)!important}
/* item 16: the palette title reads as one - "Security / Cameras", together, as in board 11 */
html body #plans .planCategoryFlyout header.groupHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important}
html body #plans .planCategoryFlyout header.groupHead > small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;margin:0!important;font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
html body #plans .planCategoryFlyout header.groupHead > b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 1 auto!important;margin:0!important;min-width:0!important;text-align:left!important;font-size:var(--plan-text-title)!important;font-weight:600!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* v3.55.0 (Part 2 item 15): while placing, the cursor is the symbol on its plan disc (set by planApplyPlaceCursor) */
html body #plans .planCanvasWrap.placingTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planCanvasWrap.placingTool #planSurface:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .planCanvasWrap.placingTool #planSurface .planImageLayer *:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){cursor:var(--plan-place-cursor,crosshair),crosshair!important}
/* v3.55.0 (D6 kept): with a device open the phone shows only "← Plan" - the new top bar and the sheet row step aside too */
html body.phonePlan #plans:has(.phoneDeviceSheet) :is(.phonePlanTop,.phoneBottom):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* v3.55.0 (Part 2 item 17): Rack's Rear View and Cable View are switched off with a reason, like Plan Studio's Draw tools */
html body #rack .rackViewTabs button.rackViewOff:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.45!important;cursor:not-allowed!important}
/* v3.55.0 (owner, 2026-09-23 - the iPhone) */
/* R, J: on the plan the page itself never scrolls or overscrolls - no pull-to-refresh on a swipe down, and Safari's
   address bar never collapses mid-work, so nothing jumps */
html:has(body.phonePlan):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html:has(body.mobilePlanStudio):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;overscroll-behavior:none!important}
/* S: the bars keep clear of the Dynamic Island and the home bar, upright and on its side (viewport-fit=cover) */
html body.phonePlan #plans .phonePlanTop:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:calc(64px + env(safe-area-inset-top,0px))!important;padding:calc(4px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 4px max(8px,env(safe-area-inset-left,0px))!important}
html body.phonePlan #plans .phoneBottom:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:max(8px,env(safe-area-inset-left,0px))!important;padding-right:max(8px,env(safe-area-inset-right,0px))!important}
html body.phonePlan #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:calc(100dvh - 64px - 121px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Top:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-top:calc(6px + env(safe-area-inset-top,0px))!important;padding-left:max(12px,env(safe-area-inset-left,0px))!important;padding-right:max(12px,env(safe-area-inset-right,0px))!important;height:calc(52px + env(safe-area-inset-top,0px))!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;padding-left:max(12px,env(safe-area-inset-left,0px))!important;padding-right:max(12px,env(safe-area-inset-right,0px))!important}
/* I: Safari zooms the page when a field under 16 px is focused - on iOS every field is 16 px (only there: other
   browsers keep the type scale) */
@supports (-webkit-touch-callout:none){
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-input-touch)!important}
}
/* v3.55.1 (owner's hand test on the Z Fold unfolded and the iPhone 15 Pro Max, 2026-09-24) - the touch layouts only;
   the PC (planDesk) reads none of these */
/* 1, 7: the plan page is exactly the height that can be seen (--plan-vh, from the visual viewport, follows the address
   bar) and the page itself is pinned - it never scrolls, so the top bar never slides under the status bar */
html body:is(.mobilePlanStudio,.phonePlan):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:0!important;left:0!important;right:0!important;height:var(--plan-vh,100dvh)!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none!important}
html body:is(.mobilePlanStudio,.phonePlan) :is(#appShell,main,.content,#plans,#plansBody):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--plan-vh,100dvh)!important;min-height:0!important}
html body.phonePlan #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:calc(var(--plan-vh,100dvh) - 64px - 121px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
/* 1: the dock keeps clear of the gesture bar without a band under it - the larger of its own 10 px and the inset */
html body.mobilePlanStudio:not(.phonePlan) #plans .d4Bottom:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-bottom:max(10px,env(safe-area-inset-bottom,0px))!important}
/* 4: the tool sheet reaches up to the top bars and scrolls - every group tile whole, with its label */
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet.mobileSheetOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-height:calc(var(--plan-vh,100dvh) - var(--d4-h,137px) - var(--d4-top,104px) - 8px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;display:block!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:auto!important;max-height:none!important;overflow:visible!important}
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet .planFlyoutGrid .symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;min-height:56px!important}
/* 3: the one X is the palette's - the 28 x 28 close every bottom sheet has on touch (Part 2 item 2) */
html body.mobilePlanStudio:not(.phonePlan) #plans .mobileToolsSheet .planCategoryFlyout .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important}
/* 8: on the phone a symbol is 18 px now, and its lock badge sat over its middle and took the tap - the phone opens
   items, it does not lock them, so the badge there is only a sign */
html body.phonePlan #plans .planMarker .markerLockBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){pointer-events:none!important}
/* 5: the device panel opens above the dock like the tool sheet, so the dock stays in reach and either one closes the other */
html body.mobilePlanStudio:not(.phonePlan) #plans .planInspector.mobileSheetOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:var(--d4-h,137px)!important;max-height:min(calc(var(--plan-vh,100dvh) * .7 - var(--d4-h,137px)),calc(var(--plan-vh,100dvh) - var(--d4-h,137px) - var(--d4-top,104px) - 8px))!important} /* its top stays where v3.55.0 had it */
/* 9: outside Plan Studio on a phone the side menu is a full-width drawer over the page (the header's menu button opens
   it; a page, the X or Esc closes it), the page takes the whole width, and nothing scrolls under the status bar */
.phoneNavOpen,.phoneNavClose{display:none}
@media(max-width:600px){
html body:not(.phonePlan):not(.mobilePlanStudio) #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:auto!important;width:100vw!important;min-width:0!important;max-width:none!important;height:auto!important;z-index:10060!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))!important;background:var(--color-surface)!important;border:0!important;box-shadow:var(--shadow-plan-card)!important;transform:translateX(-100%)!important;visibility:hidden!important;transition:transform .2s ease,visibility 0s linear .2s!important}
html body:not(.phonePlan):not(.mobilePlanStudio).phoneNavShown #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:none!important;visibility:visible!important;transition:transform .2s ease!important}
html body:not(.phonePlan):not(.mobilePlanStudio) #appShell.shell371 > #appRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body:not(.phonePlan):not(.mobilePlanStudio) #appShell.shell371 > main:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:0!important;width:100%!important;max-width:100vw!important;padding-top:calc(var(--phone-header-h,48px) + env(safe-area-inset-top,0px))!important}
html body:not(.phonePlan):not(.mobilePlanStudio):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::before{content:""!important;position:fixed!important;top:0!important;left:0!important;right:0!important;height:env(safe-area-inset-top,0px)!important;background:var(--color-bg)!important;z-index:10050!important;pointer-events:none!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .brand:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;height:48px!important;min-height:48px!important;padding:0 48px 8px 0!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .brand > :is(b,.brandLogoIcon):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .phoneNavClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;position:absolute!important;top:calc(12px + env(safe-area-inset-top,0px))!important;right:max(16px,env(safe-area-inset-right,0px))!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;z-index:2!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;padding-top:4px!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:14px 0 4px!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #sidebarToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #logoutBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:env(safe-area-inset-top,0px)!important;left:0!important;right:0!important;width:auto!important;z-index:10040!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;padding-left:max(12px,env(safe-area-inset-left,0px))!important;padding-right:max(12px,env(safe-area-inset-right,0px))!important;overflow:hidden!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .headerCrumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .headerProjectPicker:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 0!important;min-width:0!important;width:auto!important;max-width:none!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .searchEverything:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 44px!important;min-width:44px!important;width:44px!important;max-width:44px!important;overflow:hidden!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .searchEverything > *:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .searchEverything:focus-within:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-width:none!important;background:var(--color-surface)!important;position:absolute!important;left:max(12px,env(safe-area-inset-left,0px))!important;right:max(12px,env(safe-area-inset-right,0px))!important;width:auto!important;z-index:5!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .shellHeaderActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;min-width:0!important}
html body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .phoneNavOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;flex:none!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;font-size:var(--text-body)!important}
}
/* v3.55.2 (owner's hand test on the iPhone, the Fold and the iPad Pro 11", 2026-09-24) - the touch layouts only */
/* A1: in Plan Studio on a phone the ☰ opens the same full-width drawer as on every other page (it opened a small list) */
html body.phonePlan #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:auto!important;width:100vw!important;min-width:0!important;max-width:none!important;height:auto!important;z-index:10060!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))!important;background:var(--color-surface)!important;border:0!important;box-shadow:var(--shadow-plan-card)!important;transform:translateX(-100%)!important;visibility:hidden!important;transition:transform .2s ease,visibility 0s linear .2s!important}
html body.phonePlan.phoneNavShown #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:none!important;visibility:visible!important;transition:transform .2s ease!important}
html body.phonePlan .contextNav371 .brand:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;height:48px!important;min-height:48px!important;padding:0 48px 8px 0!important}
html body.phonePlan .contextNav371 .brand > :is(b,.brandLogoIcon):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important}
html body.phonePlan .contextNav371 .phoneNavClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;position:absolute!important;top:calc(12px + env(safe-area-inset-top,0px))!important;right:max(16px,env(safe-area-inset-right,0px))!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;z-index:2!important}
html body.phonePlan .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;padding-top:4px!important}
html body.phonePlan .contextNav371 .navSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:14px 0 4px!important}
html body.phonePlan .contextNav371 .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important}
html body.phonePlan .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important}
html body.phonePlan .contextNav371 #sidebarToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.phonePlan .contextNav371 #logoutBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important}
/* the drawer is full width even when the side menu was collapsed on a bigger screen (compactNav) */
@media(max-width:600px){html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;min-width:0!important;align-items:stretch!important}html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #mainNav > .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;min-width:0!important;align-items:center!important;justify-content:flex-start!important}html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navBtn .navGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:20px!important;height:20px!important;margin:0!important;position:static!important}html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;text-align:left!important;position:static!important;align-self:center!important}}
html body.phonePlan .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;min-width:0!important;align-items:stretch!important}html body.phonePlan .contextNav371 #mainNav > .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;min-width:0!important;align-items:center!important;justify-content:flex-start!important}html body.phonePlan .contextNav371 .navBtn .navGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:20px!important;height:20px!important;margin:0!important;position:static!important}html body.phonePlan .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;text-align:left!important;position:static!important;align-self:center!important}
/* the Place sheet has one header and one × (the sheet's): the palette's own title row and its desktop hint step aside */
html body.phonePlan #plans .phonePlaceSheet .planCategoryFlyout > header:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.phonePlan #plans .phonePlaceSheet .planCategoryFlyout .paletteHint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* A2: the phone bar is design P1 - Select / Place / Find / More (three when Place is not allowed) */
html body.phonePlan #plans .phonePlanBar:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body.phonePlan #plans .phonePlanBar.noPlace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(3,minmax(0,1fr))!important}
html body.phonePlan #plans .phoneBottom .phonePlacingChip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:0 4px 0 12px!important;margin:0 0 6px!important;border-radius:var(--radius)!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;order:-1!important}
html body.phonePlan #plans .phoneBottom .phonePlacingChip span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;font-size:var(--plan-text-body)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body.phonePlan #plans .phoneBottom .phonePlacingChip .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
html body.phonePlan #plans .phonePlaceSheet .phoneCatRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:8px!important;overflow-x:auto!important;padding:0 0 10px!important;scrollbar-width:none!important}
html body.phonePlan #plans .phonePlaceSheet .phoneCatChip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;min-height:44px!important;height:44px!important;padding:0 14px!important;border-radius:22px!important;font-size:var(--plan-text-body)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important}
html body.phonePlan #plans .phonePlaceSheet .phoneCatChip.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent-soft)!important;border-color:var(--color-accent)!important;color:var(--color-accent)!important}
html body.phonePlan #plans .phonePlaceSheet .planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;box-shadow:none!important;border:0!important;padding:0!important;background:transparent!important}
html body.phonePlan #plans .phonePlaceSheet .planFlyoutGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(auto-fill,minmax(72px,1fr))!important}
html body.phonePlan #plans .phonePlaceSheet .planFlyoutGrid .symbolTool:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important;min-height:64px!important}
html body.phonePlan #plans .phoneMoreActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* A2: with a tool in the hand on the phone every tap places - the symbols and review marks (44 px tap boxes at Fit)
   let the tap through to the plan until Select or the × */
html body.phonePlan #plans .planCanvasWrap.placingTool .planMarker:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){pointer-events:none!important}
/* A2: the plan ends above the phone's bottom bar, measured live (the placing note makes the bar taller - the zoom pill went under it) */
html body.phonePlan #plans .planWorkspace:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:calc(var(--plan-vh,100dvh) - 64px - var(--phone-bottom-h,121px) - env(safe-area-inset-top,0px))!important}
/* A3: Lock / Unlock in the phone device sheet */
html body.phonePlan #plans .phoneLockRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:100%!important;min-height:48px!important;margin:8px 0 0!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--plan-text-body)!important}
html body.phonePlan #plans .phoneLockRow.locked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-plan-lock)!important}
html body.phonePlan #plans .phoneLockRow svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important}
/* B4: on the unfolded Fold the sheet cards are two a row (three were too narrow); three from about 720 px */
html body.mobilePlanStudio:not(.phonePlan) #plans .planSheetPanel.asSheet .planPageGalleryGrid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
/* C9: the lens list is wide enough for its longest value, on every layout (the PC included) */
html body #plans .planLensField .pair:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important;align-items:center!important;min-width:0!important}
html body #plans .planLensField .pair > select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;width:auto!important;min-width:calc(13ch + 32px)!important;max-width:100%!important}
html body #plans .planLensField .pair > .lensMmInput:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:0 0 76px!important}
/* C7: ?layout=why - the numbers the layout was decided on, for a hand test */
#planLayoutFacts{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:20000;padding:8px 10px;border-radius:var(--radius);background:var(--color-surface);border:1px solid var(--color-warning);color:var(--color-text);font-size:var(--plan-text-ui);line-height:1.4;pointer-events:none}
/* v3.55.3 (owner's hand test of v3.55.2, and the real-engines step) - the touch layouts only */
/* 6: the tablet's ☰ opens the same page side menu - a drawer over the left of the plan (the whole width on a narrow screen) */
html body.mobilePlanStudio:not(.phonePlan) #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:auto!important;width:100vw!important;min-width:0!important;max-width:none!important;height:auto!important;z-index:10060!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))!important;background:var(--color-surface)!important;border:0!important;box-shadow:var(--shadow-plan-card)!important;transform:translateX(-100%)!important;visibility:hidden!important;transition:transform .2s ease,visibility 0s linear .2s!important}
html body.mobilePlanStudio:not(.phonePlan).phoneNavShown #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:none!important;visibility:visible!important;transition:transform .2s ease!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .brand:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;height:48px!important;min-height:48px!important;padding:0 48px 8px 0!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .brand > :is(b,.brandLogoIcon):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .phoneNavClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;position:absolute!important;top:calc(12px + env(safe-area-inset-top,0px))!important;right:max(16px,env(safe-area-inset-right,0px))!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;z-index:2!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;padding-top:4px!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .navSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:14px 0 4px!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 #sidebarToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 #logoutBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important}
html body.mobilePlanStudio:not(.phonePlan) #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:min(420px,100vw)!important;box-shadow:var(--shadow-plan-card)!important;border-right:1px solid var(--color-border)!important}
html body.mobilePlanStudio:not(.phonePlan) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;min-width:0!important;align-items:stretch!important}html body.mobilePlanStudio:not(.phonePlan) .contextNav371 #mainNav > .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;max-width:none!important;min-width:0!important;align-items:center!important;justify-content:flex-start!important}html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .navBtn .navGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:20px!important;height:20px!important;margin:0!important;position:static!important}html body.mobilePlanStudio:not(.phonePlan) .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;text-align:left!important;position:static!important;align-self:center!important}
/* the drawer scrolls to its last page (Labels, Time, Files, Reports ... below Devices / Assets); Sign Out stays at its foot */
html body:is(.phonePlan,.mobilePlanStudio) #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overscroll-behavior:contain!important}
@media(max-width:600px){html body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}}
html body:is(.phonePlan,.mobilePlanStudio) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
/* the Place sheet (and every phone sheet but the device sheet, which D6 takes to the screen bottom) shows all it holds and scrolls - its body cut off after one row of groups */
html body.phonePlan #plans .phoneSheet:not(.phoneDeviceSheet):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:var(--phone-bottom-h,121px)!important;max-height:calc(var(--plan-vh,100dvh) - 64px - var(--phone-bottom-h,121px) - env(safe-area-inset-top,0px) - 8px)!important}
html body.phonePlan #plans .phoneSheet .phoneSheetBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
/* 1-5: the peek bar - label, status, Details ^, x; Unlock for a locked symbol. One row, above the bottom bar */
html body.phonePlan #plans .phoneSheet.phonePeek:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;min-height:64px!important;max-height:none!important;padding:8px 8px 8px 12px!important}
html body.phonePlan #plans .phonePeek .phonePeekMain:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important;min-height:48px!important;padding:0!important;background:transparent!important;border:0!important;text-align:left!important;color:var(--color-text)!important}
html body.phonePlan #plans .phonePeek .phonePeekText:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;min-width:0!important}
html body.phonePlan #plans .phonePeek .phonePeekText b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-title)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body.phonePlan #plans .phonePeek .phonePeekText small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body.phonePlan #plans .phonePeek :is(.phonePeekDetails,.phonePeekUnlock):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:44px!important;height:44px!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--plan-text-body)!important}
html body.phonePlan #plans .phonePeek .phonePeekUnlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-plan-lock)!important}
html body.phonePlan #plans .phonePeek .phonePeekUnlock svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.6!important}
html body.phonePlan #plans .phonePeek .phonePeekClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}

/* ===== v3.56.0 - the Device tab, built to detail 7 (owner approved 2026-09-23), and the notes from his v3.55.0 PC check ===== */
html body #plans .deviceTab.d7v2:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:16px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
html body #plans .d7v2 .d7Head:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:2px!important}
html body #plans .d7v2 .d7Head h3:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--plan-text-title)!important;font-weight:600!important;color:var(--color-text)!important}
html body #plans .d7v2 .d7Head small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7Section:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important;padding:0!important;border:0!important}
html body #plans .d7v2 .d7Work:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){gap:4px!important}
html body #plans .d7v2 .d7SectionHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:baseline!important;gap:8px!important}
html body #plans .d7v2 .d7SectionLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7SectionHead .linkBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-accent)!important;background:none!important;border:0!important;padding:0!important;min-height:0!important;height:auto!important}
html body #plans .d7v2 .d7Hint:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
/* 1. status: three buttons in the plan colours */
html body #plans .d7v2 .d7StatusRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important}
html body #plans .d7v2 .d7Status:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 0!important;height:34px!important;min-height:34px!important;padding:0 6px!important;border-radius:6px!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;white-space:nowrap!important}
html body #plans .d7v2 .d7Status:disabled:not(.active):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.55!important;cursor:not-allowed!important}
html body #plans .d7v2 .d7Status.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-text)!important;font-weight:600!important;opacity:1!important;cursor:default!important}
html body #plans .d7v2 .d7Status.active[data-status="new"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-new)!important;background:var(--color-accent-soft)!important}
html body #plans .d7v2 .d7Status.active[data-status="progress"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-progress)!important;background:var(--color-status-progress-soft)!important}
html body #plans .d7v2 .d7Status.active[data-status="done"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-status-completed)!important;background:var(--color-success-soft)!important}
html body #plans .d7v2 .d7Dot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:8px!important;height:8px!important;border-radius:4px!important;background:var(--color-text-muted)!important}
html body #plans .d7v2 .d7Dot.statusNew:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-new)!important}
html body #plans .d7v2 .d7Dot.statusProgress:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-progress)!important}
html body #plans .d7v2 .d7Dot.statusCompleted:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-status-completed)!important}
html body #plans .d7v2 .d7Dot.statusBlocked:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7Dot.d7DotIssue:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-warning)!important}
/* 2. the quick actions: 56 px, an 18 px line icon */
html body #plans .d7v2 .d7QuickRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:8px!important}
html body #plans .d7v2 .d7Quick:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 0!important;height:56px!important;min-height:56px!important;border-radius:8px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important;font-weight:500!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:0!important}
html body #plans .d7v2 .d7Quick svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body #plans .d7v2 .d7QuickIssue:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-warning)!important;border-color:var(--color-warning-line)!important;background:var(--color-warning-soft)!important}
html body #plans .d7v2 .d7QuickIssue.open:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-warning)!important;background:var(--color-warning-soft)!important}
/* the Report issue form, inside the panel */
html body #plans .d7v2 .d7IssueForm:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:12px!important;padding:14px!important;border-radius:8px!important;border:1px solid var(--color-warning-line)!important;background:var(--color-warning-faint)!important}
html body #plans .d7v2 .d7IssueHead:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:space-between!important;align-items:center!important;gap:8px!important}
html body #plans .d7v2 .d7IssueHead b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-body)!important;font-weight:600!important;color:var(--color-text)!important}
html body #plans .d7v2 .d7Field:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;gap:6px!important;margin:0!important}
html body #plans .d7v2 .d7FieldLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;font-weight:500!important;color:var(--color-text)!important}
html body #plans .d7v2 .d7Chips:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
html body #plans .d7v2 .d7Chips button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 10px!important;border-radius:14px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important}
html body #plans .d7v2 .d7Chips button[aria-pressed="true"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:var(--color-warning)!important;background:var(--color-warning-soft)!important;color:var(--color-warning)!important}
html body #plans .d7v2 .d7IssueForm textarea:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:64px!important;height:64px!important;padding:8px 10px!important;resize:none!important;line-height:1.5!important;font-size:var(--plan-text-body)!important}
html body #plans .d7v2 .d7Pair:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
html body #plans .d7v2 .d7IssueForm select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;font-size:var(--plan-text-body)!important}
html body #plans .d7v2 .d7IssueNote:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:0!important;font-size:var(--plan-text-ui)!important;line-height:1.5!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7IssueNote b:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){color:var(--color-status-progress)!important;font-weight:600!important}
html body #plans .d7v2 .d7IssueActions:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;justify-content:flex-end!important;gap:8px!important}
html body #plans .d7v2 .d7IssueSubmit:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 14px!important;border-radius:6px!important;border:1px solid var(--color-warning)!important;background:var(--color-warning)!important;color:var(--color-bg)!important;font-size:var(--plan-text-ui)!important;font-weight:600!important}
html body #plans .d7v2 .d7IssueSubmit:disabled:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.45!important;cursor:not-allowed!important}
html body #plans .d7v2 .d7IssuePhotoName:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-label)!important;color:var(--color-text-muted)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* a plain 32 px button with a 14 px icon (Lock, Centre, Take photo, Cancel) */
html body #plans .d7v2 .d7Btn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;padding:0 12px!important;border-radius:6px!important;border:1px solid var(--color-border-strong)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
html body #plans .d7v2 .d7Btn svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7Picker svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7MoreDetails svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7Chevron svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:14px!important;height:14px!important;flex:none!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important}
/* 3. the photos */
html body #plans .d7v2 .d7Thumbs:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:8px!important;flex-wrap:wrap!important}
html body #plans .d7v2 .d7Thumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:64px!important;height:48px!important;min-height:48px!important;padding:0!important;border-radius:6px!important;border:1px solid var(--color-border)!important;background:var(--color-surface-2)!important;overflow:hidden!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important}
html body #plans .d7v2 .d7Thumb img:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
/* 4. open work */
html body #plans .d7v2 .d7WorkRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;gap:8px!important;min-height:32px!important;font-size:var(--plan-text-body)!important;color:var(--color-text)!important}
html body #plans .d7v2 .d7WorkTitle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #plans .d7v2 .d7WorkRow small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7IssueChip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;height:20px!important;padding:0 7px!important;border-radius:10px!important;display:inline-flex!important;align-items:center!important;font-size:var(--plan-text-label)!important;font-weight:600!important;color:var(--color-warning)!important;background:var(--color-warning-soft)!important}
/* 5. the details fold away */
html body #plans .d7v2 .d7DetailsToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;width:100%!important;padding:0 12px!important;border-radius:6px!important;border:1px solid var(--color-border-strong)!important;background:var(--color-surface-2)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7Chevron:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;transform:rotate(-90deg)!important;transition:none!important}
html body #plans .d7v2 .d7Chevron.open:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:none!important}
html body #plans .d7v2 .d7Grid:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;gap:8px 10px!important;align-items:center!important}
html body #plans .d7v2 .d7Key:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7Grid > input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7Grid > select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7Grid .planLensField select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7Picker:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;width:100%!important;box-sizing:border-box!important;border-radius:6px!important;font-size:var(--plan-text-body)!important}
html body #plans .d7v2 .d7Picker:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;padding:0 10px!important;border:1px solid var(--color-border-strong)!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;text-align:left!important}
html body #plans .d7v2 .d7Picker span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #plans .d7v2 .d7Grid .planLensField:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important;min-width:0!important}
html body #plans .d7v2 .d7Note:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-top:-4px!important;font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important}
html body #plans .d7v2 .d7Value:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-body)!important;font-weight:500!important}
html body #plans .d7v2 .d7Mount:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;gap:6px!important}
html body #plans .d7v2 .d7Buttons:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-wrap:wrap!important;gap:6px!important}
/* 6. More details, and Remove from plan */
html body #plans .d7v2 .d7MoreDetails:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:36px!important;min-height:36px!important;width:100%!important;padding:0 12px!important;border-radius:6px!important;border:1px solid var(--color-border-strong)!important;background:transparent!important;color:var(--color-text)!important;font-size:var(--plan-text-body)!important;font-weight:500!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;text-align:left!important}
html body #plans .d7v2 .d7MoreDetails small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important;color:var(--color-text-muted)!important;font-weight:400!important}
html body #plans .d7v2 .d7Danger:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-top:1px solid var(--color-border)!important;padding-top:12px!important}
html body #plans .d7v2 .d7Remove:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:28px!important;min-height:28px!important;padding:0 10px!important;border-radius:6px!important;border:1px solid var(--color-danger-strong)!important;background:transparent!important;color:var(--color-danger)!important;font-size:var(--plan-text-ui)!important}
/* the Tasks tab, filtered to one device */
html body #plans .planTasksPanel .taskDeviceFilter:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:6px 8px 6px 12px!important;margin-bottom:8px!important;border-radius:6px!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;font-size:var(--plan-text-ui)!important;font-weight:600!important}
/* the plan: a blocking issue = the In progress colour plus a warning badge (not the Blocked red) */
html body #plans .planMarker .blockBadge:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:calc(var(--lock-offset,12px) * -1)!important;top:calc(var(--lock-offset,12px) * -1)!important;width:calc(14px * var(--plan-compensation,1))!important;height:calc(14px * var(--plan-compensation,1))!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--color-warning)!important;color:var(--color-bg)!important;z-index:4!important;pointer-events:none!important}
html body #plans .planMarker .blockBadge svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:70%!important;height:70%!important;fill:none!important;stroke:currentColor!important;stroke-width:2.25!important;stroke-linecap:round!important;stroke-linejoin:round!important}
/* note A: fitted palette icons keep the rail's stroke on screen (1.75 of 24, drawn at 20 px) */
html body #plans .planCategoryFlyout .planFlyoutGrid .symbolTool svg[data-fit]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .mobileToolsSheet .planFlyoutGrid .symbolTool svg[data-fit]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){stroke-width:1.458px!important}
html body #plans svg[data-fit] *:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){vector-effect:non-scaling-stroke}
/* note B: "Labels hidden - zoom in" never on the sheet - in the status bar on the PC, beside the zoom pill on touch */
html body #plans .planStatusBar .planLabelNotice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:static!important;display:inline-flex!important;align-items:center!important;height:auto!important;padding:0 0 0 10px!important;margin:0!important;border:0!important;border-left:1px solid var(--color-border)!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important;transform:none!important}
html body #plans .planStatusBar .planLabelNotice[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body #plans .planCanvasWrap > .planLabelNotice:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;right:12px!important;bottom:56px!important;top:auto!important;left:auto!important;z-index:120!important;height:24px!important;padding:0 10px!important;display:inline-flex!important;align-items:center!important;border-radius:12px!important;background:var(--color-surface)!important;border:1px solid var(--color-border)!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-label)!important;transform:none!important}
html body #plans .planCanvasWrap > .planLabelNotice[hidden]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* v3.56.0 (detail 7): the inspector tabs as drawn - outlined 32 px tabs, the open one filled soft */
html body #plans .planInspector .planSideTabs button[role="tab"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:32px!important;min-height:32px!important;border-radius:6px!important;border:1px solid var(--color-border)!important;background:transparent!important;color:var(--color-text-muted)!important;font-size:var(--plan-text-ui)!important;font-weight:400!important;box-shadow:none!important}
html body #plans .planInspector .planSideTabs button[role="tab"][aria-selected="true"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-color:transparent!important;background:var(--color-accent-soft)!important;color:var(--color-text)!important;font-weight:600!important}
html body #plans .d7v2 .d7MoreDetails > span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* v3.56.0: the camera range row keeps its row element (read by name) without breaking the Details grid */
html body #plans .d7v2 .d7Grid > .d7Row:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:contents!important}
/* v3.56.0 side-by-side with detail 7: the lit status keeps its colour (the global "disabled" greying skips it), links as drawn
   (no underline), More details on one line, the urgency list wide enough for "Blocks the work" */
html body #plans .d7v2 .d7Status.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){filter:none!important}
html body #plans .d7v2 .d7SectionHead .linkBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){text-decoration:none!important}
html body #plans .d7v2 .d7MoreDetails small:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important}
html body #plans .d7v2 .d7Pair:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important}
html body #plans .d7v2 .d7IssueForm select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-left:8px!important;padding-right:20px!important}
html body #plans .d7v2 .d7IssueForm select:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-ui)!important}
html body #plans .d7v2 .d7IssueForm textarea:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:auto!important;min-height:64px!important}

/* v3.56.0 (owner B1, 2026-09-24): board 11 - every palette icon 20 px drawn, the rail's too, with the one stroke */
html body #plans #planToolRail svg.planRailGlyph[data-fit]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important;flex:0 0 20px!important;stroke-width:1.458px!important}
/* v3.56.0 (owner, 2026-09-24): no tasks - the status buttons clearly look disabled (the current one keeps only its dot), and the reason links to Tasks */
html body #plans .d7v2 .d7StatusOff .d7Status:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .d7v2 .d7StatusOff .d7Status.active[data-status]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.5!important;background:transparent!important;border-style:dashed!important;border-color:var(--color-border)!important;color:var(--color-text-muted)!important;cursor:not-allowed!important;box-shadow:none!important}
html body #plans .d7v2 .d7NoTasks .linkBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.phonePlan #plans .phoneNoTasks .linkBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;min-height:0!important;height:auto!important;padding:0!important;border:0!important;background:none!important;color:var(--color-accent)!important;font-size:inherit!important;font-weight:inherit!important;text-decoration:underline!important;cursor:pointer!important}
html body.phonePlan #plans .phoneBig.phoneStartOff:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){opacity:.5!important;border-style:dashed!important;cursor:not-allowed!important}
html body.phonePlan #plans .phoneNoTasks:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin:8px 0 0!important;font-size:var(--plan-text-body)!important;color:var(--color-text-muted)!important}

/* ===== v3.57.0 - the device layout rule ===== */
/* 1. (owner, 2026-09-25 - the unfolded Fold) on a SHORT tablet screen the device panel opens at half the space between the top bars and the dock, so the plan keeps the other half (the selected symbol is moved into it); the handle drags it up to full height */
html body.mobilePlanStudio:not(.phonePlan) #plans.planShort .planInspector.mobileSheetOpen:not(.sheetFull):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){max-height:calc((var(--plan-vh,100dvh) - var(--d4-h,137px) - var(--d4-top,104px)) * .5)!important}

/* 3. (the rule) the side menu is the drawer on EVERY touch layout, not only up to 600 px - it ends the iPad mini portrait's narrow 64 px column with names broken letter by letter. Above 600 px it is up to 420 px wide over the page; the page keeps its header */
@media(min-width:601px){
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:0!important;left:0!important;bottom:0!important;right:auto!important;width:min(420px,100vw)!important;min-width:0!important;max-width:none!important;height:auto!important;z-index:10060!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))!important;background:var(--color-surface)!important;border:0!important;box-shadow:var(--shadow-plan-card)!important;transform:translateX(-100%)!important;visibility:hidden!important;transition:transform .2s ease,visibility 0s linear .2s!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio).phoneNavShown #appShell.shell371 > aside.contextNav371:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){transform:none!important;visibility:visible!important;transition:transform .2s ease!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) #appShell.shell371 > #appRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .brand:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;height:48px!important;min-height:48px!important;padding:0 48px 8px 0!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .brand > :is(b,.brandLogoIcon):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .phoneNavClose:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;position:absolute!important;top:calc(12px + env(safe-area-inset-top,0px))!important;right:max(16px,env(safe-area-inset-right,0px))!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;z-index:2!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #mainNav:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:column!important;padding-top:4px!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navSection:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:14px 0 4px!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #sidebarToggle:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) .contextNav371 #logoutBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:block!important;width:100%!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader .phoneNavOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:grid!important;place-items:center!important;flex:none!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;font-size:var(--text-body)!important}
html.inputTouch body:not(.phonePlan):not(.mobilePlanStudio) #appShell.shell371 > main:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:0!important;width:100%!important;max-width:100vw!important}
}

/* 4. the WIDE tablet (a finger, 1101-1400 px) - built to T5 / T6 (owner approved 2026-09-25): the tablet's simple header and chips, side panels like the PC but sized for a finger, the sheet bar inside the plan, the page pinned */
/* the tablet header and chips (T1's rules, for the wide tablet) */
html body.planWide #plans .d4Top:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;display:flex!important;align-items:center!important;gap:8px!important;height:52px!important;padding:6px 12px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;position:relative!important;z-index:150!important}
html body.planWide #plans :is(.d4Top,.d4Chips) .d4Spacer{flex:1 1 auto!important}
html body.planWide #plans .d4Top .d4Icon:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:40px!important;height:40px!important;padding:0!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-section)!important}
html body.planWide #plans .d4Top .d4Project:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:0!important;max-width:40vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-body)!important;padding:8px 12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}
html body.planWide #plans .d4Top .d4Review:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:40px!important;padding:0 16px!important;border-radius:var(--radius)!important;background:var(--color-accent)!important;color:var(--color-on-accent)!important;border:1px solid var(--color-accent)!important;font-weight:var(--weight-semibold)!important;font-size:var(--text-body)!important}
html body.planWide #plans .d4Top .d4Review.empty:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-surface-2)!important;color:var(--color-text)!important;border-color:var(--color-border)!important}
html body.planWide #plans :is(.d4Top,.d4Chips) .planMenu > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;gap:4px!important;height:40px!important;min-width:40px!important;padding:0 12px!important;border-radius:var(--radius)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-body)!important;list-style:none!important;cursor:pointer!important}
html body.planWide #plans :is(.d4Top,.d4Chips) .planMenu:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html body.planWide #plans .d4Top .d4More .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planWide #plans .d4Chips .d4View .planMenuList:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){right:0!important;left:auto!important}
html body.planWide #plans .d4Find:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;padding:8px 12px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;position:relative!important;z-index:149!important}
html body.planWide #plans .d4Find input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:100%!important;height:40px!important;font-size:var(--text-body)!important}
html body.planWide #plans .d4Chips:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;display:flex!important;align-items:center!important;gap:6px!important;padding:8px 12px!important;background:var(--color-surface)!important;border-bottom:1px solid var(--color-border)!important;position:relative!important;z-index:148!important;overflow:visible!important}
html body.planWide #plans .d4Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:36px!important;padding:0 14px!important;border-radius:var(--radius-pill)!important;background:var(--color-surface-2)!important;border:1px solid var(--color-border)!important;color:var(--color-text)!important;font-size:var(--text-body)!important;white-space:nowrap!important}
html body.planWide #plans .d4Chip.active:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){background:var(--color-accent)!important;border-color:var(--color-accent)!important;color:var(--color-on-accent)!important}
html body.planWide #plans .d4Top:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-top:calc(6px + env(safe-area-inset-top,0px))!important;padding-left:max(12px,env(safe-area-inset-left,0px))!important;padding-right:max(12px,env(safe-area-inset-right,0px))!important;height:calc(52px + env(safe-area-inset-top,0px))!important}
/* the plan's own header replaces the app header; the page is the visible height (Safari's toolbar never moves it) */
html body.planWide main > header.globalUtilityHeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html body.planWide main:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--plan-vh,100dvh)!important}
html body.planWide main>.content:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding-top:0!important}
html body.planWide #plans .d4Top .d4Crumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--plan-text-body)!important;color:var(--color-text-muted)!important;white-space:nowrap!important}
/* touch sizes: 44 px buttons, chips 36 px, the x 44 x 44 */
html body.planWide #plans .d4Chips .d4Chip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planWide #plans .d4Chips .planMenu > summary:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:36px!important;min-height:36px!important}
html body.planWide #plans :is(.planSheetNav button,.planSheetNav .planSheetName,.planSheetNav .zoomReadout):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:44px!important;min-height:44px!important}
html body.planWide #plans .planSheetNav button:not(.planSheetName):not([data-nav="lock"]):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:44px!important}
html body.planWide #plans .planSheetNav .saveState:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline-flex!important;align-items:center!important;height:44px!important;padding:0 8px 0 0!important;color:var(--color-success)!important;font-size:var(--plan-text-ui)!important;white-space:nowrap!important}
html body.planWide #plans .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
html body.planWide #plans #planToolRail :is(.selectTool,.planCategoryButton):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:56px!important}
/* the palette: two attached 240 px panels, a 44 px search with 16 px text (iPad Safari never zooms), 44 px buttons */
html body.planWide #plans .planPaletteSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:44px!important;min-height:44px!important}
html body.planWide #plans .planPaletteSearch input:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-input-touch)!important;height:42px!important}
html body.planWide #plans .planCategoryFlyout .planPaletteBack:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:44px!important;height:44px!important;min-width:44px!important}
/* the edge tabs on the wide tablet: 20 x 56 (the PC keeps its 16 x 44) */
html body.planWide #plans .planCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:56px!important;min-width:20px!important;min-height:56px!important}
/* the Device tab closes from its head (T5) */
html body.planWide #plans .d7v2 .d7Head:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important;padding-right:52px!important}
html body.planWide #plans .d7v2 .d7Head .d7Close:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:absolute!important;top:0!important;right:0!important}
html body.planWide #plans .d7v2 .d7Status:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body.planWide #plans .d7v2 .d7Btn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:44px!important;min-height:44px!important}
html body.planWide #plans .planSheetNav [data-nav="lock"] span:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important}
html body.planWide #plans .planSheetNav [data-nav="lock"]:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){padding:0 14px!important;gap:6px!important}
html body.planWide #plans .d4Chip .d4Count:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){margin-left:4px!important;font-weight:400!important}
/* T6: the two attached palette panels on the wide tablet (the PC draws them from 1600 px) */
@media(min-width:1300px){html body.planWide #plans .planWorkspace.toolsOpen.paletteGroupOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:480px!important}}
@media(max-width:1299px){html body.planWide #plans .planWorkspace.toolsOpen.paletteGroupOpen:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){--plan-palette-col:240px!important}}
/* (real iPad mini landscape, 744 px tall) the rail scrolls when its tools do not fit the height */
html body.planWide #plans #planToolRail:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow-y:auto!important;overscroll-behavior:contain!important}
html body.planWide #plans #planToolFlyoutHost:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;flex-direction:row!important;align-items:stretch!important}
html body.planWide #plans #planToolFlyoutHost>.planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 0!important;min-width:0!important}
html body.planWide #plans #planToolFlyoutHost>.planCategoryFlyout+.planCategoryFlyout:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){border-left:1px solid var(--color-border)!important}
html body.planWide #plans #planToolFlyoutHost>.planCategoryFlyout+.planCategoryFlyout.groupLevel .planPaletteSearch:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}

/* 5. the PC with touch sizing (a finger above 1400 px - interactive whiteboards, big touch displays): the PC layout, every target in Plan Studio 44 px (the symbols keep 18 px and the handles their large touch ring through html.inputTouch) */
html body.planTouchSized:not(.planWide) #plans :is(.planStudioCommandHeader,.planSheetNav,.planInspector,.planCategoryFlyout,#planToolRail) :is(button,select,summary,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:44px!important}
html body.planTouchSized:not(.planWide) #plans :is(.planStudioCommandHeader,.planSheetNav) button:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-width:44px!important}
html body.planTouchSized:not(.planWide) #plans .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:44px!important;height:44px!important;min-width:44px!important}
html body.planTouchSized:not(.planWide) #plans .planCollapseBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:56px!important;min-width:20px!important;min-height:56px!important}
/* 6. the app's own tooltip - a long-press (a finger) or hovering (a pen), where a title would show for a mouse */
html body .appTip:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;z-index:10000!important;max-width:min(320px,calc(100vw - 16px))!important;padding:8px 10px!important;border-radius:8px!important;background:var(--color-surface-2)!important;color:var(--color-text)!important;border:1px solid var(--color-border)!important;box-shadow:var(--shadow-plan-card)!important;font-size:var(--text-small)!important;line-height:1.4!important;pointer-events:none!important}
/* 7. (the device matrix) every touch layout: the bottom sheets' handles take a finger (a 32 px band, the bar inside stays thin), the x is 44 x 44, the This-sheet actions 36 px like chips */
html.inputTouch body #plans :is(.sheetGrab,.d4Grab):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:32px!important}
html.inputTouch body #plans .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:relative!important}
html.inputTouch body #plans .uiCloseButton:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::after{content:""!important;position:absolute!important;inset:-8px!important} /* the x keeps its 28 x 28 look (T3) and takes a 44 x 44 finger */
html.inputTouch body #plans .sheetFact:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:36px!important}

/* ===== v3.57.1 — the owner's hand test of v3.57.0 (2026-09-25) ===== */
/* 3. zooming in never shrinks a label: a selected (or, with a mouse, pointed-at) label is the larger of its true size and the readable size at EVERY zoom - it used to show at 12 px while tiny and drop to 8 px once its true size passed 8 px */
html body #plans .planMarker.selected .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html.inputFine body #plans .planMarker:hover .label:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){visibility:visible!important;transform:translate(calc(-50% + var(--label-x,0px)),calc(var(--annotation-top,20px) + var(--label-y,0px))) scale(var(--label-read,1))!important}
/* 2. the page is pinned on every touch layout of Plan Studio: nothing scrolls or bounces the page (T5), and the top bar follows the visible area's top edge, below the safe area */
html.inputTouch:has(body.planWide),html.inputTouch:has(body.mobilePlanStudio),html.inputTouch:has(body.phonePlan){overflow:hidden!important;height:100%!important;overscroll-behavior:none!important}
html.inputTouch body:is(.planWide,.mobilePlanStudio,.phonePlan):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;inset:0!important;overflow:hidden!important;overscroll-behavior:none!important}
html.inputTouch body.planWide:not(.phonePlan):not(.mobilePlanStudio) main > header.globalUtilityHeader:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){top:calc(env(safe-area-inset-top,0px) + var(--plan-vv-top,0px))!important;touch-action:none!important}
/* 3. on touch a lock badge takes a finger: the 16 px badge keeps its look and gets a 44 px tap area that grows OUTWARD only (right and down, away from the symbol) - spread on every side it covered the symbol and took the drag meant for it */
html.inputTouch body #plans .planMarker .markerLockBadge.canUnlock:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy)::after{content:""!important;position:absolute!important;top:-4px!important;left:-4px!important;right:-24px!important;bottom:-24px!important}
/* 5. the keyboard hints (arrows, Enter, Esc, PgUp / PgDn) only show when a real keyboard is used - never on touch */
html.inputTouch:not(.realKeyboard) body #plans .sheetPanelFoot:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* 4. the on-screen keyboard (html.kbOpen, --kb-h from the visual viewport): a bottom sheet holding the focused field sits right above the keyboard, fits the visible area under the top bar and scrolls; nothing covers the sheet bar */
html.kbOpen body #plans :is(.phoneSheet,.planInspector.mobileSheetOpen,.planSheetPanel.asSheet):focus-within:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:var(--kb-h,0px)!important;max-height:calc(var(--plan-vh,100dvh) - 64px - env(safe-area-inset-top,0px))!important;transform:none!important}
html.kbOpen body #plans .planSheetPanel.asSheet:focus-within .sheetPanelBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
/* the page-list popover (the wide tablet, the PC): its head and filters keep their size, the thumbnails scroll inside it - they used to be squashed away - and nothing is drawn outside it onto the sheet bar */
html body #plans .planSheetPanel:not(.asSheet):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){overflow:hidden!important}
html body #plans .planSheetPanel:not(.asSheet) > :is(.sheetPanelHead,.reviewChips,.sheetPanelFoot):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-shrink:0!important}
html body #plans .planSheetPanel:not(.asSheet) > .sheetPanelBody:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:1 1 auto!important;min-height:88px!important;overflow-y:auto!important}
/* one clean focus ring on the sheet search: the box shows it, the field inside draws none of its own (it was doubled and offset) */
html body #plans .sheetSearch input:focus:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html body #plans .sheetSearch input:focus-visible:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:none!important;box-shadow:none!important}
html body #plans .sheetSearch:focus-within:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){outline:2px solid var(--color-accent)!important;outline-offset:0!important}
/* 1. the touch drawer always shows the full names: the collapsed (icons only) look remembered on the PC used to win over the drawer's own rules (specificity); body.compactNav stays - Plan Studio's layout reads it */
html.inputTouch body.compactNav:not(.phonePlan) .contextNav371 .navBtn:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;max-width:none!important;min-width:0!important;height:48px!important;min-height:48px!important;place-items:initial!important}
html.inputTouch body.compactNav:not(.phonePlan) .contextNav371 .navBtn .navLabel:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:inline!important;flex:1 1 auto!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html.inputTouch body.compactNav:not(.phonePlan) .contextNav371 .navBtn .navGlyph:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex:none!important;width:20px!important;height:20px!important}
html.inputTouch body.compactNav:not(.phonePlan) .contextNav371 .navBtn .navGlyph svg:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:20px!important;height:20px!important}
html.inputTouch body.compactNav:not(.phonePlan) .contextNav371 .navFooterRow:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){flex-direction:row!important}
html.inputTouch body.compactNav:not(.phonePlan) .contextNav371 .navFooterRow>:is(#sidebarToggle,#logoutBtn):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){width:auto!important}
/* 4. (found on the real iPhone) iOS zooms the whole page when a focused field's text is under 16 px - the sheet search was at a Plan Studio size, so the page zoomed and the keyboard rules could not hold. Every text field in Plan Studio on touch uses the 16 px touch-input size (as the palette search already did) */
html.inputTouch body #plans :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){font-size:var(--text-input-touch)!important}
/* 2. (found on the real iPad mini in landscape) the pinned page was still as tall as the large viewport - a swipe from the bottom edge scrolled it by the difference (174 px) and took the top bar off screen: the page is exactly the visible height */
html.inputTouch:has(body.planWide):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html.inputTouch:has(body.mobilePlanStudio):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy),html.inputTouch:has(body.phonePlan):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){height:var(--plan-vh,100%)!important;max-height:var(--plan-vh,100%)!important}
html.inputTouch body:is(.planWide,.mobilePlanStudio,.phonePlan):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){bottom:auto!important;height:var(--plan-vh,100%)!important;max-height:var(--plan-vh,100%)!important}
/* 4. with the keyboard open on a small screen the sheet's handle and title row step aside, so the search field and more of its results fit above the keyboard */
html.kbOpen body #plans .planSheetPanel.asSheet:focus-within :is(.sheetGrab,.sheetPanelHead.touchHead):not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
/* 4. (found on the real iPad mini in landscape) with the keyboard open only ~230 px of a short landscape screen are left - the top bars, the search and the sheet bar filled it and the page list had no room. While typing there, the page list covers the top bars (from the visible top edge down to the sheet bar, which stays free), its filters step aside and the thumbnails give way to a compact list of names, so results show above the keyboard */
html.kbOpen body.planWide #plans .planSheetPanel:not(.asSheet):focus-within:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){position:fixed!important;top:var(--plan-vv-top,0px)!important;bottom:calc(var(--kb-h,0px) + 64px)!important;max-height:none!important;z-index:10050!important}
html.kbOpen body.planWide #plans .planSheetPanel:not(.asSheet):focus-within .reviewChips:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html.kbOpen body #plans .planSheetPanel:focus-within .planPageThumb .thumbImage:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){display:none!important}
html.kbOpen body #plans .planSheetPanel:focus-within .planPageThumb:not(#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy#legacy){min-height:44px!important}