/* Developer tooling deliberately uses neutral, technical styling. */
.ui-inspector-panel { position: fixed; z-index: 2600; right: 14px; bottom: 14px; width: min(360px, calc(100vw - 28px)); max-height: min(74dvh, 680px); overflow: auto; padding: 13px; border: 1px solid #748078; border-radius: 8px; color: #e6e9e7; background: #18201d; box-shadow: 0 14px 36px rgba(0,0,0,.62); font: 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ui-inspector-panel[hidden], .ui-inspector-hover-label[hidden] { display: none; }
.ui-inspector-panel h2 { margin: 0 0 10px; color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ui-inspector-hint { margin: -4px 0 10px; color: #b9c5bf; font-size: 11px; }
.ui-inspector-block { margin: 8px 0; padding: 8px; border: 1px solid #48524d; background: #111714; white-space: pre-wrap; }
.ui-inspector-toolbar, .ui-inspector-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ui-inspector-toolbar label { color: #aab4ae; }
.ui-inspector-panel select, .ui-inspector-panel button { min-height: 28px; border: 1px solid #65716a; border-radius: 4px; color: #e7ebe8; background: #28312d; font: inherit; cursor: pointer; }
.ui-inspector-panel button { padding: 4px 7px; }
.ui-inspector-control { display: grid; grid-template-columns: 1fr 104px 54px; gap: 7px; align-items: center; margin: 7px 0; color: #c8d1cc; }
.ui-inspector-control span { grid-column: 1 / -1; color: #aeb8b2; }
.ui-inspector-control input { grid-column: 1 / 3; accent-color: #b9c5bf; }
.ui-inspector-control output { color: #fff; text-align: right; }
.ui-inspector-hover-label { position: fixed; z-index: 2700; max-width: min(360px, calc(100vw - 16px)); padding: 4px 7px; border: 1px solid #8e9992; border-radius: 4px; color: #fff; background: #252b28; font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; pointer-events: none; }
html.vh-ui-inspector-active:not(.vh-ui-inspector-passive) [data-ui-id], html.vh-ui-inspector-active:not(.vh-ui-inspector-passive) .tier-popover { cursor: crosshair !important; }
.is-ui-inspector-hover { outline: 1px solid #a6b0aa !important; outline-offset: 2px !important; }
.is-ui-inspector-selected { outline: 2px solid #f2f4f3 !important; outline-offset: 3px !important; }
html.vh-dev-show-ui-ids [data-ui-id]::after { content: attr(data-ui-id); position: absolute; z-index: 2500; top: 0; left: 0; max-width: 100%; overflow: hidden; padding: 2px 4px; color: #e6e9e7; background: #3d4541; font: 10px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; pointer-events: none; white-space: nowrap; text-overflow: ellipsis; }
html.vh-dev-show-bounds [data-ui-id] { outline: 1px dashed rgba(217,224,219,.82) !important; outline-offset: 1px; }
html.vh-dev-show-hit-areas button, html.vh-dev-show-hit-areas [role="button"] { box-shadow: 0 0 0 2px rgba(102, 190, 225, .65) !important; }

.dev-modal .modal-panel { width: min(980px, calc(100vw - 28px)); max-height: min(820px, calc(100dvh - 28px)); }
.dev-modal .modal-body { max-height: min(660px, calc(100dvh - 172px)); overflow: auto; }
.dev-console { color: #dfe5e1; font: 13px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; }
.dev-console-header { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.dev-console-header p { margin: 0; color: #9da9a2; }
.dev-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid #445049; }
.dev-tab { border: 1px solid #59665e; border-radius: 4px; color: #cbd3ce; background: #202823; padding: 7px 10px; font: inherit; cursor: pointer; }
.dev-tab.is-active { color: #fff; border-color: #bcc8c0; background: #3c4942; }
.dev-pane { padding-top: 16px; }
.dev-pane[hidden] { display: none; }
.dev-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 650px; }
.dev-quick-action { min-height: 54px; border: 1px solid #65736a; border-radius: 5px; color: #f2f5f3; background: #28342d; font: 700 13px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
.dev-quick-action:hover, .dev-quick-action:focus-visible { border-color: #d9e1dc; background: #36443b; outline: 0; }
.dev-ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 650px; }
.dev-ui-grid label { display: flex; gap: 8px; align-items: center; min-height: 34px; padding: 7px; border: 1px solid #4d5952; background: #1d251f; }
.dev-system-status { padding: 10px; border: 1px solid #4b5750; background: #121814; white-space: pre-wrap; }
.dev-balance-intro { margin: 0 0 12px; color: #a9b5ae; }
.dev-balance-intro code { color: #f0cd79; font: inherit; }
.dev-balance-editor { overflow: hidden; border: 1px solid #76613a; border-radius: 10px; background: linear-gradient(145deg, #17291f, #101814 58%, #172218); box-shadow: inset 0 0 0 1px rgba(255, 222, 138, .08), 0 9px 20px rgba(0, 0, 0, .22); }
.dev-balance-editor-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 13px 14px 11px; border-bottom: 1px solid rgba(213, 177, 92, .32); background: linear-gradient(90deg, rgba(132, 93, 33, .20), transparent); }
.dev-balance-editor-heading h4 { margin: 1px 0 0; color: #f4d98d; font: 700 15px/1.2 Georgia, serif; letter-spacing: .05em; text-transform: uppercase; }
.dev-balance-kicker { color: #a8caaa; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.dev-balance-project-actions { display: grid; justify-items: end; gap: 6px; }
.dev-balance-save-project { min-height: 28px; border: 1px solid #d8b55b; border-radius: 4px; padding: 5px 8px; color: #fff1bc; background: linear-gradient(180deg, #795b22, #473518); font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.dev-balance-save-project:hover, .dev-balance-save-project:focus-visible { border-color: #ffdf8d; box-shadow: 0 0 11px rgba(239, 194, 87, .34); outline: 0; }
.dev-balance-search-status { min-height: 16px; color: #c6d6c7; font-size: 11px; text-align: right; }
.dev-balance-search { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 12px 14px; color: #d9e5d9; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dev-balance-search input { min-width: 0; min-height: 34px; border: 1px solid #6d7d6d; border-radius: 5px; padding: 6px 9px; color: #f4f4e9; background: #0d1510; font: 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: none; }
.dev-balance-search input:focus { border-color: #dfbf68; outline: 1px solid rgba(223, 191, 104, .38); }
.dev-balance-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 12px; scrollbar-width: thin; }
.dev-balance-tab { flex: 0 0 auto; min-height: 30px; border: 1px solid #536754; border-radius: 999px; padding: 5px 9px; color: #c7d5c8; background: #17231b; font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.dev-balance-tab.is-active { border-color: #dbbc67; color: #fff1bd; background: linear-gradient(180deg, #6e5422, #3f3219); box-shadow: 0 0 12px rgba(232, 191, 87, .16); }
.dev-balance-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 10px; padding: 0 14px 14px; }
.dev-balance-card { min-width: 0; border: 1px solid rgba(145, 125, 79, .74); border-radius: 7px; background: linear-gradient(160deg, rgba(45, 64, 48, .94), rgba(17, 26, 20, .94)); box-shadow: inset 0 0 0 1px rgba(111, 158, 111, .08); }
.dev-balance-card-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 9px 10px; border-bottom: 1px solid rgba(145, 125, 79, .42); }
.dev-balance-card-header strong { color: #f0d481; font: 700 12px/1.2 Georgia, serif; letter-spacing: .05em; text-transform: uppercase; }
.dev-balance-card-header small { color: #a6bda8; font-size: 10px; }
.dev-balance-fields { display: grid; gap: 7px; padding: 9px; }
.dev-balance-field { display: grid; grid-template-columns: minmax(0, 1fr) 82px 44px; gap: 7px; align-items: center; padding: 7px; border: 1px solid rgba(89, 117, 92, .62); border-radius: 5px; background: rgba(5, 13, 8, .35); }
.dev-balance-field-label { min-width: 0; }
.dev-balance-field-label b, .dev-balance-field-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-balance-field-label b { color: #e2e9df; font-size: 11px; font-weight: 600; }
.dev-balance-field-label small { margin-top: 2px; color: #a6bbab; font-size: 9px; }
.dev-balance-field input { width: 100%; min-width: 0; min-height: 30px; border: 1px solid #5f7162; border-radius: 4px; padding: 4px 6px; color: #f6f3e5; background: #111914; font: 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.dev-balance-set { min-height: 30px; border: 1px solid #c6a54d; border-radius: 4px; color: #fff0bc; background: linear-gradient(180deg, #765a23, #44351a); font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
.dev-balance-set:hover, .dev-balance-set:focus-visible { border-color: #ffe19a; box-shadow: 0 0 10px rgba(239, 194, 87, .31); outline: 0; }
.dev-balance-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed #526656; color: #bdcabf; text-align: center; }
.dev-balance-legacy { margin-top: 14px; border: 1px solid #4d5c51; border-radius: 6px; background: #151d18; }
.dev-balance-legacy summary { padding: 9px 11px; color: #bdc8bf; cursor: pointer; }
.dev-balance-legacy #debug-panel { padding: 0 10px 10px; }
@media (max-width: 560px) { .dev-quick-grid, .dev-ui-grid { grid-template-columns: 1fr; } .ui-inspector-control { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dev-balance-search { grid-template-columns: 1fr; gap: 5px; } .dev-balance-editor-heading { align-items: flex-start; flex-direction: column; } .dev-balance-project-actions { justify-items: start; } .dev-balance-search-status { text-align: left; } .dev-balance-results { grid-template-columns: 1fr; } }