/* =====================================================================
   BLISS ADMIN OPS · ui_kits/platform/styles.css
   Component layer. Requires colors_and_type.css loaded first.
   All components are pixel-sharp (radius 0), hard-shadowed, Buzul theme.
   Scope everything under .bls-root.
   ===================================================================== */

/* ============ APP SHELL ============ */
.bls-app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.bls-body { display: flex; flex-direction: column; min-width: 0; }
.bls-main { padding: var(--s-6) var(--s-6) var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); }
.bls-page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.bls-page-actions { display: flex; gap: var(--s-3); }

/* ============ SIDEBAR ============ */
.bls-side { background: var(--bls-panel); border-right: var(--bw) solid var(--bls-ink); display: flex; flex-direction: column; padding: var(--s-5) var(--s-3); gap: var(--s-5); }
.bls-brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-4); border-bottom: var(--bw) solid var(--bls-line); }
.bls-brand-logo { width: 42px; height: 42px; object-fit: contain; }
.bls-brand-name { font-family: var(--font-display); font-size: 13px; color: var(--bls-ink); line-height: 1; }
.bls-brand-sub { font-family: var(--font-display); font-size: 6.5px; color: var(--bls-accent); letter-spacing: 2px; margin-top: 5px; }
.bls-nav { display: flex; flex-direction: column; gap: 3px; }
.bls-nav-group-label { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bls-ink-3); padding: var(--s-3) var(--s-3) var(--s-1); }
.bls-nav-item { display: flex; align-items: center; gap: var(--s-3); padding: 9px 11px; color: var(--bls-ink-2); font-weight: 600; font-size: 13.5px; cursor: pointer; border: var(--bw) solid transparent; background: none; text-align: left; width: 100%; transition: transform var(--dur-fast) var(--ease), background var(--dur), color var(--dur); }
.bls-nav-item:hover { color: var(--bls-ink); transform: translateX(2px); }
.bls-nav-item.is-active { background: var(--bls-accent-soft); color: var(--bls-accent-deep); border-color: var(--bls-ink); box-shadow: var(--sh); font-weight: 700; }
.bls-nav-item .bls-nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 800; color: var(--bls-ink-2); background: var(--bls-panel-2); border: var(--bw-thin) solid var(--bls-line); padding: 1px 5px; }
.bls-nav-item.is-active .bls-nav-count { background: var(--bls-panel); border-color: var(--bls-accent); color: var(--bls-accent-deep); }
.bls-side-foot { margin-top: auto; }
.bls-region { display: flex; align-items: center; gap: var(--s-2); padding: 10px 11px; border: var(--bw) solid var(--bls-line); background: var(--bls-panel); cursor: pointer; }
.bls-region:hover { border-color: var(--bls-ink); }
.bls-region-dot { width: 9px; height: 9px; background: var(--bls-ok); box-shadow: 0 0 0 3px var(--bls-ok-bg); }
.bls-region-lbl { font-size: 9px; letter-spacing: 1.2px; color: var(--bls-ink-2); font-weight: 700; text-transform: uppercase; }
.bls-region-val { font-weight: 700; color: var(--bls-ink); font-size: 14px; }

