:root {
  --bg: #080808;
  --bg2: #111111;
  --card: #151515;
  --card2: #1c1717;
  --border: #2c2424;
  --text: #cccccc;
  --muted: #9a9a9a;
  --red: #CC0000;
  --red2: #FF1A1A;
  --red-bright: #FF3030;
  --accent: #CC0000;
  --green: #34d36b;
  --green-bg: rgba(52, 211, 107, .14);
  --neg: #FF1A1A;
  --neg-bg: rgba(255, 26, 26, .14);
  --gold: #f9cf48;
  --amber: #F5A623;
  --shadow: 0 6px 26px rgba(0, 0, 0, .55);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Oswald', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, .display { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-weight: 400; letter-spacing: 1.5px; }

/* ── Login ───────────────────────────────────────── */
.login-body { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 38px 30px; width: 100%; max-width: 360px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px; text-align: center;
  position: relative; overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red2));
}
.login-logo { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 3px; color: #fff; }
.login-sub { color: var(--muted); margin: -8px 0 6px; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; }
.login-card input {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  border-radius: 3px; padding: 13px 15px; font-size: 16px; outline: none; font-family: 'Oswald', sans-serif;
}
.login-card input:focus { border-color: var(--red2); }
.login-card button {
  background: var(--red); color: #fff; border: 0;
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px;
  padding: 12px; cursor: pointer;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: transform .12s ease, background .2s;
}
.login-card button:hover { background: var(--red2); }
.login-card button:active { transform: scale(.96); }
.login-card button:disabled { opacity: .6; cursor: default; }
.login-msg { color: var(--red2); min-height: 18px; font-size: 14px; }

/* ── Topbar ──────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  gap: 12px; padding: 12px 16px; background: rgba(8, 8, 8, .9);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.brand { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 2.5px; white-space: nowrap; color: #fff; text-decoration: none; }
.b-d { color: var(--red); }
.b-s { color: var(--amber); }
.topbar .spacer { flex: 1 1 auto; }
.refresh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); transition: background .3s; }
.refresh-dot.live { background: var(--green); box-shadow: 0 0 10px var(--green); }
.meta-time { color: var(--muted); font-size: 12px; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 3px; padding: 7px 14px; cursor: pointer; font-size: 13px;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
}
.btn-ghost:hover { color: #fff; border-color: var(--red2); }
#logoutBtn { background: var(--red); border-color: var(--red); color: #fff; }
#logoutBtn:hover { background: var(--red2); border-color: var(--red2); color: #fff; }
/* en móvil: Salir a la izquierda del grupo, Actualizado a la derecha (intercambiados) */
@media (max-width: 820px) {
  #logoutBtn { order: 1; }
  #metaTime { order: 2; }
}

/* segmented toggle */
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 3px; }
.seg button {
  background: transparent; border: 0; color: var(--muted); padding: 7px 16px; border-radius: 2px;
  cursor: pointer; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px;
}
.seg button.active { background: var(--red); color: #fff; }

/* ── Tabs ────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; padding: 0 16px; max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.tabs button {
  background: var(--card); border: 1px solid var(--border); border-top: 0; color: var(--muted);
  padding: 10px 20px; border-radius: 0 0 4px 4px; cursor: pointer;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.5px;
}
.tabs button.active { background: var(--card2); color: #fff; box-shadow: inset 0 -3px 0 var(--amber); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Layout ──────────────────────────────────────── */
.wrap { padding: 16px; max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
@media (max-width: 820px) {
  .col-8, .col-7, .col-6, .col-5, .col-4 { grid-column: span 12; }
}

.section-title {
  grid-column: span 12; font-family: 'Bebas Neue', sans-serif; font-size: 25px; letter-spacing: 2.5px;
  color: var(--text); margin: 12px 0; text-align: center;
  border: 1px solid var(--border); border-radius: 4px; padding: 11px 14px; background: transparent;
  position: relative;
}

/* chispa que recorre el borde */
@property --spark { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.section-title::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--spark),
    transparent 70deg, var(--amber) 82deg, #fff 90deg, var(--amber) 98deg, transparent 110deg,
    transparent 250deg, var(--amber) 262deg, #fff 270deg, var(--amber) 278deg, transparent 290deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: spark-run 3.5s linear infinite;
}
@keyframes spark-run { to { --spark: 360deg; } }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 14px; box-shadow: var(--shadow); min-width: 0;
}
.card.chart-center { display: flex; flex-direction: column; }
.card.chart-center .chart-box { margin-top: auto; margin-bottom: auto; }
.card h3 {
  margin: 0 0 10px; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1px; color: #fff;
}
.card .hint { color: var(--muted); font-size: 12px; font-family: 'Oswald', sans-serif; letter-spacing: 0; text-transform: none; }
.card .hint b { color: var(--red2); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.kpi { background: #181818; border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; border-left: 3px solid var(--amber); }
.kpi .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.kpi .val { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 1px; margin-top: 2px; }
.kpi .val.pos { color: var(--green); }
.kpi .val.neg { color: var(--neg); }

/* tables */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 400; }
th, td { padding: 9px 11px; text-align: center; white-space: nowrap; }
thead th {
  color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card);
}
tbody tr { border-bottom: 1px solid rgba(44,36,36,.6); }
tbody tr:last-child { border-bottom: 0; }
tr.row-pos { background: var(--green-bg); }
tr.row-neg { background: var(--neg-bg); }
tr.selectable { cursor: pointer; }
/* hover: dorado claro por defecto (ROI por fuente) */
tr.selectable:hover { background: rgba(245,166,35,.16); }
/* si la fila lleva signo (ROI por edge / patrón) el hover sigue su color */
tr.row-pos.selectable:hover { background: rgba(52,211,107,.26); }
tr.row-neg.selectable:hover { background: rgba(255,26,26,.24); }
/* borde de selección: dorado por defecto, rojo/verde si la fila lleva signo */
tr.selected { outline: 2px solid var(--amber); outline-offset: -2px; }
tr.row-pos.selected { outline-color: var(--green); }
tr.row-neg.selected { outline-color: var(--neg); }
.pos { color: var(--green); }
.neg { color: var(--neg); }
.muted { color: var(--muted); }

