/* RBH graphite workbench. Recovered component colors come from theme_assets.py. */
:root {
  color-scheme: dark;
  --rbh-rail: 208px; --rbh-header: 84px;
  --rbh-ground: #10191f; --rbh-panel: #1b282f; --rbh-inset: #152128;
  --rbh-line: #34454c; --rbh-text: #eef4f3; --rbh-muted: #afc0c5;
  --rbh-accent: #79d4bf; --rbh-selected: #20463f;
  --el-color-primary: #79d4bf; --el-color-primary-light-3: #91dccb;
  --el-color-primary-light-5: #39685f; --el-color-primary-light-7: #294d45; --el-color-primary-light-9: #20463f;
  --el-bg-color: #1b282f; --el-bg-color-overlay: #22343b; --el-bg-color-page: #10191f;
  --el-text-color-primary: #eef4f3; --el-text-color-regular: #d0dddf;
  --el-text-color-secondary: #afc0c5; --el-text-color-placeholder: #a0b2b7;
  --el-border-color: #40535b; --el-border-color-light: #34454c; --el-border-color-lighter: #2b3b43;
  --el-fill-color-blank: #17232a; --el-fill-color-light: #263b43; --el-fill-color-lighter: #223139;
}
html, body { margin: 0; background: var(--rbh-ground); color: var(--rbh-text); font-family: 'Noto Sans SC','Microsoft YaHei',sans-serif; }
body { padding: var(--rbh-header) 0 0 var(--rbh-rail); }
body #app { min-width: 0; }
body :is(button,input,textarea,select) { font-family: inherit; }
body :is(button,a,input,textarea,select,[tabindex]):focus-visible { outline: 2px solid var(--rbh-accent); outline-offset: 3px; }
body ::selection { color: #eff9f6; background: #376d62; }
body #app :is(.dc2,.deriver-create,.oneclick-page,.pd-page,.profile-page) { min-height: calc(100vh - var(--rbh-header)); background: var(--rbh-ground); color: var(--rbh-text); }

/* Original Vue navigation, now a persistent rail. */
body #app .nav { position: fixed; inset: 0 auto 0 0; width: var(--rbh-rail); height: 100dvh; z-index: 150; background: #142229; border: 0; border-right: 1px solid var(--rbh-line); box-shadow: none; }
body #app .nav-inner { height: 100%; max-width: none; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 26px 16px 18px; gap: 0; }
body #app .logo { padding: 0 10px 28px; margin: 0; height: 60px; min-height: 60px; flex: 0 0 auto; gap: 9px; }
body #app .logo-text { font-size: 18px; font-weight: 600; color: var(--rbh-text); }
body #app .logo-text .pro { color: var(--rbh-accent); }
body #app .logo-icon { width: 29px; height: 29px; }
body #app .nav-divider, body #app .nav-spacer { display: none; }
body #app .nav-group { display: flex; flex-direction: column; height: auto; gap: 8px; flex: 0 0 auto; padding-top: 8px; }
body #app .nav-link { display: flex; gap: 10px; width: 100%; min-height: 46px; padding: 12px; margin: 0; color: #bbcccf; font-size: 13px; font-weight: 500; border: 1px solid transparent; border-radius: 8px; background: transparent; text-decoration: none; box-shadow: none; transition: background .16s ease,color .16s ease; }
body #app .nav-link-icon { width: 18px; height: 18px; flex: 0 0 auto; }
body #app .nav-link { height: auto; flex: 0 0 auto; }
body #app .nav { overflow-y: auto; }
body #app .nav-link:hover { background: #22373d; color: var(--rbh-text); }
body #app .nav-link.active, body #app .nav-link-pro.active { background: var(--rbh-selected); border-color: #386456; color: #b1f0dd; box-shadow: none; }
body #app .nav-pro-badge { margin-left: auto; color: #b1f0dd; background: #2c574c; border-radius: 3px; font-size: 9px; }
body #app .cmd-trigger { margin: 26px 0 0; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--rbh-line); border-radius: 7px; background: #172a31; color: #b4c5c9; }
body #app .cmd-trigger-keys { margin-left: auto; border-color: #40545b; background: transparent; color: #aebfc4; }
body #app .cmd-trigger { display: flex; flex: 0 0 auto; }
.rbh-local-nav { position: static; display: flex; flex-direction: column; align-items: stretch; margin: auto 0 0; padding-top: 28px; gap: 9px; white-space: normal; border: 0; box-shadow: none; background: transparent; }
.rbh-local-nav button { text-align: left; width: 100%; min-height: 40px; padding: 10px 12px; color: #c3d1d5; font-size: 12px; border: 1px solid var(--rbh-line); border-radius: 7px; background: transparent; cursor: pointer; }
.rbh-local-nav button:hover { background: #233a41; }
.rbh-local-nav .rbh-workspace-button { background: #243b42; color: #e5efec; }
.rbh-save-status { padding: 7px 12px 0; font-size: 11px; color: #9db7b5; }
.rbh-local-nav > .rbh-save-status { display: block; }
.rbh-online-dot { background: #79d4bf; }
.rbh-workbench-header { position: fixed; inset: 0 0 auto var(--rbh-rail); height: var(--rbh-header); z-index: 110; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--rbh-line); background: #142229; }
.rbh-workbench-heading h1 { margin: 0 0 5px; font-size: 21px; font-weight: 600; line-height: 1.4; color: var(--rbh-text); }
.rbh-workbench-heading p { margin: 0; color: #a4b9bf; font-size: 12px; }
.rbh-workbench-actions { display: flex; gap: 18px; align-items: center; position: relative; flex-shrink: 0; }
.rbh-workbench-mode { font-size: 11px; color: #adc4c5; }
.rbh-workbench-actions button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 36px; border: 1px solid #415b61; border-radius: 6px; color: #c1ddd5; background: #21383d; cursor: pointer; font-size: 12px; }
.rbh-workbench-actions button:hover { background: #2b494d; }
.rbh-workbench-actions button:disabled { opacity: .55; cursor: wait; }
.rbh-shell-feedback { position: absolute; right: 0; top: 43px; max-width: 350px; font-size: 11px; color: #ffa1a8; }

/* Editor work surfaces. */
body #app .dc2-toolbar { height: auto; min-height: 56px; padding: 12px 22px; gap: 12px; flex-wrap: wrap; background: #18272e; border-bottom: 1px solid var(--rbh-line); }
body #app .dc2-toolbar-tabs { background: #111c22; padding: 4px; border-radius: 7px; }
body #app .dc2-tab-btn { color: #b7c9ce; height: 31px; padding: 0 11px; }
body #app .dc2-tab-btn.active { color: #b1efdc; background: #2a4d45; box-shadow: none; }
body #app .dc2-toolbar-divider { background: var(--rbh-line); }
body #app .dc2-main { gap: 0; height: calc(100vh - var(--rbh-header) - 80px); min-height: 560px; padding: 14px 12px; background: var(--rbh-ground); }
body #app :is(.dc2-panel-left,.dc2-panel-right) { min-width: 0; padding: 0 10px; }
body #app .dc2-resizer { width: 8px; background: transparent; }
body #app .dc2-resizer:after { width: 2px; height: 40px; background: #52666e; }
body #app .dc2-resizer:hover { background: #253d41; }
body #app :is(.dc2-panel-left,.dc2-panel-right) > * { border: 1px solid #34454c !important; border-radius: 10px !important; overflow: hidden; }
body #app :is(.ballistic-point-bar,.macro-settings,.msp,.arp,.psp) { background: var(--rbh-panel); color: var(--rbh-text); box-shadow: none; }
body #app :is(.card-header,.msp-header,.psp-header,.arp-topbar) { min-height: 51px; padding: 13px 16px; background: #21343b; border-bottom: 1px solid var(--rbh-line); }
body #app :is(.card-title,.msp-header-title,.arp-topbar-title,.psp-header-left) { color: #eff6f3; font-weight: 600; }
body #app :is(.control-strip,.ballistic-controls,.spe-header,.config-tabs,.msp-mode-bar,.arp-auto-row) { background: #18262d; border-color: #34454c; }
body #app .visualization-area { background-color: #111d24; }
body #app :is(.right-panel,.settings-content,.data-list,.data-row,.data-list-container) { background: #1b282f; }
body #app :is(.data-list-header,.settings-group-title) { background: #20323a; color: #c6dadb; border-color: var(--rbh-line); }
body #app .row-number { background: #293c43; color: #c9dddd; }
body #app :is(.data-row,.setting-row,.settings-group-title) { border-color: #314149; }
body #app .data-row:hover { background: #22383f; }
body #app .right-panel { border-left-color: var(--rbh-line); }
body #app input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]), body #app textarea, body #app select { color: #e9f1ef; border-color: #43575e; }
body #app :is(.op-btn,.operation-btn,.control-strip button,.ballistic-controls button) { box-shadow: none; border-radius: 5px; }
body #app :is(.op-btn.primary,.operation-btn.primary,.btn.primary,.primary-btn,.el-button--primary) { color: #eff9f6; background: #23695f; border-color: #3c9382; }
body #app :is(.calculate-btn,.arp-btn.primary,.f-btn:not(.ghost),.mini.use) { color: #102923; background: #79d4bf; border-color: #79d4bf; }
/* The recovered calculate control declares its foreground !important. */
body #app .calculate-btn:not(:disabled) { color: #102923 !important; }
body #app .calculate-btn:not(:disabled) :is(span,svg) { color: inherit; }
body #app :is(.config-tab.active,.tab.active,.sub-tab.active,.v2-tab.active,.hw-mode-btn.active,.hw-connect-btn) { color: #b5efdc; background: #20463f; border-color: #3d6f61; }
.el-popper,.el-select-dropdown,.el-dropdown-menu,.el-dialog,.el-message-box { color: var(--rbh-text); background: #203139; border-color: #40545b; }
.el-input__wrapper,.el-select__wrapper { background: #17232a; border-radius: 5px; box-shadow: 0 0 0 1px #43575e inset; }
.el-select-dropdown__item.is-hovering { background: #2b4749; }
.el-input__inner,.el-select__placeholder { color: #e0ece9; }

/* Legacy modules. */
body #app .deriver-create > .flex { margin: 0; padding: 22px 24px 4px; justify-content: flex-start; gap: 12px; }
body #app .simple-mode { padding: 20px 24px 30px; }
body #app .simple-mode-container { width: 100%; max-width: none; height: auto; min-height: 660px; padding: 26px; border: 1px solid #34454c; border-radius: 12px; background: #1b282f; color: #eaf3f1; }
body #app .simple-mode-container .top-section { gap: 28px; margin-bottom: 34px; }
body #app .simple-mode-container .section-header { min-height: 36px; margin-bottom: 18px; }
body #app .simple-mode-container .section-header span { font-size: 16px; font-weight: 600; color: #edf5f2; }
body #app .simple-mode-container .section-header img { filter: invert(.88); }
body #app .simple-mode-container :is(.module-item,.config-item) { min-height: 75px; padding: 15px 0; border: 0; border-bottom: 1px solid #34454c; border-radius: 0; background: transparent; }
body #app .simple-mode-container .font-bold { color: #e4eeeb; font-weight: 500; }
body #app .simple-mode-container .border-black { border-color: #3d5159; }
body #app .simple-mode-container .text-gray-500 { color: #acbec3; }
body #app .deriver-create :is(.text-black,.text-gray-600,.text-gray-700,.text-gray-800) { color: #d0dddf; }
body #app .deriver-create .bg-green-500 { background-color: #23695f; color: #eff9f6; }
body #app .simple-mode-container .mode-toggle { background: #122128; }
body #app .simple-mode-container .border-gray-300 { border-color: #435b62; }
body #app .simple-mode-container button:disabled { background: #2b3a42 !important; color: #a1b3b9 !important; border-color: #43555d; opacity: .7; }
body #app .simple-mode-container button { min-height: 36px; box-shadow: none; transform: none; border-radius: 6px; }
body #app .simple-mode-container :is(.import-btn,.start-config-btn,.deactivate-btn) { min-height: 44px; font-size: 13px; }
body #app .simple-mode-container .import-btn { background: #25433f; border: 1px solid #4b7869; color: #c1e8da; }
body #app .simple-mode-container .start-config-btn { background: #79d4bf; color: #102923; }
body #app .simple-mode-container .deactivate-btn { background: transparent; color: #e2c386; border: 1px solid #766540; }
body #app .simple-mode-container input:not([type=range]) { min-height: 34px; background: #152128; border: 1px solid #435b62; border-radius: 5px; }
body #app .simple-mode-container .log-container { height: 240px; background: #111c22; color: #b7c9c8; border-color: #34454c; border-radius: 7px; padding: 16px; }
body #app .deriver-create-content { overflow-x: auto; }

/* Hardware and dataset pages. */
body #app .oneclick-page { padding-top: 0; }
body #app .page-shell { padding-top: 24px; }
body #app :is(.vr-card,.mcu-card,.hw-card,.usb-card,.dataset-card,.pd-card,.stat-card) { background: #1b282f; border: 1px solid #34454c; border-radius: 10px; box-shadow: none; }
body #app :is(.vr-card.active,.vr-card.selected) { background: #23443d; border-color: #518373; }
body #app :is(.page-content,.page-content-v2,.pd-main,.content-area) { background: transparent; }
body #app :is(.tabs,.v2-tabs,.sub-tabs,.conn-strip) { background: #1b2e34; border-color: #34454c; }
body #app :is(.hex-box,.terminal,.hid-log,.log-box,.json-input) { background: #111c22; color: #bdd4ce; border-color: #34454c; }
body #app :is(.pd-title,.dcc-title) { color: #e8f3ee; }
body #app .pd-main { padding-top: 28px; }
body #app :is(.pd-hero,.dcc-header) { border-bottom: 1px solid #34454c; padding-bottom: 24px; }
body #app .pd-hero-icon { color: #9addc8; background: transparent; }
body #app .profile-page .account-settings-layout { padding-top: 24px; }
.rbh-load-dataset { margin: 0 16px 16px; padding: 9px 14px; min-height: 36px; border: 1px solid #4c776d; border-radius: 5px; color: #b2ead8; background: #24423b; cursor: pointer; }

/* Local tools, search and configuration dialogs. */
.rbh-local-dialog { margin: auto; border: 0; border-radius: 12px; color: #e7f1ee; background: #1b2a31; box-shadow: 0 22px 80px #0009; }
.rbh-local-dialog::backdrop { background: #071015b3; backdrop-filter: none; }
.rbh-dialog-head { padding: 24px 26px 18px; background: #22373d; }
.rbh-dialog-head h2 { margin: 0; color: #edf5f2; font-size: 20px; font-weight: 600; }
.rbh-local-dialog .rbh-close { color: #bdcfce; }
.rbh-local-dialog section { padding: 24px 26px; }
.rbh-local-dialog :is(label,.rbh-muted,.rbh-help,.rbh-facts dt) { color: #adbec2; font-size: 12px; }
.rbh-local-dialog .rbh-tabs { border-color: #3a5056; gap: 24px; }
.rbh-local-dialog button { min-height: 36px; border: 1px solid #456067; color: #d6e7e2; background: #233b42; border-radius: 5px; }
.rbh-local-dialog button:hover { background: #305058; }
.rbh-local-dialog button.primary { background: #79d4bf; border-color: #79d4bf; color: #102923; }
.rbh-local-dialog button.danger { color: #f3b0b6; background: #4a2c36; border-color: #78535d; }
.rbh-local-dialog .rbh-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; min-height: 48px; color: #adbec2; }
.rbh-local-dialog .rbh-tabs button[aria-selected=true] { color: #a6ead3; border-bottom-color: #79d4bf; }
.rbh-local-dialog :is(input:not([type=file]),textarea,select) { background: #111f26; color: #e1eeea; border: 1px solid #4b646a; border-radius: 5px; padding: 9px 12px; }
.rbh-local-dialog fieldset { border-color: #3c535a; }
.rbh-local-dialog :is(legend,pre,#rbh-device-status) { color: #bfd1d2; }
.rbh-local-dialog .rbh-tag { background: #29433f; color: #bae2d3; }
.rbh-local-dialog .error,.rbh-local-nav .error { color: #ffa1a8 !important; }
.rbh-storage-card { background: #14232a; border: 1px solid #344b52; border-radius: 8px; margin: 18px 0; }
.rbh-storage-card code { color: #c8dad8; }
.rbh-local-dialog #rbh-import-preview { background: #3e3528; border-color: #7e6b44; }
.rbh-local-dialog:not(:has(.rbh-dialog-head)) { padding: 24px; }
.rbh-local-dialog:not(:has(.rbh-dialog-head)) h2 { margin: 0 0 12px; font-size: 20px; }
.rbh-stopped { color: #d0e3df; }
body:has(.rbh-stopped) { padding: 0; }
@media (max-width: 1280px) {
  :root { --rbh-rail: 184px; }
  body #app .nav-inner { padding: 24px 12px 16px; }
  body #app .nav-link { gap: 8px; padding: 12px 10px; }
  body #app .simple-mode-container .top-section { flex-wrap: wrap; gap: 26px; }
  body #app .simple-mode-container :is(.module-status-section,.config-info-section) { width: calc(50% - 13px); }
  body #app .simple-mode-container .usage-mode-section { width: 100%; }
}
@media (max-width: 960px) {
  :root { --rbh-rail: 168px; }
  body #app .dc2-main { height: auto; display: flex; flex-direction: column; gap: 18px; overflow: visible; }
  body #app :is(.dc2-panel-left,.dc2-panel-right) { width: 100% !important; min-width: 0; height: auto; overflow: visible; }
  body #app .dc2-resizer { display: none; }
  .rbh-workbench-header { padding: 0 20px; }
  .rbh-workbench-mode { display: none; }
  body #app .simple-mode-container :is(.module-status-section,.config-info-section,.usage-mode-section) { width: 100%; }
}
@media (max-width: 700px) {
  :root { --rbh-rail: 0px; --rbh-header: 72px; }
  body { padding: 0; }
  .rbh-workbench-header { position: static; padding: 16px; min-height: 86px; height: auto; gap: 10px; }
  .rbh-workbench-heading h1 { font-size: 19px; }
  .rbh-workbench-heading p { font-size: 11px; max-width: 23ch; line-height: 1.7; }
  .rbh-workbench-actions button { padding: 8px 10px; font-size: 11px; }
  body #app .nav { position: relative; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid #34454c; }
  body #app .nav-inner { display: flex; padding: 12px; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  body #app .logo { display: none; }
  body #app .nav-group { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 0; gap: 6px; }
  body #app .nav-link { min-height: 41px; font-size: 12px; padding: 10px; }
  body #app .cmd-trigger { margin: 0; width: auto; flex: 1; }
  body #app .cmd-trigger-keys { display: none; }
  .rbh-local-nav { flex-direction: row; flex: 2; padding: 0; margin: 0; gap: 7px; }
  .rbh-local-nav button { width: auto; text-align: center; flex: 1; padding: 8px; white-space: nowrap; min-height: 37px; }
  .rbh-local-nav > .rbh-save-status { display: none; }
  body #app .dc2-toolbar { padding: 12px; }
  body #app .dc2-toolbar-tabs { max-width: 100%; overflow-x: auto; }
  body #app .dc2-main { padding: 12px 4px; }
  body #app .simple-mode { padding: 16px 12px; }
  body #app .simple-mode-container { padding: 20px 16px; }
  body #app .simple-mode-container .top-section { gap: 28px; }
  body #app .simple-mode-container .mode-toggle button { font-size: 12px; padding: 7px; }
  .rbh-local-dialog section { padding: 20px 18px; }
  .rbh-dialog-head { padding: 20px 18px 14px; }
  .rbh-local-dialog .rbh-tabs { padding: 0 18px; gap: 18px; }
}
.rbh-scale-calc { white-space: nowrap; flex: 0 0 auto; font-size: 12px; padding: 6px 8px; }
.macro-settings > .card-header { flex-wrap: wrap; gap: 8px; }
.macro-settings > .card-header .card-title { white-space: nowrap; }
.rbh-editor-dialog label { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.rbh-editor-dialog select { max-width: 100%; margin: 8px 0; }
@media (prefers-reduced-motion: reduce) {
  body #app *, .rbh-local-dialog * { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; scroll-behavior: auto; }
}