/* ============ TOPBAR ============ */
.bls-top { display: flex; align-items: center; gap: var(--s-4); padding: 13px var(--s-6); background: var(--bls-panel); border-bottom: var(--bw) solid var(--bls-ink); }
.bls-bread { font-size: 13px; font-weight: 600; white-space: nowrap; }
.bls-bread .mut { color: var(--bls-ink-2); }
.bls-bread .sep { color: var(--bls-ink-3); margin: 0 7px; }
.bls-search { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px; padding: 8px 13px; background: var(--bls-bg); border: var(--bw) solid var(--bls-line); color: var(--bls-ink-2); transition: border var(--dur), box-shadow var(--dur); }
.bls-search:focus-within { border-color: var(--bls-accent); box-shadow: var(--ring); background: var(--bls-panel); }
.bls-search input { border: 0; background: transparent; flex: 1; font-family: var(--font-sans); font-size: 13px; color: var(--bls-ink); outline: none; }
.bls-search input::placeholder { color: var(--bls-ink-3); }
.bls-kbd { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 6px; background: var(--bls-panel); border: var(--bw-thin) solid var(--bls-line); color: var(--bls-ink-2); }
.bls-top-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.bls-user { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.bls-user-n { font-weight: 700; font-size: 13px; line-height: 1.1; }
.bls-user-r { font-size: 11px; color: var(--bls-ink-2); }

/* ============ AVATAR ============ */
.bls-avatar { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bls-accent); color: #fff; font-family: var(--font-mono); font-weight: 800; font-size: 13px; border: var(--bw) solid var(--bls-ink); }
.bls-avatar.gold { background: var(--bls-gold); color: var(--bls-ink); }
.bls-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.bls-avatar.lg { width: 48px; height: 48px; font-size: 16px; }

/* ============ BUTTONS ============ */
.bls-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px 16px; font-family: var(--font-sans); font-weight: var(--button-weight); font-size: var(--button-size); line-height: 1; color: #fff; background: var(--bls-accent); border: var(--bw) solid var(--bls-ink); cursor: pointer; box-shadow: var(--sh); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), background var(--dur); white-space: nowrap; }
.bls-btn:hover { transform: translate(-1px,-1px); box-shadow: var(--sh-md); background: var(--bls-accent-deep); }
.bls-btn:active { transform: translate(2px,2px); box-shadow: none; }
.bls-btn:focus-visible { outline: none; box-shadow: var(--sh), var(--ring); }
.bls-btn .bls-svg, .bls-btn svg { margin-top: -1px; }

.bls-btn.gold   { background: var(--bls-gold); color: var(--bls-ink); }
.bls-btn.gold:hover { background: var(--bls-gold-deep); }
.bls-btn.ghost  { background: var(--bls-panel); color: var(--bls-ink); }
.bls-btn.ghost:hover { background: var(--bls-panel-2); }
.bls-btn.outline{ background: transparent; color: var(--bls-ink); }
.bls-btn.outline:hover { background: var(--bls-accent-soft); }
.bls-btn.danger { background: var(--bls-err); color: #fff; }
.bls-btn.danger:hover { background: #B63A35; }
.bls-btn.success{ background: var(--bls-ok); color: #fff; }
.bls-btn.success:hover { background: #19805F; }

.bls-btn.sm { padding: 6px 11px; font-size: 12px; box-shadow: var(--sh-sm); }
.bls-btn.lg { padding: 13px 22px; font-size: 14px; }
.bls-btn.block { width: 100%; }
.bls-btn[disabled], .bls-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: var(--sh) !important; }
.bls-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.bls-btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid currentColor; border-top-color: transparent; animation: bls-spin-step .8s steps(8) infinite; color: #fff; }
.bls-btn.gold.is-loading::after, .bls-btn.ghost.is-loading::after, .bls-btn.outline.is-loading::after { color: var(--bls-ink); }

/* icon-only button */
.bls-icbtn { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); color: var(--bls-ink); cursor: pointer; box-shadow: var(--sh); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), background var(--dur); }
.bls-icbtn:hover { transform: translate(-1px,-1px); box-shadow: var(--sh-md); background: var(--bls-accent-soft); }
.bls-icbtn:active { transform: translate(2px,2px); box-shadow: none; }
.bls-icbtn.sm { width: 30px; height: 30px; }
.bls-icbtn[data-badge]::after { content: attr(data-badge); position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 3px; background: var(--bls-err); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: var(--bw) solid var(--bls-panel); animation: bls-pop 240ms var(--ease-snap) both; }

/* ============ CHIPS / TAGS ============ */
.bls-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: var(--bls-ink-2); background: var(--bls-bg); border: var(--bw) solid var(--bls-line); cursor: pointer; white-space: nowrap; transition: color var(--dur), border var(--dur), background var(--dur); }
.bls-chip:hover { color: var(--bls-ink); border-color: var(--bls-ink); }
.bls-chip.is-active { background: var(--bls-accent-soft); color: var(--bls-accent-deep); border-color: var(--bls-accent); }
.bls-chip .bls-chip-x { display: inline-flex; opacity: .6; }
.bls-chip .bls-chip-x:hover { opacity: 1; }

/* ============ BADGES / STATUS PILLS ============ */
.bls-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .5px; padding: 3px 7px; border: var(--bw-thin) solid; white-space: nowrap; text-transform: uppercase; }
.bls-badge.ok   { color: var(--bls-ok);   background: var(--bls-ok-bg);   border-color: var(--bls-ok); }
.bls-badge.warn { color: var(--bls-warn); background: var(--bls-warn-bg); border-color: var(--bls-warn); }
.bls-badge.low  { color: var(--bls-low);  background: var(--bls-low-bg);  border-color: var(--bls-low); }
.bls-badge.err  { color: var(--bls-err);  background: var(--bls-err-bg);  border-color: var(--bls-err); }
.bls-badge.info { color: var(--bls-info); background: var(--bls-info-bg); border-color: var(--bls-info); }
.bls-badge.neutral { color: var(--bls-ink-2); background: var(--bls-panel-2); border-color: var(--bls-line); }
.bls-badge .dot { width: 6px; height: 6px; background: currentColor; }
.bls-badge.solid.ok { background: var(--bls-ok); color: #fff; } .bls-badge.solid.err { background: var(--bls-err); color: #fff; }

/* live indicator */
.bls-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-weight: 800; font-size: 10px; letter-spacing: .5px; color: var(--bls-err); }
.bls-live .dot { width: 7px; height: 7px; background: var(--bls-err); animation: bls-blink 1.1s steps(1) infinite; }

