/* ===== Theme vars ===== */
:root,
html[data-bs-theme="light"] {
  --bss-radius: 26px;

  --bss-bg1: rgba(255,255,255,.96);
  --bss-bg2: rgba(245,247,250,.96);
  --bss-border: rgba(33,37,41,.10);

  --bss-text: rgba(33,37,41,.94);
  --bss-muted: rgba(33,37,41,.68);

  --bss-accent: rgba(111,66,193,.95);
  --bss-expected: rgba(25,135,84,.92);

  --bss-chip-bg: rgba(33,37,41,.04);
  --bss-chip-border: rgba(33,37,41,.10);
  --bss-chip-text: rgba(33,37,41,.75);

  --bss-panel-bg: rgba(255,255,255,.72);
  --bss-panel-border: rgba(33,37,41,.10);

  --bss-shadow:
    0 18px 40px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}

html[data-bs-theme="dark"] {
  --bss-radius: 26px;

  --bss-bg1: rgba(14,16,22,.94);
  --bss-bg2: rgba(24,28,40,.86);
  --bss-border: rgba(255,255,255,.14);

  --bss-text: rgba(255,255,255,.92);
  --bss-muted: rgba(255,255,255,.68);

  --bss-accent: rgba(170,130,255,.95);
  --bss-expected: rgba(120,220,160,.92);

  --bss-chip-bg: rgba(255,255,255,.06);
  --bss-chip-border: rgba(255,255,255,.12);
  --bss-chip-text: rgba(255,255,255,.78);

  --bss-panel-bg: rgba(255,255,255,.06);
  --bss-panel-border: rgba(255,255,255,.10);

  --bss-shadow:
    0 18px 60px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===== Card ===== */
.bss-card{
  position: relative;
  border-radius: var(--bss-radius);
  padding: 16px 16px;
  color: var(--bss-text);
  background: linear-gradient(135deg, var(--bss-bg1), var(--bss-bg2));
  border: 1px solid var(--bss-border);
  box-shadow: var(--bss-shadow);
  overflow: hidden;
}

.bss-card::before,
.bss-card::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter: blur(34px);
}

.bss-card::before{
  width: 390px;
  height: 390px;
  top: -235px;
  left: -175px;
  opacity: .68;
  background: radial-gradient(
    circle at 36% 36%,
    rgba(170,130,255,.78) 0%,
    rgba(170,130,255,.42) 34%,
    transparent 68%
  );
}

.bss-card::after{
  width: 280px;
  height: 280px;
  right: -160px;
  bottom: -190px;
  opacity: .52;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(120,220,160,.45) 0%,
    transparent 62%
  );
}

.bss-card > *{
  position: relative;
  z-index: 1;
}

/* ===== Layout ===== */
.bss-card__top{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content:space-between;
}

.bss-card__left{
  min-width: 320px;
  flex: 1 1 auto;
}

.bss-card__right{
  display:flex;
  gap: 12px;
  align-items:stretch;
  justify-content:flex-end;
  width: 100%;
  max-width: 600px;
}

/* ===== Left block ===== */
.bss-name{
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
  margin: 2px 0 8px;
  letter-spacing: .2px;
  color: var(--bss-text);
}

.bss-meta{
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  color: var(--bss-muted);
  margin: 0 0 6px;
}

.bss-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.bss-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--bss-chip-bg);
  border: 1px solid var(--bss-chip-border);
  color: var(--bss-chip-text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

/* ===== Status chip ===== */
.bss-chip--status{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 12px;
  white-space: nowrap;
}

.bss-chip--gold{
  background: rgba(255, 215, 0, .16);
  border-color: rgba(255, 215, 0, .30);
  color: rgba(214, 157, 0, 1);
}

.bss-chip--silver{
  background: rgba(166, 177, 187, .18);
  border-color: rgba(166, 177, 187, .30);
  color: rgba(120, 132, 145, 1);
}

.bss-chip--basic{
  background: rgba(111, 190, 255, .16);
  border-color: rgba(111, 190, 255, .32);
  color: rgba(59, 134, 201, 1);
}

.bss-chip--platinum{
  background: rgba(194, 162, 255, .18);
  border-color: rgba(194, 162, 255, .30);
  color: rgba(130, 88, 214, 1);
}

/* ===== Shared right cards ===== */
.bss-scorebox,
.bss-gaugecard{
  height: 200px;
  border-radius: 18px;
  border: 1px solid var(--bss-panel-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

/* ===== Score card ===== */
.bss-scorebox{
  width: 260px;
  height: 200px;
  padding: 10px 12px 8px;
  background:
    radial-gradient(140px 140px at 85% 25%, color-mix(in srgb, var(--bss-accent) 28%, transparent), transparent 65%),
    radial-gradient(160px 160px at 20% 85%, color-mix(in srgb, var(--bss-expected) 16%, transparent), transparent 70%),
    var(--bss-panel-bg);
}

.bss-scorebox__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.bss-label{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--bss-text);
}

.bss-sub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--bss-muted);
  font-weight: 750;
}

.bss-scorebig{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  flex: 1 1 auto;
  margin-top: 8px;
}

