/* ═══════════════════════════════════════════════════════════
   COMPONENTS — Unified Design System (optimized)
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
input[type=number] { -moz-appearance: textfield }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-mono) }
body { font-family: var(--font-mono); color: var(--txt); min-height: 100vh; font-size: var(--fs-lg); transition: background 0.65s var(--ease), color 0.4s ease }

/* ═══════════════════════════════════════════════════════════
   TYPED COLOR SYSTEM  —  .ta / .tb / .tot
   Каждый класс задаёт --_c (цвет) и --_bg (фон).
   Дочерние компоненты наследуют через var(--_c).
   ═══════════════════════════════════════════════════════════ */
.ta  { --_c: var(--type-a); --_bg: var(--type-a-bg); color: var(--_c) }
.tb  { --_c: var(--type-b); --_bg: var(--type-b-bg); color: var(--_c) }
.tot { --_c: var(--type-t); --_bg: var(--type-t-bg); color: var(--_c) }

/* ── ACCENT-COLOR MODIFIER ── */
.accent-red,    .red    { --_accent: var(--red) }
.accent-green,  .green  { --_accent: var(--green) }
.accent-yellow, .yellow { --_accent: var(--yellow) }
.accent-blue,   .blue   { --_accent: var(--blue) }
.accent-purple, .purple { --_accent: var(--purple) }

/* ── ROOM COLORS —  .r1–.rp задают --_room / --_room-bg ── */
.c1, .r1 { --_room: var(--room-1k); --_room-bg: var(--room-1k-bg); color: var(--_room) }
.c2, .r2 { --_room: var(--room-2k); --_room-bg: var(--room-2k-bg); color: var(--_room) }
.c3, .r3 { --_room: var(--room-3k); --_room-bg: var(--room-3k-bg); color: var(--_room) }
.c4, .r4 { --_room: var(--room-4k); --_room-bg: var(--room-4k-bg); color: var(--_room) }
.cp, .rp { --_room: var(--room-p);  --_room-bg: var(--room-p-bg);  color: var(--_room) }
.bg-c1 { background: var(--room-1k-bg); color: var(--room-1k) }
.bg-c2 { background: var(--room-2k-bg); color: var(--room-2k) }
.bg-c3 { background: var(--room-3k-bg); color: var(--room-3k) }
.bg-c4 { background: var(--room-4k-bg); color: var(--room-4k) }
.bg-cp { background: var(--room-p-bg);  color: var(--room-p) }

/* ═══════════════════════════════════════════════════════════
   INPUTS  —  общая база + модификаторы размера
   ═══════════════════════════════════════════════════════════ */
.inp, .tinp, .sinp, .q-inp, .dash-cell, .ft-inp,
.tep-box-input, .form-input, .area-total-inp,
.ainp, .ainp2, .ainp-avg, .ainp-total,
.target-input, .vbar-inp, .prop-bar-input {
  background: transparent;
  border: 1px solid var(--brd);
  border-radius: var(--inp-radius);
  color: var(--txt);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  padding: var(--input-py) var(--input-px);
  text-align: center;
  box-shadow: var(--inp-shadow);
  transition: border-color var(--t-slow), background var(--t-slow);
  box-sizing: border-box;
  -moz-appearance: textfield }
.inp:focus, .tinp:focus, .sinp:focus, .q-inp:focus, .dash-cell:focus,
.ft-inp:focus, .tep-box-input:focus, .form-input:focus,
.area-total-inp:focus, .ainp:focus, .ainp2:focus, .ainp-avg:focus,
.ainp-total:focus, .target-input:focus, .vbar-inp:focus,
.prop-bar-input:focus { outline: none; border-color: var(--blue) }

/* Size modifiers */
.tinp  { width: 70px; height: var(--input-h-lg); font-size: var(--fs-inp); padding: 9px 11px }
.sinp  { width: 56px; border: none;  border-radius: 0 }
.sinp:focus { border-color: var(--txt); background: var(--bg) }
.sinp:disabled { opacity: 0.4 }
.q-inp { width: 44px; font-size: var(--fs-xl); padding: var(--sp-2) var(--sp-1); border: none;  border-radius: 0 }
.dash-cell { width: 40px; font-size: var(--fs-lg); padding: var(--sp-2) var(--sp-1); border: none;  border-radius: 0; font-weight: var(--fw-bold) }
.tep-box-input { width: 100%; height: 38px }
.ft-inp { width: var(--bar-w); font-weight: var(--fw-bold); border-width: 2px; border-color: var(--txt3); background: var(--bg4) }
.form-input { width: 100%; text-align: left; padding: var(--sp-4) var(--sp-6); font-weight: var(--fw-normal); font-size: var(--fs-xl) }
.area-total-inp { width: 60px; font-weight: var(--fw-bold); border-width: 2px; padding: var(--sp-3) var(--sp-4) }
.target-input { width: 100%; height: var(--input-h); font-size: var(--fs-xl) }
.target-input:focus { background: var(--bg) }
.vbar-inp { width: 44px; font-size: var(--fs-lg); padding: var(--sp-2) var(--sp-1) }

/* Underline-style inputs (shares/areas grids) */
.ainp, .ainp2, .ainp-avg { width: 56px; padding: var(--sp-2) var(--sp-1); font-size: var(--fs-lg); border: none;  border-radius: 0 }
.ainp::-webkit-outer-spin-button, .ainp::-webkit-inner-spin-button,
.ainp2::-webkit-outer-spin-button, .ainp2::-webkit-inner-spin-button,
.ainp-avg::-webkit-outer-spin-button, .ainp-avg::-webkit-inner-spin-button,
.ainp-total::-webkit-outer-spin-button, .ainp-total::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.ainp[type=number], .ainp2[type=number], .ainp-avg[type=number], .ainp-total[type=number] { -moz-appearance: textfield }
.ainp-total { font-weight: var(--fw-bold) }
.ainp  { width: var(--sp-16); border: 1px solid var(--brd); padding: 3px 1px; font-size: var(--fs-sm) }
.ainp2 { width: var(--sp-16); background: var(--bg); border: 1px solid var(--brd); border-radius: 0; padding: 5px var(--sp-1); font-size: var(--fs-md) }
.ainp2:focus { background: var(--bg2) }
.ainp-avg { width: var(--bar-w); background: var(--bg2); border: 2px solid var(--brd); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-1); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--blue) }
.ainp-avg:focus { background: var(--bg) }