/* ============ FORM CONTROLS ============ */
.bls-field { display: flex; flex-direction: column; gap: 7px; }
.bls-field > label { font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--overline-tracking); text-transform: uppercase; color: var(--bls-ink-2); }
.bls-field .bls-help { font-size: 11.5px; color: var(--bls-ink-2); }
.bls-field .bls-err-msg { font-size: 11.5px; color: var(--bls-err); display: flex; align-items: center; gap: 5px; }

.bls-input, .bls-textarea, .bls-select-native { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--bls-ink); background: var(--bls-panel); border: var(--bw) solid var(--bls-line); padding: 10px 12px; width: 100%; outline: none; transition: border var(--dur), box-shadow var(--dur); }
.bls-input::placeholder, .bls-textarea::placeholder { color: var(--bls-ink-3); }
.bls-input:hover, .bls-textarea:hover, .bls-select-native:hover { border-color: var(--bls-ink-3); }
.bls-input:focus, .bls-textarea:focus, .bls-select-native:focus { border-color: var(--bls-accent); box-shadow: var(--ring); }
.bls-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.bls-field.is-error .bls-input, .bls-field.is-error .bls-textarea { border-color: var(--bls-err); }
.bls-field.is-error .bls-input:focus { box-shadow: 0 0 0 3px rgba(209,70,64,.22); }
.bls-input[disabled] { background: var(--bls-panel-2); color: var(--bls-ink-3); cursor: not-allowed; }

/* input with leading icon / affix */
.bls-input-wrap { position: relative; display: flex; align-items: center; }
.bls-input-wrap .bls-input { padding-left: 36px; }
.bls-input-wrap .bls-affix { position: absolute; left: 12px; color: var(--bls-ink-3); pointer-events: none; }

/* select (custom) */
.bls-select { position: relative; }
.bls-select-trigger { display: flex; align-items: center; gap: var(--s-2); justify-content: space-between; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--bls-ink); background: var(--bls-panel); border: var(--bw) solid var(--bls-line); padding: 10px 12px; width: 100%; cursor: pointer; transition: border var(--dur), box-shadow var(--dur); }
.bls-select-trigger:hover { border-color: var(--bls-ink-3); }
.bls-select.is-open .bls-select-trigger { border-color: var(--bls-accent); box-shadow: var(--ring); }
.bls-select-trigger .chev { color: var(--bls-ink-3); transition: transform var(--dur); }
.bls-select.is-open .bls-select-trigger .chev { transform: rotate(180deg); }