.bss-score__num{
  font-size: 46px;
  font-weight: 980;
  line-height: 1;
  color: var(--bss-text);
  letter-spacing: .2px;
}

.bss-score__unit{
  font-size: 14px;
  font-weight: 950;
  color: var(--bss-muted);
}

/* ===== Gauge card ===== */
.bss-gaugecard{
  width: 320px;
  height: 200px;
  padding: 10px 10px 8px;
  background:
    radial-gradient(150px 150px at 80% 20%, color-mix(in srgb, var(--bss-accent) 16%, transparent), transparent 62%),
    radial-gradient(180px 180px at 18% 90%, color-mix(in srgb, var(--bss-expected) 12%, transparent), transparent 70%),
    var(--bss-panel-bg);
}

.bss-gauge-chart{
  width: 100%;
  height: 145px;
  min-height: 145px;
  border-radius: 16px;
  border: 1px solid var(--bss-panel-border);
  background: color-mix(in srgb, var(--bss-panel-bg) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  padding: 2px;
  overflow: hidden;
  position: relative;
}

/* двигаем отрисованный zingchart вниз, не уменьшая его */
#bss-gauge-chart > div,
#bss-gauge-chart svg,
#bss-gauge-chart canvas{
  transform: translateY(18px);
  transform-origin: center top;
}

.bss-gauge__legend{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 4px;
  font-size: 11px;
  color: var(--bss-muted);
  flex-wrap: wrap;
}

.bss-dot{
  display:inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}

.bss-dot--cur{
  background: var(--bss-accent);
}

.bss-dot--exp{
  background: var(--bss-expected);
}

/* ===== Actions ===== */
.bss-card__actions{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bss-panel-border);
}

.bss-actions__row{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
}

.bss-search{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.bss-btn-search{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: var(--bss-chip-bg) !important;
  border: 1px solid var(--bss-chip-border) !important;
  color: var(--bss-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.bss-btn-search:hover{
  background: rgba(255,255,255,.11) !important;
}

.bss-textblock{
  min-width: 0;
  flex: 1 1 auto;
}

.bss-textblock__title{
  font-size: 13px;
  font-weight: 950;
  color: var(--bss-text);
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.bss-btn-distribute{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  text-decoration:none;
  white-space:nowrap;
  font-weight: 980;
  background: linear-gradient(135deg, rgba(170,130,255,.22), rgba(120,220,160,.14));
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow:
    0 12px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.bss-btn-distribute:hover{
  text-decoration:none;
  transform: translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .bss-card__right{
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    width: 100%;
  }

  .bss-scorebox,
  .bss-gaugecard{
    width: 100%;
  }
}

@media (max-width: 768px){
  .bss-card__top{
    flex-direction: column;
  }

  .bss-card__left{
    min-width: auto;
  }

  .bss-card__right{
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    align-items: stretch;
  }

  .bss-scorebox,
  .bss-gaugecard{
    width: 100%;
  }
}

@media (max-width: 576px){
  .bss-card{
    padding: 14px 12px;
  }

  .bss-card__right{
    width: 100%;
    align-items: stretch;
  }

  .bss-scorebox,
  .bss-gaugecard{
    width: 100%;
    min-width: 0;
  }

  .bss-gaugecard{
    height: 225px;
  }

  .bss-gauge-chart{
    width: 100%;
    height: 160px;
    min-height: 160px;
  }

  #bss-gauge-chart > div,
  #bss-gauge-chart svg,
  #bss-gauge-chart canvas{
    transform: translateY(10px);
    transform-origin: center top;
  }

  .bss-gauge__legend{
    margin-top: 6px;
  }

  .bss-search{
    align-items: flex-start;
  }

  .bss-textblock__title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .bss-actions__row{
    flex-direction: column;
    align-items: stretch;
  }

  .bss-btn-distribute{
    width: 100%;
  }

  .bss-status-stack{
    min-width: 96px;
  }

  .bss-scorebox__head{
    align-items: flex-start;
  }
}

.bss-status-stack{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 110px;
}

.bss-status-stack .bss-chip{
  justify-content: center;
  width: 100%;
  text-align: center;
}

.bss-scorebtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.bss-scorebtn:hover .bss-score__num{
  opacity: .85;
  transform: translateY(-1px);
}

.bss-score__num{
  transition: .2s ease;
}

.bss-modal .modal-content,
.bss-modal{
  border-radius: 18px;
}

.bss-score-table thead th{
  font-size: 13px;
  font-weight: 800;
}

.bss-score-table tbody td,
.bss-score-table tfoot th{
  font-size: 14px;
}

.bss-score-table tfoot th{
  border-top: 2px solid var(--bss-panel-border);
  font-weight: 900;
}

/* скрыть встроенное меню ZingChart */
#bss-gauge-chart-menu,
#bss-gauge-chart-menubutton,
#bss-gauge-chart .zc-menu,
#bss-gauge-chart .zc-menu-button,
#bss-gauge-chart .zc-menu-tray,
#bss-gauge-chart [id$="-menu"],
#bss-gauge-chart [id$="-menubutton"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}