/* Typed input coloring — наследует --_c / --_bg */
.ta .ainp-avg { color: var(--green); border-color: rgba(80,205,137,0.5); background: var(--success-bg-light) }
.tb .ainp-avg { color: var(--type-b); border-color: rgba(229,115,115,0.5); background: var(--danger-bg-light) }
.ainp-total:focus { background: var(--bg) }
.ainp-total.ta { color: var(--green); border-color: var(--green); background: transparent }
.ainp-total.tb { color: var(--red); border-color: var(--red); background: transparent }

.tinp.ta, .dash-cell.ta, .ainp.ta { color: var(--type-a) }
.tinp.tb, .dash-cell.tb, .ainp.tb { color: var(--type-b) }
.tep-box-input.green { color: var(--green); font-weight: var(--fw-medium) }
.tep-box-input.yellow { color: var(--yellow) }
.tep-box-input.error, .inp.error { border-color: var(--red) !important; background: var(--danger-bg-light) !important }
.tinp.lkd { background: transparent; border-color: rgba(244,197,66,0.2); color: var(--yellow) }

/* ═══════════════════════════════════════════════════════════
   SELECTS
   ═══════════════════════════════════════════════════════════ */
.sel, .tsel, .qsel, .project-select, .queue-select, .hc-assign-select {
  background: var(--bg2); border: 1px solid var(--brd); border-radius: var(--inp-radius);
  color: var(--txt); font-weight: var(--fw-medium); font-size: var(--fs-lg);
  cursor: pointer; box-sizing: border-box; box-shadow: var(--inp-shadow);
  transition: border-color var(--t-slow) }
.sel:focus, .tsel:focus, .qsel:focus, .project-select:focus,
.queue-select:focus, .hc-assign-select:focus { outline: none; border-color: var(--blue) }
.sel option, .tsel option, .project-select option, .queue-select option { background: var(--bg2); color: var(--txt) }

/* ═══════════════════════════════════════════════════════════
   TABLES  —  единая база th/td
   ═══════════════════════════════════════════════════════════ */
table.tbl, .dash-tbl, .q-tbl, .shares-tbl, .res-sec-tbl,
.sec-apt-tbl, .mkt-dt, .hlp-tbl, .shares-det-tbl,
.areas-tbl2, .ft-card-tbl, .ad-summary-tbl, .comp-tbl {
  width: 100%; border-collapse: collapse; font-size: var(--fs-base) }
table.tbl th, .dash-tbl th, .q-tbl th, .shares-tbl th, .res-sec-tbl th,
.sec-apt-tbl th, .hlp-tbl th, .shares-det-tbl th,
.areas-tbl2 th, .ft-card-tbl th, .ad-summary-tbl th, .comp-tbl th {
  font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--txt3);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  padding: var(--cell-py-lg) var(--cell-px); border-bottom: 1px solid var(--brd);
  text-align: center; background: transparent }
table.tbl td, .dash-tbl td, .q-tbl td, .shares-tbl td, .res-sec-tbl td,
.sec-apt-tbl td, .hlp-tbl td, .shares-det-tbl td,
.areas-tbl2 td, .ft-card-tbl td, .ad-summary-tbl td, .comp-tbl td {
  padding: var(--cell-py) var(--cell-px); text-align: center;
  border-bottom: 1px solid var(--brd); vertical-align: middle }

/* Typed rows */
tr.ta td { background: transparent }
tr.tb td { background: transparent }
tr.tot td { font-weight: var(--fw-bold); border-top: 1px solid var(--brd) }
th:first-child, td.row-lbl, .rl { text-align: left }
.rl.ta { color: var(--type-a) }
.rl.tb { color: var(--type-b) }
.tot.ok { color: var(--green) }
.tot.er { color: var(--red) }

/* Shares table */
.shares-tbl { margin-bottom: var(--sp-5) }
.shares-tbl th:first-child { padding-left: var(--sp-2) }
.shares-tbl tr:last-child td { border-bottom: none }
.shares-tbl .rl { font-weight: var(--fw-semi); padding-left: var(--sp-2) }
.shares-tbl .rl.ta { color: var(--type-a) }
.shares-tbl .rl.tb { color: var(--type-b) }
.shares-tbl .tot { font-weight: var(--fw-bold) }
.shares-tbl .tot.ok { color: var(--green) }
.shares-tbl .tot.er { color: var(--red) }

/* Areas table (old compact) */
.areas-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-base) }
.areas-tbl th, .areas-tbl td { padding: var(--sp-4) var(--sp-2); text-align: center }
.areas-tbl th { background: transparent; color: var(--txt3); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide) }
.areas-tbl .grp-a { background: transparent; color: var(--purple) }
.areas-tbl .grp-b { background: var(--success-bg-light); color: var(--green) }
.areas-tbl .rl { text-align: left; font-weight: var(--fw-semi); padding-left: var(--sp-5) }
.areas-tbl .avg { font-weight: var(--fw-semi); background: transparent; border-top: 1px dashed var(--brd) }
.areas-tbl .nd { color: var(--txt3) }

/* Areas table v2 */
.areas-tbl2 { font-size: var(--fs-base) }
.areas-tbl2 th { font-size: var(--fs-sm); padding: var(--sp-2) 3px; background: transparent }
.areas-tbl2 td { padding: 5px var(--sp-1) }
.areas-tbl2 .subhdr th { font-size: var(--fs-xs); color: var(--txt3); font-weight: var(--fw-normal); background: transparent }
.areas-tbl2 .avg { font-size: var(--fs-base); font-weight: var(--fw-bold); background: transparent; color: var(--txt) }
.areas-tbl2 .nd { color: var(--txt3); background: transparent }

/* ═══════════════════════════════════════════════════════════
   BARS — Horizontal (unified base)
   ═══════════════════════════════════════════════════════════ */
.hbar, .bar-track, .ci-bar-track,
.prop-slider-bar, .split-variant-track, .progress-bar {
  flex: 1; display: flex; overflow: hidden;
  height: var(--bar-h-lg); background: var(--gray-10);
  border-radius: var(--radius-sm) }
.hbar-fill, .bar-fill, .ci-bar-fill,
.split-variant-fill, .progress-fill {
  height: 100%; min-width: 0; border-radius: var(--radius-sm);
  transition: width var(--t-anim) }

/* Thick labeled bars (shares, stacked, product) */
.share-bar-track, .dash-cf-bar-track, .stacked-bar {
  flex: 1; display: flex; overflow: hidden;
  height: var(--bar-h-xxl); background: var(--overlay-subtle);
  border: 1px solid var(--brd); border-radius: 0 }
