/* ---------- Buzzer + simulation playback ---------- */
  #simRunBtn {
    color: var(--accent-strong);
    border-color: var(--panel-line);
  }
  #simRunBtn:not(:disabled) {
    background: rgba(193,117,46,.10);
    border-color: var(--accent);
  }
  #simRunBtn.running {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  [data-theme="dark"] #simRunBtn.running { color:#17130b; }

  .buzzer-cone {
    fill: none;
    stroke: var(--text);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .is-selected .buzzer-cone { stroke: var(--accent) !important; }
  .buzzer-wave {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .55;
  }
  .buzzer-playing .buzzer-wave {
    animation: buzzerPulse .45s ease-in-out infinite alternate;
  }
  @keyframes buzzerPulse {
    from { opacity:.25; }
    to { opacity:1; }
  }


  .pushbutton-hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    cursor: pointer;
  }
  .pushbutton-contact,
  .pushbutton-plunger {
    fill: none;
    stroke: var(--text);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: stroke;
    cursor: pointer;
  }
  .pushbutton-bridge {
    transition: transform .07s ease;
  }
  .pushbutton-plunger {
    stroke-width: 2.1;
    transition: transform .07s ease;
  }
  .is-selected .pushbutton-contact,
  .is-selected .pushbutton-plunger,
  .pushbutton-pressed .pushbutton-contact,
  .pushbutton-pressed .pushbutton-plunger {
    stroke: var(--accent) !important;
  }
  .pushbutton-pressed .pushbutton-bridge { transform: translateY(7px); }
  .pushbutton-pressed .pushbutton-plunger { transform: translateY(7px); }
  #simRunBtn.interactive-ready { background: var(--accent); }


/* ===== CLEAN SINGLE TOPBAR LAYOUT =====
   This is the only page-specific positioning block for Simulation/Waveform.
*/
@media screen and (orientation: landscape), screen and (max-aspect-ratio: 99/100) {
  #topbar {
    padding-left: 9px !important;
    padding-right: 9px !important;
    gap: 6px !important;
  }

  /* Let the center toolbar use the real free space between left controls and Theme.
     Nothing in the center is absolutely positioned anymore. */
  #topbarCenter {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #topbarRight {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    z-index: 80 !important;
  }

  #themeToggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    margin: 0 !important;
  }

  .tool-group {
    gap: 6px !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .toolbtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    flex: 0 0 40px !important;
  }

  .toolbar-divider {
    margin: 0 !important;
    flex: 0 0 1px !important;
  }

  /* Last action group is ordinary flex content on BOTH pages.
     Therefore Settings occupies exactly the same screen-side relationship
     to Theme instead of receiving competing right/absolute values. */
  body.simulation-page #topbarCenter > .tool-group:last-child,
  body.waveform-page #topbarCenter > .tool-group:last-child {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Simulation: Simulate -> Settings -> Theme */
  body.simulation-page #wfTopSimulateBtn {
    display: flex !important;
    position: static !important;
    order: 1 !important;
    width: 74px !important;
    min-width: 74px !important;
    height: 34px !important;
    padding: 0 9px !important;
    flex: 0 0 74px !important;
    flex-direction: row !important;
    gap: 4px !important;
    border-radius: 17px !important;
  }

  body.simulation-page #wfTopSimulateBtn span {
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  body.simulation-page #settingsBtn {
    display: flex !important;
    position: static !important;
    order: 2 !important;
  }

  /* Waveform: Download Graph -> Settings -> Theme.
     Settings is in the same final slot as on Simulation. */
  body.waveform-page #wfTopDownloadGraphBtn {
    display: flex !important;
    position: static !important;
    order: 1 !important;
    margin: 0 !important;
  }

  body.waveform-page #wfTopSimulateBtn {
    display: none !important;
  }

  body.waveform-page #settingsBtn {
    display: flex !important;
    position: static !important;
    order: 2 !important;
  }

  /* The old toolbar Run is never used. */
  #simRunBtn {
    display: none !important;
  }

  /* Keep a clean equal gap rather than a divider near the right controls. */
  body.simulation-page #topDividerB,
  body.waveform-page #topDividerB {
    display: none !important;
  }

  /* On non-simulation pages the drawing/undo groups are already hidden by JS.
     On Simulation they remain visible and use the same 6px spacing. */
  body.simulation-page #drawToolsGroup,
  body.simulation-page #undoRedoGroup {
    display: flex !important;
  }
}