/* barra horizontal por fila (tabla + gráfico fusionados) */
td.barcell { width: 42%; min-width: 130px; }
th.th-center { text-align: center; }
.dbar { position: relative; height: 16px; width: 100%; background: rgba(255,255,255,.07); border-radius: 3px; }
.dbar::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.dbar-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }

/* paginador de tablas */
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.pg-info { color: var(--muted); font-size: 12px; letter-spacing: .5px; }
.pg-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 3px; padding: 6px 14px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
}
.pg-btn:hover:not(:disabled) { color: #fff; border-color: var(--amber); }
.pg-btn:disabled { opacity: .35; cursor: default; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.chip {
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 3px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.chip.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ── semáforo de fiabilidad ── */
.conf-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 2px; padding: 9px 12px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 13px;
}
.conf-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--muted); }
.conf-banner .conf-verdict { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 12.5px; }
.conf-banner .conf-detail { color: var(--muted); font-size: 12.5px; }
.conf-pos   { border-color: var(--green); background: var(--green-bg); }
.conf-pos   .conf-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.conf-pos   .conf-verdict { color: var(--green); }
.conf-neg   { border-color: var(--neg); background: var(--neg-bg); }
.conf-neg   .conf-dot { background: var(--neg); box-shadow: 0 0 8px var(--neg); }
.conf-neg   .conf-verdict { color: var(--neg); }
.conf-incon { border-color: #c9a227; background: rgba(201,162,39,.12); }
.conf-incon .conf-dot { background: #e3b829; box-shadow: 0 0 8px #e3b829; }
.conf-incon .conf-verdict { color: #e3b829; }
.conf-none  { border-style: dashed; }
.conf-none  .conf-verdict { color: var(--muted); }

/* ── panel de filtros inline (acordeón) ── */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-head h3 { margin: 0; }
/* cruce competición × mercado */
.x-minrow { margin: 10px 0 12px; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.x-minrow select { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 3px; padding: 4px 8px; font-size: 12.5px; }
.heat-scroll { overflow-x: auto; }
table.heat { border-collapse: collapse; font-size: 12px; }
table.heat th, table.heat td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; white-space: nowrap; }
table.heat thead th { background: var(--bg2); color: var(--muted); font-weight: 600; position: sticky; top: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.heat-corner { background: var(--bg2); }
.heat-row { background: var(--bg2); color: var(--text); text-align: left !important; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; }
.heat-cell { color: #fff; font-weight: 700; position: relative; }
.heat-cell .heat-roi { display: block; }
.heat-cell .heat-n { display: block; font-size: 10px; font-weight: 400; opacity: .75; }
.heat-empty { color: #555; }
/* punto de fiabilidad en la esquina de cada celda */
.heat-fdot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: none; border: 0; outline: 0; }
.heat-fdot.heat-incon { background: #e3b829; }
.heat-fdot.heat-none { background: #fff; }
.x-legend { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: 6px; color: var(--muted); }
.leg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin: 0 4px 0 10px; }
.leg-dot.l-incon { background: #e3b829; }
.leg-dot.l-none { background: #fff; }
.x-legend-note { margin-left: 8px; }
.flt-toggle {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  border-radius: 3px; padding: 6px 14px; cursor: pointer; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center;
}
.flt-toggle:hover { border-color: var(--red2); color: #fff; }
.flt-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 6px;
  background: var(--red); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 16px;
}
.filter-panel {
  position: fixed; top: 58px; right: 14px; z-index: 60;
  width: min(420px, calc(100vw - 28px)); max-height: 78vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2); padding: 4px 14px 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.filter-panel[hidden] { display: none; }
.flt-panel-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.flt-panel-note { color: var(--muted); font-size: 12.5px; }
/* bolita de estado en el botón Filtros */
.flt-status { display: inline-flex; align-items: center; margin-right: 7px; }
.flt-status .conf-dot { width: 8px; height: 8px; }
/* estado corto dentro del panel: bolita + "304 / 650" */
.conf-mini { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--muted); }
.conf-mini.conf-pos { color: var(--green); }
.conf-mini.conf-neg { color: var(--neg); }
.conf-mini.conf-incon { color: #e3b829; }
/* detalle legible: beneficio medio, margen y rango */
.conf-detail { padding: 8px 2px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.conf-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--muted); }
.conf-row b { color: var(--fg, #e8e8e8); font-weight: 700; }
.conf-note { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.flt-acc { border-bottom: 1px solid var(--border); }
.flt-acc:last-child { border-bottom: 0; }
.flt-acc-head {
  width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  padding: 11px 2px; font-size: 14px; font-weight: 600;
}
.flt-acc-head:hover { color: #fff; }
.flt-acc-caret { color: var(--muted); font-size: 11px; width: 12px; }
.flt-acc-title { text-transform: uppercase; letter-spacing: .6px; font-size: 13px; }
.flt-acc-meta { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: auto; }
.flt-acc-meta b.neg { color: var(--neg); font-weight: 700; }
.flt-acc-body { display: none; flex-wrap: wrap; gap: 7px; padding: 2px 2px 14px; }
.flt-acc.open .flt-acc-body { display: flex; }
.flt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: 13px; font-weight: 600;
  opacity: .55; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3);
}
.flt-chip .flt-n { font-size: 11px; color: var(--muted); font-weight: 400; }
.flt-chip.on {
  background: var(--green-bg); border-color: var(--green); color: #d8ffe6;
  opacity: 1; text-decoration: none;
}
.flt-chip.on .flt-n { color: #9fe3b8; }
.flt-chip:hover { border-color: var(--red2); }
.af-clear {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 3px; padding: 6px 12px; cursor: pointer; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.af-clear:hover:not(:disabled) { color: #fff; border-color: var(--red2); }
.af-clear:disabled { opacity: .4; cursor: default; }
.af-empty { color: var(--muted); font-size: 12.5px; font-style: italic; }
/* rango de edge */
.edge-body { flex-direction: column; align-items: stretch; gap: 9px; }
.edge-range { display: flex; align-items: center; gap: 9px; }
.edge-inp {
  width: 86px; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 7px 9px; font-size: 14px; font-weight: 600; text-align: center;
}
.edge-inp:focus { outline: none; border-color: var(--red2); }
.edge-dash { color: var(--muted); }
.edge-del {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 4px; width: 28px; height: 30px; cursor: pointer; font-size: 12px;
}
.edge-del:hover { color: var(--neg); border-color: var(--neg); }
.edge-add {
  align-self: flex-start; background: transparent; border: 1px dashed var(--border); color: var(--muted);
  border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.edge-add:hover { color: #fff; border-color: var(--red2); }

/* progress */
.progress-wrap { background: var(--bg2); border-radius: 3px; height: 16px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--red), var(--red2)); transition: width .5s ease; }
.progress-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 13px; }
.progress-meta b { color: #fff; }

/* chart canvas */
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 300px; }
@media (max-width: 820px) { .chart-box, .chart-box.tall { height: 230px; } }

.empty { color: var(--muted); font-size: 13px; padding: 18px 4px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }
.loading-overlay {
  position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8,8,8,.65);
  z-index: 50; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px;
  color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.loading-overlay.show { opacity: 1; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.badge.win { background: var(--green-bg); color: var(--green); }
.badge.loss { background: var(--neg-bg); color: var(--neg); }

/* ── Macros del panel de filtros (Cluster + presets de liga): DORADO, toggle ── */
.flt-macro { background: transparent; border-color: rgba(245,166,35,.40); color: #e6c07a; }
.flt-macro .flt-n { color: #c79a4e; }
.flt-macro:hover { border-color: #F5A623; }
.flt-macro.on { background: rgba(245,166,35,.16); border-color: #F5A623; color: #ffe6b3; box-shadow: 0 0 8px rgba(245,166,35,.28); }
.flt-macro.on .flt-n { color: #ffd98a; }

/* ── Ligas por grupos (Punto 5) ── */
.grp { border-bottom: 1px solid #241f1f; }
.grp:last-child { border-bottom: none; }
.grp-head { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.grp-caret { background: none; border: none; color: #9a9a9a; cursor: pointer; font-size: 13px; width: 22px; padding: 6px 4px; border-radius: 4px; }
.grp-caret:hover { color: #F5A623; background: rgba(245,166,35,.08); }
.grp-toggle { flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; }
.grp-toggle.partial { border-style: dashed; }
.grp-dot { font-size: 11px; line-height: 1; }
.grp-dot.grp-all { color: #F5A623; }
.grp-dot.grp-some { color: #e6c07a; }
.grp-dot.grp-none { color: #6a6a6a; }
.grp-count { margin-left: auto; font-size: 11px; color: #9a9a9a; font-weight: 400; }
.grp-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px 22px; }

/* ── Selector de línea inline en buckets O/U (Punto 6) ── */
.mkt-wrap { display: inline-flex; align-items: center; gap: 4px; }
.mkt-line { background: #151515; color: #cdb98a; border: 1px solid rgba(245,166,35,.35); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; cursor: pointer; }
.mkt-line:disabled { opacity: .4; cursor: not-allowed; border-color: #2c2424; color: #6a6a6a; }
.mkt-line:focus { outline: none; border-color: #F5A623; }

/* ── Filas de rango con bracket-toggles inclusivo/exclusivo (Edge/Cuota/Fecha) ── */
.rng-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rng-inp { width: 78px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 7px 8px; font-size: 14px; font-weight: 600; text-align: center; }
.rng-inp:focus { outline: none; border-color: var(--red2); }
.rng-dash { color: var(--muted); }
.brk { width: 26px; height: 34px; flex: none; background: transparent; cursor: pointer; border: 1px solid rgba(245,166,35,.4); border-radius: 5px; font-size: 18px; font-weight: 700; line-height: 1; color: #e6c07a; }
.brk-inc { background: rgba(245,166,35,.16); border-color: #F5A623; color: #ffe6b3; }
.brk-exc { background: transparent; border-color: rgba(245,166,35,.4); color: #cdb98a; }
.brk-dis { opacity: .35; cursor: default; border-color: #2c2424; color: #6a6a6a; }
.brk:not(:disabled):hover { border-color: #F5A623; }