.share-bar-seg, .dash-cf-bar-fill, .stacked-seg {
  height: 100%; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--white-90); transition: width var(--t-anim) }
.share-bar-seg { overflow: hidden; white-space: nowrap; letter-spacing: var(--ls-tight) }
.stacked-seg { color: #fff }
.stacked-seg.s1 { background: var(--room-1k) }
.stacked-seg.s2 { background: var(--room-2k) }
.stacked-seg.s3 { background: var(--room-3k) }
.stacked-seg.s4 { background: var(--room-4k) }
.stacked-seg.sp { background: var(--room-p) }

/* ═══════════════════════════════════════════════════════════
   BARS — Vertical (unified vbar + area-bar)
   ═══════════════════════════════════════════════════════════ */
.vbar-track, .prop-bar-track, .area-bar-track {
  display: flex; background: var(--overlay-subtle);
  border-radius: var(--radius-sm); overflow: hidden; position: relative }
.vbar-track, .area-bar-track {
  width: var(--bar-w); height: var(--vbar-h); overflow: visible;
  flex-direction: column; justify-content: flex-end }
.vbar-track.ta, .area-bar-track.ta { background: transparent }
.vbar-track.tb, .area-bar-track.tb { background: transparent }
.vbar-track.tot, .area-bar-track.tot { background: transparent }

.vbar-fill, .prop-bar-fill, .area-bar-fill, .deviation-fill {
  transition: width var(--t-anim); min-width: 0 }
.vbar-fill, .area-bar-fill {
  width: 100%; border-radius: var(--radius-sm);
  transition: height 0.55s cubic-bezier(0.4,0,0.2,1); min-height: var(--sp-4) }
.vbar-fill.ta, .area-bar-fill.ta { background: var(--type-a) }
.vbar-fill.tb, .area-bar-fill.tb { background: var(--type-b) }
.vbar-fill.tot, .area-bar-fill.tot { background: var(--type-t) }

.prop-bar-fill { width: 100%; border-radius: var(--radius-pill); transition: height var(--t-slow);
  display: flex; align-items: center; justify-content: center; min-height: var(--sp-3) }

.deviation-fill { border-radius: 0; position: absolute; top: var(--sp-2); bottom: var(--sp-2); transition: all var(--t-slow) }
.deviation-fill.positive { left: 50%; background: var(--red) }
.deviation-fill.negative { right: 50%; background: var(--green) }

.vbar-group, .area-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center }
.vbar-triple, .area-bar-triple { display: flex; gap: var(--sp-4); justify-content: center }
.vbar-col, .area-bar-col { display: flex; flex-direction: column; align-items: center; width: var(--bar-w) }

.vbar-pct, .area-bar-avg {
  font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
  width: var(--bar-w); text-align: center; visibility: hidden }
.vbar-pct { font-size: var(--fs-xl) }
.area-bar-avg { font-size: var(--fs-inp) }
.vbar-pct.ta, .area-bar-col.ta .area-bar-avg { color: var(--type-a) }
.vbar-pct.tb, .area-bar-col.tb .area-bar-avg { color: var(--type-b) }
.vbar-pct.tot, .area-bar-col.tot .area-bar-avg { color: var(--type-t) }

.vbar-lbl, .area-lbl {
  position: absolute; bottom: var(--sp-5); left: 0; right: 0; text-align: center;
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--white-95); text-transform: uppercase;
  text-shadow: 0 1px 2px var(--black-30) }

.vbar-tot, .area-bar-tot {
  width: var(--bar-w); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-1);
  background: var(--bg4, var(--white-6)); border: 2px solid transparent;
  border-radius: var(--radius-sm); font-size: var(--fs-2xl);
  font-weight: var(--fw-semi); text-align: center; color: var(--type-t) }

.vbar-inp-wrap { position: relative; display: inline-flex; align-items: center; margin-top: var(--sp-5) }
.vbar-inp.ta { color: var(--type-a); border-color: var(--type-a); background: transparent }
.vbar-inp.tb { color: var(--type-b); border-color: var(--type-b); background: transparent }
.vbar-inp:focus { border-color: var(--cyan); background: var(--bg) }

.vbar-totals { margin-top: var(--sp-8) }
.vbar-totals-grid { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4) }
.vbar-totals-spacer { flex: 1 }
.vbar-totals-divider { width: 1px; height: var(--sp-10); flex-shrink: 0 }
.vbar-totals-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-4) }
.vbar-total-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-6) }
.vbar-total-label { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--txt3) }
.vbar-total-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-lg) }
.vbar-total-val.ta { color: var(--type-a); background: transparent }
.vbar-total-val.tb { color: var(--type-b); background: transparent }
.vbar-total-val.tot { color: var(--type-t); background: var(--bg4, var(--white-6)) }
.vbar-total-wrap { position: relative; display: inline-flex; align-items: center }
.vbar-total-inp { width: 50px; padding: var(--sp-3); border-radius: var(--radius-lg); font-size: var(--fs-lg); font-weight: var(--fw-semi); text-align: center; border: 2px solid }
.vbar-total-inp.ta { color: var(--type-a); border-color: var(--type-a); background: transparent }
.vbar-total-inp.tb { color: var(--type-b); border-color: var(--type-b); background: transparent }
.vbar-total-inp:focus { outline: none; background: var(--bg) }

.area-inp-avg, .area-total-inp {
  width: var(--bar-w); margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-1);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-2xl); font-weight: var(--fw-bold); text-align: center }
.area-inp-avg { background: var(--bg4) }
.area-inp-avg.ta, .area-total-inp.ta { color: var(--type-a); border-color: var(--type-a); background: transparent }
.area-inp-avg.tb, .area-total-inp.tb { color: var(--type-b); border-color: var(--type-b); background: transparent }
.area-inp-avg:focus, .area-total-inp:focus { outline: none; background: var(--bg) }
.area-total-inp { width: 60px; font-weight: var(--fw-bold); border-width: 2px; padding: var(--sp-3) var(--sp-4) }
.area-minmax-hint {
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  font-size: var(--fs-sm); color: var(--txt2); text-align: center;
  letter-spacing: -0.3px; line-height: 1.25; z-index: 10;
  pointer-events: none; white-space: nowrap;
  background: var(--bg); padding: var(--sp-2) 7px; border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px var(--black-30); opacity: 0; transition: opacity var(--t-base) }
