/*
 * DarkPacket interface
 * Deliberately restrained: one accent colour, flat surfaces, system fonts,
 * predictable controls. The simulator is a tool, not a marketing landing page.
 */
:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #fff;
  --panel2: #fbfcfd;
  --line: #dce2e9;
  --ink: #222b35;
  --muted: #617080;
  --accent: #245f9f;
  --accent-light: #eaf2fb;
  --good: #287b56;
  --bad: #ac3535;
  --warn: #986a28;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button:disabled { opacity: .45; cursor: not-allowed; }
::selection { background: #c4def6; }

/* Navigation */
.appbar {
  height: 62px; padding: 0 28px; background: var(--panel);
  display: flex; align-items: center; justify-content: space-between;
  gap: 25px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.brandmark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 4px;
  color: #fff; background: #313f4e; font-size: 11px; font-weight: 700; letter-spacing: -.3px;
}
.appbar nav { display: flex; align-items: stretch; height: 100%; gap: 18px; margin-right: auto; margin-left: 18px; }
.appbar nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; color: var(--muted); padding: 2px 3px 0; font-size: 13px; }
.appbar nav a:hover { color: var(--ink); }
.appbar nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.bar-right { display: flex; align-items: center; gap: 14px; }
.tag { color: var(--muted); font-size: 11px; }
.editor-view .bar-right { display: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #ccd5df; border-radius: 4px;
  background: #fff; color: var(--ink); padding: 9px 13px;
  font-weight: 500; font-size: 13px; line-height: 1.25;
  min-height: 36px; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #edf1f5; border-color: #b7c2ce; }
.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: #184e85; border-color: #184e85; }
.btn-danger { color: var(--bad); background: #fff; border-color: #e0c6c6; }
.btn-danger:hover:not(:disabled) { background: #fff1f1; }
.btn-plain { background: transparent; color: var(--muted); border-color: transparent; }
.btn-plain:hover:not(:disabled) { color: var(--ink); background: #eaeff4; border-color: transparent; }
.btn.small { font-size: 12px; min-height: 31px; padding: 6px 10px; }
.btn.active { background: var(--accent-light); border-color: #7fa7d2; color: #164c85; }

/* Home. Product-first instead of a fake dashboard or promotional splash. */
.home-shell { max-width: 1140px; margin: 0 auto; padding: 62px 30px 48px; }
.home-intro { max-width: 760px; }
.section-label, .eyebrow { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }
.home-intro h1 { margin: 12px 0 15px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.15; font-weight: 650; letter-spacing: -1.4px; }
.home-intro p { margin: 0; max-width: 640px; color: #526171; font-size: 16px; line-height: 1.65; }
.home-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.home-note { font-size: 12px !important; margin-top: 14px !important; color: var(--muted) !important; }
.home-demo { margin-top: 45px; background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.home-demo-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 17px; background: #f8fafb; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; gap: 10px; }
.home-demo-bar strong { font-weight: 600; color: var(--ink); }
.demo-layout { display: grid; grid-template-columns: 1fr 270px; min-height: 266px; }
.demo-network { display: flex; align-items: center; justify-content: center; gap: 0; padding: 30px 18px; background-color: #fff; background-image: radial-gradient(#e0e6ec 1px, transparent 1px); background-size: 20px 20px; }
.demo-device { flex: 0 1 130px; text-align: center; position: relative; z-index: 1; }
.demo-device-icon { display: grid; place-items: center; margin: 0 auto 10px; width: 66px; height: 56px; border: 1px solid #aab8c6; border-radius: 4px; background: #fff; color: #435569; }
.demo-device strong { display: block; font-size: 13px; font-weight: 600; }
.demo-device small { display: block; color: var(--muted); margin-top: 3px; font: 11px/1.5 Consolas, "SFMono-Regular", monospace; }
.demo-wire { flex: 0 1 90px; height: 1px; background: #849bb1; margin-top: -31px; min-width: 25px; }
.demo-details { background: #fafbfc; border-left: 1px solid var(--line); padding: 23px 22px; font-size: 13px; }
.demo-details h2 { margin: 0 0 14px; font-size: 13px; font-weight: 650; }
.demo-details dl { margin: 0; display: grid; grid-template-columns: 75px 1fr; gap: 12px 8px; }
.demo-details dt { color: var(--muted); }
.demo-details dd { margin: 0; font-family: Consolas, "SFMono-Regular", monospace; font-size: 12px; }
.demo-details p { color: var(--muted); font-size: 12px; margin: 20px 0 0; line-height: 1.6; }
.home-bottom { display: grid; grid-template-columns: 180px 1fr; gap: 35px; margin-top: 42px; border-top: 1px solid var(--line); padding-top: 30px; }
.home-bottom h2 { margin: 0; font-size: 17px; }
.home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.home-step .num { color: var(--muted); font: 12px Consolas, monospace; }
.home-step strong { display: block; margin-top: 8px; font-weight: 600; }
.home-step p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; font-size: 13px; }
.footer { border-top: 1px solid var(--line); background: #fff; padding: 20px max(24px, calc((100vw - 1080px)/2)); color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 15px; }
.easter { border: 0; background: none; padding: 0 4px; color: #a9b3be; font-size: 15px; }

/* Editor shell */
.work-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px; padding: 14px 22px; background: #f8fafb;
}
.work-head h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.3px; }
.work-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.project-title { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.project-title .field { min-height: 32px; width: 205px; max-width: 100%; background: #fff; padding: 6px 8px; }
.project-title label { color: var(--muted); font-size: 12px; }
.work-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.work-actions .btn { font-size: 12px; }
.work-actions .btn-primary { margin-left: 6px; }
.action-divider { width: 1px; height: 22px; background: #cbd4dd; margin: 0 4px; }
.workspace {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 296px;
  grid-template-rows: minmax(510px, calc(100vh - 356px)) 236px;
  gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pane { background: var(--panel); min-width: 0; overflow: auto; }
.pane-head { padding: 16px 16px 11px; color: #45515d; font-size: 12px; font-weight: 650; }
.palette { padding: 0 9px 6px; }
.palette-item {
  display: flex; width: 100%; align-items: center; gap: 11px; text-align: left;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: var(--ink); padding: 8px; margin: 0 0 3px;
}
.palette-item:hover { background: #f1f5f9; border-color: #e2e8ef; }
.palette-symbol {
  display: grid; flex-shrink: 0; place-items: center;
  width: 38px; height: 38px; border: 1px solid #d5dce3; border-radius: 4px; background: #f7f9fb; color: #4b6277;
}
.palette-symbol svg { width: 25px; height: 25px; }
.palette-item strong { display: block; font-weight: 600; font-size: 13px; }
.palette-item small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.pane-divider { height: 1px; background: var(--line); margin: 12px 15px; }
.side-note { padding: 2px 16px; margin: 0; color: var(--muted); line-height: 1.85; font-size: 12px; }
.template-list { display: grid; gap: 3px; padding: 0 9px; }
.template { width: 100%; color: #42566c; text-align: left; border: 0; background: none; border-radius: 3px; padding: 9px; font-size: 12px; }
.template:hover, .template.active { background: var(--accent-light); color: #1c538b; }
.canvas-pane { background: #fff; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.canvas-tools {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; height: 46px; gap: 8px; background: #fff; border-bottom: 1px solid var(--line);
}
.canvas-tools .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.canvas-tools .tools { display: flex; gap: 5px; flex-shrink: 0; }
.canvas-viewport {
  overflow: auto; flex: 1; position: relative;
  background: #fff; background-image: radial-gradient(#dfe5eb 1px, transparent 1px); background-size: 20px 20px;
}
.world { position: relative; width: 1200px; height: 640px; isolation: isolate; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cable { stroke: #8a99a8; stroke-width: 2; stroke-linecap: round; }
.cable-highlight { stroke: var(--accent); stroke-width: 3.5; }
.port-circle { fill: #fff; stroke: #8a99a8; stroke-width: 1.5; }
.node {
  z-index: 2; position: absolute; width: 145px; height: 108px; padding: 10px 11px;
  background: #fff; border: 1px solid #b7c3cf; border-radius: 4px;
  user-select: none; touch-action: none; cursor: grab;
  box-shadow: 0 2px 5px #28374910;
}
.node:hover { border-color: #5b7ca3; }
.node:active { cursor: grabbing; }
.node.selected { border: 2px solid var(--accent); padding: 9px 10px; background: #f5f9fd; }
.node.trace { outline: 2px solid #8dadd3; outline-offset: 2px; }
.node.connectable { border-style: dashed; border-color: #366b9f; }
.node-top { display: flex; align-items: center; gap: 10px; }
.node-icon { color: #496176; flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #dce3ea; border-radius: 3px; background: #f7f9fb; }
.node-icon svg { width: 26px; height: 26px; }
.node-kind { color: var(--muted); font-size: 10px; }
.node-label { font-weight: 650; font-size: 13px; margin-top: 2px; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-bottom { border-top: 1px solid #e7ecf1; margin-top: 11px; padding-top: 9px; font-size: 10px; color: #576777; display: flex; justify-content: space-between; gap: 3px; }
.canvas-legend {
  flex-shrink: 0; min-height: 34px; padding: 7px 13px;
  display: flex; align-items: center; gap: 15px; background: #fbfcfd;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 11px;
}
.legend-line { display: inline-block; vertical-align: middle; width: 17px; height: 2px; background: #8a99a8; margin-right: 5px; }
.legend-line.on { background: var(--accent); }
.inspector-content { padding: 0 16px 20px; }
.input-label { display: block; margin: 12px 0 5px; color: #556372; font-size: 12px; }
.field, .select-field {
  display: block; width: 100%; min-height: 36px; padding: 7px 9px;
  background: #fff; color: var(--ink); border: 1px solid #cbd5e0; border-radius: 4px; outline: none;
}
.field:focus, .select-field:focus { border-color: var(--accent); }
.field.invalid { border-color: var(--bad); }
.field-row { display: grid; grid-template-columns: 1fr 80px; gap: 9px; }
.info-box { margin-top: 14px; padding: 11px; color: #4d657c; background: #f4f7fa; border-left: 2px solid #b8c9db; font-size: 12px; line-height: 1.6; }
.inspector-sub { margin-top: 20px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: #495765; }
.port-item { display: flex; justify-content: space-between; gap: 7px; align-items: center; background: #f6f8fa; border: 1px solid #e6eaf0; padding: 7px 9px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.port-item b { color: var(--ink); font-weight: 600; }
.empty-props { text-align: center; padding: 64px 10px 20px; line-height: 1.65; color: var(--muted); font-size: 12px; }
.empty-props .glyph { display: block; margin-bottom: 8px; font-size: 30px; color: #97a6b5; }
.validation { margin-top: 14px; padding: 9px; color: #943333; background: #fff4f4; border-left: 2px solid #d6a8a8; font-size: 11px; line-height: 1.5; }
.validation.ok { background: #f2f9f5; border-color: #7aad8f; color: var(--good); }

/* Step trace */
.trace-pane { grid-column: 1/-1; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.trace-head { padding: 9px 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.trace-head strong { font-size: 13px; }
.trace-head small { margin-left: 10px; color: var(--muted); }
.trace-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.trace-controls label { color: var(--muted); }
.trace-controls select { max-width: 185px; min-height: 31px; padding: 5px 7px; background: #fff; border: 1px solid #cbd5df; border-radius: 4px; color: var(--ink); font-size: 12px; }
.trace-main { display: grid; grid-template-columns: minmax(0,1fr) 320px; flex: 1; min-height: 0; }
.events { display: flex; overflow: auto; gap: 6px; padding: 12px 14px; }
.event { text-align: left; background: #fff; border: 1px solid #d9e0e7; border-radius: 4px; padding: 11px 12px; flex: 0 0 174px; min-height: 116px; color: var(--ink); align-self: start; }
.event:hover { border-color: #a9bbcd; }
.event.active { background: #edf4fc; border-color: #6d9aca; }
.event.error { border-color: #d8a3a3; }
.event strong { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; line-height: 1.45; }
.event p { font-size: 11px; color: var(--muted); margin: 7px 0 0; }
.event-num { color: #607589; font-size: 10px; font-family: Consolas, monospace; }
.trace-detail { overflow: auto; border-left: 1px solid var(--line); padding: 13px 17px; font-size: 12px; }
.trace-detail h3 { font-size: 13px; margin: 0 0 7px; }
.trace-detail p { margin: 0; color: var(--muted); line-height: 1.6; }
.trace-detail dl { display: grid; grid-template-columns: 80px 1fr; gap: 7px; margin-top: 11px; font-size: 11px; }
.trace-detail dt { color: var(--muted); }
.trace-detail dd { margin: 0; font-family: Consolas, monospace; word-break: break-word; }
.sim-placeholder { color: var(--muted); padding: 28px 14px; font-size: 12px; line-height: 1.7; }
.notice { padding: 10px 18px; font-size: 12px; color: var(--muted); }

/* Lessons and documentation */
.content-page { max-width: 1020px; margin: 0 auto; padding: 58px 30px 90px; }
.content-page h1 { margin: 9px 0 10px; font-size: clamp(27px, 3vw, 36px); font-weight: 650; letter-spacing: -1px; }
.content-page .lead { color: #576575; font-size: 15px; line-height: 1.7; max-width: 650px; }
.lesson-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 29px; }
.lesson { padding: 22px; border: 1px solid var(--line); background: #fff; border-radius: 4px; }
.lesson .count { font: 11px Consolas, monospace; color: var(--muted); }
.lesson h2 { font-size: 18px; font-weight: 650; margin: 12px 0 7px; }
.lesson p { min-height: 60px; font-size: 13px; line-height: 1.65; color: #647180; }
.lesson .lesson-goal { background: #f5f7fa; color: #475767; font-size: 12px; padding: 11px; margin: 12px 0 18px; border-left: 2px solid #b8c6d4; }
.doc-section { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 800px; }
.doc-section h2 { margin: 0 0 8px; font-size: 17px; }
.doc-section p, .doc-section li { font-size: 14px; line-height: 1.8; color: #556576; }
.doc-section code { padding: 2px 5px; background: #e9eef3; border-radius: 3px; color: #245480; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); background: #263544; color: #fff; padding: 12px 16px; border-radius: 4px; font-size: 12px; box-shadow: 0 5px 18px #24354733; }
.toast.error { background: #8b3131; }
.modal { display: none; position: fixed; inset: 0; align-items: center; justify-content: center; padding: 18px; background: #17212bb3; z-index: 100; }
.modal.open { display: flex; }
.game-dialog { width: min(475px,100%); padding: 22px; border: 1px solid #d2dce6; border-radius: 5px; background: #fff; box-shadow: 0 15px 60px #18293930; }
.game-title { display: flex; justify-content: space-between; align-items: center; }
.game-title h2 { margin: 0; font-size: 20px; }
.game-status { font: 12px Consolas, monospace; color: var(--muted); margin: 12px 0; }
.game-status select { color: var(--ink) !important; background: #fff !important; border-color: #cbd5e0 !important; }
.game-grid { max-width: 360px; margin: 15px auto; display: grid; grid-template-columns: repeat(8,1fr); gap: 3px; }
.tile { aspect-ratio: 1; display: grid; place-items: center; background: #ecf0f4; border-radius: 2px; font-size: 15px; }
.tile.wall { background: #bdc7d1; }
.tile.goal { background: #c8e5d1; }
.tile.player { background: #2c6c9d; color: #fff; }
.tile.bonus { background: #ffe6b2; }
.game-pad { display: grid; grid-template-columns: repeat(3,48px); justify-content: center; gap: 5px; margin-top: 16px; }
.game-pad button { min-height: 40px; border: 1px solid #cbd5e0; background: #f8fafb; color: var(--ink); border-radius: 3px; font-size: 18px; }
.game-pad .up { grid-column: 2; }
.game-pad .left { grid-column: 1; }
.game-pad .down { grid-column: 2; }
.game-pad .right { grid-column: 3; }
.game-help { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 14px; }

@media (max-width: 1170px) {
  .workspace { grid-template-columns: 174px minmax(0,1fr) 270px; }
  .trace-main { grid-template-columns: minmax(0,1fr) 270px; }
  .work-head { align-items: flex-start; }
}
@media (max-width: 850px) {
  .appbar { padding: 0 15px; gap: 12px; }
  .appbar nav { margin-left: 0; gap: 12px; }
  .bar-right .tag { display: none; }
  .workspace { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(430px,1fr) auto 258px; }
  .palette-pane { grid-row: 1; }
  .palette-pane .pane-head { padding: 11px 13px; }
  .palette { display: flex; gap: 5px; padding: 0 9px 9px; overflow-x: auto; }
  .palette-item { flex: 0 0 150px; }
  .palette-pane .pane-divider, .palette-pane .side-note, .palette-pane .template-list, .palette-pane .templates-title { display: none; }
  .canvas-pane { grid-row: 2; min-height: 430px; }
  .inspector-pane { grid-row: 3; }
  .inspector-content { padding: 0 18px 18px; }
  .trace-pane { grid-column: 1; grid-row: 4; }
  .home-bottom { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .appbar { height: auto; min-height: 58px; flex-wrap: wrap; padding: 8px 13px 0; }
  .appbar nav { order: 3; width: 100%; height: 42px; gap: 0; justify-content: space-between; }
  .appbar nav a { font-size: 12px; }
  .bar-right .btn { min-height: 29px; padding: 6px 8px; }
  .home-shell { padding: 40px 17px; }
  .home-intro h1 { font-size: 32px; }
  .home-intro p { font-size: 14px; }
  .demo-layout { grid-template-columns: 1fr; }
  .demo-network { min-height: 220px; padding: 15px 12px; }
  .demo-device-icon { width: 54px; height: 50px; }
  .demo-device-icon svg { width: 25px; height: 25px; }
  .demo-device { flex-basis: 85px; }
  .demo-device small { font-size: 9px; }
  .demo-wire { min-width: 10px; margin-top: -30px; }
  .demo-details { border-top: 1px solid var(--line); border-left: 0; padding: 17px; }
  .home-steps { grid-template-columns: 1fr; gap: 14px; }
  .home-step strong { margin-top: 4px; }
  .footer { padding: 20px 17px; }
  .work-head { padding: 13px 12px; }
  .work-actions { width: 100%; gap: 5px; }
  .work-actions .btn-primary { margin-left: 0; }
  .action-divider { display: none; }
  .canvas-tools { padding: 0 8px; }
  .canvas-tools .hint { max-width: 45%; font-size: 11px; }
  .canvas-legend { gap: 8px; font-size: 10px; flex-wrap: wrap; }
  .trace-head { padding: 10px 12px; }
  .trace-controls { width: 100%; gap: 5px; }
  .trace-controls select { max-width: 125px; }
  .trace-main { grid-template-columns: minmax(0,1fr); }
  .trace-detail { border-left: 0; border-top: 1px solid var(--line); max-height: 130px; }
  .workspace { grid-template-rows: auto minmax(440px,1fr) auto 370px; }
  .content-page { padding: 40px 17px 70px; }
  .lesson-grid { grid-template-columns: 1fr; }
  .lesson p { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; scroll-behavior: auto !important; }
}


/* Dark workbench: restrained technical UI, no neon gradients or glass effects. */
:root {
  color-scheme: dark;
  --bg: #12171d;
  --panel: #1c232c;
  --panel2: #171d24;
  --line: #35414f;
  --ink: #e4e9ef;
  --muted: #9caab9;
  --accent: #71a9d9;
  --accent-light: #263e54;
  --good: #79b99b;
  --bad: #e28a8a;
  --warn: #d2b07e;
}
body { background: var(--bg); }
::selection { background: #31516b; color: #fff; }
.appbar { background: #191f27; border-bottom-color: var(--line); }
.brandmark { color: #e6eff9; background: #303d4b; border: 1px solid #455668; }
.appbar nav a, .tag { color: #a8b4c0; }
.appbar nav a:hover, .appbar nav a.active { color: #f1f5f9; }
.appbar nav a.active { border-bottom-color: #83add2; }
.btn { background: #27313d; color: #e5ebf2; border-color: #435263; }
.btn:hover:not(:disabled) { background: #334151; border-color: #627386; }
.btn-primary { color: #111c28; background: #82b4de; border-color: #82b4de; font-weight: 650; }
.btn-primary:hover:not(:disabled) { background: #9ac6ea; border-color: #9ac6ea; }
.btn-danger { color: #ecb3b3; background: #30272d; border-color: #614650; }
.btn-danger:hover:not(:disabled) { background: #422d35; }
.btn-plain { color: #aab6c4; background: transparent; border-color: transparent; }
.btn-plain:hover:not(:disabled) { color: #f0f3f7; background: #2b3947; }
.btn.active { background: #283f50; border-color: #779abd; color: #c7e3fa; }
.footer { background: #171d24; border-top-color: var(--line); color: #98a7b8; }
.easter { color: #6e7b89; }
.section-label, .eyebrow { color: #91a6ba; }
.home-intro p, .home-step p, .home-note { color: #a7b6c4 !important; }
.home-demo { background: #1c242d; border-color: var(--line); }
.home-demo-bar { background: #202a35; border-bottom-color: var(--line); color: #a2b1c1; }
.home-demo-bar strong { color: #e1e8ef; }
.demo-network {
  background-color: #1a222b;
  background-image: radial-gradient(#3a4857 1px, transparent 1px);
}
.demo-device-icon { color: #bed4e7; border-color: #526576; background: #263441; }
.demo-device small { color: #b4c2ce; }
.demo-wire { background: #6887a1; }
.demo-details { background: #202832; border-left-color: var(--line); }
.demo-details dt, .demo-details p, .home-step .num { color: #a5b5c5; }
.home-bottom { border-top-color: var(--line); }
.work-head { background: #1b222b; border-bottom: 1px solid var(--line); }
.work-head p, .project-title label { color: #a4b3c3; }
.project-title .field { background: #161d25; }
.action-divider { background: #4b5868; }
.workspace { background: var(--line); border-color: var(--line); }
.pane, .canvas-pane, .trace-pane { background: #1c232c; }
.pane-head { color: #c6d1dc; }
.palette-item { color: #e4ebf3; }
.palette-item:hover { background: #283542; border-color: #405265; }
.palette-symbol, .node-icon {
  background: #2a3845;
  color: #bfd2e3;
  border-color: #435667;
}
.palette-item small, .side-note { color: #9dabb9; }
.pane-divider { background: var(--line); }
.template { color: #bed0df; }
.template:hover, .template.active { background: #293f52; color: #e4f1ff; }
.canvas-tools { background: #202832; border-bottom-color: var(--line); }
.canvas-tools .hint { color: #a4b1bf; }
.canvas-viewport {
  background-color: #151c24;
  background-image: radial-gradient(#354252 1px, transparent 1px);
}
.cable { stroke: #728b9f; }
.cable-highlight { stroke: #86bce9; stroke-width: 4; filter: none; }
.port-circle { fill: #222f3d; stroke: #7893a8; }
.node {
  background: #27323e;
  color: #eaf0f5;
  border-color: #617387;
  box-shadow: 0 2px 5px #00000024;
}
.node:hover { border-color: #9fbbd5; }
.node.selected { background: #293c4e; border-color: #91c7f5; }
.node.trace { outline: 2px solid #89b5da; outline-offset: 2px; }
.node.connectable { border-color: #99bddc; }
.node-kind, .node-bottom { color: #b2c0ce; }
.node-bottom { border-top-color: #405267; }
.canvas-legend { background: #202832; border-top-color: var(--line); color: #aebcca; }
.legend-line { background: #728b9f; }
.legend-line.on { background: #91bfe5; }
.input-label { color: #c2ccd7; }
.field, .select-field, .trace-controls select {
  color: #f0f3f7;
  background: #151d26;
  border-color: #536273;
}
.field:focus, .select-field:focus, .trace-controls select:focus { border-color: #9ac7e9; }
.info-box { background: #222f3c; color: #b9ccdf; border-left-color: #6688a5; }
.inspector-sub { color: #d6e1eb; border-bottom-color: var(--line); }
.port-item { background: #25303a; color: #b9c5d1; border-color: #394959; }
.port-item b { color: #e6edf4; }
.empty-props { color: #acb9c7; }
.empty-props .glyph { color: #89a3b9; }
.validation { background: #382930; border-left-color: #9c5566; color: #efb7b7; }
.validation.ok { background: #24362f; border-color: #57866f; color: #9bd5b4; }
.trace-head { border-bottom-color: var(--line); }
.trace-head small, .trace-controls label { color: #a8b6c4; }
.trace-controls select { color: #e3ebf3; background: #18212a; border-radius: 4px; }
.trace-ttl {
  width: 53px; min-height: 31px; padding: 5px;
  color: #e3ebf3; background: #18212a;
  border: 1px solid #536273; border-radius: 4px; font-size: 12px;
}
.trace-label { font-size: 11px; color: #a8b6c4; }
.trace-main { background: #1b222b; }
.events { background: #19212a; }
.event { background: #283440; border-color: #4b5a69; color: #e8eef4; }
.event:hover { border-color: #8299ad; }
.event.active { background: #2a4056; border-color: #8ab8df; }
.event.error { border-color: #ac6c76; }
.event p, .event-num { color: #aebdcc; }
.trace-detail { border-left-color: var(--line); }
.trace-detail p, .trace-detail dt, .sim-placeholder { color: #afbecc; }
.lesson { background: #202833; border-color: var(--line); }
.lesson .count { color: #a6b8c9; }
.lesson p, .content-page .lead, .doc-section p, .doc-section li { color: #b1c0cf; }
.lesson .lesson-goal { color: #bfd1e2; background: #293746; border-left-color: #668caf; }
.doc-section { border-top-color: var(--line); }
.doc-section code { background: #2c3b49; color: #c3e0f8; }
.toast { background: #324456; color: #e5f0fa; box-shadow: 0 5px 15px #0006; }
.toast.error { background: #6a353b; }
.modal { background: #05090bd6; }
.game-dialog { background: #1c2630; color: #edf3f8; border-color: #526477; }
.game-status, .game-help { color: #b1bfcb; }
.game-status select { background: #263645 !important; color: #edf3f8 !important; border-color: #526477 !important; }
.tile { background: #324253; }
.tile.wall { background: #121b24; }
.tile.goal { background: #2c7056; }
.tile.player { background: #67a6da; color: #15212e; }
.tile.bonus { background: #8c6d37; }
.game-pad button { background: #263645; border-color: #536576; color: #dce9f4; }

/* Packet movement on the actual links, driven by the current event. */
.packet-token {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -50%);
  padding: 4px 7px; border-radius: 3px;
  font: 700 10px/1 Consolas, "SFMono-Regular", monospace;
  letter-spacing: .25px; white-space: nowrap;
  box-shadow: 0 2px 7px #0009;
}
.packet-arp { background: #d9a469; color: #18212b; border: 1px solid #f4c28e; }
.packet-icmp { background: #81c2f3; color: #18212b; border: 1px solid #acdafa; }

/* Educational device consoles, tied to each virtual device. */
.terminal {
  margin-top: 19px; border: 1px solid #3d4d5f;
  background: #121921; border-radius: 4px; overflow: hidden;
}
.terminal summary {
  padding: 10px 12px; background: #25323f; color: #dce6ef;
  cursor: pointer; font-size: 12px; font-weight: 600;
}
.terminal-output {
  margin: 0; padding: 12px; min-height: 80px; max-height: 230px;
  overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  color: #c3ddcd; background: #111920;
  font: 11px/1.6 Consolas, "SFMono-Regular", monospace;
}
.terminal-prompt {
  display: flex; gap: 8px; align-items: center; padding: 7px 12px;
  color: #84d3a2; border-top: 1px solid #374655;
  font-family: Consolas, monospace; font-size: 12px;
}
.terminal-prompt input {
  flex: 1; min-width: 0; padding: 4px 2px; color: #d5f0df;
  background: transparent; border: 0; outline: 0;
  font: 11px/1.6 Consolas, "SFMono-Regular", monospace;
}
.terminal-prompt input::placeholder { color: #758b81; }
.terminal small { display: block; padding: 0 12px 9px; color: #899aaa; font-size: 10px; }
@media (max-width: 1170px) {
  .trace-head { align-items: flex-start; }
  .trace-controls { width: 100%; }
}
@media (max-width: 600px) {
  .demo-details { border-top-color: var(--line); }
  .trace-detail { border-top-color: var(--line); }
  .trace-head { gap: 8px; }
  .trace-controls label { font-size: 10px; }
  .trace-controls select { max-width: 120px; }
  .trace-ttl { width: 49px; }
  .home-demo-bar { flex-wrap: wrap; }
}


/* Learning tasks and collaboration: simple full-width tool drawer above canvas. */
.lab-panels:empty { display:none; }
.lab-panels { background:#1a222c; border-top:1px solid var(--line); }
.tools-sheet {
  padding:17px 23px 21px; color:var(--ink);
  border-bottom:1px solid #364557; font-size:13px;
}
.panel-top { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:14px; }
.panel-top strong { display:block; font-size:15px; font-weight:650; }
.panel-top p { margin:4px 0 0; font-size:12px; color:var(--muted); line-height:1.6; }
.assignment-row { display:flex; gap:7px; flex-wrap:wrap; }
.panel-hint { font-size:12px; color:var(--muted); margin:13px 0 0; line-height:1.7; }
.task-current { border:1px solid #465b70; background:#202d3a; padding:14px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:13px; }
.task-current strong { font-size:13px; }
.task-current p { margin:0; flex:1 1 250px; font-size:12px; color:#beccdb; }
.task-current span { font-size:11px; color:#b6c9da; }
.grade-results { padding:14px 0; }
.grade-results > strong { display:block; margin-bottom:9px; }
.grade-row { display:grid; grid-template-columns:18px minmax(150px,1fr) minmax(200px,1.4fr); gap:11px; padding:8px 5px; border-top:1px solid #364452; font-size:12px; align-items:center; }
.grade-row small { color:var(--muted); line-height:1.5; }
.good { color:#94ddb1; }
.bad { color:#efa1a1; }
.assignment-author { border-top:1px solid var(--line); margin-top:17px; padding-top:13px; }
.assignment-author summary { cursor:pointer; color:#cee1f1; font-size:12px; font-weight:600; }
.author-form { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:12px; align-items:end; margin-top:13px; }
.author-form label,.team-forms label { display:block; font-size:12px; color:#b8c6d5; }
.author-form input,.author-form select,.author-form textarea,.team-forms input { margin-top:5px; }
.author-form p { font-size:11px; color:var(--muted); margin:0; align-self:center; }
.author-form button { justify-self:start; }
.team-forms { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:20px; }
.team-forms > div { padding:14px; border:1px solid #3d4b5a; background:#202a35; }
.team-forms h3 { font-size:13px; font-weight:650; margin:0 0 12px; }
.team-forms label { margin:8px 0; }
.team-forms button { margin-top:8px; }
.team-active { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; background:#202d39; border:1px solid #46617c; padding:13px; }
.team-active > div:first-child { display:grid; gap:5px; }
.team-active small { color:#aac0d3; font-size:11px; }
.team-active strong { font-size:14px; }
.team-active code { color:#a3d2f3; font-size:12px; overflow-wrap:anywhere; }
.team-actions { display:flex; gap:8px; flex-wrap:wrap; }
.participants { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.participants strong { font-size:12px; }
.participants > span { display:flex; flex-wrap:wrap; gap:6px; }
.participant { display:inline-block; border:1px solid #506277; padding:5px 9px; color:#d1e2f2; font-size:12px; }
.team-conflict { margin-top:13px; padding:13px; border-left:3px solid #d4a568; background:#382f26; }
.team-conflict p { margin:6px 0 10px; font-size:12px; }
.team-conflict button { margin-right:6px; }
.route-editor { display:grid; grid-template-columns:minmax(0,1fr) 55px; gap:6px; padding-top:10px; }
.route-editor #route-hop { grid-column:1/-1; }
.route-editor button { grid-column:1/-1; justify-self:start; }
.static-route-item { margin-top:12px; border:1px solid #3a4d61; padding:8px 10px 12px; }
.static-route-item .input-label { margin-top:7px; }
.static-route-item button { margin-top:9px; }
@media(max-width:850px) {
  .tools-sheet { padding:13px; }
  .team-forms { grid-template-columns:1fr; gap:10px; }
  .author-form { grid-template-columns:1fr; }
  .grade-row { grid-template-columns:18px 1fr; }
  .grade-row small { grid-column:2; }
}

.connection-panel:empty { display:none; }
.connection-panel { padding:0 22px; background:#1b2530; border-top:1px solid #435b73; }
.port-picker { display:flex; align-items:end; gap:12px; flex-wrap:wrap; padding:12px 0; }
.port-picker strong { font-size:13px; align-self:center; }
.port-picker label { min-width:150px; color:#b6c8d8; font-size:11px; }
.port-picker label select { margin-top:4px; }
.port-picker > span { padding-bottom:10px; color:#a9bfd3; }
.subnet-form { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.subnet-form label { color:#b5c7d8; font-size:12px; }
.subnet-form label:first-child { flex:0 1 220px; }
.subnet-form label:nth-child(2) { width:90px; }
.subnet-form .field { margin-top:5px; }
.subnet-result dl { display:grid; grid-template-columns:160px minmax(160px,1fr); max-width:530px; row-gap:7px; margin:14px 0 0; }
.subnet-result dt { color:#acbfd0; font-size:12px; }
.subnet-result dd { margin:0; font:12px/1.5 Consolas,monospace; color:#e1eefc; }
@media(max-width:600px){.connection-panel{padding:0 12px;}.port-picker{gap:7px;}.port-picker label{min-width:110px;flex:1}.subnet-result dl{grid-template-columns:130px 1fr;}}


/* Link workshop: draggable hardware ports rather than canvas-wide connection buttons. */
.node { height:153px; }
.node-ports { position:absolute; bottom:17px; left:0; right:0;
  display:flex; gap:4px; align-items:center; justify-content:center; z-index:4; }
.device-port {
  width:16px; height:16px; min-width:16px; padding:0;
  display:grid; place-items:center; position:relative;
  border:1px solid #728397; border-radius:3px; background:#151e27;
  cursor:crosshair; touch-action:none;
}
.device-port span { width:8px; height:5px; border-radius:1px; background:#8495a5; }
.device-port:hover, .device-port:focus-visible,.device-port.port-target {
  border-color:#b2e6ff; background:#254b68; outline:2px solid #81b5e5;outline-offset:2px;
  transform:scale(1.17);
}
.device-port.port-source { border-color:#cdeeff; outline:2px solid #91c8f2; outline-offset:2px; }
.device-port.port-used { background:#214a38; border-color:#5ba486; cursor:pointer; }
.device-port.port-used span { background:#79d6a1; }
.device-port.port-down { background:#57332f; border-color:#ca867a; }
.device-port.port-down span { background:#dfaa85; }
.device-port.port-fiber { border-radius:0; }
.device-port.port-fiber span { background:#b6a1ea; height:8px; }
.node-ports:before { content:"PORTS"; position:absolute; top:-17px; left:12px; color:#8b9eb2; font:9px Consolas,monospace; letter-spacing:.7px; }
.cable-hit { fill:none; stroke:transparent; stroke-width:18; pointer-events:stroke; cursor:pointer; }
.cable-hit:hover { stroke:#9dc9f518; }
.cable-down { stroke:#ca766d !important; stroke-dasharray:7 6; stroke-width:2.5; }
.cable-selected { stroke:#c2def6 !important; stroke-width:3; }
.cable-speed-label { fill:#9db8cb; font:10px Consolas,monospace; pointer-events:none; paint-order:stroke; stroke:#121b25; stroke-width:5; stroke-linejoin:round; }
.cable-preview { fill:none; stroke:#8ed0f5; stroke-width:2.5; stroke-dasharray:7 4; pointer-events:none; }
.canvas-tools { height:auto; min-height:53px; padding:8px 12px; flex-wrap:wrap; }
.canvas-tools .tools { flex-wrap:wrap; align-items:center; gap:8px; }
.canvas-tools .hint { white-space:normal; max-width:230px; line-height:1.5; }
.cable-toolbar label { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#b8cbd9; }
.cable-toolbar select,.cable-length { color:#d9eaf5; background:#182430; border:1px solid #4a6072; border-radius:4px; padding:6px; font-size:11px; min-height:32px; }
.cable-toolbar #new-cable-type { width:170px; max-width:46vw; }
.cable-toolbar #new-cable-speed { width:67px; }
.cable-toolbar .cable-length { width:63px; }
.canvas-legend { flex-wrap:wrap; }
.legend-down { color:#dca098; font-size:11px; }
.cable-inspector > strong { display:block; font-size:13px; overflow-wrap:anywhere; margin-top:9px; }
.cable-inspector > p { color:#b6c9d8; font-size:12px; line-height:1.6; margin:10px 0 14px; }
.cable-inspector > .btn { margin-top:14px; margin-right:6px; }
.link-health { display:inline-block; margin-top:10px; padding:4px 9px; font:700 11px Consolas,monospace; }
.link-health.up { background:#204332; color:#a4e5be; }
.link-health.down { background:#55302e; color:#ffc3b9; }
@media(max-width:940px) {
  .canvas-tools .hint { max-width:none; width:100%; }
  .canvas-tools .tools { width:100%; }
  .cable-toolbar #new-cable-type { width:150px; }
}
@media(max-width:600px) {
  .canvas-tools { padding:10px; }
  .cable-toolbar label { margin-bottom:3px; }
  .cable-toolbar #new-cable-type { width:135px; }
  .cable-toolbar #new-cable-speed { width:65px; }
  .node { height:153px; }
}
@media(prefers-reduced-motion:reduce){
  .device-port:hover,.device-port:focus-visible { transform:none; }
}


/* DarkSubnet 0.4 — compact, task-oriented editor chrome.
   Not a dashboard: project identity / editing actions / canvas controls. */
.appbar {
  height: 54px;
  padding: 0 26px;
  gap: 24px;
  background: #161c24;
}
.appbar .brand { font-size: 14px; letter-spacing: -.22px; gap: 9px; }
.appbar .brandmark { width: 29px; height: 29px; background: #2c3b4a; border-color: #3d4e61; border-radius: 6px; }
.appbar nav { margin-left: 6px; gap: 22px; }
.appbar nav a { font-size: 12px; letter-spacing: .03px; }
.appbar nav a.active { border-bottom-width: 2px; }
.appbar .bar-right .tag { font-size: 10px; letter-spacing: .6px; color: #788da3; }
.appbar .bar-right .btn { background: #24313f; color:#d7e7f5; border:1px solid #364a5f; border-radius:6px; }
.appbar .bar-right .btn:hover { background:#304253; }
.editor-topbar {
  position: relative;
  z-index: 22;
  background: #1b242e;
  border-bottom: 1px solid #354454;
}
.editor-topbar-main {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px 10px;
}
.project-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.project-identifier {
  flex-shrink: 0; width: 39px; height: 39px;
  background: #293b4b; border: 1px solid #40576e;
  display: grid; place-items: center; border-radius: 8px;
  font: 700 12px/1 "Segoe UI", Arial, sans-serif; letter-spacing: -.3px; color: #d4e8f9;
}
.project-identity-content { min-width:0; max-width: clamp(195px,35vw,510px); }
.editor-context {
  color: #92a5b8;
  font: 650 10px/1.4 "Segoe UI",Arial,sans-serif;
  letter-spacing: 1.15px;
  margin-bottom: 3px;
}
.editor-context span { color:#647a90; padding:0 5px; }
.project-name-label { display: block; }
.project-name-field {
  display:block;
  padding: 3px 8px 3px 0;
  height: 30px;
  width: min(100%, 500px);
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:#eef3f7;
  font:650 clamp(16px,1.45vw,19px)/1.3 "Segoe UI",Arial,sans-serif;
  letter-spacing: -.4px;
  text-overflow: ellipsis;
}
.project-name-field:hover { border-color:#3e5061; padding-left:8px; background:#222e3a; }
.project-name-field:focus { outline: none; border-color:#78a8d0; background:#15212d; padding-left:8px; }
.editor-topbar-main-right { display:flex; align-items:center; gap:19px; flex-shrink:0; }
.editor-save-status {
  white-space:nowrap; font-size:11px; display:flex; align-items:center; gap:7px;
  color:#98aabb;
}
.editor-save-status i { width:6px; height:6px; border-radius:50%; background:#73b69c; }
.editor-run-button {
  min-height:39px; padding:0 17px; border:1px solid #88bce8;
  border-radius:7px; background:#8abde5; color:#122436;
  font-size:12px; font-weight:700; letter-spacing:.1px;
  transition:background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
  box-shadow: 0 2px 6px #0002;
}
.editor-run-button:hover {background:#acd5f5;border-color:#acd5f5;transform:translateY(-1px);}
.editor-run-button:active {transform:translateY(0);}
.editor-run-button > span {margin-left:6px;}
.editor-commandbar {
  display:flex;
  justify-content:space-between;
  gap:18px;
  min-height:46px;
  align-items:center;
  padding:0 23px;
  border-top: 1px solid #304051;
  background:#19222c;
}
.commandbar-group { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; }
.commandbar-features { justify-content:flex-end; }
.toolbar-menu { position:relative; flex-shrink:0; }
.toolbar-menu > summary {
  display: flex; align-items:center; gap:10px;
  cursor:pointer; list-style:none;
  padding:8px 12px;
  min-height:34px;
  border-radius:6px;
  color:#bfcedd; font-size:12px; font-weight:600;
  border:1px solid transparent;
  transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.toolbar-menu summary::-webkit-details-marker {display:none;}
.toolbar-menu > summary::marker {content:"";}
.toolbar-menu summary:hover,.toolbar-menu[open] summary { color:#e7f1fa; background:#283542; border-color:#36495a; }
.menu-chevron { font-size:15px; color:#899daf; line-height:1; transform:translateY(-2px); transition: transform 140ms ease; }
.toolbar-menu[open] .menu-chevron,.cable-options-menu[open] .menu-chevron { transform:rotate(180deg) translateY(2px); }
.toolbar-popover {
  position:absolute; top:calc(100% + 7px); left:0;
  min-width:235px; padding:6px;
  background:#23303d; border:1px solid #496074; border-radius:9px;
  box-shadow:0 16px 42px #0008;
  z-index:40;
  animation:menu-in 140ms ease-out;
}
.toolbar-menu-heading {
  display:block; padding:9px 10px 6px; font-size:10px;
  font-weight:700; color:#93a8bc; letter-spacing:.7px;
}
.toolbar-menu-item {
  display:flex; width:100%; padding:10px; align-items:center;
  text-align:left; border:0; border-radius:5px;
  color:#d5e0eb; background:transparent; font-size:12px; cursor:pointer;
  transition:background-color 120ms ease;
}
.toolbar-menu-item:hover,.toolbar-menu-item:focus-visible { background:#334557; color:#fff; }
.toolbar-menu-divider {border-top:1px solid #3c4b5b; margin:6px 8px;}
.command-divider {width:1px;height:22px;background:#3f5061;margin:0 6px; flex-shrink:0;}
.tool-icon-button {
  min-height:32px; width:33px; border:1px solid transparent; border-radius:5px;
  color:#b9cbdb; background:transparent; font-size:20px; cursor:pointer; line-height:1;
  transition:background-color 120ms ease,color 120ms ease;
}
.tool-icon-button:hover {color:#fff;background:#2b3a48;}
.tool-link {
  display:flex; align-items:center; white-space:nowrap;
  min-height:34px; background:transparent;
  border:1px solid transparent; border-radius:6px;
  padding:7px 11px; font-size:12px; color:#b6c8d9; font-weight:500;
  cursor:pointer; transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease;
}
.tool-link:hover { background:#283747; color:#eef4fa; }
.tool-link.active { background:#273e53; border-color:#476885; color:#d6eaff; }
.tool-link[data-action="toggle-team"]::before {
  content:""; width:6px;height:6px; border-radius:50%;
  background:#75b9a1; margin-right:9px; box-shadow:0 0 0 3px #75b9a114;
}
@keyframes menu-in { from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);} }

/* Compact canvas bar with secondary physical connection settings on demand. */
.refined-canvas-tools {
  position:relative; z-index:18;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 18px;
  padding:9px 15px;
  background:#202c37; min-height:56px;
  border-bottom-color:#36495a;
}
.canvas-quick-actions,.canvas-tool-options { display:flex; align-items:center; gap:12px; min-width:0; }
.refined-canvas-tools .hint { max-width:none; line-height:1.4; color:#9aaebf; font-size:11px; }
.cable-mode-button {
  flex-shrink:0; display:flex; align-items:center; gap:8px;
  padding:9px 13px; min-height:35px;
  background:#2d3d4b; border:1px solid #465c70; border-radius:6px;
  color:#dce8f3; font-size:12px; font-weight:650; cursor:pointer;
  transition:background-color 150ms ease,border-color 150ms ease;
}
.cable-mode-button span {font-size:17px;line-height:.8;color:#aac8e1;}
.cable-mode-button:hover {background:#384d60;}
.cable-mode-button.active {background:#335575;border-color:#6f9bc1;color:#f5faff;}
.cable-options-menu {position:relative;}
.cable-options-menu > summary {
  display:flex; align-items:center; gap:7px; list-style:none;cursor:pointer;
  border:1px solid transparent; border-radius:6px;
  padding:8px 9px; min-height:35px;
  color:#bfcfdd; font-size:12px; font-weight:600;
  transition:background-color 150ms ease;
}
.cable-options-menu summary::-webkit-details-marker {display:none;}
.cable-options-menu > summary::marker{content:"";}
.cable-options-menu > summary:hover,.cable-options-menu[open] > summary {background:#304052;color:#f0f6fc;}
.cable-options-menu small {font-size:11px;font-weight:400;color:#94abc1;max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cable-options-popover {
  position:absolute;right:0;top:calc(100% + 8px);
  width:min(335px,calc(100vw - 32px));
  padding:18px; background:#243443;
  border:1px solid #587086; border-radius:9px;
  box-shadow:0 15px 38px #0009;z-index:30;
  animation:menu-in 140ms ease-out;
}
.cable-settings-intro strong {font-size:13px;color:#e6f0f7;}
.cable-settings-intro p {font-size:11px;color:#a6b9ca;margin:5px 0 14px;}
.cable-options-popover label {display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;color:#b8cbdd;margin-top:11px;}
.cable-options-popover select,.cable-options-popover input {
  display:block;width:100%;min-width:0;min-height:36px;padding:7px 9px;
  color:#e8f2fa;background:#182632;border:1px solid #566f83;border-radius:5px;font-size:12px;
}
.cable-settings-grid {display:grid;grid-template-columns:1.4fr .8fr;gap:9px;}
.canvas-remove-button {
  font-size:12px; padding:8px 11px; border:1px solid transparent;
  min-height:35px;color:#a6b6c6;background:transparent;border-radius:6px;cursor:pointer;
  transition:background-color 120ms ease, color 120ms ease;
}
.canvas-remove-button:hover:not(:disabled) {background:#44353a;color:#f1b4b5;}
.canvas-remove-button:disabled {opacity:.45;cursor:default;}
/* Microinteractions deliberately limited to hovered/focused controls. */
.node {transition:border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;will-change:auto;}
.node:hover {box-shadow:0 4px 12px #080f1860;}
.node.selected {box-shadow:0 0 0 2px #88b3d621,0 4px 14px #0004;}
.device-port {transition:background-color 120ms ease,border-color 120ms ease,transform 120ms ease;}
.palette-item {transition:background-color 120ms ease,border-color 120ms ease;}
.event {transition:background-color 130ms ease,border-color 130ms ease;}
.toast {border-radius:7px;animation:toast-slide-in 150ms ease-out;}
@keyframes toast-slide-in {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1120px) {
  .editor-commandbar {flex-wrap:wrap;gap:0;padding:5px 16px;}
  .commandbar-features {justify-content:flex-start;}
  .editor-topbar-main {padding-left:17px;padding-right:17px;}
}
@media(max-width:850px) {
  .refined-canvas-tools .hint {width:auto;max-width:none;}
  .refined-canvas-tools .canvas-tool-options {width:auto;}
  .cable-options-popover {left:0;right:auto;}
  .editor-save-status {display:none;}
}
@media(max-width:600px) {
  .appbar {padding:7px 13px 0; gap:7px;}
  .appbar nav {margin:0;justify-content:space-between;}
  .editor-topbar-main {padding:12px 13px;min-height:66px;gap:8px;}
  .project-identifier {width:34px;height:34px;font-size:11px;}
  .project-identity {gap:9px;flex:1;min-width:0;}
  .project-identity-content {max-width:none;min-width:0;}
  .editor-context {font-size:9px;letter-spacing:.65px;}
  .project-name-field {font-size:15px;max-width:100%;}
  .editor-run-button {padding:0 11px;min-height:34px;font-size:11px;white-space:nowrap;}
  .editor-topbar-main-right {gap:5px;}
  .editor-commandbar {padding:5px 8px;gap:2px;}
  .tool-link {padding:7px 9px;font-size:11px;}
  .toolbar-menu > summary {padding:7px 9px;font-size:11px;}
  .command-divider {margin:0 2px;}
  .commandbar-group {gap:1px;}
  .refined-canvas-tools {padding:8px 10px;gap:6px;}
  .canvas-quick-actions {flex:1;flex-wrap:wrap;gap:6px;}
  .refined-canvas-tools .hint {flex:1 1 110px;font-size:10px;}
  .canvas-tool-options {width:100%;justify-content:space-between;}
  .cable-options-popover {left:0;right:auto;}
}
@media(prefers-reduced-motion:reduce){
  .toolbar-popover,.cable-options-popover,.toast {animation:none;}
  .node,.device-port,.palette-item,.event,.editor-run-button,.tool-link,.tool-icon-button {transition:none;}
}


/* DarkSubnet 0.5 — integrated 3D lab, cable tools and readable packet timeline */
.lab-3d-shell {
  margin:0;padding:0;
  border-bottom:1px solid #40556b;
  background:#101b27;
}
.lab-3d-top {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding:19px 24px 15px;
  background:#182634;border-bottom:1px solid #304355;
}
.lab-3d-top > div:first-child {display:flex;flex-direction:column;gap:4px;}
.lab-3d-top strong {font-size:18px;letter-spacing:-.4px;color:#e7f3ff;}
.lab-3d-top p {font-size:12px;color:#a8bbcb;margin:0;max-width:700px;line-height:1.5;}
.three-overline {color:#7da9c9;font:700 10px "Segoe UI",Arial,sans-serif;letter-spacing:1.05px;}
.lab-3d-actions {display:flex;flex-wrap:wrap;gap:8px;}
.three-stage {position:relative;height:clamp(360px,43vw,560px);min-height:360px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#193348,#101923 80%);}
.three-canvas {display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;}
.three-canvas:active {cursor:grabbing;}
.three-loading,.three-error {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:30px;color:#9cb7cd;font-size:13px;line-height:1.8;
}
.three-error {color:#f2d0c8;}
.lab-3d-foot {
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:#a3b6c8;background:#1b2937;
  font-size:11px;padding:11px 24px;border-top:1px solid #34495d;
}
.lab-3d-device-actions {
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 24px 12px;
  background:#17232f;
}
.lab-3d-device-actions > span {font-size:11px;font-weight:700;color:#b6cbdc;margin-right:7px;}
.lab-3d-device-actions button {
  color:#d6eaf8;background:#273a4c;border:1px solid #3b5972;border-radius:5px;
  font-size:11px;padding:8px 13px;cursor:pointer;
}
.lab-3d-device-actions button:hover {background:#36516b;border-color:#6794bd;}
.lab-3d-device-actions small {font-size:11px;color:#859eaf;margin-left:auto;}
.tool-3d-button {color:#bcd9f0;}
.tool-3d-button .tool-3d-tag {
  display:inline-block;margin-left:5px;padding:2px 4px;border:1px solid #4a748c;
  color:#89bdd5;border-radius:3px;font:700 9px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.3px;
}
.tool-3d-button.active {background:#27465a;border-color:#4b8db5;}
/* Left palette: the most common cables are always visible. */
.cable-palette {padding:0 8px 5px;display:grid;gap:3px;}
.cable-palette-item {
  width:100%;min-width:0;padding:8px 7px;
  display:flex;align-items:center;gap:10px;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:5px;
  cursor:pointer;color:#d2e2ef;
  transition:background-color 120ms ease,border-color 120ms ease;
}
.cable-palette-item:hover {background:#2b3b4a;border-color:#40576d;}
.cable-palette-item.active {background:#28435a;border-color:#5682a6;color:#f0f8ff;}
.cable-palette-swatch {width:29px;height:16px;flex-shrink:0;position:relative;display:block;}
.cable-palette-swatch::before {
  content:"";position:absolute;left:0;right:0;top:7px;height:3px;border-radius:3px;
  background:#78a7c7;
}
.cable-palette-swatch::after {
  content:"";position:absolute;right:0;top:3px;width:8px;height:10px;
  border:1px solid #9cc9e7;border-radius:2px;background:#304e67;
}
.cable-palette-swatch.cable-fiber::before {background:#b4a0e1;height:2px;}
.cable-palette-swatch.cable-fiber::after {background:#665e8d;border-color:#c3b1f0;border-radius:0;}
.cable-palette-details {display:flex;flex-direction:column;min-width:0;gap:2px;}
.cable-palette-details strong {font-size:11px;font-weight:650;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cable-palette-details small {font-size:10px;color:#96acbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cable-palette-hint {font-size:10px;line-height:1.55;color:#8ca3b7;padding:6px 14px 5px;margin:0;}
/* A clean protocol-led timeline replaces crowded cards of internal event names. */
.trace-pane {grid-template-rows:auto auto minmax(0,1fr);}
.ping-overview-host:empty {display:none;}
.ping-overview {padding:13px 19px;background:#1d2b39;border-bottom:1px solid #364d60;}
.ping-overview.ping-idle {display:flex;align-items:center;gap:13px;padding:15px 20px;}
.ping-overview.ping-idle > div:last-child {display:flex;flex-direction:column;gap:3px;}
.ping-overview.ping-idle strong {font-size:13px;color:#d9ecf9;}
.ping-overview.ping-idle span {font-size:11px;color:#9db1c3;line-height:1.5;}
.ping-header,.ping-title {display:flex;align-items:center;}
.ping-header {justify-content:space-between;gap:18px;}
.ping-title {gap:12px;}
.ping-title>div {display:flex;flex-direction:column;gap:2px;}
.ping-title strong {font-size:13px;color:#e4f0fa;font-weight:650;}
.ping-title span {color:#9fbad1;font:11px/1.5 Consolas,monospace;}
.ping-title span b {font-weight:700;color:#77b5e5;padding:0 5px;}
.ping-orb {
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid #4c91c2;border-radius:50%;color:#a7d8fb;
  background:#1f4764;font:700 18px Arial,sans-serif;
}
.ping-running .ping-orb {animation:ping-beacon 1.45s ease-in-out infinite;}
.ping-success .ping-orb {background:#244f3e;border-color:#549f80;color:#b3f4cc;animation:none;}
.ping-failure .ping-orb {background:#59373c;border-color:#b66a6a;color:#ffc1c1;animation:none;}
.ping-step-counter {font:700 10px Consolas,monospace;letter-spacing:.4px;color:#a0b5c7;white-space:nowrap;}
.ping-progress-track {height:4px;background:#34495c;overflow:hidden;margin-top:11px;border-radius:4px;}
.ping-progress-track>div {height:100%;background:#78b9e6;border-radius:4px;transition:width .22s ease;}
.ping-success .ping-progress-track>div {background:#75c49c;}
.ping-failure .ping-progress-track>div {background:#db8787;}
.ping-conclusion {font-size:11px;color:#b9cddd;line-height:1.55;margin:9px 0 0;}
.trace-main {grid-template-columns:minmax(0,1fr) 305px;}
.events {align-items:flex-start;gap:7px;padding:12px 13px;scroll-behavior:smooth;}
.trace-step {
  flex:0 0 157px;min-height:101px;
  display:flex;flex-direction:column;gap:7px;text-align:left;
  border:1px solid #374a5c;border-radius:6px;padding:10px 11px;
  background:#243341;color:#dce9f5;cursor:pointer;
  transition:background-color 140ms ease,border-color 140ms ease,transform 140ms ease;
}
.trace-step:hover {background:#304354;border-color:#587b99;transform:translateY(-2px);}
.trace-step.active {border-color:#77b6de;background:#28485f;box-shadow:inset 0 2px 0 #89c9f4;}
.trace-step.trace-failed {border-color:#b17e7c;}
.trace-step-top {display:flex;justify-content:space-between;gap:8px;align-items:center;}
.trace-protocol {
  display:inline-flex;align-items:center;
  border-radius:3px;background:#344e65;color:#c0e4ff;
  padding:4px 6px;font:700 9px/1 Consolas,monospace;letter-spacing:.5px;
}
.trace-arp .trace-protocol {background:#544434;color:#f5cc94;}
.trace-icmp .trace-protocol {background:#23475e;color:#9ce5fb;}
.trace-route .trace-protocol {background:#3f3d64;color:#d1c1ff;}
.trace-ethernet .trace-protocol {background:#2b514a;color:#b0e8d8;}
.trace-error .trace-protocol,.trace-failed .trace-protocol {background:#583438;color:#ffc4c4;}
.trace-number {font:10px Consolas,monospace;color:#819eaf;}
.trace-step-title {font-size:12px;line-height:1.35;font-weight:650;flex:1;}
.trace-step-device {font-size:10px;color:#9eb2c4;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.trace-detail {background:#1b2734;border-left:1px solid #364b5b;padding:16px;}
.trace-detail h3 {font-size:13px;color:#dfeefa;margin:0 0 11px;}
.trace-detail p {font-size:12px;color:#b0c5d6;line-height:1.65;}
.trace-detail dl {grid-template-columns:75px 1fr;line-height:1.5;}
.trace-detail dd {color:#d1e3f1;}
.packet-token {
  padding:6px 9px;border-radius:6px;
  font:700 11px/1 Consolas,monospace;letter-spacing:.6px;
  box-shadow:0 0 0 5px #7cbbe620,0 7px 22px #000b;
}
.packet-arp {background:#ffca83;border-color:#ffdb9f;box-shadow:0 0 0 5px #e7a56622,0 7px 22px #000b;}
.packet-icmp {background:#8fdefc;border-color:#d2f0ff;}
@keyframes ping-beacon {0%,100%{box-shadow:0 0 0 0 #7ab6e33a;}50%{box-shadow:0 0 0 7px #7ab6e300;}}
@media (max-width:1000px){
  .lab-3d-top{padding:16px;}
  .lab-3d-foot,.lab-3d-device-actions{padding-left:16px;padding-right:16px;}
  .cable-palette{display:flex;gap:5px;overflow-x:auto;}
  .cable-palette-item{flex:0 0 151px;}
  .cable-palette-hint {display:none;}
  .trace-main{grid-template-columns:minmax(0,1fr) 255px;}
}
@media (max-width:600px){
  .three-stage{height:390px;min-height:320px;}
  .lab-3d-top{padding:13px;}
  .lab-3d-top p{font-size:11px;}
  .lab-3d-device-actions small{margin-left:0;flex-basis:100%;}
  .lab-3d-foot{font-size:10px;}
  .ping-overview{padding:11px;}
  .ping-overview.ping-idle{padding:13px;}
  .trace-main{grid-template-columns:minmax(0,1fr);}
  .trace-detail{border-top:1px solid #364b5b;max-height:170px;}
  .trace-step{flex-basis:145px;}
}
@media(prefers-reduced-motion:reduce){
  .ping-running .ping-orb{animation:none;}
  .trace-step{transition:none;}
  .trace-step:hover{transform:none;}
}


/* Side-by-side 3D inspection: same editable controls as 2D, no detached data copy. */
.lab-3d-shell .three-stage {
  height:clamp(405px,43vw,570px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 286px;
  background:#101b27;
}
.three-viewport {position:relative;min-width:0;min-height:0;overflow:hidden;}
.three-inspector {
  min-width:0;overflow-y:auto;overflow-x:hidden;
  border-left:1px solid #35495a;
  background:#1a2734;
}
.three-inspector-heading {
  position:sticky;top:0;z-index:2;
  padding:14px 15px 11px;
  border-bottom:1px solid #384d60;
  background:#1d2a38;
  color:#b9d2e5;font-size:10px;font-weight:700;letter-spacing:1px;
}
.three-inspector-heading small {float:right;font-size:9px;color:#78c5a9;}
.three-inspector-content {padding:13px 15px 23px;}
.three-inspector-content .inspector-sub {margin-top:15px;}
.three-inspector-content .field,.three-inspector-content .input-label {font-size:11px;}
.three-inspector-content .empty-props {padding:34px 0;}
.three-inspector-content .cable-inspector>.btn {margin-top:12px;}
.three-inspector-content .validation {margin-top:12px;}
@media(max-width:760px) {
  .lab-3d-shell .three-stage {display:flex;flex-direction:column;height:auto;}
  .three-viewport {height:350px;flex:none;width:100%;}
  .three-inspector {max-height:265px;overflow-y:auto;border-left:0;border-top:1px solid #35495a;}
  .three-inspector-content {padding:11px 15px;}
}


/* Workspace v0.6 — prioritize the network: fit, zoom and simplified side panels. */
.workspace {grid-template-columns:184px minmax(0,1fr) 285px;grid-template-rows:minmax(560px,calc(100vh - 300px)) minmax(245px,auto);}
.pane-head {font-size:11px;letter-spacing:.15px;}
.palette-item {border-radius:6px;}
.canvas-pane {position:relative;min-width:0;}
.canvas-viewport {position:relative;overflow:auto;min-height:0;overscroll-behavior:contain;
  background-color:#172331; background-image:radial-gradient(#38536c 1px,transparent 1px);
  background-size:20px 20px;}
.canvas-scroll-area {position:relative;will-change:width,height;}
#world {position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;}
.canvas-zoom-tools {position:sticky;z-index:14;bottom:15px;margin:-56px 15px 15px auto;width:max-content;
  display:flex;align-items:center;gap:4px;padding:5px;background:#1b2b3aee;border:1px solid #4c6981;
  border-radius:8px;box-shadow:0 6px 24px #0008;backdrop-filter:blur(10px);}
.canvas-zoom-tools button {color:#d9eafb;background:transparent;border:0;border-radius:5px;cursor:pointer;
  min-width:34px;min-height:32px;padding:5px 9px;font-size:12px;font-weight:650;}
.canvas-zoom-tools button:first-child,.canvas-zoom-tools button:nth-of-type(2){font-size:19px;}
.canvas-zoom-tools button:hover{background:#304d66;}
.canvas-zoom-tools output{color:#b8d0e3;font:12px Consolas,monospace;min-width:48px;text-align:center;}
.refined-canvas-tools{gap:6px;padding:8px 13px;}
.canvas-quick-actions{gap:9px;}
.trace-pane{min-height:250px;}
/* Building editor supports many named rooms without crowding the 3D viewport. */
.building-workbench{border-top:1px solid #39556d;background:#1d2d3c;padding:15px 22px;}
.building-header{display:flex;justify-content:space-between;align-items:start;gap:15px;}
.building-header strong{font-size:15px;color:#e6f4ff;}
.building-header p{margin:5px 0 13px;color:#aec5d7;font-size:11px;line-height:1.6;}
.building-header>span{flex-shrink:0;color:#9db7c9;font:11px Consolas,monospace;}
.building-create,.building-entry{border:1px solid #426078;border-radius:7px;background:#223445;margin:8px 0;overflow:hidden;}
.building-create summary,.building-entry summary{padding:11px 13px;cursor:pointer;list-style:none;
 color:#d4e7f6;font-size:12px;font-weight:650;display:flex;justify-content:space-between;gap:8px;}
.building-create summary::-webkit-details-marker,.building-entry summary::-webkit-details-marker{display:none;}
.building-create summary:hover,.building-entry summary:hover{background:#2e455a;}
.building-entry summary span{font-size:11px;color:#8fb1cd;font-weight:400;}
.building-form,.building-edit-grid {padding:12px 14px;display:grid;grid-template-columns:repeat(6,minmax(95px,1fr));gap:10px;align-items:end;}
.building-edit-grid{grid-template-columns:repeat(4,minmax(100px,1fr));}
.building-form label,.building-edit-grid label,.office-grid label{display:grid;gap:4px;color:#adc7dc;font-size:11px;}
.building-form input,.building-edit-grid input,.office-grid input{
 width:100%;min-width:0;border:1px solid #567189;background:#152637;color:#e5f1ff;
 border-radius:5px;min-height:34px;padding:7px 9px;font-size:12px;}
.building-form button{align-self:end;min-height:34px;}
.office-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px;padding:8px 14px 15px;}
.building-entry>.btn{margin:0 0 14px 14px;}
.building-note{margin:12px 0 0;color:#8fa9bb;font-size:11px;line-height:1.65;}
.three-inspector-content .input-label select{font-size:12px;}
/* The auth screen intentionally removes navigation until email verified. */
.auth-locked .appbar nav,.auth-locked .appbar .bar-right,.auth-locked .footer{display:none;}
.auth-locked .appbar{justify-content:flex-start;}
.auth-stage{min-height:calc(100vh - 54px);display:grid;place-items:center;padding:35px 16px;
  background:radial-gradient(circle at 50% 16%,#243d55 0,#121f2c 37%,#0f1821 100%);}
.auth-dialog{width:min(450px,100%);padding:32px;background:#1e2e3e;border:1px solid #40566c;border-radius:11px;box-shadow:0 22px 80px #0006;}
.auth-eyebrow{font:700 10px Consolas,monospace;letter-spacing:1.5px;color:#83b5d5;}
.auth-dialog h1{font-size:25px;letter-spacing:-.6px;margin:10px 0 7px;color:#ecf5ff;}
.auth-dialog p{font-size:12px;color:#b0c6d8;line-height:1.65;margin:0 0 21px;}
.auth-toggle{display:grid;grid-template-columns:1fr 1fr;background:#162533;border:1px solid #3c5368;border-radius:7px;padding:4px;gap:4px;margin-bottom:22px;}
.auth-toggle button{min-height:35px;color:#afc5d7;background:transparent;border:0;border-radius:5px;cursor:pointer;font-weight:600;font-size:12px;}
.auth-toggle button.active{color:#ebf5ff;background:#324b61;}
.auth-form{display:grid;gap:13px;}
.auth-form label{color:#bbd0df;display:grid;gap:6px;font-size:12px;font-weight:600;}
.auth-form input{min-height:42px;border:1px solid #4c6981;background:#152636;color:#edf5fc;border-radius:6px;font-size:13px;padding:10px 12px;width:100%;}
.auth-form input:focus{outline:2px solid #8fbce3;outline-offset:1px;}
.auth-form .auth-submit{min-height:43px;border:0;border-radius:6px;background:#8dbfe5;color:#11253a;font-size:13px;font-weight:750;cursor:pointer;margin-top:4px;}
.auth-form .auth-submit:hover{background:#b0d4ed;}
.auth-feedback{padding:12px 13px;border:1px solid #588a79;background:#24473e;color:#c0f1dc;border-radius:6px;margin-top:17px;font-size:12px;line-height:1.5;}
.auth-feedback.error{border-color:#ad6b75;background:#4b2a31;color:#ffd0d4;}
.auth-actions{margin-top:17px;display:flex;align-items:center;justify-content:space-between;gap:9px;}
.auth-actions button{color:#95c3e2;background:none;border:0;font-size:12px;text-decoration:underline;cursor:pointer;}
.auth-footnote{border-top:1px solid #3a5267;padding-top:17px!important;margin-top:20px!important;font-size:11px!important;}
@media(max-width:1080px){
  .workspace{grid-template-columns:170px minmax(0,1fr) 250px;}
  .building-form{grid-template-columns:repeat(3,minmax(100px,1fr));}
}
@media(max-width:900px){
 .workspace{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(480px,auto) auto minmax(300px,auto);}
 .building-workbench{padding:14px;}
 .palette-pane{max-height:230px;overflow-y:auto;}
 .canvas-viewport{min-height:460px;}
 .building-edit-grid{grid-template-columns:repeat(2,minmax(90px,1fr));}
}
@media(max-width:620px){
 .building-form{grid-template-columns:repeat(2,minmax(105px,1fr));}
 .auth-dialog{padding:24px 19px;}
 .canvas-zoom-tools{margin-right:9px;}
 .building-entry summary{flex-direction:column;}
}


/* DarkPacket 0.7 — workplace architecture rather than decorative cyber UI.
   Neutral graphite / paper surfaces with one muted teal accent. */
:root,html[data-theme="dark"] {
 color-scheme:dark;
 --bg:#171a1d; --panel:#22262a;--panel2:#25292d;--line:#363c41;
 --ink:#e9eced;--muted:#9aa5ad;--accent:#668b87;--accent-light:#243b38;
 --good:#78b69b;--bad:#d48681;--warn:#dbb87f;
 --surface:#22272b;--surface-alt:#292e32;--surface-hover:#30383c;
 --surface-strong:#1b2024;--border-subtle:#394148;--foreground:#e3e8eb;
 --secondary:#a6b0b8;--control-bg:#272e32;--control-border:#4a565c;
 --site-ground:#1b2225;--site-room:#303b3d;--site-selected:#355653;
 --site-divider:#749c92;--site-ink:#e8eeee;--site-grid:#4d605d;
}
html[data-theme="light"] {
 color-scheme:light;
 --bg:#edf0ef;--panel:#ffffff;--panel2:#f6f7f6;--line:#d5dcd9;
 --ink:#24302e;--muted:#61716d;--accent:#446e68;--accent-light:#e1ece8;
 --good:#257451;--bad:#a93e3d;--warn:#85642f;
 --surface:#ffffff;--surface-alt:#f2f4f3;--surface-hover:#e8efeb;
 --surface-strong:#e8eeeb;--border-subtle:#ced7d2;--foreground:#24312f;
 --secondary:#596b67;--control-bg:#fafbf9;--control-border:#c6d0cc;
 --site-ground:#f1f3ef;--site-room:#f8faf7;--site-selected:#dceae2;
 --site-divider:#78978b;--site-ink:#2d433d;--site-grid:#cfdbd3;
}
.appbar {background:var(--surface)!important;border-bottom:1px solid var(--border-subtle)!important;color:var(--foreground)!important;}
.appbar .brandmark,.project-identifier {background:var(--surface-strong)!important;border:1px solid var(--border-subtle)!important;color:var(--foreground)!important;}
.appbar nav a {color:var(--secondary)!important;}
.appbar nav a:hover,.appbar nav a.active{color:var(--foreground)!important;}
.appbar nav a.active{border-bottom-color:var(--accent)!important;}
.appbar-controls{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0;}
.appbar .bar-right{margin-left:0;}
.theme-toggle{
 display:inline-flex;align-items:center;justify-content:center;gap:5px;
 min-height:34px;padding:6px 13px;flex-shrink:0;
 background:var(--control-bg);color:var(--foreground);
 border:1px solid var(--control-border);border-radius:6px;
 font-size:12px;font-weight:650;cursor:pointer;letter-spacing:0;
 transition:background-color .14s ease,border-color .14s ease;
}
.theme-toggle:hover{background:var(--surface-hover);border-color:var(--accent);}
.appbar .bar-right .tag{color:var(--secondary)!important;}
.appbar .bar-right .btn{color:var(--foreground)!important;background:var(--control-bg)!important;border-color:var(--control-border)!important;}
.editor-topbar,.editor-topbar-main,.editor-commandbar{
 background:var(--surface)!important;border-color:var(--border-subtle)!important;color:var(--foreground)!important;
}
.editor-commandbar{background:var(--surface-alt)!important;}
.project-name-field{color:var(--foreground)!important;}
.project-name-field:hover,.project-name-field:focus{background:var(--control-bg)!important;border-color:var(--accent)!important;}
.editor-context,.editor-context span,.editor-save-status{color:var(--secondary)!important;}
.editor-run-button,.building-primary-button{
 color:#fff!important;background:#456c63!important;border:1px solid #456c63!important;
 box-shadow:none!important;border-radius:6px!important;font-weight:700;
}
.editor-run-button:hover,.building-primary-button:hover{background:#335951!important;border-color:#335951!important;transform:none!important;}
.editor-save-status i,.tool-link[data-action="toggle-team"]::before{background:#72ae8c!important;}
.toolbar-menu summary,.tool-link,.tool-icon-button{color:var(--foreground)!important;}
.toolbar-menu summary:hover,.toolbar-menu[open] summary,.tool-link:hover,.tool-icon-button:hover{background:var(--surface-hover)!important;}
.toolbar-menu .toolbar-popover,.cable-options-menu .cable-options-popover{background:var(--surface)!important;border-color:var(--border-subtle)!important;box-shadow:0 16px 36px #0003!important;}
.toolbar-menu-heading,.toolbar-menu-item{color:var(--secondary)!important;}
.toolbar-menu-item:hover{background:var(--surface-hover)!important;color:var(--foreground)!important;}
.tool-link.active,.tool-3d-button.active{background:var(--accent-light)!important;border-color:var(--accent)!important;color:var(--foreground)!important;}
.command-divider,.toolbar-menu-divider{background:var(--border-subtle)!important;border-color:var(--border-subtle)!important;}
.editor-save-status,.three-overline,.tool-3d-tag{letter-spacing:0!important;}
.btn {background:var(--control-bg)!important;border-color:var(--control-border)!important;color:var(--foreground)!important;}
.btn:hover:not(:disabled){background:var(--surface-hover)!important;}
.btn-primary{background:#456c63!important;border-color:#456c63!important;color:#fff!important;}
.btn-danger{color:var(--bad)!important;}
.workspace,.pane,.palette-pane,.inspector-pane,.trace-pane,.tools-sheet,.connection-panel{
 color:var(--foreground)!important;background:var(--surface)!important;border-color:var(--border-subtle)!important;
}
.workspace{background:var(--border-subtle)!important;}
.canvas-pane,.refined-canvas-tools,.canvas-legend,.trace-head,.trace-detail{
 background:var(--surface-alt)!important;border-color:var(--border-subtle)!important;color:var(--foreground)!important;
}
.canvas-viewport{background-color:var(--surface-strong)!important;
 background-image:radial-gradient(var(--site-grid) .9px,transparent .9px)!important;}
.node {background:var(--surface)!important;color:var(--foreground)!important;border-color:var(--control-border)!important;box-shadow:0 2px 8px #0001!important;}
.node.selected{background:var(--surface-alt)!important;border-color:var(--accent)!important;outline:none!important;}
.node .node-icon,.palette-symbol{color:var(--secondary)!important;background:var(--surface-alt)!important;border-color:var(--border-subtle)!important;}
.node .node-kind,.node-bottom,.node-ports::before,.cable-palette-details small,.canvas-legend,.side-note,.pane-head,.input-label,.inspector-sub,.info-box{
 color:var(--secondary)!important;}
.node .node-label,.palette-item strong{color:var(--foreground)!important;}
.node.trace{outline-color:var(--accent)!important;}
.palette-item,.cable-palette-item{color:var(--foreground)!important;}
.palette-item:hover,.cable-palette-item:hover{background:var(--surface-hover)!important;border-color:var(--border-subtle)!important;}
.cable-palette-item.active{background:var(--accent-light)!important;border-color:var(--accent)!important;}
.cable-mode-button,.cable-options-menu summary,.canvas-remove-button{background:var(--control-bg)!important;border-color:var(--control-border)!important;color:var(--foreground)!important;}
.cable-mode-button.active{border-color:var(--accent)!important;background:var(--accent-light)!important;color:var(--foreground)!important;}
.canvas-zoom-tools{background:var(--surface)!important;border-color:var(--control-border)!important;box-shadow:0 5px 24px #0002!important;}
.canvas-zoom-tools button{color:var(--foreground)!important;}
.canvas-zoom-tools button:hover{background:var(--surface-hover)!important;}
.canvas-zoom-tools output{color:var(--secondary)!important;}
.cable-speed-label{fill:var(--secondary)!important;stroke:var(--surface-strong)!important;}
.cable{stroke:var(--secondary);}
.cable-highlight{stroke:var(--accent)!important;}
.input-label .field,.field,.inspector-content input,.inspector-content select,.inspector-content textarea,.tools-sheet input,.tools-sheet select,.trace-head select,.trace-head input{
 color:var(--foreground)!important;background:var(--control-bg)!important;border-color:var(--control-border)!important;
}
.info-box{background:var(--surface-alt)!important;border-color:var(--border-subtle)!important;}
.trace-main,.events,.trace-detail{background:var(--surface)!important;}
.trace-step,.ping-overview,.trace-head{background:var(--surface-alt)!important;color:var(--foreground)!important;border-color:var(--border-subtle)!important;}
.trace-step.active{background:var(--accent-light)!important;border-color:var(--accent)!important;box-shadow:none!important;}
.trace-step-title,.ping-title strong{color:var(--foreground)!important;}
.trace-step-device,.ping-title span,.ping-step-counter{color:var(--secondary)!important;}
.ping-orb{background:var(--accent-light)!important;border-color:var(--accent)!important;color:var(--foreground)!important;}
.ping-progress-track{background:var(--border-subtle)!important;}
.ping-progress-track>div{background:var(--accent)!important;}
.trace-step .trace-protocol{color:var(--foreground)!important;background:var(--surface-strong)!important;}
.lab-panels,.tools-sheet,.team-forms>div,.task-current,.team-active{background:var(--surface)!important;border-color:var(--border-subtle)!important;color:var(--foreground)!important;}
.lab-3d-shell,.lab-3d-top,.site-view-switch,.building-workbench,.building-create,.building-entry,.three-controls,.lab-3d-device-actions,.three-inspector,.three-inspector-heading{
 background:var(--surface)!important;color:var(--foreground)!important;border-color:var(--border-subtle)!important;
}
.lab-3d-top p,.building-header p,.building-note,.building-header>span,.building-entry summary span,
.three-controls>span,.three-inspector-heading{color:var(--secondary)!important;}
.building-header strong,.lab-3d-top strong{color:var(--foreground)!important;}
.building-create summary,.building-entry summary{color:var(--foreground)!important;}
.building-create summary:hover,.building-entry summary:hover{background:var(--surface-hover)!important;}
.building-form input,.building-edit-grid input,.office-grid input,.three-inspector-content input,.three-inspector-content select,.site-plan-inspector input,.site-plan-inspector select{
 color:var(--foreground)!important;background:var(--control-bg)!important;border-color:var(--control-border)!important;
}
.building-form label,.building-edit-grid label,.office-grid label,.site-plan-inspector label{color:var(--secondary)!important;}
.building-workbench{padding-top:16px!important;}
/* Workspace split for switching between floorplan and walkthrough. */
.refined-lab-header{padding:17px 23px!important;}
.building-primary-button{min-height:40px;padding:10px 17px;cursor:pointer;font-size:13px;letter-spacing:0;}
.site-view-switch{display:flex;align-items:center;gap:5px;padding:9px 20px;border-bottom:1px solid var(--border-subtle);}
.site-view-switch button{background:transparent;border:1px solid transparent;border-radius:6px;
 color:var(--secondary);font-size:12px;font-weight:650;min-height:37px;padding:8px 16px;cursor:pointer;}
.site-view-switch button:hover{background:var(--surface-hover);}
.site-view-switch button.active{color:var(--foreground);border-color:var(--control-border);background:var(--surface-alt);}
.site-view-switch>span{margin-left:auto;color:var(--secondary);font-size:11px;}
.site-plan-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:480px;
 background:var(--surface-alt);border-bottom:1px solid var(--border-subtle);}
.site-plan-canvas{display:flex;flex-direction:column;min-width:0;min-height:480px;}
.site-plan-hint,.site-plan-scale{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
 color:var(--secondary);font-size:11px;line-height:1.5;padding:13px 20px;}
.site-plan-hint>span:first-child{font-size:10px;font-weight:700;letter-spacing:.7px;}
.site-plan-canvas>svg{display:block;width:100%;flex:1;min-height:355px;color:var(--site-grid);
 background:var(--site-ground);user-select:none;touch-action:none;}
.site-plan-ground{pointer-events:none;}
.site-building{cursor:pointer;}
.site-building-outer{fill:var(--site-room);stroke:var(--site-divider);stroke-width:.14;}
.site-building.selected>.site-building-outer{stroke:var(--accent);stroke-width:.28;}
.site-office-room{fill:var(--site-room);stroke:var(--site-divider);stroke-width:.075;transition:fill 120ms ease;cursor:pointer;}
.site-office:hover .site-office-room{fill:var(--surface-hover);}
.site-office.selected .site-office-room{fill:var(--site-selected);stroke:var(--accent);stroke-width:.20;}
.site-office-name{font-size:.67px;fill:var(--site-ink);font-family:Arial, sans-serif;font-weight:650;pointer-events:none;}
.site-office-devices{font-size:.51px;fill:var(--secondary);pointer-events:none;}
.site-building-drag{cursor:move;touch-action:none;}
.site-building-drag rect{fill:#526d67;stroke:#425851;stroke-width:.08;}
.site-building-drag:hover rect,.site-building-drag:focus rect{fill:#42635a;}
.site-building-title,.site-building-grip{fill:#fff;font-size:.86px;font-weight:700;pointer-events:none;}
.site-building-grip{font-size:1.1px;}
.site-building-dim{font-size:.77px;fill:var(--secondary);pointer-events:none;}
.site-empty{font:1.1px Arial,sans-serif;fill:var(--secondary);}
.site-plan-inspector{padding:16px 17px;overflow:auto;min-width:0;background:var(--surface);border-left:1px solid var(--border-subtle);}
.site-plan-inspector-title{font-size:14px;font-weight:700;margin-bottom:17px;color:var(--foreground);}
.site-plan-inspector label{display:grid;gap:6px;font-size:11px;margin:11px 0;color:var(--secondary);}
.site-plan-inspector input,.site-plan-inspector select{font-size:12px;width:100%;min-height:35px;border-radius:5px;border:1px solid var(--control-border);padding:7px 9px;}
.site-plan-inspector .site-plan-metrics{display:flex;gap:14px;flex-wrap:wrap;color:var(--secondary);font:11px Consolas,monospace;margin-top:12px;}
.site-plan-position{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:end;}
.site-plan-position>label{min-width:0;}
.site-plan-divider{border-top:1px solid var(--border-subtle);margin:18px 0;}
.site-plan-secondary{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
 background:var(--control-bg);color:var(--foreground);font-size:11px;font-weight:650;
 border:1px solid var(--control-border);border-radius:5px;min-height:33px;padding:8px 11px;}
.site-plan-secondary:hover{background:var(--surface-hover);}
.site-plan-selected-room{font-weight:700;font-size:12px;}
.site-plan-device-list,.site-plan-tip,.site-plan-note,.site-plan-empty{font-size:11px;line-height:1.65;color:var(--secondary);}
.site-plan-note{border-top:1px solid var(--border-subtle);margin-top:20px;padding-top:12px;}
.site-plan-scale{padding:10px 20px;font-size:10px;}
/* Walk mode: operational controls, no flashy game overlays. */
.three-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:11px 19px;border-bottom:1px solid var(--border-subtle);}
.walk-primary-btn{min-height:35px;padding:7px 15px;cursor:pointer;background:#456c63;color:#fff;border:1px solid #456c63;border-radius:6px;font-size:12px;font-weight:650;}
.walk-primary-btn:hover{background:#335951;}
.walk-speed{color:var(--secondary);font-size:11px;display:inline-flex;gap:8px;align-items:center;}
.walk-speed select{min-height:31px;padding:5px;background:var(--control-bg);color:var(--foreground);border:1px solid var(--control-border);border-radius:5px;}
.three-controls>span{margin-left:auto;color:var(--secondary);font-size:11px;}
.three-stage,.three-viewport{background:#171c1c!important;}
.walk-pad{position:absolute;z-index:8;bottom:20px;left:20px;display:none;padding:12px;
 background:#1e2424ee;border:1px solid #566260;border-radius:9px;color:#f2f3f0;
 user-select:none;touch-action:none;box-shadow:0 7px 22px #0006;}
.is-walking .walk-pad{display:block;}
.walk-pad-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:10px;font-weight:700;}
.walk-pad-head span{font-weight:400;color:#a7c0b8;}
.walk-pad-grid{display:grid;grid-template-columns:repeat(3,37px);grid-template-rows:repeat(2,34px);gap:4px;}
.walk-pad-grid button{display:grid;place-items:center;border:1px solid #71847d;background:#35453e;
 color:#f7f7f3;border-radius:5px;cursor:pointer;font-size:19px;font-weight:700;touch-action:none;}
.walk-pad-grid button:first-child{grid-column:2;grid-row:1;}
.walk-pad-grid button:nth-child(2){display:none;}
.walk-pad-grid button:nth-child(3){grid-column:1;grid-row:2;}
.walk-pad-grid button:nth-child(4){grid-column:2;grid-row:2;}
.walk-pad-grid button:nth-child(5){grid-column:3;grid-row:2;}
.walk-pad-grid button:active{background:#5b796c;}
.three-viewport .three-canvas{cursor:grab;}
@media(max-width:1050px){
 .site-plan-layout{grid-template-columns:minmax(0,1fr) 260px;}
}
@media(max-width:780px){
 .site-plan-layout{display:flex;flex-direction:column;}
 .site-plan-canvas{min-height:370px;}
 .site-plan-canvas>svg{min-height:285px;height:320px;}
 .site-plan-inspector{border-left:0;border-top:1px solid var(--border-subtle);}
 .site-plan-hint{gap:5px;font-size:10px;}
 .three-controls>span{width:100%;margin-left:0;}
}
@media(max-width:600px){
 .appbar{gap:6px!important;}
 .appbar-controls{margin-left:auto;gap:3px;}
 .theme-toggle{min-height:29px;padding:5px 8px;font-size:11px;}
 .refined-lab-header{padding:13px!important;}
 .site-view-switch{padding:8px 12px;flex-wrap:wrap;}
 .site-view-switch>span{flex:1 1 100%;margin-left:0;}
 .building-primary-button{width:100%;justify-content:center;}
 .lab-3d-actions{width:100%;}
 .walk-pad{left:10px;bottom:10px;padding:8px;}
}
@media(prefers-reduced-motion:reduce){
 .theme-toggle,.site-office-room{transition:none;}
}

.site-plan-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:4px 0 9px;}
.site-plan-dimensions label{min-width:0;font-size:10px;}
.site-plan-dimensions input{width:100%;min-width:0;}
.building-settings-panel{background:var(--surface);border-bottom:1px solid var(--border-subtle);}
.building-settings-panel>summary{
 padding:13px 21px;color:var(--secondary);font-size:12px;font-weight:650;
 cursor:pointer;background:var(--surface-alt);list-style:none;
}
.building-settings-panel>summary::-webkit-details-marker{display:none;}
.building-settings-panel>summary::after{content:"⌄";float:right;}
.building-settings-panel[open]>summary::after{content:"⌃";}
.building-settings-panel>summary:hover{color:var(--foreground);background:var(--surface-hover);}
.building-settings-panel .building-workbench{padding:12px 20px 18px!important;}
@media(max-width:390px){.site-plan-dimensions{grid-template-columns:repeat(2,minmax(0,1fr));}}


/* All informational pages follow the same saved palette. */
.footer,.home-demo,.home-demo-bar,.demo-network,.demo-details,.lesson,.lesson-goal,
.doc-section code,.game-dialog,.game-pad button,.template {
 background:var(--surface)!important;color:var(--foreground)!important;border-color:var(--border-subtle)!important;
}
.footer{color:var(--secondary)!important;}
.home-demo-bar,.lesson-goal{background:var(--surface-alt)!important;}
.demo-network{
 background-color:var(--surface-alt)!important;
 background-image:radial-gradient(var(--site-grid) 1px,transparent 1px)!important;
}
.demo-device-icon{background:var(--surface)!important;color:var(--secondary)!important;border-color:var(--control-border)!important;}
.demo-wire{background:var(--secondary)!important;}
.home-intro p,.home-step p,.home-note,.demo-details p,.demo-details dt,.lesson p,
.content-page .lead,.doc-section p,.doc-section li,.game-help,.game-status,.home-step .num{
 color:var(--secondary)!important;
}
.home-demo-bar strong,.doc-section h2,.lesson h2,.demo-device strong{color:var(--foreground)!important;}
.lesson-goal{border-left-color:var(--accent)!important;color:var(--foreground)!important;}
.doc-section code{background:var(--accent-light)!important;color:var(--foreground)!important;}
.template:hover,.template.active{background:var(--accent-light)!important;color:var(--foreground)!important;}
.game-status select,.game-pad button{background:var(--control-bg)!important;color:var(--foreground)!important;border-color:var(--control-border)!important;}


/* Direct 3D editing: physical world positions and familiar CAD-style tools. */
.three-mode-switch{display:flex;align-items:center;gap:3px;padding:3px;background:var(--surface-alt);
 border:1px solid var(--border-subtle);border-radius:7px;}
.three-mode-switch button{padding:8px 12px;min-height:34px;border:1px solid transparent;
 background:transparent;color:var(--secondary);border-radius:5px;font-weight:650;font-size:12px;cursor:pointer;}
.three-mode-switch button.active{background:var(--accent-light);color:var(--foreground);border-color:var(--accent);}
.three-mode-switch button:hover{color:var(--foreground);}
.three-viewport .three-canvas{touch-action:none;}
.three-selection-tag{font-size:10px;font-weight:750;letter-spacing:.6px;color:var(--secondary);margin-bottom:8px;}
.three-inspector-title{font-size:17px;color:var(--foreground);font-weight:700;display:block;line-height:1.3;margin-bottom:7px;}
.three-inspector-description{font-size:11px;line-height:1.6;color:var(--secondary);margin:10px 0 18px;}
.three-spatial-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0;}
.three-device-position{padding:14px 12px 8px;margin-bottom:16px;border-radius:7px;
 border:1px solid var(--border-subtle);background:var(--surface-alt);}
.three-device-position p{font-size:11px;color:var(--secondary);line-height:1.5;margin:8px 0;}
.three-dimensions{padding:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.three-dimensions label:first-child{grid-column:1/-1;}
.three-inspector-content label{display:flex;flex-direction:column;gap:5px;color:var(--secondary);
 font-size:11px;font-weight:600;}
.three-inspector-content input,.three-inspector-content select{display:block;width:100%;min-width:0;
 padding:8px 9px;background:var(--control-bg);border:1px solid var(--control-border);
 border-radius:5px;color:var(--foreground);font-size:12px;min-height:36px;}
.three-inspector-content input:focus-visible,.three-inspector-content select:focus-visible{outline:2px solid var(--accent);}
.three-inspector-action{width:100%;font-size:12px;font-weight:650;min-height:36px;border:1px solid var(--accent);
 background:var(--accent-light);color:var(--foreground);border-radius:6px;cursor:pointer;}
.three-inspector-action:hover{filter:brightness(1.05);}
@media(max-width:800px){
 .three-mode-switch{width:100%;}
 .three-mode-switch button{flex:1;}
 .three-spatial-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(prefers-reduced-motion:reduce){.three-mode-switch button{transition:none;}}


/* UniFi hardware picker – clear, understated catalogue on the same workbench. */
.unifi-palette-button{display:flex;align-items:center;gap:9px;width:calc(100% - 13px);
 margin:8px 7px 11px;padding:12px 9px;border:1px solid var(--accent);border-radius:6px;
 color:var(--foreground);background:var(--accent-light);text-align:left;cursor:pointer;}
.unifi-palette-button span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px;}
.unifi-palette-button strong{font-size:12px;}
.unifi-palette-button small{font-size:10px;color:var(--secondary);line-height:1.4;}
.unifi-palette-brand{display:grid;place-items:center;width:30px;height:30px;flex:none;
 background:#375f57;color:#fff;border-radius:5px;font:bold 16px Arial,sans-serif;}
.unifi-palette-plus{margin-left:auto;font-size:20px;color:var(--accent);}
.unifi-palette-button:hover,.unifi-open-button:hover{border-color:var(--foreground);filter:brightness(1.06);}
.unifi-open-button{padding:8px 14px;border-radius:6px;border:1px solid var(--accent);
 color:var(--foreground);background:var(--accent-light);font-size:11px;font-weight:700;cursor:pointer;}
.unifi-picker{position:fixed;top:77px;left:max(25px,calc(50% - 520px));width:min(1040px,calc(100vw - 50px));
 height:min(765px,calc(100vh - 94px));display:flex;flex-direction:column;z-index:100;
 background:var(--surface);border:1px solid var(--control-border);border-radius:12px;box-shadow:0 12px 80px #0008;color:var(--foreground);overflow:hidden;}
.unifi-picker-head{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px 24px 14px;}
.unifi-picker-head strong{display:block;font-size:19px;letter-spacing:-.4px;}
.unifi-picker-head p{font-size:11px;color:var(--secondary);margin:6px 0 0;line-height:1.5;}
.unifi-picker-head button{font-size:25px;line-height:1;background:transparent;border:0;color:var(--secondary);cursor:pointer;padding:3px 9px;}
.unifi-picker-filters{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;padding:6px 24px 16px;}
.unifi-picker-filters input,.unifi-picker-filters select{
 min-height:41px;background:var(--control-bg);color:var(--foreground);
 border:1px solid var(--control-border);border-radius:6px;padding:8px 12px;font-size:12px;}
.unifi-picker-scroll{flex:1;overflow:auto;padding:0 24px 20px;}
.unifi-picker-group{margin-bottom:23px;}
.unifi-picker-group h3{font-size:12px;font-weight:700;margin:11px 0;padding-bottom:8px;border-bottom:1px solid var(--border-subtle);}
.unifi-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.unifi-card{background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:7px;
 padding:14px 13px;min-height:133px;color:var(--foreground);text-align:left;display:flex;flex-direction:column;
 justify-content:space-between;cursor:pointer;gap:11px;}
.unifi-card:hover{background:var(--surface-hover);border-color:var(--accent);}
.unifi-card-top{display:flex;flex-direction:column;gap:4px;}
.unifi-card strong{font-size:13px;font-weight:700;}
.unifi-card small{font:10px Consolas,monospace;color:var(--secondary);}
.unifi-card-ports{font-size:11px;color:var(--secondary);line-height:1.5;}
.unifi-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;}
.unifi-card-bottom em{font-style:normal;color:var(--secondary);font-size:10px;}
.unifi-card-bottom>span{color:var(--accent);font-weight:700;white-space:nowrap;}
.unifi-picker-foot{padding:12px 24px;border-top:1px solid var(--border-subtle);
 color:var(--secondary);font-size:10px;line-height:1.5;margin:0;background:var(--surface-alt);}
.unifi-inspector{padding:11px 0 19px;border-bottom:1px solid var(--border-subtle);}
.unifi-inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:11px;}
.unifi-inspector-heading b{font:700 11px Consolas,monospace;color:var(--foreground);overflow-wrap:anywhere;}
.unifi-inspector-heading a{color:var(--accent);font-size:10px;white-space:nowrap;}
.unifi-specs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px;}
.unifi-specs-grid>div{background:var(--surface-alt);border:1px solid var(--border-subtle);
 border-radius:5px;padding:10px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.unifi-specs-grid small{font-size:10px;color:var(--secondary);}
.unifi-specs-grid strong{font-size:14px;overflow-wrap:anywhere;}
.unifi-physical-summary{font-size:11px;line-height:1.5;color:var(--foreground);margin:12px 0;}
.unifi-muted{font-size:10px;line-height:1.5;color:var(--secondary);margin:9px 0;}
.unifi-power{padding:10px;border:1px solid var(--border-subtle);background:var(--surface-alt);font-size:11px;}
.unifi-power-warnings{margin:7px 0;padding:9px;border:1px solid #b99a59;border-radius:5px;
 background:var(--surface-alt);font-size:11px;line-height:1.6;color:var(--foreground);}
.unifi-port-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-height:245px;overflow-y:auto;padding:3px;}
.unifi-port{border:1px solid var(--control-border);border-radius:5px;padding:7px 2px 5px;
 display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface-alt);
 color:var(--foreground);min-width:0;cursor:pointer;}
.unifi-port b{font:700 10px Consolas,monospace;}
.unifi-port small{font:10px Consolas,monospace;color:var(--secondary);}
.unifi-port span{font-size:10px;color:var(--secondary);}
.unifi-port.occupied span{color:var(--good);}
.unifi-port.active{border-color:var(--accent);background:var(--accent-light);}
.unifi-port:hover{border-color:var(--accent);}
.unifi-selected-port{display:flex;flex-direction:column;gap:9px;border:1px solid var(--border-subtle);
 border-radius:6px;padding:12px 10px;margin:11px 0 13px;background:var(--surface-alt);}
.unifi-selected-port>div:first-child{display:flex;flex-direction:column;gap:5px;}
.unifi-selected-port strong{font-size:12px;}
.unifi-selected-port span{font-size:11px;color:var(--secondary);}
.unifi-port-actions button{white-space:normal;text-align:left;}
.node-more-ports{font-size:9px;color:var(--secondary);text-align:center;margin-top:2px;}
@media(max-width:840px){
 .unifi-picker{top:56px;left:12px;width:calc(100vw - 24px);height:calc(100vh - 67px);}
 .unifi-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .unifi-picker-head,.unifi-picker-filters,.unifi-picker-scroll,.unifi-picker-foot{padding-left:14px;padding-right:14px;}
}
@media(max-width:520px){
 .unifi-picker-grid{grid-template-columns:1fr;}
 .unifi-picker-filters{grid-template-columns:1fr;}
 .unifi-card{min-height:110px;}
}

/* Strict visibility for live device catalog filters and compact jack bay. */
.unifi-picker [hidden],.unifi-picker-group[hidden],.unifi-card[hidden]{display:none!important;}
.node-ports-dense{gap:1px!important;justify-content:center!important;flex-wrap:nowrap!important;}
.node-ports-dense .device-port{flex:0 0 16px!important;min-width:16px!important;width:16px!important;}


/* 3D failure recovery shows cause, not misleading blanket "WebGL unavailable". */
.three-recovery{height:100%;min-height:310px;padding:30px;display:flex;flex-direction:column;
 align-items:center;justify-content:center;text-align:center;gap:13px;color:#dfe8e5;
 background:#1a211f;}
.three-recovery>strong{font-size:17px;font-weight:700;letter-spacing:-.2px;}
.three-recovery p{max-width:580px;margin:0;font-size:12px;line-height:1.7;color:#b4c7c1;}
.three-recovery button{margin:4px 0;min-height:38px;}
.three-recovery details{width:min(620px,100%);padding:12px;text-align:left;border:1px solid #53645e;
 border-radius:7px;background:#24302c;}
.three-recovery summary{cursor:pointer;font-size:11px;color:#c8d9d4;}
.three-recovery-diagnostic{font:11px/1.55 Consolas,monospace;margin:10px 0 0;padding:9px;
 overflow:auto;white-space:pre-wrap;word-break:break-word;color:#f5c9b9;background:#17211e;border-radius:5px;}


/* Real protocol controls: compact, neutral, accessible in 2D and 3D. */
.net-server-palette{border:1px solid var(--border-subtle);background:var(--surface-alt);}
.net-server-palette .palette-symbol{font:bold 9px/1 Consolas,monospace;letter-spacing:-.2px;}
.network-services{border-top:1px solid var(--border-subtle);padding:14px 0 11px;display:grid;gap:8px;}
.network-services-head{display:flex;flex-direction:column;gap:5px;padding:2px 0 9px;border-bottom:1px solid var(--border-subtle);}
.network-services-head strong{color:var(--foreground);font-size:13px;}
.network-services-head small{color:var(--secondary);font-size:10px;}
.net-section,.network-service-block{background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:6px;margin:0;min-width:0;}
.net-section>summary{font-size:11px;font-weight:700;color:var(--foreground);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:7px;list-style:none;padding:11px;}
.net-section>summary::-webkit-details-marker{display:none;}
.net-section>summary>span{font:10px Consolas,monospace;color:var(--secondary);}
.net-section[open]>summary{border-bottom:1px solid var(--border-subtle);}
.net-section>.net-hint{padding:0 11px;}
.network-service-block{padding:12px;}
.net-block-title{font-size:12px;font-weight:700;margin-bottom:12px;}
.net-hint{font-size:10px;line-height:1.6;color:var(--secondary);margin:10px 0;}
.net-field{display:grid;gap:5px;min-width:0;font-size:10px;color:var(--secondary);margin:7px 0;}
.net-field input,.net-field select,.net-switch-port input,.net-switch-port select,.net-add-grid input,.net-add-grid select{
 width:100%;min-width:0;padding:7px 8px;min-height:35px;border-radius:5px;font-size:11px;
 background:var(--control-bg);border:1px solid var(--control-border);color:var(--foreground);
}
.net-check{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.4;color:var(--foreground);cursor:pointer;}
.net-check input{width:15px;height:15px;accent-color:var(--accent);}
.net-switch-ports{max-height:365px;overflow:auto;padding:8px;display:grid;gap:7px;}
.net-switch-port{background:var(--surface);border:1px solid var(--border-subtle);padding:9px;border-radius:5px;}
.net-switch-port-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.net-switch-port-top b{font:11px Consolas,monospace;}
.net-switch-port-top select{max-width:142px;min-height:29px;padding:3px 6px;}
.net-switch-port-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:6px;}
.net-switch-port-fields label{display:grid;gap:4px;font-size:10px;color:var(--secondary);min-width:0;}
.net-switch-port-fields input{min-height:31px;}
.net-routing-table{border-collapse:collapse;width:100%;font:10px/1.5 Consolas,monospace;color:var(--foreground);white-space:nowrap;}
.net-routing-table th,.net-routing-table td{padding:7px 8px;border-bottom:1px solid var(--border-subtle);text-align:left;}
.net-routing-table th{font-size:10px;color:var(--secondary);font-weight:650;background:var(--surface);}
.net-table-wrap{max-width:100%;overflow:auto;padding:8px;}
.net-add-grid{padding:11px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.net-add-grid>.net-primary{grid-column:1/-1;}
.net-primary,.net-secondary{display:inline-flex;align-items:center;justify-content:center;
 color:#fff;background:#456c63;border:1px solid #456c63;padding:9px 11px;
 min-height:34px;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;}
.net-secondary{color:var(--foreground);background:var(--control-bg);border-color:var(--control-border);margin:8px 11px 11px;}
.network-service-block>.net-primary{margin-top:6px;}
.net-primary:hover{background:#335951;}
.net-service-row{display:grid;grid-template-columns:1fr auto;gap:5px;padding:10px 12px;border-bottom:1px solid var(--border-subtle);}
.net-service-row>b{font-size:11px;}
.net-service-row>span{grid-column:1;line-height:1.6;color:var(--secondary);font-size:10px;overflow-wrap:anywhere;}
.net-service-row>button{grid-column:2;grid-row:1/3;align-self:center;padding:7px;background:var(--control-bg);
 border:1px solid var(--control-border);border-radius:4px;font-size:10px;color:var(--foreground);cursor:pointer;}
@media(max-width:580px){.net-add-grid{grid-template-columns:1fr;}.net-routing-table{font-size:9px;}}


/* Advanced networking panel – uses the workbench's restrained neutral styling. */
.advanced-network-panel{gap:8px;}
.adv-section{min-width:0;}
.adv-section>.net-hint{padding:0 11px;}
.adv-section .adv-form{padding:11px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end;}
.adv-section .adv-form>.net-field{margin:0;}
.adv-section .adv-form>.net-check{grid-column:1/-1;padding:5px 0;}
.adv-section .adv-form>.net-primary{grid-column:1/-1;width:100%;margin-top:3px;}
.adv-section .adv-form>input[type=hidden]{display:none;}
.adv-section .adv-form>b{grid-column:1/-1;font:700 11px Consolas,monospace;color:var(--foreground);}
.adv-section .adv-form input,.adv-section .adv-form select{font-family:inherit;font-size:11px;}
.adv-section .adv-form input[name=mappings]{font-family:Consolas,monospace;}
.adv-section .adv-ipv6-ports{max-height:465px;overflow-y:auto;}
.adv-section .net-service-row>span{overflow-wrap:anywhere;}
.adv-section>.net-table-wrap{margin-bottom:8px;}
.trace-controls .adv-ping-target{width:min(190px,22vw)!important;min-width:125px!important;padding-inline:9px;text-overflow:ellipsis;}
@media(max-width:720px){
 .adv-section .adv-form{grid-template-columns:1fr;}
 .trace-controls .adv-ping-target{width:100%!important;min-width:180px!important;}
}
@media(prefers-reduced-motion:reduce){.adv-section{scroll-behavior:auto;}}


/* Transport and protocol-control-plane laboratories share the neutral inspector. */
.transport-panel .net-section>.adv-form{padding:11px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.transport-panel .net-section>.adv-form>.net-primary{grid-column:1/-1;}
.transport-panel .net-section>.adv-form input,.transport-panel .net-section>.adv-form select{
 min-width:0;width:100%;font-size:11px;border:1px solid var(--control-border);color:var(--foreground);
 background:var(--control-bg);border-radius:5px;min-height:34px;padding:7px;
}
.transport-panel .net-section>.net-hint{padding:0 11px 8px;}
.transport-panel .net-service-row{overflow-wrap:anywhere;}
.adv-crypto-lab{border-top:1px solid var(--border-subtle);margin:8px 0 0;padding:12px;}
.adv-crypto-lab>strong{font-size:11px;}
.adv-crypto-lab .net-field{margin:11px 0;}
.adv-crypto-lab input{border:1px solid var(--control-border);background:var(--control-bg);
 color:var(--foreground);padding:9px;border-radius:5px;width:100%;min-width:0;}
.adv-crypto-lab>.net-secondary{margin:5px 0 8px;width:100%;white-space:normal;}
.protocol-timeline-actions{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 8px;}
.protocol-timeline-actions button{margin:0;padding:8px;font-size:10px;flex:1;min-width:68px;}
.protocol-timeline .net-section>.net-service-row{margin:0 8px;}
.protocol-timeline .net-section>.net-hint{padding:0 10px;}
@media(max-width:540px){.transport-panel .net-section>.adv-form{grid-template-columns:1fr;}}


/* Workbench 2026: information hierarchy, not a decorative dashboard.
   Follows the original project blueprint: flat surfaces, one accent,
   explicit actions, 120–220 ms motions, readable controls. */
.editor-topbar-main{padding:9px 19px!important;min-height:64px!important;gap:18px!important;}
.editor-context{font-size:9px!important;letter-spacing:.7px!important;opacity:.8;}
.editor-topbar-main .project-name-field{font-size:18px!important;font-weight:700!important;line-height:1.35!important;}
.editor-topbar-main .project-identifier{width:36px!important;height:36px!important;border-radius:7px!important;}
.editor-save-status{font-size:11px!important;white-space:nowrap;}
.editor-run-button{min-height:38px!important;padding:8px 17px!important;font-size:12px!important;}
.editor-commandbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:43px!important;padding:5px 15px!important;flex-wrap:wrap;}
.editor-commandbar .commandbar-group{display:flex;align-items:center;gap:3px;flex-wrap:wrap;}
.workbench-mode-label{color:var(--secondary);font-size:11px;margin-right:5px;white-space:nowrap;}
.workbench-complexity{min-height:31px;padding:5px 11px;border:1px solid transparent;
 background:transparent;color:var(--secondary);border-radius:5px;font-size:11px;font-weight:600;
 transition:background .16s ease,color .16s ease;}
.workbench-complexity:hover{background:var(--surface-hover);color:var(--foreground);}
.workbench-complexity.active{color:var(--foreground);background:var(--accent-light);border-color:var(--accent);}
.tool-link,.toolbar-menu>summary{min-height:31px;display:inline-flex;align-items:center;}
.workbench-mode-label+.workbench-complexity{margin-left:2px;}
/* Work area: palette / graph / contextual inspector. */
.workspace{grid-template-columns:210px minmax(0,1fr) 310px;grid-template-rows:minmax(460px,calc(100vh - 315px)) minmax(240px,auto);min-width:0;}
.pane-head{padding:16px 15px 9px!important;font-size:11px!important;color:var(--secondary)!important;
 font-weight:700!important;letter-spacing:.15px!important;}
.palette-pane{scrollbar-width:thin;}
.palette-pane .palette{padding:0 9px 5px!important;display:grid;gap:3px;}
.palette-pane .palette-item{min-height:53px;padding:7px 9px!important;border-radius:5px!important;gap:10px!important;margin:0!important;}
.palette-pane .palette-item:hover{background:var(--surface-hover)!important;}
.palette-item strong{font-size:12px!important;}
.palette-item small{font-size:10px!important;line-height:1.35;}
.palette-symbol{width:34px!important;height:34px!important;flex:0 0 34px!important;}
.palette-symbol svg{width:21px!important;height:21px!important;}
.palette-pane .unifi-palette-button{margin:6px 0 0!important;min-height:51px;}
.palette-pane .pane-divider{margin:9px 12px!important;background:var(--border-subtle)!important;}
.palette-pane .cable-palette-item{min-height:42px;padding-block:7px!important;margin:0!important;}
.cable-palette-hint{font-size:10px!important;line-height:1.55!important;padding:8px 12px!important;}
.palette-guide{display:grid;gap:7px!important;margin:4px 8px!important;padding:11px!important;
 background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:6px;}
.palette-guide strong{font-size:11px;color:var(--foreground);}
.palette-guide span{font-size:10px;line-height:1.65;color:var(--secondary);}
.palette-example-link{display:block;width:calc(100% - 18px);margin:9px;background:transparent;
 color:var(--accent);border:1px solid var(--border-subtle);border-radius:5px;
 padding:11px 9px;font-size:11px;text-align:left;font-weight:650;}
.palette-example-link:hover{background:var(--surface-alt);}
.refined-canvas-tools{min-height:49px!important;padding-inline:12px!important;gap:8px!important;}
.refined-canvas-tools .hint{font-size:11px!important;line-height:1.35;color:var(--secondary)!important;}
.cable-mode-button{min-height:34px!important;}
.canvas-legend{min-height:35px!important;padding:8px 13px!important;gap:13px!important;line-height:1.5!important;flex-wrap:wrap;}
.canvas-legend>span:last-child{margin-left:auto;white-space:nowrap;}
/* Three clear editing modes inside the inspector, without scrolling past
   every advanced configuration just to reach a gateway field. */
.inspector-content{padding:0 12px 24px!important;}
.inspector-tabs{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(auto-fit,minmax(65px,1fr));
 gap:4px;padding:8px 0 9px;background:var(--surface);border-bottom:1px solid var(--border-subtle);}
.inspector-tab{border:1px solid transparent;border-radius:5px;min-height:36px;padding:7px 9px;
 background:transparent;color:var(--secondary);font-size:11px;font-weight:700;white-space:nowrap;}
.inspector-tab:hover{background:var(--surface-hover);color:var(--foreground);}
.inspector-tab.active{color:var(--foreground);background:var(--accent-light);border-color:var(--accent);}
.inspector-tab-panel{padding:14px 1px 24px;min-width:0;}
.inspector-tab-panel[hidden]{display:none!important;}
.inspector-tab-panel>.network-services{border-top:0;padding:2px 0 12px;}
.inspector-pro-help{font-size:10px;color:var(--secondary);line-height:1.55;text-align:center;
 padding:9px 4px;border-top:1px solid var(--border-subtle);}
.inspector-content .input-label{font-size:11px!important;color:var(--secondary)!important;}
.inspector-content .field{min-height:37px!important;}
.inspector-content .inspector-sub{font-size:12px!important;margin-top:18px!important;color:var(--foreground)!important;}
.inspector-content .port-item{border-radius:5px!important;line-height:1.4!important;}
.inspector-content .info-box{font-size:11px!important;line-height:1.6!important;margin-block:12px!important;}
.inspector-content .terminal{margin-top:12px;}
.inspector-content .net-section:not([open]){box-shadow:none;}
.inspector-tab-panel:focus-visible,.inspector-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Legible simulation strip: favor labels, avoid compressed micro-controls. */
.trace-head{padding:10px 14px!important;gap:10px!important;}
.trace-controls{display:flex!important;align-items:center!important;justify-content:flex-end!important;
 flex-wrap:wrap!important;gap:6px!important;}
.trace-controls select,.trace-controls input{min-height:32px!important;max-width:225px;}
.trace-controls .adv-ping-target{min-width:135px!important;}
.trace-head>div:first-child>strong{font-size:12px!important;}
.trace-head>div:first-child>small{font-size:10px!important;}
.trace-detail{line-height:1.55;}
/* Keep the original restrained aesthetic in both color schemes. */
html[data-theme="dark"] .inspector-tab.active{background:#29413b;}
html[data-theme="light"] .inspector-tab.active{background:#e3eeea;}
@media(max-width:1190px){
 .workspace{grid-template-columns:185px minmax(0,1fr) 280px;}
 .workbench-mode-label{display:none;}
 .editor-commandbar{padding-inline:9px!important;}
 .editor-commandbar .tool-link{padding-inline:9px!important;}
}
@media(max-width:920px){
 .workspace{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(440px,auto) auto auto!important;}
 .palette-pane{max-height:none!important;}
 .palette-pane .palette{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
 .palette-pane .cable-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));}
 .inspector-pane{max-height:none!important;}
 .inspector-content{max-width:840px;margin:0 auto;}
 .inspector-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
 .trace-pane{min-height:320px;}
}
@media(max-width:620px){
 .editor-topbar-main{padding:9px 11px!important;flex-wrap:wrap!important;}
 .editor-topbar-main-right{margin-left:auto;}
 .editor-commandbar{gap:7px!important;}
 .editor-commandbar .commandbar-group{width:100%;justify-content:space-between!important;gap:3px;}
 .editor-commandbar .workbench-complexity{flex:1;}
 .editor-commandbar .tool-link{font-size:10px!important;padding:7px 6px!important;}
 .refined-canvas-tools{flex-wrap:wrap;height:auto!important;padding:8px!important;}
 .canvas-viewport{min-height:440px!important;}
 .trace-controls{justify-content:flex-start!important;}
 .trace-head{align-items:stretch;flex-wrap:wrap;}
 .trace-head>div:first-child{min-width:100%;}
 .canvas-legend{gap:7px!important;font-size:10px!important;}
 .palette-pane .palette{grid-template-columns:repeat(2,minmax(0,1fr));}
 .palette-pane .cable-palette{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(prefers-reduced-motion:reduce){.workbench-complexity,.inspector-tab{transition:none!important;}}


/* In building mode the floor-plan/3D stage IS the canvas.
   Do not stack a second complete network editor below it. */
.workspace.workspace-3d{display:block!important;grid-template-columns:none!important;grid-template-rows:none!important;
 border-top:0!important;background:var(--surface)!important;}
.workspace-3d>.palette-pane,.workspace-3d>.canvas-pane,.workspace-3d>.inspector-pane{display:none!important;}
.workspace-3d>.trace-pane{display:grid!important;width:100%!important;min-height:270px;max-width:none!important;grid-column:auto!important;grid-row:auto!important;}
.lab-3d-shell+.lab-panels:empty{display:none;}
.site-view-switch button{min-height:36px!important;}
@media(max-width:920px){.workspace.workspace-3d{display:block!important;}}


/* In beginner mode show only automatic, ordinary copper, and one fiber cable.
   All seven cable types stay available in expert mode and Cable Options. */
.workspace.level-simple .cable-palette-item:not([data-cable-palette="auto"]):not([data-cable-palette="straight"]):not([data-cable-palette="fiber_mm"]){display:none!important;}
.trace-extra-settings{position:relative;min-width:0;}
.trace-extra-settings>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
 font-size:11px;font-weight:600;min-height:32px;border:1px solid var(--border-subtle);
 border-radius:5px;padding:6px 10px;color:var(--foreground);background:var(--control-bg);cursor:pointer;white-space:nowrap;}
.trace-extra-settings>summary::-webkit-details-marker{display:none;}
.trace-extra-settings>summary::after{content:"⌄";padding-left:8px;color:var(--secondary);}
.trace-extra-settings[open]>summary{background:var(--accent-light);border-color:var(--accent);}
.trace-extra-fields{position:absolute;top:calc(100% + 5px);right:0;z-index:26;
 width:min(355px,90vw);padding:13px;box-shadow:0 14px 36px #0002;
 display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;
 background:var(--surface);border:1px solid var(--border-subtle);border-radius:7px;}
.trace-extra-fields label{font-size:11px!important;color:var(--secondary);}
.trace-extra-fields input,.trace-extra-fields select{width:100%!important;max-width:none!important;}
@media(max-width:620px){
 .trace-extra-settings{position:static;}
 .trace-extra-fields{position:relative;top:0;right:auto;width:100%;margin-top:5px;box-shadow:none;}
}

/* Guided workspace, device search and safe external labs: use existing responsive layout. */
.workspace-help{display:flex;align-items:center;gap:12px;padding:10px 17px;background:var(--surface-alt);border-bottom:1px solid var(--border-subtle);color:var(--foreground);}
.workspace-help-counter{flex:none;border:1px solid var(--border-subtle);border-radius:5px;padding:8px;color:var(--secondary);font:700 11px Consolas,monospace;}
.workspace-help-body{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;}
.workspace-help-body strong{font-size:12px;}
.workspace-help-body span{font-size:11px;color:var(--secondary);line-height:1.5;}
.workspace-help-action,.toolbar-help{min-height:34px;flex:none;padding:7px 10px;border:1px solid var(--control-border);border-radius:5px;background:var(--control-bg);color:var(--foreground);font-size:11px;font-weight:650;}
.workspace-help-dismiss{border:0;background:transparent;color:var(--secondary);font-size:22px;min-width:30px;min-height:30px;}
.toolbar-menu-note{padding:7px 12px;margin:0;max-width:300px;color:var(--secondary);font-size:11px;line-height:1.5;border-bottom:1px solid var(--border-subtle);}
.palette-filter-label{display:block;padding:10px 12px 5px;color:var(--secondary);font-size:11px;}
.palette-filter-input{display:block;width:calc(100% - 24px);margin:0 12px 10px;min-height:39px;padding:8px 10px;border:1px solid var(--control-border);border-radius:5px;background:var(--control-bg);color:var(--foreground);font-size:12px;}
.palette-empty{margin:0;padding:8px 12px;font-size:11px;color:var(--secondary);}
.palette-pane .palette-item[hidden],.palette-pane .unifi-palette-button[hidden],.palette-pane .cable-palette-item[hidden],.palette-empty[hidden]{display:none!important;}
.palette-pane.is-filtering .cable-palette-hint{display:none;}
.workspace-help button:focus-visible,.palette-filter-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media(max-width:930px){.workspace-help-body{flex-direction:column;align-items:flex-start;gap:3px;}}
@media(max-width:620px){.workspace-help{gap:8px;padding:9px 11px;}.workspace-help-counter{display:none;}.workspace-help-action{max-width:130px;white-space:normal;}}
@media(prefers-reduced-motion:reduce){.workspace-help *{transition:none!important;animation:none!important;}}

/* Built-in local lab guide avoids a broken private GitHub documentation link. */
.local-lab-guide{position:fixed;inset:0;max-width:min(760px,calc(100vw - 24px));width:100%;
 max-height:min(90dvh,860px);padding:0;margin:auto;overflow:auto;border:1px solid var(--border-subtle);
 border-radius:10px;background:var(--surface);color:var(--foreground);box-shadow:0 24px 70px #0004;}
.local-lab-guide::backdrop{background:#101820b8;}
.local-lab-guide-header{position:sticky;top:0;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
 border-bottom:1px solid var(--border-subtle);background:var(--surface);padding:19px 22px;z-index:2;}
.local-lab-guide-header span{color:var(--secondary);font-size:10px;font-weight:700;letter-spacing:.07em;}
.local-lab-guide-header h2{font-size:19px;line-height:1.3;margin:7px 0;color:var(--foreground);}
.local-lab-guide-header p{font-size:12px;color:var(--secondary);margin:0;line-height:1.6;}
.local-lab-guide-close{flex:none;font-size:23px;min-height:34px;min-width:34px;
 border:1px solid var(--control-border);border-radius:6px;background:var(--control-bg);color:var(--foreground);}
.local-lab-guide-body{padding:20px 22px;display:grid;gap:13px;font-size:12px;line-height:1.7;}
.local-lab-guide-body>p{margin:0;}
.local-lab-guide-body h3{font-size:14px;margin:4px 0;}
.local-lab-guide-body ol{padding-left:23px;margin:0;display:grid;gap:8px;}
.local-lab-guide-body a{color:var(--accent);text-decoration:underline;}
.local-lab-guide-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.local-lab-guide-modes section{padding:13px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface-alt);}
.local-lab-guide-modes strong{font-size:12px;}.local-lab-guide-modes p{font-size:11px;line-height:1.6;color:var(--secondary);margin:6px 0 0;}
.local-lab-guide-commands{display:grid;gap:5px;padding:12px;background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:6px;overflow:auto;}
.local-lab-guide-commands code{font:11px/1.55 Consolas,monospace;white-space:nowrap;}
.local-lab-guide-note{font-weight:600;border-top:1px solid var(--border-subtle);padding-top:14px;}
.local-lab-guide-footer{position:sticky;bottom:0;background:var(--surface);padding:12px 22px;
 border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;}
.local-lab-guide-footer button{min-height:37px;padding:8px 15px;border-radius:5px;
 background:var(--accent);color:white;border:1px solid var(--accent);font-size:12px;font-weight:650;}
@media(max-width:660px){.local-lab-guide-modes{grid-template-columns:1fr;}
 .local-lab-guide-header,.local-lab-guide-body,.local-lab-guide-footer{padding-left:14px;padding-right:14px;}}
@media(prefers-reduced-motion:reduce){.local-lab-guide *{transition:none!important;animation:none!important;}}

/* Network check: actionable warnings without overwhelming the topology canvas. */
.network-check{padding:18px 20px;background:var(--surface);color:var(--foreground);border-block:1px solid var(--border-subtle);}
.network-check-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.network-check-head small{font-size:10px;color:var(--secondary);font-weight:700;letter-spacing:.04em;}
.network-check-head h2{font-size:17px;margin:6px 0 3px;}.network-check-head p,.network-check-limit{color:var(--secondary);font-size:11px;line-height:1.6;margin:0;}
.network-check-buttons{display:flex;gap:7px;flex-wrap:wrap;}
.network-check-buttons button,.network-check-item button{min-height:34px;padding:7px 10px;border:1px solid var(--control-border);border-radius:5px;background:var(--control-bg);color:var(--foreground);font-size:11px;cursor:pointer;}
.network-check-buttons button:hover,.network-check-item button:hover{border-color:var(--accent);}
.network-check-list{list-style:none;display:grid;gap:7px;padding:0;margin:14px 0;max-height:350px;overflow-y:auto;}
.network-check-item{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;background:var(--surface-alt);border:1px solid var(--border-subtle);border-inline-start:3px solid var(--accent);border-radius:6px;}
.network-check-item.warning{border-inline-start-color:var(--warn);}.network-check-item.error{border-inline-start-color:var(--bad);}
.network-check-item b{color:var(--secondary);font-size:10px;min-width:50px;}
.network-check-item>span{font-size:12px;line-height:1.5;flex:1;min-width:0;overflow-wrap:anywhere;}
.network-check-item button{white-space:nowrap;}.network-check-clean{padding:14px;background:var(--surface-alt);font-size:12px;}
.network-check-limit{border-top:1px solid var(--border-subtle);padding-top:11px;}
@media(max-width:620px){.network-check{padding:12px;}.network-check-item{flex-wrap:wrap;}.network-check-item button{margin-left:auto;}}

/* Current, self-contained in-product documentation. */
.darksubnet-docs{max-width:1120px;margin-inline:auto;padding-bottom:55px;}
.docs-intro{margin-bottom:22px;}.docs-start{display:inline-block;margin-top:13px;
 padding:11px 15px;background:var(--accent);border-radius:5px;color:white!important;font-size:12px;font-weight:700;}
.docs-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:7px;
 border:1px solid var(--border-subtle);border-radius:7px;background:var(--surface-alt);padding:12px;margin:18px 0 26px;}
.docs-index a{padding:8px 10px;border:1px solid var(--border-subtle);border-radius:5px;
 background:var(--surface);font-size:12px;color:var(--foreground);}
.docs-index a:hover{border-color:var(--accent);}
.darksubnet-docs .doc-section{scroll-margin-top:100px;}.darksubnet-docs .doc-section li{margin-bottom:9px;}
.docs-table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--border-subtle);border-radius:6px;margin:15px 0;}
.doc-feature-table{width:100%;min-width:670px;border-collapse:collapse;font-size:12px;line-height:1.55;}
.doc-feature-table th,.doc-feature-table td{border-bottom:1px solid var(--border-subtle);padding:11px;text-align:left;vertical-align:top;}
.doc-feature-table th{background:var(--surface-alt);color:var(--foreground);}
.doc-feature-table th:first-child,.doc-feature-table td:first-child{min-width:115px;font-weight:650;}
.darksubnet-docs kbd{display:inline-block;border:1px solid var(--border-subtle);
 background:var(--surface-alt);border-radius:3px;padding:1px 5px;font:11px Consolas,monospace;}
@media(max-width:600px){.docs-index{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Virtual ping matrix: bounded, readable and explicitly not a live scan. */
.ping-matrix{padding:14px 20px 18px;border-bottom:1px solid var(--border-subtle);background:var(--surface);}
.ping-matrix-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;}
.ping-matrix-head strong{font-size:13px;}.ping-matrix-head p{font-size:11px;color:var(--secondary);margin:0;}
.ping-matrix-scroll{max-height:330px;overflow:auto;margin:12px 0;border:1px solid var(--border-subtle);border-radius:6px;}
.ping-matrix table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.5;text-align:left;}
.ping-matrix th,.ping-matrix td{padding:9px 11px;border-bottom:1px solid var(--border-subtle);vertical-align:top;}
.ping-matrix th{position:sticky;top:0;background:var(--surface-alt);z-index:1;text-align:left;}
.ping-matrix td button{border:0;background:transparent;font-size:11px;color:var(--accent);font-weight:650;text-decoration:underline;padding:0;cursor:pointer;}
.ping-matrix td small{display:block;color:var(--secondary);font:10px/1.5 Consolas,monospace;}
.ping-matrix .failed td:nth-child(3){color:var(--bad);font-weight:700;}
.ping-matrix .passed td:nth-child(3){color:var(--good);font-weight:700;}
.ping-matrix-disclaimer,.ping-matrix-empty{font-size:11px;color:var(--secondary);line-height:1.6;margin:0;}
@media(max-width:620px){.ping-matrix{padding:12px;}.ping-matrix table{min-width:580px;}}

/* Review CML imports, unsupported features and internal topology disclosure. */
.cml-export-dialog{margin:auto;max-width:min(760px,calc(100vw - 22px));width:100%;
 max-height:88dvh;padding:0;border:1px solid var(--border-subtle);border-radius:9px;
 background:var(--surface);color:var(--foreground);box-shadow:0 24px 75px #0005;}
.cml-export-dialog::backdrop{background:#0b1420b9;}
.cml-export-dialog-header,.cml-export-dialog-actions{display:flex;justify-content:space-between;
 align-items:center;gap:12px;padding:14px 20px;background:var(--surface);position:sticky;z-index:2;}
.cml-export-dialog-header{top:0;border-bottom:1px solid var(--border-subtle);}
.cml-export-dialog-actions{bottom:0;border-top:1px solid var(--border-subtle);justify-content:flex-end;}
.cml-export-dialog-header h2{font-size:17px;margin:0;}
.cml-export-dialog button{min-height:36px;padding:7px 12px;border-radius:5px;
 border:1px solid var(--control-border);background:var(--control-bg);color:var(--foreground);
 cursor:pointer;font-size:12px;}
.cml-export-dialog button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.cml-export-dialog-header button{font-size:21px;min-width:37px;}
.cml-export-dialog .cml-export-confirm{background:var(--accent);border-color:var(--accent);color:white;font-weight:700;}
.cml-export-dialog-content{padding:18px 20px;display:grid;gap:12px;font-size:12px;line-height:1.6;}
.cml-export-dialog-content p,.cml-export-dialog-content h3{margin:0;}
.cml-export-dialog-content h3{font-size:13px;margin-top:5px;}
.cml-export-profile{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;}
.cml-export-profile strong{font-size:14px;}
.cml-export-profile span{color:var(--secondary);font-size:11px;}
.cml-export-limit{border:1px solid var(--warn);padding:12px;border-radius:5px;background:var(--surface-alt);font-weight:650;}
.cml-export-warnings{max-height:170px;overflow:auto;display:grid;gap:6px;margin:0;padding:0 0 0 20px;}
.cml-export-warnings li{overflow-wrap:anywhere;}
.cml-export-preview{border:1px solid var(--border-subtle);border-radius:5px;padding:10px;}
.cml-export-preview summary{cursor:pointer;font-weight:600;}
.cml-export-preview pre{font:11px/1.55 Consolas,monospace;max-height:230px;overflow:auto;
 background:var(--surface-alt);padding:10px;white-space:pre-wrap;overflow-wrap:anywhere;}
.cml-export-privacy{font-size:11px;color:var(--secondary);}
@media(max-width:600px){.cml-export-dialog-header,.cml-export-dialog-actions,.cml-export-dialog-content{padding-inline:13px;}}

/* Fixed zoom HUD: sibling of the scrolling viewport, not part of its scroll content.
   The stage stays inside the 2D canvas pane; only .canvas-viewport may scroll. */
.canvas-stage{position:relative;display:flex;flex:1 1 auto;min-width:0;min-height:0;isolation:isolate;}
.canvas-stage>.canvas-viewport{flex:1 1 auto;min-width:0;min-height:0;}
.canvas-stage>.canvas-zoom-tools{
  position:absolute;right:15px;bottom:15px;left:auto;top:auto;
  margin:0;width:max-content;max-width:calc(100% - 20px);z-index:14;
}
@media(max-width:620px){
 .canvas-stage>.canvas-zoom-tools{right:9px;bottom:9px;}
}

/* 3D office furniture/workstations: visible, responsive and keyboard accessible. */
.lab-3d-furniture-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 border-top:1px solid var(--border-subtle);padding:12px 17px;background:var(--surface);}
.lab-3d-furniture-actions strong{font-size:12px;margin-right:5px;color:var(--foreground);}
.lab-3d-furniture-actions label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--secondary);}
.lab-3d-furniture-actions select,.lab-3d-furniture-actions button{
 min-height:35px;max-width:100%;border:1px solid var(--control-border);border-radius:5px;
 background:var(--control-bg);color:var(--foreground);padding:7px 10px;font-size:11px;}
.lab-3d-furniture-actions button:hover{border-color:var(--accent);}
.lab-3d-furniture-actions small{width:100%;line-height:1.55;color:var(--secondary);}
.three-device-position select,.three-inspector [data-furniture-rotation]{min-height:37px;width:100%;margin-top:5px;}
@media(max-width:640px){.lab-3d-furniture-actions label{width:100%;}
 .lab-3d-furniture-actions select{flex:1;min-width:0;}}

/* 3D CAD controls: preserve pointer gestures and make the tool selection legible. */
.three-viewport .three-canvas{touch-action:none;overscroll-behavior:contain;}
.three-viewport{overscroll-behavior:contain;}
.three-mode-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.three-mode-switch button.active{box-shadow:inset 0 0 0 1px var(--accent);}
@media(max-width:620px){.three-mode-switch{flex-wrap:wrap;}
 .three-mode-switch button{flex:1 1 auto;padding-inline:9px;}}

/* 2D canvas: wheel zoom, grab-to-pan and fixed overlay toolbar. */
.canvas-stage>.canvas-viewport{cursor:grab;touch-action:none;user-select:none;}
.canvas-stage>.canvas-viewport.is-panning{cursor:grabbing;}
.canvas-stage>.canvas-viewport .node{cursor:grab;}
.canvas-stage>.canvas-viewport .node:active{cursor:grabbing;}
.canvas-stage>.canvas-viewport .device-port{cursor:crosshair;}
.canvas-stage>.canvas-viewport .cable-hit{cursor:pointer;}

/* Focus workspace: only requested sidebars occupy the 2D canvas. */
.workspace:not(.workspace-3d){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(560px,calc(100dvh - 290px)) auto!important;gap:1px;}
.workspace:not(.workspace-3d)>.canvas-pane{grid-column:1!important;grid-row:1!important;min-height:560px;}
.workspace:not(.workspace-3d)>.trace-pane{grid-column:1/-1!important;grid-row:2!important;min-height:0!important;}
.workspace:not(.workspace-3d)>.palette-pane,.workspace:not(.workspace-3d)>.inspector-pane{display:none!important;}
@media(min-width:1000px){
 .workspace.ui-devices-open:not(.workspace-3d){grid-template-columns:210px minmax(0,1fr)!important;}
 .workspace.ui-properties-open:not(.workspace-3d){grid-template-columns:minmax(0,1fr) 285px!important;}
 .workspace.ui-devices-open.ui-properties-open:not(.workspace-3d){grid-template-columns:210px minmax(0,1fr) 285px!important;}
 .workspace.ui-devices-open:not(.workspace-3d)>.palette-pane{display:block!important;grid-column:1!important;grid-row:1!important;}
 .workspace.ui-devices-open:not(.workspace-3d)>.canvas-pane{grid-column:2!important;}
 .workspace.ui-properties-open:not(.workspace-3d)>.inspector-pane{display:block!important;grid-column:2!important;grid-row:1!important;}
 .workspace.ui-devices-open.ui-properties-open:not(.workspace-3d)>.inspector-pane{grid-column:3!important;}
}
.workspace:not(.ui-trace-open) .trace-main,.workspace:not(.ui-trace-open) .ping-overview-host{display:none!important;}
.workspace:not(.ui-trace-open) .trace-pane{min-height:0!important;}
.workbench-toggle,.trace-disclosure,.workbench-close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
 min-height:34px;padding:7px 10px;font-size:11px;font-weight:650;white-space:nowrap;
 border:1px solid var(--control-border);border-radius:6px;background:var(--control-bg);color:var(--foreground);}
.workbench-toggle:hover,.trace-disclosure:hover,.workbench-close:hover{background:var(--surface-hover);}
.workbench-toggle[aria-pressed="true"]{background:var(--accent-light);border-color:var(--accent);}
.workbench-toggle:focus-visible,.trace-disclosure:focus-visible,.workbench-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.canvas-quick-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;}
.trace-head{flex-wrap:wrap;gap:9px;}
.trace-disclosure{margin-left:auto;}
.workbench-close{float:right;min-width:28px;min-height:28px;padding:0 7px;font-size:18px;}
/* 3D replaces the redundant 2D workspace. The ping toolbar remains available. */
.workspace-3d{display:block!important;border-top:0!important;}
.workspace-3d>.palette-pane,.workspace-3d>.canvas-pane,.workspace-3d>.inspector-pane{display:none!important;}
.workspace-3d>.trace-pane{min-height:0!important;margin-top:1px;}
/* Full scene and contextual overlay, with responsive size controlled by ResizeObserver. */
.lab-3d-shell .three-stage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;
 position:relative!important;height:clamp(520px,69dvh,880px)!important;min-height:430px!important;}
.lab-3d-shell .three-viewport{grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:0!important;flex:none!important;}
.lab-3d-shell .three-inspector{display:none!important;position:absolute!important;z-index:12;top:12px;right:12px;bottom:12px;
 width:min(310px,calc(100% - 24px));max-height:calc(100% - 24px);overflow-y:auto;
 border:1px solid var(--border-subtle)!important;border-radius:8px;box-shadow:0 14px 40px #0008;}
.lab-3d-shell.show-3d-properties .three-inspector{display:block!important;}
.three-inspector-heading{display:flex;justify-content:space-between;align-items:center;gap:9px;}
.three-inspector-heading button{min-width:28px;min-height:28px;border:0;border-radius:5px;cursor:pointer;
 background:transparent;color:var(--foreground);font-size:20px;}
.three-inspector-heading button:hover{background:var(--surface-hover);}
.lab-3d-shell .three-controls{gap:7px;padding:9px 13px;}
.three-help{position:relative;margin-left:auto;color:var(--secondary);font-size:11px;}
.three-help>summary{list-style:none;cursor:pointer;padding:8px;}
.three-help>summary::-webkit-details-marker{display:none;}
.three-help[open]>span{display:block;position:absolute;right:0;top:100%;z-index:18;padding:13px;width:min(320px,80vw);
 background:var(--surface);color:var(--foreground);border:1px solid var(--border-subtle);border-radius:7px;line-height:1.6;box-shadow:0 8px 22px #0006;}
.lab-3d-add-drawer{border-top:1px solid var(--border-subtle);background:var(--surface);}
.lab-3d-add-drawer>summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none;padding:12px 16px;
 color:var(--foreground);font-size:12px;font-weight:700;}
.lab-3d-add-drawer>summary::-webkit-details-marker{display:none;}
.lab-3d-add-drawer>summary:after{content:"▾";margin-left:auto;color:var(--secondary);}
.lab-3d-add-drawer[open]>summary:after{content:"▴";}
.lab-3d-add-drawer>summary small{font-size:11px;color:var(--secondary);font-weight:400;}
.lab-3d-add-drawer>summary:hover{background:var(--surface-hover);}
.lab-3d-add-drawer .lab-3d-device-actions,.lab-3d-add-drawer .lab-3d-furniture-actions{border-top:1px solid var(--border-subtle);}
.lab-3d-top{padding:11px 17px!important;min-height:0!important;}
.lab-3d-top p{font-size:11px!important;}
.site-view-switch{padding-block:7px!important;}
@media(max-width:999px){
 .workspace:not(.workspace-3d){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;}
 .workspace:not(.workspace-3d)>.canvas-pane{grid-column:1!important;grid-row:auto!important;min-height:450px!important;}
 .workspace.ui-devices-open:not(.workspace-3d)>.palette-pane{display:block!important;grid-column:1!important;grid-row:auto!important;max-height:215px;overflow:auto;}
 .workspace.ui-properties-open:not(.workspace-3d)>.inspector-pane{display:block!important;grid-column:1!important;grid-row:auto!important;max-height:350px;overflow:auto;}
 .workspace:not(.workspace-3d)>.trace-pane{grid-column:1!important;grid-row:auto!important;}
}
@media(max-width:700px){
 .canvas-quick-actions .hint{display:none;}
 .lab-3d-shell .three-stage{height:62dvh!important;min-height:350px!important;}
 .lab-3d-top p,.lab-3d-add-drawer>summary small{display:none;}
 .three-mode-switch{width:auto;}
 .three-mode-switch button{font-size:10px;padding:7px;}
 .three-help{margin-left:0;}
 .trace-head .trace-controls{width:100%;justify-content:flex-start;}
}

.workbench-toggle[aria-expanded="true"]{background:var(--accent-light);border-color:var(--accent);}

/* Port IDs are shown where the cable enters each device, including while dragging. */
.wires .port-end-label{pointer-events:none;}
.wires .port-end-label rect{
 fill:var(--surface-strong,#16242c);fill-opacity:.96;
 stroke:var(--accent,#6dc4a8);stroke-width:1.2;
}
.wires .port-end-label text{
 font:700 12px/1 ui-monospace,Consolas,monospace;
 fill:var(--foreground,#e9f5f0);stroke:none;paint-order:normal;
 letter-spacing:.2px;
}
.port-label-toggle{
 cursor:pointer;white-space:nowrap;border:1px solid var(--control-border);
 background:var(--control-bg);color:var(--foreground);
 border-radius:6px;font-size:11px;font-weight:650;padding:8px 10px;min-height:35px;
}
.port-label-toggle[aria-pressed="true"]{
 color:var(--accent,#a9e1cf);border-color:var(--accent,#78bbaa);
 background:var(--accent-light,rgba(89,167,137,.15));
}
.port-label-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* Router editing is guided, instead of a long unlabelled row of inputs. */
.route-hint,.route-assistant>p{margin:7px 0 12px;font-size:11px;line-height:1.55;color:var(--secondary);}
.route-table-wrap{border:1px solid var(--border-subtle);border-radius:8px;overflow-x:auto;max-width:100%;background:var(--surface-alt);}
.route-easy-table{border-collapse:collapse;width:100%;font-size:11px;line-height:1.5;text-align:left;}
.route-easy-table th,.route-easy-table td{padding:9px 7px;border-bottom:1px solid var(--border-subtle);vertical-align:top;}
.route-easy-table tr:last-child td{border-bottom:0;}
.route-easy-table th{font-size:10px;font-weight:700;color:var(--secondary);}
.route-easy-table td small{display:block;color:var(--secondary);font-size:10px;}
.route-mono{font-family:ui-monospace,Consolas,monospace;white-space:nowrap;}
.route-type{display:inline-flex;min-width:23px;justify-content:center;padding:2px 5px;border-radius:5px;
 font:700 11px ui-monospace,Consolas,monospace;color:var(--foreground);background:var(--control-bg);}
.route-type-C{color:#94dfba;background:#2b473e;}
.route-type-S{color:#b7dcff;background:#2a3e54;}
.route-type-O{color:#d8c4fa;background:#453957;}
.route-warning{font-size:11px;line-height:1.5;color:#f0b477;margin:10px 0;}
.route-assistant{border:1px solid var(--border-subtle);background:var(--surface-alt);
 border-radius:10px;padding:15px;margin-top:16px;display:grid;gap:6px;}
.route-assistant>strong{font-size:13px;color:var(--foreground);}
.route-assistant>.input-label{margin:4px 0!important;display:grid;gap:5px;}
.route-assistant input,.route-assistant select{width:100%;min-width:0;}
.route-feedback{border-left:3px solid #579d84;background:rgba(68,142,118,.10);
 padding:9px 11px;color:var(--foreground)!important;font-size:11px;line-height:1.5;margin:7px 0!important;}
.route-feedback.invalid{border-left-color:#e99f83;background:rgba(220,113,82,.08);}
.route-add-button{width:100%;min-height:37px;margin-top:3px;}
.route-edit-details{border-top:1px solid var(--border-subtle);margin:16px 0 6px;padding-top:11px;}
.route-edit-details>summary{color:var(--foreground);cursor:pointer;font-size:12px;font-weight:700;padding:8px 2px;}
.route-edit-row{border:1px solid var(--border-subtle);border-radius:8px;padding:11px;margin:9px 0;}
.route-edit-row>b{font-size:11px;overflow-wrap:anywhere;color:var(--foreground);}
.route-edit-fields{display:grid;grid-template-columns:minmax(0,1fr) 75px;gap:7px;margin:10px 0;}
.route-edit-fields>.input-label:nth-child(3){grid-column:1/-1;}
.route-edit-row>.btn-danger{width:100%;}
/* Make room for CIDR+gateway values only while properties are open. */
@media(min-width:1000px){
 .workspace.ui-properties-open:not(.workspace-3d){grid-template-columns:minmax(0,1fr) 340px!important;}
 .workspace.ui-devices-open.ui-properties-open:not(.workspace-3d){
  grid-template-columns:210px minmax(0,1fr) 340px!important;
 }
}
@media(max-width:850px){
 .refined-canvas-tools .hint{display:none;}
 .port-label-toggle{padding:7px 8px;}
}

.router-port-setup{margin:12px 0 18px;padding:0 2px;border-bottom:1px solid var(--border-subtle);}
.router-port-setup>summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--foreground);
 padding:11px 6px;list-style-position:inside;border-radius:5px;}
.router-port-setup>summary:hover{background:var(--surface-hover);}
.router-port-setup>p{font-size:11px;color:var(--secondary);line-height:1.5;padding:0 7px;}
.router-port-setup[open]{padding-bottom:15px;}

/* Ports are annotated on the hardware, not beneath its cables.
   This keeps close-packed rack/office diagrams readable at different zoom levels. */
.world.port-numbers-on .node-ports::before{content:none!important;}
.node .device-port .device-port-label{
 position:absolute!important;left:50%;bottom:calc(100% + 3px);top:auto;
 transform:translateX(-50%);z-index:2;display:block;
 width:max-content;max-width:24px;overflow:hidden;text-overflow:clip;
 font:700 9px/1.1 ui-monospace,Consolas,monospace!important;
 padding:1px 2px;border-radius:2px;white-space:nowrap;
 background:var(--surface-strong,#19262b);
 color:var(--foreground,#dce9e7);pointer-events:none;
}
.node .node-ports-dense .device-port-label{font-size:8px!important;padding:1px 0;max-width:16px;}
.canvas-connection-info{
 position:absolute;left:12px;bottom:12px;z-index:11;
 width:max-content;max-width:min(650px,calc(100% - 260px));
 padding:9px 13px;border-radius:7px;
 font:600 11px/1.55 ui-monospace,Consolas,monospace;
 color:var(--foreground,#ecf4f1);background:var(--surface-strong,#17292b);
 border:1px solid var(--border-subtle,#3d5858);
 box-shadow:0 10px 28px #0007;overflow-wrap:anywhere;
 pointer-events:none;
}
.canvas-connection-info[hidden]{display:none!important;}
.canvas-connection-info:not([hidden]){pointer-events:auto;user-select:text;}
.cable-hit:focus-visible{stroke:var(--accent,#7dcab6);stroke-width:6;outline:none;}
@media(max-width:700px){
 .canvas-connection-info{max-width:calc(100% - 24px);bottom:60px;}
}

/* Simple mode: fewer permanent controls without hiding the real features. */
.novice-tools .toolbar-popover{min-width:200px;padding:7px;}
.novice-tools .toolbar-popover>.tool-link{display:block;width:100%;margin:0;text-align:left;padding:10px 12px;border:0;border-radius:5px;white-space:normal;}
.novice-tools .toolbar-popover>.tool-link:hover,.novice-tools .toolbar-popover>.tool-link.active{background:var(--surface-hover);}

/* Cable stems visibly connect the socket at y+128 to SVG exit y+168. */
.node,.node-ports,.device-port{overflow:visible;}
.node .device-port.port-wired::after,
.node .device-port.port-source::after,
.node .device-port.port-preview-start::after{
 content:"";position:absolute;top:50%;left:50%;height:40px;width:3px;
 transform:translateX(-50%);border-radius:2px;
 background:var(--port-lead,#6baa91);pointer-events:none;z-index:0;
}
.node .device-port.port-down{--port-lead:#cb8179;}
.node .device-port.port-picked{--port-lead:#9ed9ff;outline:2px solid var(--accent,#7dcab6);outline-offset:2px;}
.node .device-port.port-source,.node .device-port.port-preview-start{--port-lead:#9ed9ff;}
.node .device-port>span{position:relative;z-index:1;}
.node .device-port .device-port-label{z-index:3;}

/* DarkSubnet first-visit welcome: deliberate, compact, accessible. */
.ds-welcome-shade{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:17px;background:#061017d9;backdrop-filter:blur(9px);}
.ds-welcome-dialog{width:min(790px,100%);max-height:calc(100dvh - 34px);overflow:auto;background:#142128;color:#edf7f3;border:1px solid #466369;border-radius:18px;box-shadow:0 35px 95px #000b;}
.ds-welcome-head{padding:18px 25px 0;display:flex;align-items:center;justify-content:space-between;gap:9px;color:#cdece4;letter-spacing:1px;font-size:11px;font-weight:800;}
.ds-welcome-head>span{display:flex;align-items:center;gap:9px;}
.ds-welcome-head b{border-radius:7px;background:#2b6359;padding:7px;font-size:12px;}
.ds-welcome-head small{font:700 10px ui-monospace,monospace;color:#95b5b6;}
.ds-welcome-network{position:relative;overflow:hidden;margin:16px 25px 0;background:radial-gradient(ellipse at center,#264950,#111e27 77%);border:1px solid #35565e;border-radius:11px;}
.ds-welcome-network svg{display:block;width:100%;height:147px;}
.ds-intro-wire{fill:none;stroke:#91e2cf;stroke-width:3;stroke-linecap:round;}
.ds-intro-device rect{fill:#23363e;stroke:#5c8c8a;stroke-width:1.6;}
.ds-intro-device path{fill:none;stroke:#c7e6dd;stroke-width:2;stroke-linecap:round;}
.ds-intro-device text{font:700 10px system-ui;fill:#afc9c4;text-anchor:middle;}
.ds-intro-packet{fill:#d2ffed;filter:drop-shadow(0 0 8px #64e3c1);}
.ds-welcome-network>small{position:absolute;bottom:8px;right:12px;color:#94b0b3;font:700 9px ui-monospace,monospace;letter-spacing:.8px;}
.ds-welcome-copy{padding:21px 29px 27px;}
.ds-welcome-kicker{font:800 10px ui-monospace,monospace;letter-spacing:1.5px;color:#96e1c4;}
.ds-welcome-copy h1{font-size:clamp(28px,4.2vw,42px);line-height:1.12;letter-spacing:-1.2px;margin:10px 0 14px;color:#f1faf6;}
.ds-welcome-copy h1 em{font-style:normal;color:#92ecc7;}
.ds-welcome-copy>p:not(.ds-welcome-hint){max-width:670px;color:#c0d5d2;font-size:14px;line-height:1.65;margin:0 0 19px;}
.ds-welcome-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.ds-welcome-columns>div{display:flex;flex-direction:column;gap:4px;padding:13px;background:#1b2d35;border:1px solid #3d5960;border-radius:9px;}
.ds-welcome-columns span{font:700 11px ui-monospace,monospace;color:#85e5c3;}
.ds-welcome-columns strong{font-size:13px;color:#f3fbf7;}
.ds-welcome-columns small{font-size:11px;color:#aec8c5;line-height:1.45;}
.ds-welcome-actions{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;}
.ds-welcome-actions button{min-height:44px;border-radius:7px;padding:11px 20px;font-size:13px;font-weight:750;}
.ds-welcome-primary{background:#92e7c6;color:#102820;border:1px solid #92e7c6;}
.ds-welcome-primary:hover{background:#b2f3db;}
.ds-welcome-primary span{padding-left:13px;}
.ds-welcome-secondary{background:#283b43;color:#e2f1ec;border:1px solid #617875;}
.ds-welcome-secondary:hover{background:#385057;}
.ds-welcome-hint{font-size:11px;line-height:1.5;color:#9ab3b2;margin:14px 0 0;}
/* Tour targets are spotlighted without changing any canvas coordinates. */
.ds-tour-layer{position:fixed;inset:0;z-index:10000;pointer-events:none;}
.ds-tour-spotlight{position:fixed;border:2px solid #a3f0d0;border-radius:10px;box-shadow:0 0 0 9999px #050e15c2,0 0 20px #8defbe70;pointer-events:none;}
.ds-tour-card{position:fixed;pointer-events:auto;width:min(380px,calc(100vw - 24px));padding:19px 20px 16px;background:#192930;color:#ecf8f3;border:1px solid #74a79d;border-radius:13px;box-shadow:0 19px 60px #000c;}
.ds-tour-card header,.ds-tour-card footer{display:flex;justify-content:space-between;align-items:center;gap:9px;}
.ds-tour-card header strong{font:800 10px ui-monospace,monospace;letter-spacing:1px;color:#94e6c4;}
.ds-tour-card header button{background:transparent;color:#b3d5cb;border:0;font-size:24px;padding:0;min-width:27px;min-height:27px;}
.ds-tour-progress{height:4px;background:#3f535b;border-radius:4px;overflow:hidden;margin:14px 0 18px;}
.ds-tour-progress span{display:block;height:100%;background:#8de2c0;border-radius:4px;}
.ds-tour-card h2{font-size:21px;margin:0 0 9px;letter-spacing:-.4px;}
.ds-tour-card p{font-size:13px;line-height:1.6;color:#c4d6d2;margin:0 0 17px;}
.ds-tour-card footer>small{font:700 11px ui-monospace,monospace;color:#acc5ba;}
.ds-tour-card footer button{background:#294048;color:#e6f5ef;border:1px solid #577b72;border-radius:7px;padding:7px 12px;font-size:12px;min-height:36px;}
.ds-tour-card footer button.ds-tour-next{background:#93e5c2;color:#122821;border-color:#93e5c2;font-weight:800;}
.ds-tour-card footer button:disabled{opacity:.4;}
@media(max-width:620px){
 .ds-welcome-shade{padding:8px;}
 .ds-welcome-dialog{max-height:calc(100dvh - 16px);}
 .ds-welcome-head{padding:14px 16px 0;}
 .ds-welcome-head small{display:none;}
 .ds-welcome-network{margin:13px 14px 0;}
 .ds-welcome-network svg{height:108px;}
 .ds-welcome-copy{padding:17px 17px 21px;}
 .ds-welcome-columns{grid-template-columns:1fr;}
 .ds-welcome-columns>div{display:grid;grid-template-columns:27px 1fr;column-gap:7px;padding:9px 11px;}
 .ds-welcome-columns small{grid-column:2;}
 .ds-welcome-actions button{flex:1;min-width:130px;}
 .ds-tour-card{padding:15px;}
}
@media(prefers-reduced-motion:reduce){.ds-intro-packet{display:none;}}


/* 2D physical cables: the path is an OPEN wire, never a filled polygon.
   The physical socket lead and SVG wire share the same link-state palette. */
.canvas-pane{
 --ds-cable-up:#77bfa9;
 --ds-cable-down:#d18a81;
 --ds-cable-trace:#b3ebcb;
 --ds-cable-selected:#b1dafa;
}
.wires path.cable{
 fill:none!important;
 stroke:var(--ds-cable-up)!important;
 stroke-width:3;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.wires path.cable.cable-down{
 stroke:var(--ds-cable-down)!important;
 stroke-dasharray:7 6;
}
.wires path.cable.cable-highlight{
 stroke:var(--ds-cable-trace)!important;
 stroke-width:3.5;
}
.wires path.cable.cable-selected{
 stroke:var(--ds-cable-selected)!important;
 stroke-width:3.5;
}
/* Keep the 40px lead in sync with the cable colour. */
.node .device-port.port-wired::after{
 background:var(--ds-cable-up);
 width:3px;
}
.node .device-port.port-down::after{background:var(--ds-cable-down);}
.node .device-port.port-trace::after{background:var(--ds-cable-trace);}
.node .device-port.port-picked::after{background:var(--ds-cable-selected);}
.node .device-port.port-source:not(.port-wired)::after,
.node .device-port.port-preview-start:not(.port-wired)::after{background:var(--ds-cable-selected);}
.canvas-legend .legend-line{background:var(--ds-cable-up);}

/* 2026 DarkSubnet workbench: network first, tools only when needed. */
.editor-view .editor-topbar-main{min-height:53px!important;padding-block:6px!important;}
.editor-view .editor-commandbar{min-height:44px!important;padding-block:5px!important;gap:8px!important;}
.editor-help-menu{position:relative;}
.editor-help-menu>summary{font-size:11px;min-height:34px;padding:7px 10px;display:flex;align-items:center;}
.editor-help-menu .toolbar-popover,.view-more-menu .toolbar-popover{left:auto!important;right:0!important;min-width:210px;}
.toolbar-submenu{border-top:1px solid var(--border-subtle);margin-top:5px;}
.toolbar-submenu>summary{cursor:pointer;list-style:none;border-radius:5px;padding:11px;color:var(--secondary);font-size:11px;font-weight:700;}
.toolbar-submenu>summary:hover{background:var(--surface-hover);color:var(--foreground);}
.toolbar-submenu>summary:after{content:"⌄";float:right;}
.toolbar-submenu[open]>summary:after{content:"⌃";}
.toolbar-submenu-items{padding:4px 0 8px;display:grid;}
.toolbar-submenu-items>.toolbar-menu-item{width:100%;}
/* Small palette with optional advanced devices. */
.palette-pane .palette{grid-template-columns:1fr!important;gap:5px!important;}
.palette-more-devices{border-top:1px solid var(--border-subtle);padding-top:8px;margin-top:8px;}
.palette-more-devices>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 10px;color:var(--foreground);font-size:11px;font-weight:700;border-radius:6px;}
.palette-more-devices>summary:hover{background:var(--surface-hover);}
.palette-more-devices>summary span{margin-left:auto;color:var(--secondary);font-weight:400;font-size:10px;}
.palette-more-devices>summary:before{content:"＋";color:var(--accent);}
.palette-more-devices[open]>summary:before{content:"−";}
.palette-more-list{display:grid;gap:5px;padding-top:6px;}
.workspace.level-simple .palette-cable-heading,.workspace.level-simple .cable-palette,.workspace.level-simple .cable-palette-hint{display:none!important;}
.workspace.level-simple .palette-pane>.pane-divider{display:none!important;}
/* All uncommon canvas actions are behind one clearly labelled menu. */
.refined-canvas-tools{position:relative!important;z-index:30!important;min-height:48px!important;padding:7px 12px!important;gap:7px!important;}
.canvas-quick-actions{gap:7px!important;}
.canvas-quick-actions>.hint{font-size:10px!important;max-width:230px!important;}
.canvas-more-tools{position:relative;flex:0 0 auto;margin-left:auto;}
.canvas-more-tools>summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:34px;padding:7px 11px;font-size:11px;font-weight:700;color:var(--foreground);background:var(--control-bg);border:1px solid var(--control-border);border-radius:6px;}
.canvas-more-tools>summary:hover,.canvas-more-tools[open]>summary{background:var(--surface-hover);}
.canvas-more-tools>.canvas-tool-options{display:none!important;}
.canvas-more-tools[open]>.canvas-tool-options{display:flex!important;position:absolute;top:calc(100% + 7px);right:0;width:min(280px,calc(100vw - 20px));z-index:35;flex-direction:column;align-items:stretch;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:8px;box-shadow:0 17px 36px #0008;}
.canvas-more-tools[open]>.canvas-tool-options>*{width:100%!important;min-height:37px!important;justify-content:flex-start!important;text-align:left!important;}
.canvas-more-tools .cable-options-menu>summary{width:100%;min-height:37px;}
.canvas-more-tools .cable-options-popover{left:auto;right:0;z-index:45;}
.canvas-more-tools .port-label-toggle,.canvas-more-tools .canvas-remove-button{padding:9px 12px!important;border:1px solid var(--control-border)!important;border-radius:6px!important;}
/* Trace stays compact until the person wants to investigate a ping. */
.trace-head{min-height:51px!important;padding:9px 13px!important;}
.trace-controls{gap:7px!important;}
.trace-controls select{max-width:175px!important;}
.trace-more-options{position:relative;}
.trace-more-options>summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:32px;padding:6px 10px;border:1px solid var(--control-border);border-radius:6px;background:var(--control-bg);color:var(--foreground);font-size:11px;font-weight:650;}
.trace-more-options .trace-more-popover{display:none;}
.trace-more-options[open]>.trace-more-popover{position:absolute;right:0;top:calc(100% + 7px);z-index:36;display:flex;flex-direction:column;align-items:stretch;gap:9px;width:min(290px,calc(100vw - 24px));padding:13px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--surface);box-shadow:0 17px 36px #0007;}
.trace-more-popover .adv-ping-target{width:100%!important;max-width:none!important;min-height:36px;}
.trace-more-popover .trace-extra-settings,.trace-more-popover .trace-extra-fields{position:static!important;width:100%!important;max-width:none!important;box-shadow:none!important;}
.workspace:not(.ui-trace-open) [data-action="previous"],.workspace:not(.ui-trace-open) [data-action="play"],.workspace:not(.ui-trace-open) [data-action="next"],.workspace:not(.ui-trace-open) #step-position{display:none!important;}
.canvas-legend{min-height:30px!important;padding:7px 12px!important;font-size:10px!important;gap:14px!important;}
.canvas-legend>span:last-child{margin-left:auto;}
@media(max-width:999px){
 .workspace.ui-devices-open:not(.workspace-3d)>.palette-pane{max-height:270px!important;}
 .workspace.ui-properties-open:not(.workspace-3d)>.inspector-pane{max-height:390px!important;}
}
@media(max-width:700px){
 .canvas-quick-actions>.hint{display:none!important;}
 .refined-canvas-tools{flex-wrap:nowrap!important;}
 .trace-controls>select{max-width:135px!important;}
 .editor-help-menu .toolbar-popover{right:-12px!important;}
}

/* The advanced simulation popover must not be clipped by the trace card. */
.workspace:not(.workspace-3d)>.trace-pane{overflow:visible!important;}
.trace-head{position:relative;z-index:11;}
.trace-more-options[open]{z-index:32;}


/* Language control is always available, even while editing a network. */
.appbar-controls .language-control{
 display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
 border:1px solid var(--control-border,var(--line));
 border-radius:6px;padding:2px 6px;background:var(--control-bg,var(--panel));
 color:var(--foreground,var(--ink));font-size:12px;
}
.appbar-controls .language-control select{
 border:0!important;outline-offset:3px;background:transparent!important;
 color:inherit!important;font-size:12px;font-weight:650;
 padding:5px 3px;min-width:78px;cursor:pointer;
}
@media(max-width:580px){
 .appbar-controls .language-control{gap:2px;padding:1px 3px;}
 .appbar-controls .language-control select{min-width:62px;font-size:11px;}
 .appbar-controls .language-control>span{display:none;}
}