/* Circular Run/Pause belongs to the Simulation canvas, not Output Waveform. */
#canvas-area {
  position: relative !important;
}

#graphRunBtn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 20 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent) !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

[data-theme="dark"] #graphRunBtn {
  color: #17130b !important;
}

#graphRunBtn:disabled {
  opacity: .38 !important;
  cursor: default !important;
}

#graphRunBtn {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#graphRunBtn.running {
  background: var(--accent-strong) !important;
  transform: scale(.96);
}


/* Pushbutton: the whole physical symbol is an interactive press target in Run mode. */
.pushbutton-hit,
.pushbutton-contact,
.pushbutton-plunger,
.pushbutton-bridge {
  pointer-events: all !important;
  touch-action: none !important;
  cursor: pointer !important;
}


.pushbutton-mechanism-hit {
  fill: none !important;
  stroke: transparent !important;
  stroke-width: 18px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: stroke !important;
  touch-action: none !important;
  cursor: pointer !important;
}


/* ===== LOW-LATENCY PUSHBUTTON PRESS FEEDBACK ===== */
.component[data-type="M"] .pushbutton-bridge,
.component[data-type="M"] .pushbutton-plunger {
  transition: none !important;
  will-change: transform;
}
.component[data-type="M"].pushbutton-pressed .pushbutton-bridge {
  transform: translateY(7px) !important;
}
.component[data-type="M"].pushbutton-pressed .pushbutton-plunger {
  transform: translateY(7px) !important;
}
.component[data-type="M"].pushbutton-pressed .pushbutton-hit {
  cursor: grabbing !important;
}


/* Performance: simulator pushbuttons own the gesture; no browser tap delay/pan. */
.pushbutton-hit,
.pushbutton-contact,
.pushbutton-plunger,
.pushbutton-bridge,
.pushbutton-mechanism-hit {
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* ===== AUTH PROFILE BUTTON / MENU ===== */
#profileWrap { position: relative; flex-shrink: 0; }
#profileBtn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--panel-line); background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; color: var(--text-dim);
}
#profileBtn img { width: 100%; height: 100%; object-fit: cover; display: none; }
#profileBtn .profileFallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--accent-strong);
}
#profileMenu {
  position: absolute; top: calc(100% + 9px); right: 0; width: 230px;
  padding: 12px; border-radius: 14px; border: 1px solid var(--panel-line);
  background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,.16);
  display: none; z-index: 1000;
}
#profileMenu.show { display: block; }
.profileMenuHead { display: flex; align-items: center; gap: 10px; padding: 3px 3px 11px; }
#profileMenuImage {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  background: var(--bg); border: 1px solid var(--panel-line); display: none;
}
#profileMenuFallback {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--panel-line);
  color: var(--accent-strong); font-weight: 800;
}
.profileIdentity { min-width: 0; }
#profileName { font-size: 13px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profileEmail { margin-top: 2px; font-size: 10px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profileLogout {
  width: 100%; padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--panel-line); background: var(--bg);
  color: var(--danger); font-size: 12px; font-weight: 700; cursor: pointer;
}


/* ===== OBLIVIONLABS AUTH GATE ===== */
#authGate {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text);
}
#authGate.auth-hidden { display: none !important; }
#authCard {
  width: min(90vw, 390px);
  padding: 30px 28px;
  border: 1px solid var(--panel-line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
  text-align: center;
}
#authLogo { font-size: 28px; font-weight: 800; letter-spacing: -.7px; margin-bottom: 8px; }
#authLogo .auth-dark { color: var(--text); }
#authLogo .auth-accent { color: var(--accent-strong); }
#authSubtitle { color: var(--text-dim); font-size: 13px; margin-bottom: 22px; }
#googleSignInButton { display: flex; justify-content: center; min-height: 44px; }
#authStatus { min-height: 18px; margin-top: 16px; font-size: 12px; color: var(--text-dim); }
#authStatus.auth-error { color: var(--danger); }
body.auth-pending > #topbar,
body.auth-pending > #pages,
body.auth-pending > #settingsPanel,
body.auth-pending > #valuePanel,
body.auth-pending > #filePanel { visibility: hidden !important; }