.area-bar-track:hover .area-minmax-hint { opacity: 1 }
.area-total-disp { padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-sm); font-size: var(--fs-2xl); font-weight: var(--fw-bold); text-align: center }
.area-total-disp.tot { color: var(--type-t); background: var(--bg4, var(--white-6)); border: 2px solid transparent }

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge, .stat-badge, .res-badge, .pm-tag, .hc-class-badge,
.auto-badge, .hc-sec-badge, .ad-grp-chip, .comp-surplus-tag {
  display: inline-block; padding: var(--badge-py) var(--badge-px);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  vertical-align: middle; border-radius: 0 }
.badge.up, .stat-badge.up { background: transparent; color: var(--green) }
.badge.down, .stat-badge.down { background: transparent; color: var(--red) }
.res-badge.v1 { background: var(--blue-bg); color: var(--blue) }
.res-badge.v2 { background: transparent; color: var(--green) }
.res-badge.v3 { background: var(--yellow-bg); color: var(--yellow) }
.ad-grp-chip { background: transparent; border: 1px solid var(--brd); color: var(--txt2); font-size: var(--fs-md) }
.pm-tag.b { background: transparent; color: var(--blue-tag) }
.pm-tag.u { background: var(--success-bg); color: var(--type-a) }

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════ */
.sec-hdr svg, .ci-header svg, .hc-header svg, .card-t svg { opacity: 0.35 }

.sec-hdr, .ci-header, .hc-header, .card-t, .section-title,
.stacked-title, .dash-section-hdr {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--txt3); margin-bottom: var(--sp-6) }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  padding: 0 var(--sp-8); height: var(--sp-16); border-radius: var(--radius-sm);
  border: 1px solid var(--brd); background: transparent;
  color: var(--txt2); font-size: var(--fs-base); font-weight: var(--fw-medium);
  cursor: pointer; transition: all var(--t-slow);
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; letter-spacing: var(--ls-normal) }
.btn:hover { background: var(--accent-bg-2); color: var(--txt); border-color: var(--accent-bg-4) }
.btn:active { transform: translateY(0) }
.btn:disabled { opacity: 0.3; cursor: not-allowed }
.btn:disabled:hover { background: transparent; color: var(--txt2); transform: none }
.btn-sm { padding: var(--sp-3) var(--sp-5); min-width: var(--sp-16) }
.btn-primary { background: var(--accent-bg-3); color: var(--blue); border-color: var(--accent-bg-5) }
.btn-primary:hover { background: var(--accent-bg-5) }
.btn-calc { background: transparent; color: var(--blue); font-weight: var(--fw-semi); padding: 0 var(--sp-12); font-size: var(--fs-md); border-radius: var(--radius-sm); border: 1px solid var(--blue); transition: all var(--t-slow); letter-spacing: 0.08em; text-transform: uppercase; height: 36px }
.btn-calc:hover { background: var(--accent-bg-2) }
.btn-calc:active { background: var(--accent-bg-3) }
.btn-optimize { background: var(--txt); color: var(--bg); border: none; padding: var(--sp-5) var(--sp-10); border-radius: var(--radius-sm); font-weight: var(--fw-semi); cursor: pointer; display: flex; align-items: center; gap: var(--sp-4); transition: all var(--t-slow); box-shadow: 0 2px 12px var(--overlay-2) }
.btn-optimize:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--overlay-3) }
.btn-optimize:disabled { opacity: 0.4; cursor: not-allowed; transform: none }
.btn-optimize .spinner { width: var(--icon-sm); height: var(--icon-sm); border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ═══════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════ */
.card { border: 1px solid var(--brd); padding: var(--card-padding); background: transparent; box-shadow: var(--inp-shadow); transition: border-color var(--t-smooth) }
.card:hover { border-color: var(--overlay-2) }
.card-t .icon { width: var(--icon-xl); height: var(--icon-xl); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); color: var(--txt2); border-radius: var(--radius-sm) }
.card-t .icon.red    { background: transparent; color: var(--red) }
.card-t .icon.green  { background: transparent; color: var(--green) }
.card-t .icon.blue   { background: var(--blue-bg); color: var(--blue) }
.card-t .icon.yellow { background: var(--yellow-bg); color: var(--yellow) }

/* ═══════════════════════════════════════════════════════════
   STEPPER ±
   ═══════════════════════════════════════════════════════════ */
.pm-btn { width: var(--icon-lg); height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--txt3); cursor: pointer; font-size: var(--fs-3xl); font-weight: var(--fw-bold); transition: all 0.15s; padding: 0; line-height: 1; font-family: system-ui, sans-serif }
.pm-btn:hover { background: var(--accent-bg-2); color: var(--blue) }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: var(--sp-12) var(--sp-20) }
.hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-10); padding-bottom: var(--sp-8); }
.hdr h1 { font-size: var(--fs-3xl); font-weight: var(--fw-light); letter-spacing: var(--ls-normal) }
.hdr .sub { font-size: var(--fs-base); color: var(--txt3); margin-top: var(--sp-2); letter-spacing: var(--ls-wider); text-transform: uppercase }
.hdr-btns { display: flex; gap: var(--sp-4); align-items: center }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--section-gap) }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--section-gap) }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--section-gap) }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--section-gap) }
@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 800px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr } }
.tabs { display: flex; gap: 0;  margin-bottom: var(--sp-12) }
.tab { flex: 1; padding: 14px var(--sp-10); border: none; background: transparent; color: var(--txt3); font-size: var(--fs-xl); font-weight: var(--fw-medium); cursor: pointer; transition: all var(--t-slow); border-bottom: 2px solid transparent }
.tab:hover { color: var(--txt2); background: rgba(0,0,0,0.02) }
.tab.on { color: var(--txt); border-bottom: 2px solid var(--txt) }
.pane { display: none }
.pane.on { display: block; animation: paneIn 0.28s cubic-bezier(0.4,0,0.2,1); }

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE
   ═══════════════════════════════════════════════════════════ */
.theme-toggle { display: flex; align-items: center; gap: var(--sp-4); padding: 5px var(--sp-6); background: var(--bg3); border-radius: var(--radius-pill); border: 1px solid var(--brd); height: 36px; box-sizing: border-box; transition: all var(--t-slow) }
.theme-toggle:hover { border-color: rgba(0,0,0,0.1) }
.theme-toggle-label { font-size: var(--fs-md); color: var(--txt3) }
.theme-switch { position: relative; width: 40px; height: 22px }
.theme-switch input { opacity: 0; width: 0; height: 0 }
.theme-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg4); border-radius: var(--radius-pill); transition: all var(--t-slow); border: 1px solid var(--brd) }
.theme-slider:before { position: absolute; content: ""; height: var(--sp-8); width: var(--sp-8); left: 3px; bottom: 2px; background: var(--txt3); border-radius: 50%; transition: all var(--t-slow); box-shadow: 0 1px 3px var(--black-30) }
.theme-switch input:checked + .theme-slider { background: var(--txt) }
.theme-switch input:checked + .theme-slider:before { transform: translateX(18px); background: var(--bg) }
.theme-icon { display: flex; align-items: center; justify-content: center; color: var(--txt3) }
.theme-icon svg { display: block }