/* toggle switch — pixel slab */
.bls-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.bls-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bls-toggle .track { width: 44px; height: 24px; background: var(--bls-line); border: var(--bw) solid var(--bls-ink); position: relative; transition: background var(--dur); }
.bls-toggle .knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); transition: transform var(--dur) var(--ease); }
.bls-toggle input:checked + .track { background: var(--bls-accent); }
.bls-toggle input:checked + .track .knob { transform: translateX(20px); }
.bls-toggle input:focus-visible + .track { box-shadow: var(--ring); }
.bls-toggle .lbl { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* checkbox — pixel box with pixel check */
.bls-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.bls-check input { position: absolute; opacity: 0; pointer-events: none; }
.bls-check .box { width: 20px; height: 20px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur); }
.bls-check .box svg { opacity: 0; }
.bls-check input:checked + .box { background: var(--bls-accent); }
.bls-check input:checked + .box svg { opacity: 1; }
.bls-check input:focus-visible + .box { box-shadow: var(--ring); }

/* radio — square pixel radio */
.bls-radio { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.bls-radio input { position: absolute; opacity: 0; pointer-events: none; }
.bls-radio .dot { width: 20px; height: 20px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); display: flex; align-items: center; justify-content: center; }
.bls-radio .dot::after { content: ""; width: 8px; height: 8px; background: var(--bls-accent); transform: scale(0); transition: transform var(--dur) var(--ease); }
.bls-radio input:checked + .dot::after { transform: scale(1); }
.bls-radio input:focus-visible + .dot { box-shadow: var(--ring); }

/* segmented control / tabs */
.bls-seg { display: inline-flex; border: var(--bw) solid var(--bls-ink); background: var(--bls-panel); box-shadow: var(--sh-sm); }
.bls-seg button { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; color: var(--bls-ink-2); background: none; border: 0; border-right: var(--bw) solid var(--bls-line); padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: background var(--dur), color var(--dur); }
.bls-seg button:last-child { border-right: 0; }
.bls-seg button.is-active { background: var(--bls-accent); color: #fff; }
.bls-seg button:hover:not(.is-active) { background: var(--bls-accent-soft); color: var(--bls-ink); }

.bls-tabs { display: flex; gap: 0; border-bottom: var(--bw) solid var(--bls-line); }
.bls-tab { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--bls-ink-2); background: none; border: 0; padding: 11px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--dur); }
.bls-tab:hover { color: var(--bls-ink); }
.bls-tab.is-active { color: var(--bls-accent-deep); border-bottom-color: var(--bls-accent); }

/* ============ CARDS ============ */
.bls-card { background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh); display: flex; flex-direction: column; transition: box-shadow var(--dur) var(--ease); }
.bls-card.hoverable:hover { box-shadow: var(--sh-md); }
.bls-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px 16px; border-bottom: var(--bw) solid var(--bls-line); }
.bls-card-h h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bls-ink); }
.bls-card-h .tools { display: flex; align-items: center; gap: var(--s-2); }
.bls-card-body { padding: var(--s-4) var(--s-4); }
.bls-card-foot { padding: 12px 16px; border-top: var(--bw) solid var(--bls-line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
/* dotted divider — a Buzul signature */
.bls-divider { border: 0; border-top: var(--bw) dotted var(--bls-line); margin: var(--s-4) 0; }

/* ============ STAT CARDS ============ */
.bls-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.bls-stat { background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh); padding: var(--s-4); transition: transform var(--dur) var(--ease), box-shadow var(--dur); }
.bls-stat.hoverable:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.bls-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bls-stat-ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--bls-accent-soft); color: var(--bls-accent-deep); border: var(--bw) solid var(--bls-ink); }
.bls-stat-ic.gold { background: var(--bls-gold-soft); color: var(--bls-gold-deep); }
.bls-delta { font-family: var(--font-mono); font-weight: 800; font-size: 11px; padding: 3px 7px; border: var(--bw-thin) solid; }
.bls-delta.up   { color: var(--bls-ok);  background: var(--bls-ok-bg);  border-color: var(--bls-ok); }
.bls-delta.down { color: var(--bls-err); background: var(--bls-err-bg); border-color: var(--bls-err); }
.bls-delta.flat { color: var(--bls-ink-2); background: var(--bls-bg); border-color: var(--bls-line); }
.bls-stat-val { font-family: var(--font-mono); font-weight: 800; font-size: 32px; line-height: 1; color: var(--bls-ink); }
.bls-stat-lbl { margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--bls-ink-2); }