/* ===== PROFILE EXTENSION FOR THE SINGLE CLEAN TOPBAR ===== */
#profileWrap { margin:0 !important; flex:0 0 34px !important; }
#profileBtn {
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border-radius:50% !important;
}
@media screen and (orientation: landscape), screen and (max-aspect-ratio: 99/100) {
  #topbarRight { gap:6px !important; }
  #profileWrap { width:34px !important; height:34px !important; }
  #profileMenu { top:calc(100% + 7px); }
}


/* ===== OUTPUT WAVEFORM MEASUREMENTS ===== */
.wf-value-title{font-weight:800;margin-bottom:8px}
.wf-value-row{display:flex;justify-content:space-between;align-items:center;gap:18px;line-height:1.55}
.wf-value-row span{opacity:.72}
.wf-value-row strong{font-weight:700;text-align:right}
.wf-value-gap{height:7px}


/* ===== AUTH / LOADING BRAND POLISH ===== */
#authGate .auth-title,
#authGate .auth-brand,
#authGate h1,
#authGate h2 {
  font-family:"Segoe UI",Inter,system-ui,-apple-system,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.025em;
}
.auth-copyright {
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:max-content;
  max-width:90%;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:.02em;
  opacity:.48;
  white-space:nowrap;
  pointer-events:none;
}
#authGate { position:fixed; }


.wf-stat-spacer{height:6px}
#wfValuesPanel .wf-stat-row{gap:12px}
#wfValuesPanel .wf-stat-row > span:last-child{font-weight:650;text-align:right}


body.simulation-page #topDividerB{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:1px !important;
  height:24px !important;
  margin:0 8px !important;
  background:currentColor !important;
  opacity:.25 !important;
  border:0 !important;
  flex:0 0 1px !important;
}


/* ===== SETTINGS: SIMULATION SERVER STATUS ===== */
.backend-status {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 9px 11px;
  border: 1px solid var(--panel-line); border-radius: 9px;
  background: var(--bg); color: var(--text-dim);
  font-size: 12px; font-weight: 700;
}
.backend-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 8px;
}
.backend-status.connected { color: #2f8f5b; }
.backend-status.unavailable { color: var(--danger); }
.backend-status.checking { color: var(--text-dim); }


/* ===== TEXT FORMAT CONTROLS ===== */
.text-size-row{display:grid;grid-template-columns:1fr 66px;gap:9px;align-items:center}
.text-size-row input[type="range"]{width:100%}
.text-size-row input[type="number"]{margin:0 !important}
.text-color-row{display:flex;align-items:center;gap:10px}
#vf-text-color{width:44px;height:36px;padding:2px;border-radius:8px;cursor:pointer}
.text-color-presets{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.text-color-dot{width:25px;height:25px;border-radius:50%;border:1px solid var(--panel-line);padding:0;min-width:0;box-shadow:0 1px 3px rgba(0,0,0,.12)}


/* ===== TRANSFER TOPBAR: DOWNLOAD GRAPH | PROFILE | THEME ===== */
@media screen and (orientation: landscape), screen and (max-aspect-ratio: 99/100) {
  body.transfer-page #topbarCenter {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.transfer-page #topbarCenter > .tool-group:last-child {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  body.transfer-page #wfTopDownloadGraphBtn {
    display: flex !important;
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  body.transfer-page #wfTopSimulateBtn,
  body.transfer-page #settingsBtn,
  body.transfer-page #simRunBtn {
    display: none !important;
  }

  body.transfer-page #topbarRight {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
  }

  body.transfer-page #profileWrap {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    margin: 0 !important;
  }

  body.transfer-page #topDividerB {
    display: none !important;
  }
}