/* ═══════════════════════════════════════════════════════════
   LOCK & ROW-LOCK ICONS
   ═══════════════════════════════════════════════════════════ */
.lock-icon { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin-left: var(--sp-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat }
.lock-icon.locked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4c542' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") }
.rlk-icon { display: inline-block; width: 14px; height: 14px; vertical-align: middle }
.rlk-icon.unlocked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E") center/contain no-repeat }
.rlk-icon.locked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4c542' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat }

/* ═══════════════════════════════════════════════════════════
   APT CELLS (section table)
   ═══════════════════════════════════════════════════════════ */
.sec-apts { display: flex; gap: var(--sp-2); align-items: center; justify-content: center }
.apt-v { padding: 3px 7px; border-radius: var(--radius-lg); font-size: var(--fs-md); font-weight: var(--fw-bold); min-width: var(--icon-lg); text-align: center; letter-spacing: -0.3px }
.apt-v.v1 { background: transparent; color: var(--type-a) }
.apt-v.v2 { background: var(--room-4k-bg); color: var(--room-4k) }
.apt-v.v3 { background: var(--room-1k-bg); color: var(--room-1k) }
.sec-apts-lk { display: flex; align-items: stretch; gap: 0; height: 100% }
.apt-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-width: 36px; padding: var(--sp-1) 1px; border: 2px solid var(--overlay-3); border-radius: var(--radius-sm); margin: var(--sp-1) }
.apt-cell:last-of-type { border-right: 1px solid var(--brd) }
.apt-cell .ac-lbl { font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0.3px; line-height: 1; margin-bottom: var(--sp-1); opacity: 0.7 }
.apt-cell input { width: 100%; max-width: 40px; background: transparent; border: none; padding: 0; text-align: center; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: inherit }
.apt-cell input:focus { outline: none }
.apt-cell input::-webkit-inner-spin-button { -webkit-appearance: none }
.apt-cell input[type=number] { -moz-appearance: textfield }
.apt-cell.c1 { background: var(--room-1k-bg); color: var(--room-1k) }
.apt-cell.c2 { background: var(--room-2k-bg); color: var(--room-2k) }
.apt-cell.c3 { background: var(--room-3k-bg); color: var(--room-3k) }
.apt-cell.c4 { background: var(--room-4k-bg); color: var(--room-4k) }
.apt-cell.cp { background: var(--room-p-bg); color: var(--room-p) }
.apt-cell-tot { display: flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 var(--sp-3); font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--txt); background: var(--bg3); border-radius: 0 var(--radius-lg) var(--radius-lg) 0 }
td.apt-td { padding: 0 !important; overflow: visible; position: relative }
td.apt-td .sec-apts { padding: var(--sp-5) var(--sp-4) }
td.apt-td.apt-num { padding: var(--sp-5) var(--sp-2) !important }
td.apt-td .sec-apts-lk { min-height: 42px }
.apt-big { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--txt3) }
.apt-detail-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center }
.apt-detail-tip {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bg2); border: 1px solid var(--brd); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 4px 16px var(--black-30); z-index: 50; min-width: 140px; margin-bottom: var(--sp-2) }
.apt-detail-wrap:hover .apt-detail-tip { display: flex; flex-direction: column; gap: var(--sp-1) }

/* ═══════════════════════════════════════════════════════════
   TOOLTIPS / HINTS
   ═══════════════════════════════════════════════════════════ */
.hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-8); height: var(--sp-8); border-radius: 50%;
  background: var(--bg3); color: var(--txt3); font-size: var(--fs-base);
  cursor: help; margin-left: var(--sp-2); position: relative }
.hint-icon:hover::after {
  content: attr(data-hint); position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); background: var(--bg2); color: var(--txt);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-sm);
  font-size: var(--fs-md); white-space: normal; max-width: 280px;
  z-index: 1000; box-shadow: var(--shadow); border: 1px solid var(--brd); margin-bottom: var(--sp-3) }

/* ═══════════════════════════════════════════════════════════
   VALIDATION
   ═══════════════════════════════════════════════════════════ */
.validation-msg { font-size: var(--fs-base); color: var(--red); margin-top: var(--sp-2) }
.validation-ok { color: var(--green) }

/* ═══════════════════════════════════════════════════════════
   DEVIATION CHART
   ═══════════════════════════════════════════════════════════ */
.deviation-chart { background: var(--bg3); border-radius: var(--radius-sm); padding: var(--sp-12); margin: var(--sp-12) 0; border: 1px solid var(--brd) }
.deviation-bar { display: flex; align-items: center; margin-bottom: var(--sp-6) }
.deviation-label { width: 100px; font-size: var(--fs-md); color: var(--txt2) }
.deviation-track { flex: 1; height: var(--bar-h-xl); background: var(--bg3); border-radius: var(--radius-md); position: relative; overflow: hidden; box-shadow: var(--shadow-inset) }
.deviation-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--txt3) }
.deviation-value { width: 80px; text-align: right; font-size: var(--fs-lg); font-weight: var(--fw-semi) }
.deviation-value.positive { color: var(--red) }
.deviation-value.negative { color: var(--green) }

/* ═══════════════════════════════════════════════════════════
   HISTORY
   ═══════════════════════════════════════════════════════════ */
.history-panel { background: var(--bg3); border-radius: var(--radius-sm); padding: var(--sp-12); margin-top: var(--sp-8); border: 1px solid var(--brd) }
.history-title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--txt3); margin-bottom: 14px; display: flex; align-items: center; gap: var(--sp-4); text-transform: uppercase; letter-spacing: var(--ls-wide) }
.history-list { max-height: 200px; overflow-y: auto }
.history-item { display: flex; align-items: center; padding: var(--sp-4); border-radius: var(--radius-lg); margin-bottom: var(--sp-2); background: var(--bg3); cursor: pointer; transition: background var(--t-base) }
.history-item:hover { background: var(--bg4) }
.history-item.active { border-left: 3px solid var(--blue) }
.history-time { font-size: var(--fs-base); color: var(--txt3); width: 60px }
.history-desc { flex: 1; font-size: var(--fs-md); color: var(--txt2) }
.history-diff { font-size: var(--fs-base); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-md) }
.history-diff.up { background: var(--danger-bg-light); color: var(--red) }
.history-diff.down { background: transparent; color: var(--green) }