/* ============ BATTERY METER ============ */
.bls-batt { display: inline-flex; gap: 2px; padding: 2px; border: var(--bw) solid var(--bls-ink); background: var(--bls-bg); }
.bls-batt .seg { width: 5px; height: 13px; background: var(--bls-batt-off); transform-origin: left; }
.bls-batt[data-tone="full"] .seg.on { background: var(--bls-batt-full); }
.bls-batt[data-tone="mid"]  .seg.on { background: var(--bls-batt-mid); }
.bls-batt[data-tone="low"]  .seg.on { background: var(--bls-batt-low); }
.bls-batt[data-tone="dead"] .seg.on { background: var(--bls-batt-dead); }
.bls-batt.animate .seg.on { animation: bls-seg-fill 90ms steps(1) both; }
.bls-batt-cell { display: inline-flex; align-items: center; gap: 9px; }

/* segmented progress bar */
.bls-progress { height: 16px; background: var(--bls-bg); border: var(--bw) solid var(--bls-ink); padding: 2px; display: flex; gap: 2px; }
.bls-progress .fill { background: var(--bls-accent); transition: width var(--dur-slow) var(--ease); }

/* ============ TABLE ============ */
.bls-table-wrap { background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh); }
.bls-table { width: 100%; border-collapse: collapse; }
.bls-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--bls-ink-2); padding: 11px 16px; border-bottom: var(--bw) solid var(--bls-ink); white-space: nowrap; }
.bls-table th.sortable { cursor: pointer; user-select: none; }
.bls-table th.sortable:hover { color: var(--bls-ink); }
.bls-table td { padding: 13px 16px; border-bottom: var(--bw-thin) solid var(--bls-line-2); font-size: 13px; font-weight: 500; }
.bls-table tbody tr { transition: background var(--dur-fast); }
.bls-table tbody tr:hover { background: var(--bls-accent-soft); }
.bls-table tbody tr.is-selected { background: var(--bls-accent-soft); }
.bls-table tbody tr:last-child td { border-bottom: 0; }
.bls-table .col-id { font-family: var(--font-mono); font-weight: 700; }
.bls-table .col-mut { color: var(--bls-ink-2); }
.bls-table .row-actions { display: flex; gap: 6px; opacity: 0; transition: opacity var(--dur); }
.bls-table tbody tr:hover .row-actions { opacity: 1; }

/* pagination */
.bls-pager { display: flex; align-items: center; gap: 6px; }
.bls-pager button { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--bls-ink-2); background: var(--bls-panel); border: var(--bw) solid var(--bls-line); cursor: pointer; transition: all var(--dur-fast); }
.bls-pager button:hover { border-color: var(--bls-ink); color: var(--bls-ink); }
.bls-pager button.is-active { background: var(--bls-accent); border-color: var(--bls-ink); color: #fff; }
.bls-pager button[disabled] { opacity: .4; cursor: not-allowed; }

/* ============ DROPDOWN MENU ============ */
.bls-menu { position: absolute; z-index: 40; min-width: 190px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh-md); padding: 5px; animation: bls-fade-up 160ms var(--ease) both; }
.bls-menu-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--bls-ink); background: none; border: 0; text-align: left; cursor: pointer; }
.bls-menu-item:hover { background: var(--bls-accent-soft); }
.bls-menu-item.danger { color: var(--bls-err); }
.bls-menu-item.danger:hover { background: var(--bls-err-bg); }
.bls-menu-sep { border: 0; border-top: var(--bw-thin) solid var(--bls-line); margin: 5px 0; }

/* ============ MODAL ============ */
.bls-overlay { position: fixed; inset: 0; background: rgba(20,56,78,.42); display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--s-6); animation: bls-overlay-in var(--dur) ease both; }
.bls-modal { width: 100%; max-width: 460px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh-xl); animation: bls-modal-in var(--dur-slow) var(--ease) both; }
.bls-modal-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 16px 18px; border-bottom: var(--bw) solid var(--bls-line); }
.bls-modal-h h3 { margin: 0; font-size: 16px; font-weight: 700; }
.bls-modal-body { padding: 18px; }
.bls-modal-foot { display: flex; justify-content: flex-end; gap: var(--s-3); padding: 14px 18px; border-top: var(--bw) solid var(--bls-line); background: var(--bls-panel-2); }