/* ===== OUTPUT VALUES: COMPACT PROFESSIONAL LAYOUT ===== */
#wfValuesPanel {
  overflow: hidden !important;
}
#wfValuesPanel #wfTraceSelect {
  width: 100% !important;
  min-height: 30px !important;
  margin: 2px 0 8px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
}
#wfValuesPanel .wf-stat-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-height: 22px !important;
  padding: 2px 1px !important;
  line-height: 1.25 !important;
  font-size: 11px !important;
}
#wfValuesPanel .wf-stat-row .stat-label {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .72 !important;
}
#wfValuesPanel .wf-stat-row > span:last-child {
  white-space: nowrap !important;
  text-align: right !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.01em !important;
}
#wfValuesPanel .wf-stat-spacer {
  height: 5px !important;
  margin: 1px 0 !important;
  border-top: 1px solid var(--panel-line) !important;
  opacity: .55 !important;
}


/* Simulate button: remove decorative leading dot only */
#wfTopSimulateBtn::before {
  display: none !important;
  content: none !important;
}


/* ===== COMPACT TEXT EDITOR ===== */
#valuePanel[data-mode="text"] #valueSheet {
  width: min(300px, calc(100vw - 24px)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px !important;
}
#valuePanel[data-mode="text"] #valueFields {
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) !important;
  gap: 7px 9px !important;
  align-items: center !important;
}
#valuePanel[data-mode="text"] #valueFields > label {
  margin: 0 !important;
  font-size: 11px !important;
}
#valuePanel[data-mode="text"] #valueFields input,
#valuePanel[data-mode="text"] #valueFields select {
  margin: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  font-size: 11px !important;
}
#valuePanel[data-mode="text"] .text-size-row {
  grid-template-columns: minmax(0,1fr) 54px !important;
  gap: 6px !important;
}
#valuePanel[data-mode="text"] .text-color-row {
  gap: 7px !important;
  min-width: 0 !important;
}
#valuePanel[data-mode="text"] #vf-text-color {
  width: 36px !important;
  height: 30px !important;
}
#valuePanel[data-mode="text"] .text-color-presets {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
#valuePanel[data-mode="text"] .text-color-dot {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}
#valuePanel[data-mode="text"] #valueSheet .row {
  margin-top: 9px !important;
}


.comp-label{pointer-events:auto;touch-action:none}


/* ===== OUTPUT: CSV BEFORE GRAPH, MATCHED CONTROLS ===== */
#wfTopDownloadCsvBtn{display:none}
body.waveform-page #wfTopDownloadCsvBtn{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  border:2px solid var(--accent) !important;
  border-radius:50% !important;
  background:transparent !important;
  color:var(--text-dim) !important;
  flex:0 0 34px !important;
}
body.waveform-page #wfTopDownloadCsvBtn svg{
  width:15px !important;height:15px !important;
}
body.waveform-page #wfTopDownloadCsvBtn span{
  display:none !important;
}

/* ===== OUTPUT VALUES: FINAL FIT ===== */
body.waveform-page #wfValuesPanel{
  overflow:hidden !important;
}
body.waveform-page #wfValuesPanel .wf-card{
  height:100% !important;
  overflow:hidden !important;
  padding:11px 12px !important;
}
body.waveform-page #wfValuesPanel .wf-card h3{
  font-size:21px !important;
  margin:0 0 7px !important;
}
body.waveform-page #wfTraceSelect{
  height:32px !important;
  min-height:32px !important;
  margin:0 0 8px !important;
  padding:4px 8px !important;
  font-size:13px !important;
}
body.waveform-page #wfValuesPanel .wf-stat-row{
  min-height:25px !important;
  padding:3px 1px !important;
  font-size:13px !important;
  line-height:1.3 !important;
}
body.waveform-page #wfValuesPanel .wf-stat-row .stat-label{
  font-size:13px !important;
}
body.waveform-page #wfValuesPanel .wf-stat-row > span:last-child{
  font-size:13px !important;
}
body.waveform-page #wfValuesPanel .wf-stat-spacer{
  height:6px !important;
  margin:3px 0 !important;
  border:0 !important;
}
/* Only one divider: between Average and Frequency. */
body.waveform-page #wfValuesPanel .wf-stat-spacer:last-of-type{
  border-top:1px solid var(--panel-line) !important;
  opacity:.65 !important;
}


@media screen and (orientation: landscape), screen and (max-aspect-ratio:99/100){
  body.waveform-page #topbarCenter > .tool-group:last-child{
    gap:8px !important;
  }
}