/* ═══════════════════════════════════════════════════════════
   GAUGES
   ═══════════════════════════════════════════════════════════ */
.gauge-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6) }
@media (max-width: 900px) { .gauge-grid { grid-template-columns: repeat(3, 1fr) } }
.gauge-item { text-align: center }
.gauge { position: relative; width: var(--gauge-size); height: var(--gauge-size); margin: 0 auto var(--sp-4) }
.gauge svg { transform: rotate(-90deg) }
.gauge-bg { fill: none; stroke: var(--bg3); stroke-width: 8 }
.gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; stroke: var(--_accent, var(--txt3)) }
.gauge-fill.red { stroke: var(--red) }
.gauge-fill.green { stroke: var(--green) }
.gauge-fill.yellow { stroke: var(--yellow) }
.gauge-fill.blue { stroke: var(--blue) }
.gauge-fill.purple { stroke: var(--purple) }
.gauge-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-card); font-weight: var(--fw-bold) }
.gauge-lbl { font-size: var(--fs-md); color: var(--txt2); font-weight: var(--fw-medium) }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════ */
.stat-card { border: 1px solid var(--brd); padding: var(--sp-8) var(--sp-12); position: relative; overflow: hidden; transition: all var(--t-smooth); background: transparent }
.stat-card:hover { border-color: var(--accent-bg-4) }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--_accent, transparent) }
.stat-card.red::before { background: var(--red) }
.stat-card.green::before { background: var(--green) }
.stat-card.yellow::before { background: var(--yellow) }
.stat-card.blue::before { background: var(--blue) }
.stat-card.purple::before { background: var(--purple) }
.stat-lbl { font-size: var(--fs-md); color: var(--txt3); text-transform: uppercase; font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); margin-bottom: var(--sp-5) }
.stat-val { font-size: var(--fs-big); font-weight: var(--fw-semi); margin-bottom: var(--sp-2); letter-spacing: -0.5px }
.stat-sub { font-size: var(--fs-md); color: var(--txt3) }

/* ═══════════════════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════════════════ */
.progress-item { margin-bottom: var(--sp-8) }
.progress-item:last-child { margin-bottom: 0 }
.progress-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4) }
.progress-lbl { font-size: var(--fs-lg); color: var(--txt2); font-weight: var(--fw-medium) }
.progress-val { font-size: var(--fs-lg); color: var(--txt); font-weight: var(--fw-semi) }
.progress-bar { background: var(--overlay-1) }
.progress-fill { background: var(--_accent, var(--blue)) }
.progress-fill.red { background: var(--red) }
.progress-fill.green { background: var(--green) }
.progress-fill.yellow { background: var(--yellow) }
.progress-fill.blue { background: var(--blue) }
.progress-fill.purple { background: var(--purple) }

/* ═══════════════════════════════════════════════════════════
   FORM / ТЭП PANEL
   ═══════════════════════════════════════════════════════════ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6) }
.form-group { margin-bottom: 0 }
.form-label { display: block; font-size: var(--fs-base); color: var(--txt3); margin-bottom: var(--sp-3); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-wider) }

.tep-panel { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); column-gap: var(--sp-8); row-gap: 0; margin-bottom: var(--sp-8) }
.tep-panel-single { margin-bottom: var(--sp-8) }
.tep-panel-single .tep-panel-card { display: block }
.tep-panel-card { grid-row: span 4; display: grid; grid-template-rows: subgrid; border: 1px solid var(--brd); border-radius: var(--radius-lg); padding: var(--card-padding); transition: all var(--t-smooth) }
.tep-panel-header { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-8); padding-bottom: var(--sp-6); }
.tep-panel-icon { width: var(--icon-xl); height: var(--icon-xl); display: flex; align-items: center; justify-content: center; color: var(--txt2) }
.tep-panel-title { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--txt3); letter-spacing: var(--ls-wider); text-transform: uppercase }
.tep-panel-desc { font-size: var(--fs-md); line-height: 1.5; color: var(--txt3); margin-bottom: 14px }
.tep-panel-formulas { display: flex; gap: var(--sp-8); margin-top: 14px; padding-top: var(--sp-6); }
.tep-panel-formulas span { font-size: var(--fs-base); color: var(--txt3) }
.tep-panel-formulas.green span { color: rgba(80,205,137,0.7) }
.tep-panel-card.manual-mode .tep-panel-formulas { opacity: 0.25; text-decoration: line-through }
.tep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); align-items: end }
.tep-grid.cols-3 { grid-template-columns: repeat(3, 1fr) }
.tep-box { display: flex; flex-direction: column; gap: var(--sp-3) }
.tep-box-lbl { font-size: var(--fs-base); color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: var(--sp-8); line-height: var(--sp-8); letter-spacing: var(--ls-tight) }
.tep-box-value-wrap .tep-box-input { border: 1px solid transparent; background: var(--accent-bg-0); cursor: default }
.tep-box-value-wrap .tep-box-input.green { color: var(--green); font-weight: var(--fw-medium) }
.tep-box-input.green:focus { border-color: var(--green) }

/* TEP auto-calc toggle */
.tep-calc-toggle { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; cursor: pointer; user-select: none }
.tep-calc-toggle input { display: none }
.tep-calc-slider { position: relative; width: var(--sp-16); height: var(--sp-8); background: var(--white-10); border-radius: var(--sp-4); transition: background var(--t-base) }
.tep-calc-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: var(--sp-6); height: var(--sp-6); background: var(--txt3); border-radius: 50%; transition: transform var(--t-base), background var(--t-base) }
.tep-calc-toggle input:checked + .tep-calc-slider { background: transparent }
.tep-calc-toggle input:checked + .tep-calc-slider::after { transform: translateX(var(--sp-8)); background: var(--blue) }
.tep-calc-label { font-weight: var(--fw-medium); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt3); transition: color var(--t-base) }
.tep-calc-toggle input:checked ~ .tep-calc-label { color: var(--blue) }

/* ═══════════════════════════════════════════════════════════
   ZONE SELECTOR
   ═══════════════════════════════════════════════════════════ */
