/* Shared visual layer. Local assets and system fonts keep every surface offline-capable. */
:root {
  --brand:#737373;
  --ink:#282828; --head:#323232; --body:#5d5d5d; --label:#6f6f6f; --muted:#7a7a7a;
  --line:#e1e1e1; --rule:#efefef; --bg:#efefef; --sunken:#f6f6f6;
  --floor:#ededed; --floor-line:#d2d2d2;
}
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button, .line-btn { transition:background .15s, border-color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #848484; outline-offset:3px; }

/* Supervisor workspace */
body.hmi { border-top:0; grid-template-rows:64px 86px minmax(0,1fr); background:var(--bg); }
.hmi #bar { padding:0 24px; gap:12px; background:#fff; border-bottom:1px solid var(--line); color:var(--ink); }
.hmi #bar .mark { width:29px; height:29px; }
.hmi #bar .title { font-size:15px; letter-spacing:.025em; color:var(--ink); }
.hmi #bar .n { color:var(--label); }
.hmi #bar .line-btn { padding:7px 10px; border-color:var(--line); border-radius:5px; background:#fff; color:var(--head); font-size:10px; }
.hmi #bar .line-btn:hover { border-color:#a3a3a3; background:#f5f5f5; }
.hmi #bar .tag.demo { padding:4px 7px; background:#f5f5f5; border-color:var(--line); color:var(--label); }
.hmi #bar .mark rect:nth-of-type(2) { fill:#a3a3a3; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 26px; }
.workspace-heading h1 { font:500 28px/1.1 var(--sans); letter-spacing:-1px; margin:0; color:var(--ink); }
.workspace-metrics { display:flex; align-items:center; gap:34px; }
.workspace-metrics > div { border-left:1px solid #d4d4d4; padding-left:24px; min-width:122px; }
.workspace-metrics small { display:block; font-size:10px; margin-bottom:5px; color:var(--label); }
.workspace-metrics strong { font:500 23px/1 var(--din); color:var(--ink); }
.workspace-metrics span { font:10px var(--mono); color:var(--label); margin-left:5px; }
.hmi #main { gap:16px; padding:0 18px 18px; grid-template-columns:minmax(0,1fr) 450px 350px; position:relative; }
.hmi #main.nodrawer { grid-template-columns:minmax(0,1fr) 450px; }
.hmi .col { border:1px solid #dddddd; border-radius:12px; overflow:hidden; box-shadow:0 3px 12px #2f2f2f05; }
.hmi h2.h { min-height:49px; padding:12px 16px; font-size:11px; color:var(--head); background:#fff; }
.hmi #floor > h2.h { flex-wrap:wrap; gap:8px; }
.hmi #floor h2.h .tools { flex-wrap:wrap; }
.hmi #hdr-cap { font-size:9px; color:var(--label); }
.hmi .line-btn { border-radius:5px; padding:5px 9px; }
.hmi .line-btn.on { background:#363636; border-color:#363636; color:#fff; }
.hmi #stage-wrap { background:#f5f5f5; position:relative; }
.hmi #stage { filter:drop-shadow(0 8px 5px #34343410); }
.map-controls { position:absolute; top:15px; right:15px; display:flex; flex-direction:column; z-index:1; border:1px solid #d8d8d8; border-radius:7px; overflow:hidden; box-shadow:0 3px 10px #34343410; }
.map-controls button { width:36px; height:36px; background:#ffffffed; border:0; color:#4e4e4e; font:20px var(--sans); cursor:pointer; }
.map-controls button + button { border-top:1px solid #e3e3e3; }
.map-controls button:hover { background:#f0f0f0; }
.hmi .st-name { fill:#444444; }
.hmi .st-vol, .hmi .st-dim { fill:#727272; }
.hmi #key { background:#f7f7f7dc; padding:9px 14px; color:#6d6d6d; font-size:9px; border-top:1px solid #e2e2e2; }
.map-legend { flex:0 0 auto; background:#f7f7f7e6; border-top:1px solid #e2e2e2; }
.map-legend summary { padding:11px 14px; display:flex; justify-content:space-between; gap:12px; color:#6a6a6a; font:10px var(--sans); cursor:pointer; }
.map-legend summary span:first-child { font:600 9px var(--din); text-transform:uppercase; letter-spacing:.08em; }
.map-legend summary span:first-child::before { content:'+'; margin-right:9px; }
.map-legend[open] summary span:first-child::before { content:'−'; }
.hmi .demo { padding:10px 14px; background:#f8f8f8; border-bottom:1px solid var(--line); }
.hmi .demo-note { line-height:1.5; margin-top:6px; }
.hmi #under { height:140px; background:#fff; }
.hmi #under > div { padding:14px 16px; }
.hmi #under h4 { font-size:10px; color:var(--head); margin-bottom:10px; }
.hmi table.dq td { padding-top:6px; padding-bottom:6px; }
.hmi #robots { background:#f4f4f4; }
.hmi #panels { padding:12px; display:flex; flex-direction:column; gap:12px; }
.hmi .panel { background:#fff; border:1px solid #dfdfdf; border-radius:9px; padding:13px; margin:0; box-shadow:0 3px 8px #34343404; flex-shrink:0; gap:3px; }
.hmi .panel.staging { border-color:var(--info); box-shadow:0 0 0 1px #3b82f640; background:#f8fbff; }
.hmi .p-head { gap:9px; flex-wrap:wrap; }
.hmi .p-head strong { font:600 21px var(--din); letter-spacing:-.5px; color:var(--ink); }
.hmi .pos { margin-left:auto; }
.hmi .badge { font-size:9px; padding:4px 7px; border-radius:4px; }
.hmi .route { padding:5px 0 7px; font-size:10px; }
.hmi .device { border:0; border-top:1px solid var(--rule); border-radius:0; padding:12px 0 4px; gap:15px; }
.hmi .device-side { flex-basis:128px; gap:5px; padding:4px 8px 8px; background:#f6f6f6; border:1px solid #e8e8e8; border-radius:7px; }
.robot-portrait { display:block; width:104px; height:156px; object-fit:contain; }
.hmi .device-main { min-height:150px; gap:8px; }
.hmi .screen-title { font-size:12px; padding:4px 0; }
.hmi .home-btn { border-radius:6px; padding:12px; background:#fff; box-shadow:0 2px 4px #30303004; font-size:12px; }
.hmi .home-btn:hover:not(:disabled) { background:#f4f4f4; border-color:#acacac; color:#383838; }
.hmi .shelves { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:6px 0 0; }
.hmi .shelf { min-width:0; }
.hmi .stack { height:30px; border-color:#d5d5d5; background:#f8f8f8; }
.hmi .shelf > .sl { color:#6f6f6f; }
.hmi .tray.gap { color:#717171; }
.hmi .demo .hb { font-size:10px; padding:4px 6px; }
.hmi .demo-note { font-size:10px; }
.hmi .empty { line-height:1.6; }
.hmi .sim { border-top:1px solid var(--rule); padding-top:10px; margin-top:9px; gap:5px; }
.hmi .calc { line-height:1.6; font-size:10px; }
.hmi .act { border-radius:5px; min-height:40px; }
.hmi #drawer .body { padding:16px; }
.hmi .api-row { padding:8px 0; }
.hmi #drawer h2.h { align-items:flex-start; }
.hmi .tabs { gap:6px; }
.hmi .tabs .hb { padding:6px 7px; }
.hmi .tabs .hb.on { border-color:#a3a3a3; background:#ededed; color:var(--ink); }
.hmi #veil { background:#25252570; backdrop-filter:blur(5px); }
.hmi #settings { border-radius:12px; box-shadow:0 30px 90px #1f1f1f35; overflow:hidden; }
.hmi #settings .body { padding:20px; }
.hmi #settings input { padding:7px; border-radius:4px; }

/* Shared request / robot screens */
body.shared { border-top:0; }
.shared header { padding-top:24px; padding-bottom:24px; background:#fff; border-bottom:1px solid var(--line); }
.shared header h1 { color:var(--ink); font-size:26px; font-weight:500; letter-spacing:-.7px; }
.shared header .eyebrow { color:var(--label); font-size:10px; margin-bottom:8px; }
.shared nav a { background:#fff; color:var(--head); border-color:var(--line); padding:9px 12px; }
.shared main { padding-top:24px; }
.shared .connection { margin-bottom:20px; }
.shared .connection { background:#fff; padding:13px 16px; border:1px solid var(--line); border-radius:7px; }
.shared .request-panel { border:1px solid #d9d9d9; border-radius:12px; padding:24px; box-shadow:0 6px 20px #35353507; position:relative; overflow:hidden; }
.shared .request-panel h2 { margin-top:17px; font-size:24px; }
.shared .request-panel .counter { margin-top:24px; }
.shared .section-title { margin:32px 0 15px; }
.shared h2 { font-size:12px; color:var(--head); }
.shared button { border-radius:6px; }
.shared .primary { background:#3f3f3f; border-color:#3f3f3f; }
.shared .robot { border-radius:10px; padding:20px; box-shadow:0 3px 10px #35353504; }
.robot-summary { display:flex; align-items:center; gap:18px; padding-bottom:14px; }
.robot-summary img { width:72px; height:108px; object-fit:contain; background:#f6f6f6; border-radius:7px; padding:4px; }
.shared .robot h3 { font-size:22px; margin-bottom:8px; }
.shared .robot .manifest { background:#f5f5f5; border:0; border-radius:6px; padding:12px; }
.shared .robot .badge { white-space:normal; line-height:1.7; padding:4px 7px; }
.shared details { border-radius:8px; padding:18px; }

/* Sign-in essentials. */
body.auth-page { background:var(--bg); display:grid; place-items:center; padding:24px; }
.auth-shell { width:min(400px,100%); border:1px solid var(--line); border-radius:10px; background:#fff; }
.auth-form { padding:32px; }
.auth-form .eyebrow { color:var(--label); margin-bottom:8px; letter-spacing:.08em; }
.auth-form h1 { font:500 26px/1.2 var(--sans); color:var(--ink); letter-spacing:-.5px; margin:0 0 28px; }
.auth-form label.f { margin-bottom:18px; }
.auth-form label.f > span { margin-bottom:8px; font-size:10px; color:var(--body); }
.auth-form input { padding:12px; min-height:46px; border-radius:5px; border-color:var(--line); background:#fff; font-size:14px; }
.auth-form .btn.pri { width:100%; min-height:46px; background:var(--ink); border-color:var(--ink); border-radius:5px; font-size:13px; }
.auth-form .btn.pri:hover { background:#444; }

@media (min-width:1101px) and (max-width:1740px) {
  .hmi #main { grid-template-columns:minmax(0,1fr) 450px; }
  .hmi #drawer { position:absolute; right:18px; top:0; bottom:18px; width:390px; z-index:5; box-shadow:-12px 8px 40px #2a2a2a25; }
}
@media (min-width:1101px) and (max-height:850px) {
  body.hmi { grid-template-rows:58px 76px minmax(0,1fr); }
  .workspace-heading { padding-top:12px; padding-bottom:12px; }
  .hmi #under { height:118px; }
}
@media (max-width:1100px) {
  body.hmi { display:block; overflow:auto; }
  .hmi #bar { min-height:64px; height:auto; padding:15px 18px; flex-wrap:wrap; }
  .hmi #bar .sp { display:none; }
  .hmi #bar .title { margin-right:auto; }
  .hmi #bar #clock { width:100%; order:5; }
  .workspace-heading { padding:24px 18px; }
  .workspace-heading h1 { font-size:26px; }
  .workspace-metrics { gap:16px; }
  .workspace-metrics > div { padding-left:15px; min-width:95px; }
  .hmi #main, .hmi #main.nodrawer { display:flex; flex-direction:column; gap:18px; padding:0 14px 18px; }
  .hmi #stage-wrap { height:66vh; min-height:460px; flex:auto; }
  .hmi #panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(370px,1fr)); overflow:visible; }
  .hmi .col { flex-shrink:0; }
  .hmi #drawer { max-height:650px; }
}
@media (max-width:650px) {
  .workspace-heading { align-items:flex-start; flex-direction:column; gap:20px; }
  .workspace-metrics { width:100%; justify-content:space-between; gap:8px; }
  .workspace-metrics > div { min-width:0; padding-left:12px; }
  .workspace-metrics > div:first-child { padding-left:0; border:0; }
  .workspace-metrics strong { font-size:21px; }
  .workspace-metrics small { font-size:9px; }
  .hmi #bar .n { max-width:100%; }
  .hmi #bar .title { font-size:13px; }
  .hmi #bar .mark { width:23px; height:23px; }
  .hmi h2.h { padding:12px; }
  .hmi #hdr-cap { white-space:normal; width:100%; }
  .hmi #panels { display:flex; padding:9px; }
  .hmi .panel { padding:11px; }
  .hmi .p-head .pos { width:100%; margin:0; }
  .hmi .device { gap:10px; }
  .hmi .device-side { flex-basis:106px; padding:4px; }
  .hmi .robot-portrait { width:83px; height:130px; }
  .hmi .home-btn { padding:10px; font-size:11px; }
  .hmi .hint { line-height:1.6; }
  .hmi #under { height:240px; grid-template-columns:1fr; }
  .hmi #under > div + div { border-left:0; border-top:1px solid var(--line); }
  .hmi #stage-wrap { min-height:430px; }
  .hmi #key { font-size:8px; padding:8px 10px; }
  .map-controls button { width:44px; height:44px; }
  .hmi #settings { max-width:calc(100vw - 20px); }
  .hmi #settings .body { padding:12px; }
  .shared header { padding:24px 18px; }
  .shared header h1 { font-size:24px; }
  .shared .request-panel { padding:20px; }
  .shared .request-panel h2 { font-size:21px; }
  .shared .counter strong { font-size:34px; }
}
@media (prefers-reduced-motion:reduce) { button, .line-btn { transition:none; } }