/* ===== COMPONENT VALUE EDITOR: PORTRAIT PROFESSIONAL CARD =====
   The app may be landscape, but component editors intentionally keep a narrow,
   portrait-form card with one label/control per row. */
#valuePanel[data-mode="comp"] {
  padding: 12px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}
#valuePanel[data-mode="comp"] #valueSheet {
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: 360px !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 18px 16px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
#valuePanel[data-mode="comp"] #valueTitle {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
#valuePanel[data-mode="comp"] #valueFields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  min-width: 0 !important;
}
#valuePanel[data-mode="comp"] #valueFields > label,
#valuePanel[data-mode="comp"] #valueFields .field-group > label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  opacity: .78 !important;
}
#valuePanel[data-mode="comp"] #valueFields > input,
#valuePanel[data-mode="comp"] #valueFields > select,
#valuePanel[data-mode="comp"] #valueFields .field-group > input,
#valuePanel[data-mode="comp"] #valueFields .field-group > select {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 13px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  border-radius: 9px !important;
}
#valuePanel[data-mode="comp"] #valueFields   display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}.buzzer-field-group {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
#valuePanel[data-mode="comp"] #valueFields > div:not(.field-group) {
  margin: -3px 0 12px !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  opacity: .72 !important;
}
#valuePanel[data-mode="comp"] #valueSheet > .row {
  width: 100% !important;
  margin: 4px 0 0 !important;
  gap: 10px !important;
}
#valuePanel[data-mode="comp"] #valueSheet > .row button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
/* Short landscape displays keep the portrait proportions but reduce vertical
   spacing slightly; the sheet itself scrolls only when a long source editor
   genuinely cannot fit in the available height. */
@media screen and (max-height: 430px) {
  #valuePanel[data-mode="comp"] #valueSheet {
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: 340px !important;
    padding: 13px 16px 12px !important;
  }
  #valuePanel[data-mode="comp"] #valueTitle { margin-bottom: 10px !important; font-size: 15px !important; }
  #valuePanel[data-mode="comp"] #valueFields > label,
  #valuePanel[data-mode="comp"] #valueFields .field-group > label { margin-bottom: 4px !important; }
  #valuePanel[data-mode="comp"] #valueFields > input,
  #valuePanel[data-mode="comp"] #valueFields > select,
  #valuePanel[data-mode="comp"] #valueFields .field-group > input,
  #valuePanel[data-mode="comp"] #valueFields .field-group > select {
    height: 34px !important;
    min-height: 34px !important;
    margin-bottom: 9px !important;
  }
  #valuePanel[data-mode="comp"] #valueSheet > .row button { min-height: 34px !important; }
}


/* ===== SETTINGS: MATCH PROFESSIONAL VALUE CARD ===== */
#settingsPanel {
  padding: 12px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}
#settingsSheet {
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: 360px !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 18px 16px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
#settingsSheet h3 {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
#settingsSheet label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  opacity: .78 !important;
}
#settingsSheet input,
#settingsSheet select {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 0 13px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  border-radius: 9px !important;
}
#settingsSheet .row {
  width: 100% !important;
  margin: 4px 0 0 !important;
  gap: 10px !important;
}
#settingsSheet .row button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#settingsSheet .backend-status,
#settingsSheet .status-row {
  margin: 0 0 13px !important;
  border-radius: 9px !important;
}
#settingsSheet button.danger-full {
  min-height: 38px !important;
  margin-top: 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
@media screen and (max-height: 430px) {
  #settingsSheet {
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: 340px !important;
    padding: 13px 16px 12px !important;
  }
  #settingsSheet h3 { margin-bottom: 10px !important; font-size: 15px !important; }
  #settingsSheet label { margin-bottom: 4px !important; }
  #settingsSheet input,
  #settingsSheet select {
    height: 34px !important;
    min-height: 34px !important;
    margin-bottom: 9px !important;
  }
  #settingsSheet .row button,
  #settingsSheet button.danger-full { min-height: 34px !important; }
}


.led-bulb{fill:#3a3a3a;stroke:var(--text);stroke-width:2}
.led-on .led-bulb{fill:#ff3b30;filter:drop-shadow(0 0 6px #ff3b30)}
.led-glow{fill:#ff3b30;opacity:0}
.led-on .led-glow{opacity:.35}