.zone-btns { display: flex; gap: var(--sp-4); margin-top: var(--sp-8) }
.zone-btn { flex: 1; padding: 14px; background: transparent; border: 1px solid var(--brd); border-radius: 0; color: var(--txt2); font-size: var(--fs-lg); text-align: center; cursor: pointer; transition: all var(--t-base) }
.zone-btn:hover { border-color: var(--blue) }
.zone-btn.on { background: var(--accent-bg-3); border-color: var(--blue); color: var(--blue) }
.zone-btn b { display: block; font-size: var(--fs-2xl); color: var(--txt); margin-bottom: var(--sp-1) }
.zone-btn.on b { color: var(--blue) }

/* ═══════════════════════════════════════════════════════════
   AVERAGE TYPE CARDS + TARGET LIST
   ═══════════════════════════════════════════════════════════ */
.avg-type-card { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6) 14px; border: 1px solid var(--brd); border-left: 2px solid }
.avg-type-card.ta { border-color: var(--type-a) }
.avg-type-card.tb { border-color: var(--type-b) }
.avg-type-lbl { font-size: var(--fs-lg); color: var(--txt2); font-weight: var(--fw-medium) }
.avg-type-card.ta .avg-type-lbl { color: var(--type-a) }
.avg-type-card.tb .avg-type-lbl { color: var(--type-b) }
.avg-type-val { font-size: var(--fs-heading); font-weight: var(--fw-bold); margin-left: auto }
.avg-type-unit { font-size: var(--fs-lg); color: var(--txt3) }
.target-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-5) 0;  color: var(--txt2) }
.target-val { font-size: var(--fs-2xl); font-weight: var(--fw-semi) }

/* ═══════════════════════════════════════════════════════════
   PROPORTION SLIDER + BARS
   ═══════════════════════════════════════════════════════════ */
.prop-slider-wrap { background: transparent; border: 1px solid var(--brd); padding: var(--sp-8) }
.prop-slider-labels { display: flex; justify-content: space-between; margin-bottom: var(--sp-6) }
.prop-slider-lbl { text-align: center }
.prop-slider-lbl.ta { text-align: left }
.prop-slider-lbl.tb { text-align: right }
.prop-slider-type { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semi) }
.prop-slider-lbl.ta .prop-slider-type { color: var(--type-a) }
.prop-slider-lbl.tb .prop-slider-type { color: var(--type-b) }
.prop-slider-sub { font-size: var(--fs-base); color: var(--txt3) }
.prop-slider-row { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-5) }
.prop-slider-val { font-size: var(--fs-stat); font-weight: var(--fw-bold); min-width: 55px }
.prop-slider-val.ta { color: var(--type-a); text-align: left }
.prop-slider-val.tb { color: var(--type-b); text-align: right }
.prop-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: var(--gray-10); border-radius: 0; outline: none }
.prop-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: linear-gradient(135deg, var(--purple), var(--green)); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px var(--black-30) }
.prop-slider::-moz-range-thumb { width: 22px; height: 22px; background: linear-gradient(135deg, var(--purple), var(--green)); border-radius: 50%; cursor: pointer; border: none }
.prop-slider-bar-a { background: linear-gradient(90deg, var(--purple), #9b6dff); transition: width var(--t-base) }
.prop-slider-bar-b { background: linear-gradient(90deg, #3dd998, var(--green)); transition: width var(--t-base) }

/* Prop cards */
.prop-card { border: 1px solid var(--brd); padding: 14px; text-align: center; border-left: 2px solid }
.prop-card.ta { border-color: var(--type-a) }
.prop-card.tb { border-color: var(--type-b) }
.prop-card.ta .prop-title { color: var(--type-a) }
.prop-card.tb .prop-title { color: var(--type-b) }
.prop-sub { font-size: var(--fs-base); color: var(--txt3); margin-bottom: var(--sp-5) }
.prop-input { width: 80px; padding: var(--sp-5); background: var(--bg); border: 1px solid var(--brd); border-radius: var(--radius-sm); color: var(--txt); font-size: var(--fs-stat); font-weight: var(--fw-bold); text-align: center }
.prop-input:focus { outline: none; border-color: var(--blue) }
.prop-val.ta { background: transparent; color: var(--green) }
.prop-val.tb { background: transparent; color: var(--red) }

/* Prop bar visual (tall pills) */
.prop-bars-section { display: flex; gap: var(--sp-12); margin-bottom: var(--sp-12); align-items: flex-start; flex-wrap: wrap }
.prop-bars-desc { flex: 1; font-size: var(--fs-md); line-height: 1.7; color: var(--txt2) }
.prop-bars-desc.left { text-align: left; padding-right: var(--sp-4) }
.prop-bars-desc.right { text-align: left; padding-left: var(--sp-4); padding-top: var(--sp-12) }
.prop-bars-desc-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.5px }
.prop-bars-subdesc { color: var(--txt2); margin-bottom: var(--sp-4) }
.prop-bars-desc p { margin: 0 0 var(--sp-4) }
.prop-bars-desc p:last-child { margin-bottom: 0 }
.prop-bars-center { display: flex; flex-direction: column; align-items: center }
.prop-bars-container { display: flex; gap: var(--sp-10) }
.prop-bar-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5) }
.prop-bar-letter-top { font-size: var(--fs-letter); font-weight: var(--fw-black) }
.prop-bar-card.type-a .prop-bar-letter-top { color: var(--type-a) }
.prop-bar-card.type-b .prop-bar-letter-top { color: var(--room-4k) }
.prop-bar-input-wrap { padding: var(--sp-4) 0; border-radius: var(--radius-pill); border: 2px solid; width: var(--bar-pill-w); display: flex; justify-content: center }
.prop-bar-input-wrap.type-a { background: transparent; border-color: rgba(80,205,137,0.3) }
.prop-bar-input-wrap.type-b { background: transparent; border-color: rgba(232,90,107,0.3) }
.prop-bar-input { width: 100%; padding: 0; background: transparent; border: none; font-size: var(--fs-heading); font-weight: var(--fw-bold); text-align: center; -moz-appearance: textfield }
.prop-bar-input::-webkit-outer-spin-button,
.prop-bar-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.prop-bar-card.type-a .prop-bar-input { color: var(--type-a) }
.prop-bar-card.type-b .prop-bar-input { color: var(--room-4k) }
.prop-bar-input:focus { outline: none }
.prop-bar-wrap { width: var(--bar-pill-w); height: var(--bar-pill-h); border-radius: var(--radius-pill); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; box-shadow: var(--shadow-inset) }
.prop-bar-card.type-a .prop-bar-wrap { background: transparent }
.prop-bar-card.type-b .prop-bar-wrap { background: transparent }
.prop-bar-card.type-a .prop-bar-fill { background: var(--type-a) }
.prop-bar-card.type-b .prop-bar-fill { background: var(--room-4k) }
.prop-bar-letter { font-size: var(--fs-jumbo); font-weight: var(--fw-black); color: #fff; text-shadow: 0 1px 3px var(--black-30) }

/* ═══════════════════════════════════════════════════════════
   AREAS GRID (CSS Grid layout)
   ═══════════════════════════════════════════════════════════ */
.areas-grid { border: 1px solid var(--brd); overflow: hidden; min-width: 0 }
.areas-header { display: grid; grid-template-columns: 56px repeat(6, minmax(70px, 1fr)); background: transparent;  text-align: center; font-size: var(--fs-md); font-weight: var(--fw-semi) }
.areas-room.r1 { color: var(--room-1k) }
.areas-room.r2 { color: var(--room-2k) }
.areas-room.r3 { color: var(--room-3k) }
.areas-room.r4 { color: var(--room-4k) }
.areas-room.rp { color: var(--room-p) }
.areas-room.ravg { color: var(--cyan); background: var(--cyan-bg) }
.areas-row { display: grid; grid-template-columns: 56px repeat(6, minmax(70px, 1fr));  font-size: var(--fs-md); font-weight: var(--fw-semi) }
.areas-row.ta .areas-type { color: var(--type-a) }
.areas-row.tb .areas-type { color: var(--type-b) }
.areas-cell { padding: var(--sp-4) var(--sp-2); display: flex; align-items: center; justify-content: center; gap: var(--sp-1) }
.areas-cell.nd { color: var(--txt3); font-size: var(--fs-2xl) }
.areas-cell-combined { padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2) }
.areas-cell-combined .minmax { display: flex; align-items: center; gap: var(--sp-1) }
.areas-sep { color: var(--txt3); font-size: var(--fs-base) }
.areas-val { padding: var(--sp-4) var(--sp-2); text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-semi); color: var(--txt); display: flex; align-items: center; justify-content: center }
.areas-val.nd { color: var(--txt3) }
.areas-avg { padding: var(--sp-4) var(--sp-2); text-align: center; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--cyan); background: var(--cyan-bg); display: flex; align-items: center; justify-content: center }
.avg-grid .areas-header, .avg-grid .areas-row { grid-template-columns: 56px repeat(7, minmax(58px, 1fr)) }
.combined .areas-header, .combined .areas-row { grid-template-columns: 56px repeat(6, minmax(70px, 1fr)) }