/* ============ TOAST ============ */
.bls-toasts { position: fixed; top: 18px; right: 18px; z-index: 60; display: flex; flex-direction: column; gap: var(--s-3); }
.bls-toast { display: flex; align-items: center; gap: var(--s-3); min-width: 280px; max-width: 360px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh-md); padding: 12px 14px; animation: bls-toast-in 260ms var(--ease) both; }
.bls-toast .ic { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border: var(--bw) solid var(--bls-ink); color: #fff; }
.bls-toast.ok   .ic { background: var(--bls-ok); }
.bls-toast.err  .ic { background: var(--bls-err); }
.bls-toast.info .ic { background: var(--bls-accent); }
.bls-toast .tx { flex: 1; }
.bls-toast .tx .t { font-weight: 700; font-size: 13px; }
.bls-toast .tx .d { font-size: 12px; color: var(--bls-ink-2); margin-top: 1px; }

/* ============ TOOLTIP ============ */
.bls-tip { position: relative; display: inline-flex; }
.bls-tip .bls-tip-bub { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bls-ink); color: #fff; font-size: 11.5px; font-weight: 600; padding: 6px 9px; white-space: nowrap; box-shadow: var(--sh-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur); z-index: 30; }
.bls-tip .bls-tip-bub::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bls-ink); }
.bls-tip:hover .bls-tip-bub { opacity: 1; }

/* ============ EMPTY STATE ============ */
.bls-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-10) var(--s-6); text-align: center; color: var(--bls-ink-2); }
.bls-empty .ic { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: var(--bw) solid var(--bls-line); color: var(--bls-ink-3); background: var(--bls-panel-2); }

/* ============ CHARTS ============ */
.bls-chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: var(--s-2) 0; }
.bls-chart-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bls-chart-bars .bar { width: 100%; background: var(--bls-accent); border: var(--bw) solid var(--bls-ink); transform-origin: bottom; }
.bls-chart-bars .bar.gold { background: var(--bls-gold); }
.bls-chart-bars .x { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--bls-ink-2); }
.bls-chart-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.bls-chart-legend span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--bls-ink-2); white-space: nowrap; }
.bls-chart-legend i { width: 10px; height: 10px; border: var(--bw-thin) solid var(--bls-ink); }

/* donut (conic) */
.bls-donut { width: 120px; height: 120px; border-radius: 50%; position: relative; image-rendering: auto; }
.bls-donut::after { content: ""; position: absolute; inset: 26px; background: var(--bls-panel); border-radius: 50%; }
.bls-donut .donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }

/* ============ MAP SCREEN CHROME (frames a real Google Map) ============ */
.bls-map-shell { display: grid; grid-template-columns: 320px 1fr; border: var(--bw) solid var(--bls-ink); box-shadow: var(--sh); background: var(--bls-panel); min-height: 540px; }
.bls-map-aside { border-right: var(--bw) solid var(--bls-ink); display: flex; flex-direction: column; }
.bls-map-aside-h { padding: 14px 16px; border-bottom: var(--bw) solid var(--bls-line); }
.bls-map-list { overflow: auto; }
.bls-map-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: var(--bw-thin) solid var(--bls-line-2); cursor: pointer; }
.bls-map-row:hover, .bls-map-row.is-active { background: var(--bls-accent-soft); }
.bls-map-canvas { position: relative; background: #dfe9ee; overflow: hidden; }
.bls-map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.92); }
.bls-map-toolbar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.bls-map-legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 13px; background: var(--bls-panel); border: var(--bw) solid var(--bls-ink); padding: 7px 11px; z-index: 2; box-shadow: var(--sh-sm); }
.bls-map-legend span { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--bls-ink-2); }
.bls-map-legend i { width: 9px; height: 9px; }

/* scanline texture utility (sparingly — hero/headers/loading) */
.bls-scanlines { position: relative; }
.bls-scanlines::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(20,56,78,.05) 0 1px, transparent 1px 3px); }