/* ═══════════════════════════════════════════════════════════
   STACKED BARS + VERTICAL BARS SECTION
   ═══════════════════════════════════════════════════════════ */
.stacked-section { margin-top: var(--sp-10) }
.stacked-row { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-5) }
.stacked-lbl { width: 50px; font-size: var(--fs-md); color: var(--txt2); font-weight: var(--fw-medium) }
.stacked-legend { display: flex; gap: var(--sp-8); margin-top: var(--sp-6) }
.stacked-legend-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); color: var(--txt3) }
.stacked-legend-dot { width: var(--sp-5); height: var(--sp-5); border-radius: 3px }
.vertical-bars-section { margin: var(--sp-8) 0 }
.section-header { margin-bottom: var(--sp-8) }
.section-title-row { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4) }
.section-icon { width: var(--icon-xl); height: var(--icon-xl); display: flex; align-items: center; justify-content: center; background: var(--type-t-bg); border-radius: var(--radius-sm); color: var(--type-t) }
.section-desc { font-size: var(--fs-md); color: var(--txt3); line-height: 1.6; max-width: 700px }
.vertical-bars-grid { display: flex; gap: var(--sp-4); justify-content: space-between; align-items: flex-end; min-width: 700px }
.bars-block { background: var(--bg4); border-radius: var(--radius-pill); padding: var(--sp-8); border: 1px solid var(--brd); overflow-x: auto }
.bars-divider { width: 1px; height: 140px; background: var(--brd); align-self: center; flex-shrink: 0 }
.vbar-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-4) }
.vbar-title.r1 { color: var(--room-1k) }
.vbar-title.r2 { color: var(--room-2k) }
.vbar-title.r3 { color: var(--room-3k) }
.vbar-title.r4 { color: var(--room-4k) }
.vbar-title.rp { color: var(--room-p) }

/* === HC Validation table: no horizontal lines, vertical dividers === */
#hcValidation .dash-tbl td,
#hcValidation .dash-tbl th {
    border-bottom: none !important;
    border-right: 1px solid var(--brd);
}
#hcValidation .dash-tbl th:last-child,
#hcValidation .dash-tbl td:last-child { border-right: none; }
#hcValidation .dash-tbl thead tr { border-bottom: none; }
#hcValidation .hc-td-col .dash-sigma { color: var(--txt) !important; }

/* === ANIMATIONS === */
@keyframes cellFlash {
    0%   { background: transparent; }
    30%  { background: transparent; }
    100% { background: transparent; }
}
.cell-flash { animation: cellFlash 0.6s ease-out forwards !important; }

/* === SLIDE-IN / FADE-IN for panels and cards === */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tab content fade-in */
.tab-content.active { animation: slideInUp 0.3s cubic-bezier(0.4,0,0.2,1) both; }

/* tep-panel-card — NO load animation (breaks tab switching) */
.tep-panel-card { }

#adContent table { animation: slideInDown 0.25s cubic-bezier(0.4,0,0.2,1); }
#secCard { }
#hcValidation table { animation: slideInDown 0.2s cubic-bezier(0.4,0,0.2,1); }

.ft-grid .tep-panel-card { animation: none; }

/* === Panel & sigma animations === */
@keyframes paneIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sigFlash {
    0%   { opacity: 1; }
    30%  { opacity: 0.4; color: var(--blue); }
    100% { opacity: 1; }
}
.pane-enter { animation: paneIn 0.28s cubic-bezier(0.4,0,0.2,1); }
.sig-flash  { animation: sigFlash 0.4s ease-out !important; }

/* === Global panel rounding === */
.history-panel,
.mkt-card,
.queue-settings .tep-panel-card,
.ft-card,
.hcValidation,
#aptDetailPanel,
.tep-panel-single > .tep-panel-card,
.res-sections,
.dash-section { border-radius: var(--radius-lg) !important; }

.tbl-wrap table { border-radius: 0; }