.color-rules-top { padding: 2px 0 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.filters { grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 9px; }
.filter { cursor: pointer; padding: 10px; border: 2px solid var(--line); border-radius: 9px; transition: .12s; }
.filter.active-paint { outline: 3px solid white; outline-offset: 1px; }
.filter label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.filter.grön { background: #163d2e; color: #9cf2c8; }
.filter.gul { background: #4b401a; color: #ffe393; }
.filter.röd { background: #4d2029; color: #ffacb8; }
.filter.lila { background: #362650; color: #d7c0ff; }
.filter.rosa { background: #54263f; color: #ffc3dc; }
.filter.blå { background: #1b3f56; color: #a8e1ff; }
.paint-reset { cursor: pointer; border: 2px solid #31516f; background: #0a1929; color: #b8cae0; border-radius: 9px; padding: 8px; font: 700 11px Manrope; }
.paint-reset.active { outline: 3px solid white; outline-offset: 1px; }
.system-panel { margin-top: 18px; }
@media (max-width: 900px) { .filters { grid-template-columns: repeat(2, 1fr); } }

/* Compact desktop layout */
@media (min-width: 901px) {
  .topbar { padding: 18px 28px 14px; }
  .topbar h1 { font-size: 25px; }
  main { padding-bottom: 24px; }
  .intro { padding: 11px 2px; font-size: 13px; }
  .panel { padding: 15px; }
  .section-title { margin-bottom: 11px; }
  .color-rules-top { padding-bottom: 13px; margin-bottom: 14px; }
  .filters { gap: 6px; }
  .filter, .paint-reset { padding: 7px; }
  .filter label { margin-bottom: 5px; font-size: 11px; }
  .range-inputs input { padding: 4px; }
  .paint-table td { padding: 4px; }
  .outcome-tile { min-height: 54px; padding: 6px; }
  .outcome-tile b { display: none; }
  .outcome-tile .odds-value { margin-top: 0; font-size: 14px; }
  .outcome-tile small { margin-top: 2px; }
  .color-labels { top: 4px; bottom: 4px; right: 4px; width: 12px; }
  .tile-editors { margin-top: 3px; }
  .tile-editors input { padding: 3px; }
  .system-panel { margin-top: 12px; }
  .metrics { margin: 12px 0; gap: 8px; }
  .metric { padding: 10px; }
  .metric strong { font-size: 17px; margin-top: 3px; }
}

.outcome-tile { padding-bottom: 6px; }
.outcome-tile small { display: inline-block; margin-top: 4px; font-size: 11px; }
.value-edge { position: static; display: inline-block; margin-left: 6px; font: 700 10px 'DM Mono', monospace; letter-spacing: -.2px; }
.outcome-tile.chosen .odds-value { color: var(--accent); }
.outcome-tile:not(.chosen) { color: #9eafc0; }
.outcome-tile:not(.chosen) .odds-value { color: #aebdca; }
.public-share { color: #8294a6; font-weight: 600; }
.outcome-tile.chosen .public-share { color: #78a99b; }
.row-share { position: absolute; z-index: 2; top: 50%; right: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #3c5872; border-radius: 50%; background: rgba(7,17,31,.72); color: #a9bacb; font: 700 10px 'DM Mono', monospace; letter-spacing: -.7px; }
.outcome-tile.chosen .row-share { border-color: rgba(120,169,155,.72); color: #b8d7cb; background: rgba(12,37,40,.72); }
.color-labels { top: 0; right: 0; bottom: 0; width: 40%; gap: 0; margin: 0; border-radius: 0 8px 8px 0; overflow: hidden; pointer-events: none; }
.color-labels em { border-radius: 0; }
.color-labels-left { right: auto; left: 0; border-radius: 8px 0 0 8px; }
.color-labels .grön { background: linear-gradient(to left, #47d48e 0%, rgba(71, 212, 142, 0) 100%); }
.color-labels .gul { background: linear-gradient(to left, #ffd65a 0%, rgba(255, 214, 90, 0) 100%); }
.color-labels .röd { background: linear-gradient(to left, #ff5d72 0%, rgba(255, 93, 114, 0) 100%); }
.color-labels .lila { background: linear-gradient(to left, #b48cff 0%, rgba(180, 140, 255, 0) 100%); }
.color-labels .rosa { background: linear-gradient(to left, #ff8ebe 0%, rgba(255, 142, 190, 0) 100%); }
.color-labels .blå { background: linear-gradient(to left, #5abaff 0%, rgba(90, 186, 255, 0) 100%); }
.color-labels-left .grön { background: linear-gradient(to right, #47d48e 0%, rgba(71, 212, 142, 0) 100%); }
.color-labels-left .gul { background: linear-gradient(to right, #ffd65a 0%, rgba(255, 214, 90, 0) 100%); }
.color-labels-left .röd { background: linear-gradient(to right, #ff5d72 0%, rgba(255, 93, 114, 0) 100%); }
.color-labels-left .lila { background: linear-gradient(to right, #b48cff 0%, rgba(180, 140, 255, 0) 100%); }
.color-labels-left .rosa { background: linear-gradient(to right, #ff8ebe 0%, rgba(255, 142, 190, 0) 100%); }
.color-labels-left .blå { background: linear-gradient(to right, #5abaff 0%, rgba(90, 186, 255, 0) 100%); }
.match-name small { display: none; }
.value-edge.positive { color: #5abaff; }
.value-edge.neutral { color: #8294a6; }

/* Result dashboard */
.result-summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 12px; margin: 0 0 14px; }
.metrics { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.metrics .system-block .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-block, .distribution { background: #0e1c2c; border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.metric-block h3, .distribution h3 { margin: 0 0 9px; color: #dbe9f7; font-size: 13px; letter-spacing: .02em; }
.metric-section { padding-top: 9px; margin-top: 9px; border-top: 1px solid rgba(142,169,196,.14); }
.metric-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.metric-section h4 { margin: 0 0 6px; color: #8ea8c2; font: 700 11px Manrope, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.metric { min-width: 0; padding: 8px 9px; border-radius: 7px; }
.metric span { font-size: 12px; line-height: 1.25; }
.metric strong { font-size: 14px; margin-top: 3px; }
.distribution { grid-column: 1 / -1; overflow: hidden; }
.chart-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-title h3 { margin-bottom: 0; }
.chart-legend { display: flex; gap: 12px; color: #a9bacb; font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend-odds, .odds-bar { background: #5abaff; }
.legend-payout, .payout-bar { background: #49d397; }
.interval-chart { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; align-items: end; margin-top: 10px; }
.interval-column { min-width: 0; text-align: center; }
.bar-zone { height: 112px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 0 2px; border-bottom: 1px solid rgba(142,169,196,.36); background: repeating-linear-gradient(to top, transparent 0 27px, rgba(142,169,196,.1) 27px 28px); }
.chart-bar { display: block; width: min(18px, 34%); min-height: 2px; border-radius: 3px 3px 0 0; box-shadow: 0 0 12px rgba(90,186,255,.14); transition: height .18s ease; }
.payout-bar { box-shadow: 0 0 12px rgba(73,211,151,.14); }
.interval-label { display: block; margin-top: 6px; color: #d4e1ee; font: 700 11px 'DM Mono', monospace; white-space: nowrap; }
.interval-values { display: block; margin-top: 2px; color: #8298ae; font-size: 10px; white-space: nowrap; }
.result-overview-title { margin-bottom: 10px; }
.rows-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 12px 1px 10px; border-top: 1px solid var(--line); }
.rows-heading h3 { margin: 0 0 3px; font-size: 15px; letter-spacing: -.2px; }
.rows-heading .hint { display: block; font-size: 12px; }
.table-controls { align-items: end; }
.table-controls label { min-width: 108px; }
.table-controls label:first-child { min-width: 76px; }
.paint-table th, .result-table th { font-size: 12px; }
.table-controls label { font-size: 12px; }
.tile-editors input { font-size: 12px; }
@media (max-width: 1050px) { .result-summary { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr; } .metrics .system-block .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .interval-chart { overflow-x: auto; grid-template-columns: repeat(10, minmax(58px, 1fr)); padding-bottom: 3px; } .chart-title { align-items: flex-start; flex-direction: column; } }
@media (max-width: 560px) { .metric-grid { grid-template-columns: 1fr; } .rows-heading { align-items: flex-start; flex-direction: column; } .table-controls { width: 100%; } .table-controls label { flex: 1; } .table-controls select { width: 100%; } }

/* v54 – beslutsstöd per färgreducering */
.filter-impact{
  width:100%;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:11px;
  line-height:1.3;
  opacity:.9;
}
.filter-impact span{white-space:nowrap}
.filter-impact b{font-weight:700}

/* v58 – kompakt färgeffekt */
.filter-impact{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
.filter-impact span{
  white-space:normal;
  overflow-wrap:anywhere;
}

/* v60 – tätare färglayout */
#filters{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
#filters .filter{
  width:auto;
  min-width:0;
}
@media (max-width: 900px){
  #filters{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 620px){
  #filters{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* v61 – färgreducering som sticky högerspalt på breda skärmar */
@media (min-width: 1101px) {
  .topbar,
  main {
    max-width: 1760px;
  }

  .match-panel {
    overflow: visible;
  }

  .match-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
  }

  .match-main {
    min-width: 0;
  }

  .color-rules-top.color-rules-side {
    position: sticky;
    top: 14px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(8, 23, 39, .72);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
  }

  .color-rules-side .section-title {
    display: block;
    margin-bottom: 10px;
  }

  .color-rules-side .section-title .hint {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.35;
  }

  #filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #filters .filter {
    padding: 8px;
  }

  #filters .filter label {
    font-size: 11px;
  }

  #filters .range-inputs {
    gap: 5px;
  }

  #filters .range-inputs input {
    min-width: 0;
    padding: 5px 3px;
  }

  #filters .filter-impact {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 10px;
    line-height: 1.25;
  }
}

@media (max-width: 1100px) {
  .match-workspace {
    display: flex;
    flex-direction: column;
  }

  .color-rules-side {
    order: -1;
    width: 100%;
  }

  .color-rules-top.color-rules-side {
    padding: 2px 0 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
}

/* v62 – färgreduceringarna staplade vertikalt i högerspalten */
@media (min-width: 1101px) {
  .match-workspace {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .color-rules-side #filters {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .color-rules-side #filters .filter {
    width: 100%;
  }
}

/* v64 – diskret reduceringsscore */
.filter-score{
  display:block;
  margin-top:3px;
  font-size:9px;
  font-weight:600;
  opacity:.55;
  text-align:right;
  letter-spacing:.01em;
}

/* v65 – score på samma rad som sannolikhet */
.filter-chance-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
}
.filter-chance-row .filter-score{
  margin:0;
  flex:0 0 auto;
  text-align:right;
}

/* v67 – streckprognos */
.forecast-box{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(7,17,31,.44);
}
.forecast-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.forecast-head > div{display:flex;flex-direction:column;gap:2px}
.forecast-kicker{
  color:var(--accent);
  font:600 9px 'DM Mono',monospace;
  letter-spacing:.9px;
}
.forecast-head strong{font-size:13px}
.info-dot{
  position:relative;
  width:19px;
  height:19px;
  flex:0 0 19px;
  display:grid;
  place-items:center;
  border:1px solid #3b5c79;
  border-radius:50%;
  color:#a9c2d8;
  font:700 11px 'DM Mono',monospace;
  cursor:help;
  outline:none;
}
.info-tooltip{
  position:absolute;
  z-index:30;
  right:0;
  top:26px;
  width:min(390px,80vw);
  padding:11px 12px;
  border:1px solid #3b5c79;
  border-radius:9px;
  background:#071423;
  color:#c8d8e7;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  font:500 11px/1.5 Manrope,sans-serif;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:.12s;
  pointer-events:none;
}
.info-dot:hover .info-tooltip,
.info-dot:focus .info-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.forecast-controls{
  display:flex;
  align-items:end;
  gap:12px;
  margin-top:10px;
}
.forecast-controls > label:not(.forecast-check){
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#b9cce0;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.forecast-controls label span{font-weight:500;color:#7890a8;text-transform:none}
.forecast-controls input[type="number"]{width:190px}
.forecast-check{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  color:#a9bdd0;
  font-size:11px;
  cursor:pointer;
}
.forecast-check input{width:auto;accent-color:var(--accent)}
.forecast-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}
.forecast-summary > div{
  min-width:0;
  padding:7px 9px;
  border:1px solid rgba(35,64,94,.75);
  border-radius:8px;
  background:#091727;
}
.forecast-summary span{
  display:block;
  color:#7890a8;
  font-size:9px;
  margin-bottom:2px;
}
.forecast-summary strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#dceafb;
  font:600 11px 'DM Mono',monospace;
  white-space:nowrap;
}
.public-share b{color:#a9e7cf;font-weight:800}
.forecast-arrow{color:#5e7790;margin:0 2px}
.outcome-tile small .value-edge{margin-left:5px}

@media (max-width:700px){
  .forecast-controls{align-items:stretch;flex-direction:column}
  .forecast-controls input[type="number"]{width:100%}
  .forecast-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v68 – tidsstyrd streckprognos */
.forecast-controls > label:not(.forecast-check){min-width:180px}
@media (min-width:701px){
  .forecast-controls input[type="number"]{width:180px}
}

/* v70 – prognosvärdet efter pilen ska alltid synas */
.public-share .forecast-value{
  display:inline !important;
  color:#a9e7cf;
  font-weight:800;
}


/* v73 – värde på samma rad som odds och prognos i exakt samma streckfärg */
.odds-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
}
.outcome-tile .odds-line .odds-value{
  display:inline-block;
  margin-top:0;
}
.outcome-tile .odds-line .value-edge{
  position:static;
  top:auto;
  display:inline-block;
  margin:0;
  transform:none;
}

/* Prognosvärdet ärver exakt färgen från 'Folkets xx %'. */
.public-share .forecast-value{
  display:inline !important;
  color:inherit !important;
  font-weight:inherit;
}

/* v74 – centrera värdeindikatorn mot oddset */
.odds-line{
  align-items:center;
}
.outcome-tile .odds-line .odds-value,
.outcome-tile .odds-line .value-edge{
  line-height:1;
}

/* v80 – empirisk prognoskalibrering */
.forecast-calibration-note{
  margin-top:7px;
  color:#70869b;
  font-size:9px;
  line-height:1.3;
  text-align:right;
}

/* v81 – tydligare modellinfo + större radsymbol */
.outcome-tile .row-share{
  min-width: 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}


/* v82 – snyggare nummerfält utan webbläsarpilar */
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;
  appearance:textfield;
}

/* v82 – liten visa/dölj-ruta */
.display-box{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(7,17,31,.38);
  overflow:hidden;
}
.display-box summary{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  color:#d6e5f3;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.display-box summary::-webkit-details-marker{display:none}
.display-box summary::after{
  content:'▾';
  color:#86a2bb;
  font-size:12px;
  transition:transform .14s ease;
}
.display-box[open] summary::after{
  transform:rotate(180deg);
}
.display-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 12px 12px;
}
.display-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:8px 10px;
  border:1px solid rgba(35,64,94,.75);
  border-radius:8px;
  background:#091727;
  color:#a9bdd0;
  font-size:11px;
  cursor:pointer;
}
.display-toggle input{
  width:auto;
  accent-color:var(--accent);
}
@media (max-width:700px){
  .display-grid{grid-template-columns:1fr}
}

/* Dölj-lägen */
.hide-value-on-signs .outcome-tile .value-edge{
  display:none !important;
}
.hide-forecast-on-signs .outcome-tile .forecast-arrow,
.hide-forecast-on-signs .outcome-tile .forecast-value{
  display:none !important;
}
.hide-rows-on-signs .outcome-tile .row-share{
  display:none !important;
}

/* v83 – export till Svenska Spel */
.export-panel{
  margin-top:18px;
}
.export-controls{
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(220px,280px) auto;
  gap:12px;
  align-items:end;
}
.export-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#b9cce0;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.export-controls input,
.export-controls select{
  width:100%;
}
.export-button{
  min-height:35px;
  padding:8px 14px;
  cursor:pointer;
  border:1px solid rgba(73,211,151,.55);
  border-radius:8px;
  background:rgba(26,88,72,.38);
  color:#bdf0dc;
  font:700 11px Manrope,sans-serif;
  white-space:nowrap;
}
.export-button:hover{
  border-color:var(--accent);
  background:rgba(32,110,89,.48);
}
.export-status{
  margin-top:9px;
  color:#7f96ad;
  font-size:10px;
}
@media (max-width:800px){
  .export-controls{
    grid-template-columns:1fr;
  }
  .export-button{
    width:100%;
  }
}

/* v85 – Orange & Vit */
.filter.orange { background:#553315; color:#ffc887; }
.filter.vit { background:#eef3f7; color:#152333; border-color:#cfd8e3; }

.color-labels .orange {
  background:linear-gradient(to left,#ff9f43 0%,rgba(255,159,67,0) 100%);
}
.color-labels .vit {
  background:linear-gradient(to left,#b8c0c9 0%,rgba(184,192,201,0) 100%);
}
.color-labels-left .orange {
  background:linear-gradient(to right,#ff9f43 0%,rgba(255,159,67,0) 100%);
}
.color-labels-left .vit {
  background:linear-gradient(to right,#b8c0c9 0%,rgba(184,192,201,0) 100%);
}


/* v85 – pilar tillbaka i färgvillkorens min/max-fält */
.range-inputs input[type="number"]{
  -moz-appearance:auto;
  appearance:auto;
}
.range-inputs input[type="number"]::-webkit-outer-spin-button,
.range-inputs input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:auto;
  margin:0;
  opacity:1;
}


/* v86 – extra färger bakom Fler färger */
.more-colors-button{
  width:100%;
  min-height:34px;
  padding:8px 10px;
  border:1px dashed #35536d;
  border-radius:8px;
  background:#091726;
  color:#9eb3c6;
  font:700 11px Manrope,sans-serif;
  cursor:pointer;
  transition:.12s ease;
}
.more-colors-button:hover{
  border-color:#587692;
  color:#d3e0eb;
  background:#0c1c2e;
}
.filters .more-colors-button{
  grid-column:1 / -1;
}


/* v87 – hämta aktuell Topptips-omgång */
.import-panel{
  margin-bottom:18px;
}
.round-import-controls{
  display:grid;
  grid-template-columns:minmax(180px,220px) auto minmax(260px,1fr);
  gap:12px;
  align-items:end;
}
.round-import-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#b9cce0;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.round-import-controls input{
  width:100%;
}
.import-button{
  min-height:35px;
  padding:8px 15px;
  border:1px solid rgba(90,186,255,.55);
  border-radius:8px;
  background:rgba(23,74,111,.38);
  color:#bfe5ff;
  font:700 11px Manrope,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.import-button:hover{
  border-color:#5abaff;
  background:rgba(28,90,135,.5);
}
.import-button:disabled{
  opacity:.55;
  cursor:wait;
}
.import-status{
  min-height:35px;
  display:flex;
  align-items:center;
  padding:7px 10px;
  border:1px solid rgba(35,64,94,.6);
  border-radius:8px;
  background:#091727;
  color:#8198ae;
  font-size:10px;
  line-height:1.35;
}
@media (max-width:850px){
  .round-import-controls{
    grid-template-columns:1fr;
  }
  .import-button{
    width:100%;
  }
}


/* v88 – sparade kuponger */
.archive-panel{
  margin-bottom:18px;
}
.archive-title{
  margin-bottom:10px;
}
.archive-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.archive-action{
  min-height:32px;
  padding:7px 11px;
  cursor:pointer;
}
.archive-status{
  color:#7f96ad;
  font-size:10px;
  margin-left:4px;
}
.saved-coupons{
  display:grid;
  gap:7px;
}
.saved-empty{
  padding:11px 12px;
  border:1px dashed #304b64;
  border-radius:8px;
  color:#70869b;
  background:rgba(7,17,31,.28);
  font-size:10px;
}
.saved-coupon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 10px;
  border:1px solid #263f57;
  border-radius:9px;
  background:#091727;
}
.saved-coupon.current{
  border-color:rgba(71,212,142,.55);
  background:rgba(11,39,38,.58);
}
.saved-coupon-main{
  min-width:0;
}
.saved-coupon-round{
  color:#dce9f5;
  font-size:12px;
  font-weight:800;
}
.saved-coupon-round span{
  display:inline-block;
  margin-left:6px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(71,212,142,.15);
  color:#8ce4ba;
  font-size:8px;
  letter-spacing:.06em;
  vertical-align:1px;
}
.saved-coupon-meta{
  margin-top:2px;
  color:#7f96ad;
  font-size:9px;
}
.saved-coupon-match{
  margin-top:3px;
  color:#a8bacb;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saved-coupon-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.saved-coupon-actions button{
  min-height:29px;
  padding:6px 9px;
  border:1px solid #35536d;
  border-radius:7px;
  background:#0b1b2c;
  color:#afc3d6;
  font:700 9px Manrope,sans-serif;
  cursor:pointer;
}
.saved-coupon-actions .saved-open:hover{
  border-color:#5abaff;
  color:#c9ebff;
}
.saved-coupon-actions .saved-delete:hover{
  border-color:#ff6578;
  color:#ffb3bd;
}
@media (max-width:650px){
  .saved-coupon{
    align-items:flex-start;
    flex-direction:column;
  }
  .saved-coupon-actions{
    width:100%;
  }
  .saved-coupon-actions button{
    flex:1;
  }
  .archive-status{
    width:100%;
    margin-left:0;
  }
}




/* v90 – separat och neutral kupongarkiv-ruta */
.archive-panel{
  margin-bottom:18px;
}
.archive-box{
  padding:12px;
  border:1px solid #29445d;
  border-radius:11px;
  background:#081522;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.archive-box-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
}
.archive-box-head > div:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.archive-box-kicker{
  color:#718ba3;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.archive-box-head strong{
  color:#d7e5f1;
  font-size:12px;
}
.archive-box .archive-actions{
  margin:0;
  justify-content:flex-end;
}
.archive-box .archive-status{
  margin:0 0 9px;
  padding:7px 9px;
  border:1px solid rgba(41,68,93,.65);
  border-radius:7px;
  background:#0a1928;
}
.archive-box .saved-coupon{
  background:#0a1928;
  border-color:#2b465f;
}
.archive-box .saved-empty{
  background:#0a1928;
}
@media (max-width:800px){
  .archive-box-head{
    flex-direction:column;
  }
  .archive-box .archive-actions{
    width:100%;
    justify-content:flex-start;
  }
}


/* v91 – minimerbara huvudrutor */
main > .panel{
  position:relative;
}
.panel-collapse-button{
  position:absolute;
  z-index:20;
  top:9px;
  right:9px;
  left:auto;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #35516b;
  border-radius:6px;
  background:#0a1928;
  color:#93aabd;
  font:700 15px/1 Manrope,sans-serif;
  cursor:pointer;
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.panel-collapse-button:hover{
  border-color:#55738f;
  background:#0d2134;
  color:#d5e2ed;
}
main > .panel > .section-title,
main > .panel > .match-workspace,
main > .panel > .archive-box,
main > .panel > .round-import-controls{
  /* Ge knappen lite fri yta utan att ändra hela layouten. */
}
main > .panel.panel-collapsed{
  min-height:44px;
  padding-top:11px !important;
  padding-bottom:11px !important;
  overflow:hidden;
}
main > .panel.panel-collapsed > *:not(.panel-collapse-button){
  display:none !important;
}
main > .panel.panel-collapsed::after{
  content:attr(data-collapse-label);
  display:block;
  min-height:22px;
  padding-right:34px;
  color:#c5d4e2;
  font:700 12px/22px Manrope,sans-serif;
}
@media (max-width:700px){
  .panel-collapse-button{
    top:8px;
    right:8px;
    left:auto;
  }
}


/* v93 – Snabbvy till vänster */
.quick-view{
  position:fixed;
  z-index:24;
  top:14px;
  left:6px;
  width:270px;
  box-sizing:border-box;
  padding:11px;
  border:1px solid #29445d;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(15,33,53,.98),rgba(8,21,35,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}
.quick-view-head{
  padding-bottom:8px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(45,72,96,.7);
}
.quick-view-head .eyebrow{
  margin-bottom:2px;
  font-size:8px;
}
.quick-view-head strong{
  color:#dce8f3;
  font-size:12px;
}
.quick-view-metrics{
  display:grid;
  gap:5px;
}
.quick-view-item{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:6px 7px;
  border:1px solid rgba(38,64,87,.72);
  border-radius:7px;
  background:#091727;
}
.quick-view-item span{
  color:#7f96ad;
  font-size:8px;
  line-height:1.2;
}
.quick-view-item strong{
  color:#d7e5f1;
  font:700 11px 'DM Mono',monospace;
  line-height:1.25;
}
.quick-view-item.good strong{
  color:#8de0bc;
}
.quick-view-item.bad strong{
  color:#ff8998;
}
.quick-view-empty{
  color:#71869a;
  font-size:9px;
  line-height:1.4;
}

/* På bred desktop reserveras en riktig vänsterspalt åt Snabbvy. */
@media (min-width:1600px){
  .topbar,
  main{
    max-width:none;
    margin-left:254px;
    margin-right:28px;
  }
}

/* På mindre skärmar ligger Snabbvy överst istället för att täcka innehållet. */
@media (max-width:1599px){
  .quick-view{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    max-width:1440px;
    margin:12px auto 0;
    padding:10px 14px;
  }
  .quick-view-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (max-width:900px){
  .quick-view{
    margin:10px 14px 0;
  }
  .quick-view-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:520px){
  .quick-view-metrics{
    grid-template-columns:1fr;
  }
}


/* v100 – symmetrisk desktoplayout:
   Snabbvy vänster, huvudytan centrerad, Färgreducering höger. */
@media (min-width:1500px){
  /* Sidoboxarna är exakt lika breda och har samma yttre marginal. */
  .quick-view{
    position:fixed;
    left:6px;
    right:auto;
    width:270px;
    box-sizing:border-box;
  }

  .color-rules-top.color-rules-side{
    position:absolute;
    z-index:24;
    top:0 !important;
    right:-276px;
    left:auto;
    width:270px;
    box-sizing:border-box;
    margin:0;
    padding:11px;
    border:1px solid #29445d;
    border-radius:12px;
    background:linear-gradient(145deg,rgba(15,33,53,.98),rgba(8,21,35,.98));
    box-shadow:0 18px 42px rgba(0,0,0,.22);
  }

  /* Huvudytan får lika stor reservyta på båda sidor.
     Med main-padding 28px blir gapet till respektive sidobox 6px. */
  .topbar,
  main{
    max-width:none;
    margin-left:254px;
    margin-right:254px;
  }

  /* Färgreduceringen tas ur matchrutans interna kolumn. */
  .match-workspace{
    display:block;
  }

  .match-main{
    width:100%;
    min-width:0;
  }

  .color-rules-side #filters{
    grid-template-columns:1fr;
    gap:9px;
  }

  .color-rules-side #filters .filter{
    width:100%;
  }
}

/* Under bred desktop används den tidigare responsiva layouten. */
@media (max-width:1499px){
  .quick-view{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    width:auto;
    max-width:1440px;
    margin:12px auto 0;
    padding:10px 14px;
  }

  .topbar,
  main{
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
  }

  .color-rules-top.color-rules-side{
    position:sticky;
    right:auto;
    left:auto;
    width:auto;
  }
}

@media (min-width:1101px) and (max-width:1499px){
  .match-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
  }
}


/* v104 – smalare och helt symmetrisk trekolumnslayout */
@media (min-width:1500px){
  :root{
    --ss-side:290px;
    --ss-gap:10px;
    --ss-center:1300px;
    --ss-total:calc(var(--ss-side) * 2 + var(--ss-gap) * 2 + var(--ss-center));
    --ss-outer:calc((100vw - var(--ss-total)) / 2);
  }

  .topbar,
  main{
    width:var(--ss-center);
    max-width:var(--ss-center);
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }

  .quick-view{
    left:max(6px,var(--ss-outer));
    width:var(--ss-side);
  }

  .match-panel{
    position:relative;
  }

  .color-rules-top.color-rules-side{
    right:calc((var(--ss-side) + var(--ss-gap)) * -1);
    width:var(--ss-side);
  }
}


/* v105 – större arbetsyta och mer balanserad Snabbvy */
@media (min-width:1500px){
  .quick-view{
    padding:13px;
    border-radius:13px;
  }

  .quick-view-head{
    padding-bottom:10px;
    margin-bottom:8px;
  }

  .quick-view-head .eyebrow{
    font-size:9px;
    margin-bottom:3px;
  }

  .quick-view-head strong{
    font-size:13px;
  }

  .quick-view-metrics{
    gap:7px;
  }

  .quick-view-item{
    padding:8px 9px;
    border-radius:8px;
  }

  .quick-view-item span{
    font-size:9px;
    line-height:1.25;
  }

  .quick-view-item strong{
    margin-top:1px;
    font-size:12px;
    line-height:1.3;
  }

  /* Matcha högerpanelen visuellt med Snabbvy. */
  .color-rules-top.color-rules-side{
    padding:13px;
    border-radius:13px;
  }
}


/* v106 – Snabbvy låst i dokumentet och exakt symmetriskt avstånd */
@media (min-width:1500px){
  .quick-view{
    position:absolute;
    right:auto;
    /* top/left sätts mot den faktiska INDATA-rutans kant i JS. */
  }
}


/* v107 – större och bredare desktopvy */
@media (min-width:1500px){
  .topbar{
    padding-top:22px;
    padding-bottom:18px;
  }
  .topbar h1{
    font-size:29px;
  }

  main{
    padding-left:28px;
    padding-right:28px;
    padding-bottom:38px;
  }

  .intro{
    padding-top:15px;
    padding-bottom:15px;
    font-size:14px;
  }

  .panel{
    padding:19px;
    border-radius:16px;
  }

  .section-title{
    margin-bottom:14px;
  }

  h2{
    font-size:22px;
  }

  .hint,
  .muted{
    font-size:12px;
  }

  /* INDATA */
  .match-name{
    font-size:13px;
  }

  .paint-table td{
    padding:6px;
  }

  .outcome-tile{
    min-height:64px;
    padding:8px;
    border-radius:9px;
  }

  .outcome-tile .odds-value{
    font-size:16px;
  }

  .outcome-tile small{
    margin-top:4px;
    font-size:12px;
  }

  .value-edge{
    font-size:11px;
  }

  .tile-editors{
    margin-top:5px;
    gap:5px;
  }

  .tile-editors input{
    padding:5px 6px;
    font-size:12px;
  }

  .outcome-tile .row-share{
    width:44px;
    height:44px;
    font-size:13px;
    right:9px;
  }

  /* Färgreducering */
  .color-rules-top.color-rules-side{
    padding:15px;
    border-radius:14px;
  }

  .color-rules-side .section-title{
    margin-bottom:12px;
  }

  .color-rules-side .section-title .hint{
    margin-top:8px;
    font-size:11px;
  }

  .color-rules-side #filters{
    gap:10px;
  }

  .color-rules-side #filters .filter{
    padding:10px;
    border-radius:10px;
  }

  .color-rules-side #filters .filter label{
    font-size:12px;
    margin-bottom:7px;
  }

  .color-rules-side #filters .range-inputs{
    gap:7px;
  }

  .color-rules-side #filters .range-inputs input{
    padding:6px 5px;
    font-size:12px;
  }

  .color-rules-side #filters .filter-impact{
    margin-top:8px;
    padding-top:7px;
    font-size:10px;
  }

  .more-colors-button{
    min-height:38px;
    font-size:11px;
  }

  /* Snabbvy */
  .quick-view{
    padding:15px;
    border-radius:14px;
  }

  .quick-view-head{
    padding-bottom:11px;
    margin-bottom:9px;
  }

  .quick-view-head .eyebrow{
    font-size:9px;
  }

  .quick-view-head strong{
    font-size:14px;
  }

  .quick-view-metrics{
    gap:8px;
  }

  .quick-view-item{
    padding:9px 10px;
    border-radius:9px;
  }

  .quick-view-item span{
    font-size:9px;
  }

  .quick-view-item strong{
    font-size:13px;
  }

  /* System / arkiv / export */
  .settings,
  .forecast-controls,
  .export-controls,
  .round-import-controls{
    gap:14px;
  }

  .settings input,
  .forecast-controls input,
  .export-controls input,
  .export-controls select,
  .round-import-controls input{
    min-height:38px;
    font-size:12px;
  }

  .forecast-box,
  .archive-box{
    padding:14px;
    border-radius:12px;
  }

  .metric{
    padding:12px;
  }

  .metric strong{
    font-size:18px;
  }
}


/* v108 – något större helhet */
@media (min-width:1500px){
  :root{
    --ss-side:300px;
    --ss-gap:10px;
    --ss-center:min(1340px, calc(100vw - 620px));
  }

  .panel{padding:21px;}
  h2{font-size:23px;}
  .section-title{margin-bottom:15px;}

  .outcome-tile{
    min-height:68px;
    padding:9px;
  }
  .outcome-tile .odds-value{font-size:17px;}
  .outcome-tile small{font-size:12px;}
  .tile-editors input{
    padding:6px 7px;
    font-size:12px;
  }

  .quick-view,
  .color-rules-top.color-rules-side{
    width:var(--ss-side);
    padding:16px;
  }

  .quick-view-item{padding:10px 11px;}
  .quick-view-item span{font-size:10px;}
  .quick-view-item strong{font-size:14px;}
}

/* v108 – dölj/minimera sidoboxarna */
.quick-view,
.color-rules-top.color-rules-side{
  position:absolute;
}
.side-collapse-button{
  position:absolute;
  z-index:30;
  top:9px;
  right:9px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #35516b;
  border-radius:7px;
  background:#0a1928;
  color:#9eb3c6;
  font:700 15px/1 Manrope,sans-serif;
  cursor:pointer;
}
.side-collapse-button:hover{
  border-color:#5c7892;
  color:#e0e9f1;
  background:#0d2134;
}
.quick-view.side-collapsed,
.color-rules-top.color-rules-side.side-collapsed{
  min-height:48px;
  height:48px;
  overflow:hidden;
}
.quick-view.side-collapsed > *:not(.side-collapse-button):not(.quick-view-head),
.color-rules-top.color-rules-side.side-collapsed > *:not(.side-collapse-button):not(.section-title){
  display:none !important;
}
.quick-view.side-collapsed .quick-view-head,
.color-rules-top.color-rules-side.side-collapsed .section-title{
  margin:0;
  padding:0 36px 0 0;
  border:0;
}
.quick-view.side-collapsed .quick-view-head .eyebrow,
.color-rules-top.color-rules-side.side-collapsed .section-title .eyebrow,
.color-rules-top.color-rules-side.side-collapsed .section-title .hint{
  display:none;
}
.quick-view.side-collapsed .quick-view-head strong,
.color-rules-top.color-rules-side.side-collapsed .section-title h2{
  font-size:12px;
  line-height:24px;
}

/* v108 – Alla rader är stängt från början */
.rows-details{
  margin-top:14px;
  border:1px solid #29445d;
  border-radius:11px;
  background:rgba(8,21,34,.56);
  overflow:hidden;
}
.rows-details > summary{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  list-style:none;
  cursor:pointer;
  color:#d7e5f1;
  font-size:12px;
  font-weight:800;
}
.rows-details > summary::-webkit-details-marker{display:none;}
.rows-details > summary::after{
  content:'＋';
  order:3;
  color:#8fa8bc;
  font-size:15px;
}
.rows-details[open] > summary::after{content:'−';}
.rows-details[open] > summary{border-bottom:1px solid #29445d;}
.rows-details-body{padding:12px;}
.rows-details-body .rows-heading{margin-top:0;}
.rows-open-label{
  color:#7f96ad;
  font-size:10px;
  font-weight:700;
}


/* v109 – större och tydligare SYSTEM-ruta */
@media (min-width:901px){
  .system-panel{
    padding:23px;
  }

  .system-panel .settings{
    gap:16px;
  }

  .system-panel .settings label,
  .system-panel .forecast-controls label{
    font-size:12px;
  }

  .system-panel .settings input,
  .system-panel .forecast-controls input{
    min-height:44px;
    padding:9px 11px;
    border-radius:9px;
    font-size:14px;
  }

  .system-panel .forecast-box{
    margin-top:16px;
    padding:17px;
    border-radius:13px;
  }

  .system-panel .forecast-head{
    margin-bottom:13px;
  }

  .system-panel .forecast-kicker{
    font-size:9px;
  }

  .system-panel .forecast-head strong{
    font-size:14px;
  }

  .system-panel .forecast-controls{
    gap:16px;
  }

  .system-panel .forecast-check{
    min-height:44px;
    padding:8px 10px;
    border:1px solid rgba(35,64,94,.75);
    border-radius:9px;
    background:#091727;
    font-size:12px;
  }

  .system-panel .forecast-check input{
    width:17px;
    height:17px;
  }

  .system-panel .forecast-summary{
    gap:10px;
    margin-top:13px;
  }

  .system-panel .forecast-summary > div{
    padding:11px 12px;
    min-height:54px;
    border-radius:9px;
  }

  .system-panel .forecast-summary span{
    font-size:9px;
  }

  .system-panel .forecast-summary strong{
    font-size:14px;
  }

  .system-panel .display-box{
    margin-top:13px;
    border-radius:11px;
  }

  .system-panel .display-box summary{
    min-height:42px;
    padding:11px 13px;
    font-size:12px;
  }

  .system-panel .display-grid{
    gap:10px;
    padding:0 13px 13px;
  }

  .system-panel .display-toggle{
    min-height:40px;
    padding:9px 11px;
    font-size:12px;
  }

  .system-panel .display-toggle input{
    width:16px;
    height:16px;
  }
}

/* v109 – centrera Match-kolumnen i INDATA */
.paint-table thead th:first-child{
  text-align:center;
}
.paint-table td.match-name{
  text-align:center;
  vertical-align:middle;
}


/* v113 – LIVE-resultat */
.live-box{
  margin-top:16px;
  padding:16px;
  border:1px solid #2c4d67;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(8,24,39,.92),rgba(5,17,29,.82));
}
.live-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.live-head > div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.live-kicker{
  color:#63df9e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.live-head strong{
  font-size:14px;
}
.live-actions{
  display:flex;
  gap:8px;
}
.live-button{
  min-height:36px;
  padding:7px 12px;
  font-size:11px;
}
#liveToggle.live-on{
  border-color:#3eae78;
  box-shadow:0 0 0 1px rgba(71,212,142,.18) inset;
}
.live-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.live-metric{
  min-height:58px;
  padding:10px 11px;
  border:1px solid #233f57;
  border-radius:9px;
  background:#091827;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.live-metric span{
  color:#819aaf;
  font-size:9px;
  font-weight:700;
}
.live-metric strong{
  color:#e4eef6;
  font-size:14px;
}
.live-matches{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.live-match{
  min-width:0;
  padding:10px;
  border:1px solid #263f55;
  border-radius:10px;
  background:#081522;
}
.live-match.hit{
  border-color:rgba(71,212,142,.52);
  background:rgba(20,70,51,.18);
}
.live-match.miss{
  border-color:rgba(255,93,114,.5);
  background:rgba(91,28,38,.18);
}
.live-match.finished{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.live-match-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}
.live-number{
  width:20px;
  height:20px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:#11263a;
  color:#8da6ba;
  font-size:9px;
  font-weight:900;
}
.live-state{
  color:#88a2b8;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.live-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dbe7ef;
  font-size:11px;
}
.live-score-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.live-score{
  font-size:22px;
  line-height:1;
  letter-spacing:-.04em;
}
.live-sign{
  min-width:31px;
  height:31px;
  padding:0 8px;
  border-radius:8px;
  display:grid;
  place-items:center;
  border:1px solid #304b61;
  background:#0c1d2d;
  color:#a9bac8;
  font-size:13px;
  font-weight:900;
}
.live-sign.hit{
  color:#78e8aa;
  border-color:#318d62;
  background:rgba(40,122,83,.18);
}
.live-sign.miss{
  color:#ff8293;
  border-color:#a84455;
  background:rgba(137,45,59,.18);
}
.live-match small{
  display:block;
  margin-top:7px;
  color:#607b91;
  font-size:8px;
}
.live-status{
  margin-top:10px;
  min-height:18px;
  color:#91a8ba;
  font-size:10px;
}
.live-source-note{
  margin-top:3px;
  color:#5e7487;
  font-size:8px;
}
@media(max-width:1050px){
  .live-metrics,
  .live-matches{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:650px){
  .live-head{align-items:flex-start;flex-direction:column;}
  .live-metrics,
  .live-matches{grid-template-columns:1fr;}
}

/* v114 – LIVE som egen sida */
.live-launch-box{margin-top:16px;}
.live-launch-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.live-launch-head>div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.live-metrics.compact{grid-template-columns:repeat(4,minmax(0,1fr));}
.live-page{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(4,12,19,.82);
  backdrop-filter:blur(8px);
  overflow:auto;
  padding:24px;
}
.live-page-shell{
  width:min(1700px,calc(100vw - 48px));
  margin:0 auto;
  padding:20px;
  border:1px solid #2e4b63;
  border-radius:18px;
  background:linear-gradient(180deg,#081726,#07131f);
  box-shadow:0 22px 60px rgba(0,0,0,.38);
}
.live-page-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}
.live-page-title{display:flex;flex-direction:column;gap:4px;}
.live-page-title h3{margin:0;font-size:24px;color:#e8f0f7;}
.live-page-actions{display:flex;gap:8px;flex-wrap:wrap;}
body.live-page-open{overflow:hidden;}
.live-page-metrics{margin-bottom:12px;}
.live-page-status{margin-bottom:12px;font-size:11px;}
.live-page-matches{display:grid;gap:12px;}
.live-page-match{
  padding:14px;
  border:1px solid #29445d;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(11,28,45,.92),rgba(8,20,33,.92));
}
.live-page-match-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.live-page-match-title{display:flex;align-items:center;gap:12px;min-width:0;}
.live-page-match-number{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:#122739;color:#a3b7c9;font-size:11px;font-weight:900;flex:0 0 auto;
}
.live-page-match-title strong{display:block;color:#edf4fa;font-size:16px;}
.live-page-match-title small{display:block;margin-top:3px;color:#7890a4;font-size:11px;}
.live-page-score-box{
  min-width:124px;padding:10px 12px;border:1px solid #2d4b61;border-radius:11px;
  background:#0a1827;text-align:center;
}
.live-page-score{display:block;color:#edf4fa;font-size:26px;font-weight:900;letter-spacing:-.05em;}
.live-page-state{display:block;margin-top:4px;color:#8ea6ba;font-size:11px;font-weight:800;text-transform:uppercase;}
.live-page-signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.live-sign-tile{
  min-height:104px;padding:12px;border:1px solid #2b455c;border-radius:12px;
  background:#0a1724;position:relative;
}
.live-sign-tile.selected{
  border-color:#507191;
  background:linear-gradient(180deg,rgba(18,37,57,.96),rgba(10,22,35,.96));
}
.live-sign-tile.unselected{opacity:.78;}
.live-sign-main{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.live-sign-symbol{font-size:28px;line-height:1;font-weight:900;color:#ecf4fb;}
.live-sign-text{color:#9fb3c3;font-size:11px;font-weight:700;}
.live-sign-colors{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.live-sign-colors.empty{color:#61798d;font-size:10px;}
.live-color-chip{
  min-height:24px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);background:#132436;color:#dce6ee;font-size:10px;font-weight:800;letter-spacing:.01em;
}
.live-color-chip.röd,.live-color-chip.rod{background:rgba(174,56,73,.22);border-color:rgba(255,113,136,.42);}
.live-color-chip.blå,.live-color-chip.bla{background:rgba(58,100,171,.22);border-color:rgba(110,159,244,.42);}
.live-color-chip.grön,.live-color-chip.gron{background:rgba(46,135,91,.22);border-color:rgba(106,222,162,.42);}
.live-color-chip.gul{background:rgba(152,128,28,.22);border-color:rgba(246,214,96,.42);}
.live-color-chip.lila{background:rgba(108,71,164,.22);border-color:rgba(181,136,255,.42);}
.live-color-chip.svart{background:rgba(82,93,106,.22);border-color:rgba(155,167,179,.42);}
.live-color-chip.vit{background:rgba(188,199,209,.18);border-color:rgba(234,239,245,.42);}
.live-color-chip.orange{background:rgba(180,106,33,.22);border-color:rgba(255,171,88,.42);}
.live-sign-tile.is-live-active{
  border-color:#72e8ab;
  box-shadow:0 0 0 1px rgba(114,232,171,.22) inset,0 0 18px rgba(67,194,130,.15);
  animation:livePulse 1.2s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 1px rgba(114,232,171,.18) inset,0 0 0 rgba(67,194,130,0);}
  50%{box-shadow:0 0 0 2px rgba(114,232,171,.52) inset,0 0 24px rgba(67,194,130,.32);}
}
@media(max-width:1150px){
  .live-page-signs{grid-template-columns:1fr;}
  .live-page-match-header{align-items:flex-start;flex-direction:column;}
}
@media(max-width:900px){
  .live-launch-head,.live-page-topbar{flex-direction:column;align-items:flex-start;}
  .live-metrics.compact,.live-page-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .live-page{padding:12px;}
  .live-page-shell{width:100%;padding:14px;border-radius:14px;}
  .live-metrics.compact,.live-page-metrics{grid-template-columns:1fr;}
}


/* v115 – LIVE direkt i INDATA */
.live-page{display:none !important;}
body.live-page-open{overflow:auto !important;}

body.live-edit-locked .outcome-tile,
body.live-edit-locked .filters .filter{
  cursor:default;
}
body.live-edit-locked .filters .filter{pointer-events:none;}
body.live-edit-locked .system-panel input,
body.live-edit-locked .system-panel select,
body.live-edit-locked .tile-editors input,
body.live-edit-locked .color-rules-side input{
  opacity:.56;
  cursor:not-allowed;
}
body.live-edit-locked .system-panel button:not(.panel-collapse-button){pointer-events:none;opacity:.62;}
body.live-edit-locked #fetchRound{pointer-events:none;opacity:.55;}

.inline-live-bar{
  margin-bottom:10px;
  padding:9px 11px;
  border:1px solid rgba(70,200,134,.42);
  border-radius:10px;
  background:rgba(31,108,74,.13);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.inline-live-bar[hidden]{display:none !important;}
.inline-live-bar>div{display:flex;align-items:center;gap:8px;min-width:0;}
.inline-live-bar strong{color:#8cf0bb;font-size:11px;}
.inline-live-bar span:not(.inline-live-dot){color:#839bac;font-size:10px;}
.inline-live-dot{
  width:8px;height:8px;border-radius:50%;background:#55dc96;
  box-shadow:0 0 12px rgba(85,220,150,.65);
  animation:inlineLiveDot 1.15s ease-in-out infinite;
}
@keyframes inlineLiveDot{0%,100%{opacity:.45}50%{opacity:1}}

.match-name-text{display:block;}
.match-live-result{
  width:max-content;
  min-width:94px;
  margin:8px auto 0;
  padding:6px 10px;
  border:1px solid #35556d;
  border-radius:9px;
  background:#091827;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.match-live-result strong{color:#edf5fb;font-size:17px;line-height:1;}
.match-live-result span{color:#8ba4b8;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.match-live-result.finished{border-color:rgba(89,174,126,.62);}

.outcome-tile.live-locked{cursor:default;}
.outcome-tile.live-current-sign{
  position:relative;
  border-color:#76e8ae !important;
  animation:liveOutcomeBlink 1.05s ease-in-out infinite;
}
.outcome-tile.live-current-sign::after{
  content:'';
  position:absolute;
  inset:-3px;
  border:2px solid rgba(118,232,174,.74);
  border-radius:12px;
  pointer-events:none;
  animation:liveOutcomeBlinkRing 1.05s ease-in-out infinite;
}
.live-active-label{
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  padding:2px 6px;
  border-radius:999px;
  background:rgba(50,138,93,.24);
  color:#8cf2bd;
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
}
@keyframes liveOutcomeBlink{
  0%,100%{box-shadow:0 0 0 0 rgba(72,216,145,0);}
  50%{box-shadow:0 0 0 2px rgba(72,216,145,.30),0 0 22px rgba(72,216,145,.34);}
}
@keyframes liveOutcomeBlinkRing{0%,100%{opacity:.38}50%{opacity:1}}
#liveToggle.live-on{border-color:#49c886;background:rgba(34,126,84,.20);}
body.live-edit-locked .filters .more-colors-button{
  pointer-events:none;
  opacity:.55;
}


/* v116 – före avspark markeras X-tecknet i LIVE-läge */
.outcome-tile.live-prestart-sign{
  position:relative;
  border-color:#6b8095 !important;
  box-shadow:0 0 0 1px rgba(119,137,154,.32) inset;
}
.outcome-tile.live-prestart-sign::after{
  content:'';
  position:absolute;
  inset:-3px;
  border:2px solid rgba(122,142,161,.48);
  border-radius:12px;
  pointer-events:none;
}
.outcome-tile.live-prestart-sign .live-active-label{
  display:none;
}


/* v117 – tydligt aktuellt LIVE-tecken, X före avspark */
.outcome-tile.live-current-sign{
  position:relative !important;
  z-index:6;
  border:2px solid #7df0b4 !important;
  outline:2px solid rgba(125,240,180,.52);
  outline-offset:2px;
  box-shadow:
    0 0 0 2px rgba(45,132,88,.20) inset,
    0 0 18px rgba(80,220,145,.42) !important;
  animation:liveOutcomeBlinkV117 1s ease-in-out infinite !important;
}

.outcome-tile.live-current-sign::after{
  content:'';
  position:absolute;
  inset:-5px;
  border:2px solid rgba(125,240,180,.90);
  border-radius:13px;
  pointer-events:none;
  animation:liveOutcomeRingV117 1s ease-in-out infinite;
}

@keyframes liveOutcomeBlinkV117{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(45,132,88,.18) inset,
      0 0 9px rgba(80,220,145,.24) !important;
  }
  50%{
    box-shadow:
      0 0 0 3px rgba(62,176,116,.34) inset,
      0 0 28px rgba(80,220,145,.72) !important;
  }
}

@keyframes liveOutcomeRingV117{
  0%,100%{opacity:.48;transform:scale(.99);}
  50%{opacity:1;transform:scale(1.015);}
}

/* Den gamla separata pre-start-stilen behövs inte längre. */
.outcome-tile.live-prestart-sign{
  border-color:inherit !important;
  box-shadow:none;
}
.outcome-tile.live-prestart-sign::after{
  display:none;
}

/* v117 – LIVE-räkning direkt i färgreduceringen */
.color-rules-side .filter label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.filter-live-now{
  margin-left:auto;
  padding:3px 7px;
  border:1px solid rgba(99,223,158,.28);
  border-radius:999px;
  background:rgba(42,119,80,.16);
  color:#83edb5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}


/* v118 – statisk LIVE-ram i rött och vitt */
.outcome-tile.live-current-sign{
  position:relative !important;
  z-index:6;
  border:3px solid #ffffff !important;
  outline:3px solid #d92b2b !important;
  outline-offset:2px;
  box-shadow:
    0 0 0 2px rgba(217,43,43,.22) inset,
    0 0 0 1px rgba(255,255,255,.16);
  animation:none !important;
}

.outcome-tile.live-current-sign::after{
  content:'';
  position:absolute;
  inset:-6px;
  border:3px solid rgba(217,43,43,.95);
  border-radius:14px;
  pointer-events:none;
  animation:none !important;
}

.outcome-tile.live-current-sign .live-active-label{
  background:rgba(217,43,43,.18);
  color:#ffffff;
}

/* Stäng av tidigare blinkanimationer helt */
@keyframes liveOutcomeBlinkV117{
  0%,100%{box-shadow:
    0 0 0 2px rgba(217,43,43,.22) inset,
    0 0 0 1px rgba(255,255,255,.16);}
  50%{box-shadow:
    0 0 0 2px rgba(217,43,43,.22) inset,
    0 0 0 1px rgba(255,255,255,.16);}
}

@keyframes liveOutcomeRingV117{
  0%,100%{opacity:1;transform:none;}
  50%{opacity:1;transform:none;}
}


/* v119 – tunnare röd/vit LIVE-ram och ingen AKTUELLT-text */
.outcome-tile.live-current-sign{
  border:2px solid #ffffff !important;
  outline:2px solid #d92b2b !important;
  outline-offset:1px;
  box-shadow:0 0 0 1px rgba(217,43,43,.18) inset !important;
  animation:none !important;
}

.outcome-tile.live-current-sign::after{
  inset:-4px;
  border:2px solid rgba(217,43,43,.95);
  border-radius:12px;
  animation:none !important;
}

.outcome-tile.live-current-sign .live-active-label{
  display:none !important;
}


/* v120 – tydlig LIVE-räkning för varje färgreducering */
.color-rules-side .filter label{
  min-height:30px;
}

.filter-color-name{
  font-size:12px;
  font-weight:850;
}

.filter-live-now{
  margin-left:auto;
  min-width:58px;
  padding:4px 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(99,223,158,.36);
  border-radius:8px;
  background:rgba(42,119,80,.18);
  color:#8cf0bc;
  line-height:1;
}

.filter-live-now small{
  color:#72a98d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.filter-live-now strong{
  color:#b8f7d2;
  font-size:14px;
  font-weight:950;
}


/* v121 – centrera JUST NU utan att påverka reduceringsstatistiken */
.color-rules-side .filter > label{
  display:block;
  min-height:0;
  text-align:left;
}

.filter-live-now{
  width:100%;
  min-width:0;
  margin:7px 0 8px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  box-sizing:border-box;
  text-align:center;
}

.filter-live-now small{
  display:inline-block;
  text-align:center;
}

.filter-live-now strong{
  display:inline-block;
  text-align:center;
}

/* Reduceringsstatistiken ska alltid ligga kvar under villkoren. */
.color-rules-side .filter-impact{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* v122 – JUST NU visar om färgvillkoret håller live */
.filter-live-now.in-range{
  border-color:rgba(99,223,158,.36);
  background:rgba(42,119,80,.18);
  color:#8cf0bc;
}

.filter-live-now.in-range small{
  color:#72a98d;
}

.filter-live-now.in-range strong{
  color:#b8f7d2;
}

.filter-live-now.out-of-range{
  border-color:rgba(255,93,114,.42);
  background:rgba(142,42,57,.18);
  color:#ff9baa;
}

.filter-live-now.out-of-range small{
  color:#c97986;
}

.filter-live-now.out-of-range strong{
  color:#ffc0ca;
}


/* v125 – riktiga LIVE-fel ska synas */
#liveStatus.live-error{
  color:#ff9aa8 !important;
  border-color:rgba(255,93,114,.32) !important;
  background:rgba(120,30,45,.14) !important;
}


/* v126 – LIVE-källa / attribution */
.live-source-note a,
.live-note a{
  color:#8fd7ff;
  font-weight:800;
  text-decoration:none;
}
.live-source-note a:hover,
.live-note a:hover{
  text-decoration:underline;
}


/* v127 – LIVE använder matchspecifika feeds efter schemakoppling */
#liveStatus{
  line-height:1.45;
}


/* v128 – tydligare LIVE-status när någon match fortfarande saknas */
#liveStatus{
  overflow-wrap:anywhere;
}


/* v129 – Snabbvy ersätts av LIVE-ruta när LIVE är aktivt */
.quick-view.live-side-mode{
  border-color:rgba(255,93,114,.32);
  background:
    linear-gradient(180deg,rgba(102,24,39,.13),rgba(8,19,31,.97) 32%),
    rgba(8,19,31,.97);
}

.quick-view.live-side-mode .quick-view-head{
  border-bottom-color:rgba(255,93,114,.18);
}

.quick-view.live-side-mode .quick-view-head .eyebrow{
  display:flex;
  align-items:center;
  gap:7px;
  color:#ff9baa;
}

.quick-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff5d72;
  box-shadow:0 0 0 3px rgba(255,93,114,.11);
  flex:0 0 auto;
}

.live-side-status{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.live-side-status strong{
  font-size:11px;
  font-weight:900;
  letter-spacing:.055em;
}

.live-side-status span{
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:#8797a8;
}

.live-side-status.alive{
  border-color:rgba(71,212,142,.25);
  background:rgba(31,118,78,.11);
}
.live-side-status.alive strong{color:#77e6aa;}

.live-side-status.out{
  border-color:rgba(255,93,114,.30);
  background:rgba(130,34,51,.12);
}
.live-side-status.out strong{color:#ff8798;}

.live-side-card{
  grid-column:1/-1;
  position:relative;
  padding:12px 11px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.live-side-card > span{
  display:block;
  margin-bottom:5px;
  color:#8393a5;
  font-size:9px;
  font-weight:850;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.live-side-card > strong{
  display:block;
  color:#f3f7fb;
  font-family:'DM Mono',monospace;
  font-size:20px;
  line-height:1.08;
  font-weight:700;
}

.live-side-card > small{
  display:block;
  margin-top:5px;
  color:#64788b;
  font-size:8px;
  line-height:1.3;
}

.live-side-card.muted > strong{color:#7d8b99;}

.live-side-note{
  grid-column:1/-1;
  padding:0 2px;
  color:#647789;
  font-size:8px;
  line-height:1.35;
  text-align:center;
}

.quick-view.live-side-mode .quick-view-metrics{
  gap:8px;
}

@media (min-width:1500px){
  .quick-view.live-side-mode .live-side-card > strong{
    font-size:21px;
  }
}


/* v130 – exakt nuvarande LIVE-rad i sidopanelen */
.live-side-current-line{
  grid-column:1/-1;
  padding:10px 11px;
  border:1px solid rgba(90,186,255,.18);
  border-radius:10px;
  background:rgba(44,104,148,.09);
  text-align:center;
}

.live-side-current-line > span{
  display:block;
  margin-bottom:6px;
  color:#7894aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
}

.live-side-current-line > strong{
  display:block;
  color:#f3f7fb;
  font-family:'DM Mono',monospace;
  font-size:15px;
  line-height:1.2;
  letter-spacing:.025em;
}

.live-side-current-line > small{
  display:block;
  margin-top:5px;
  color:#64788b;
  font-size:8px;
}

/* v136 – separera valt tecken från LIVE-markeringen */
/*
   Själva tile-ramen visar om tecknet är valt i systemet.
   LIVE visas i stället som en separat vit/röd ytterram.
*/
.outcome-tile.live-current-sign{
  border:2px solid #284866 !important;
  outline:none !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #d92b2b !important;
  animation:none !important;
}

/* Om det aktuella LIVE-tecknet också är valt ska den gröna ramen alltid synas. */
.outcome-tile.chosen.live-current-sign{
  border-color:var(--accent) !important;
  box-shadow:
    inset 0 0 0 1px rgba(73,211,151,.22),
    0 0 0 2px #ffffff,
    0 0 0 4px #d92b2b !important;
}

/* Tidigare pseudo-ramar får inte täcka den gröna valmarkeringen. */
.outcome-tile.live-current-sign::after{
  display:none !important;
}


/* v137 – lugnare LIVE-hierarki:
   röd LIVE-markering innerst, grön vald-markering ytterst */
.outcome-tile.live-current-sign{
  border:2px solid #d92b2b !important;
  outline:1px solid rgba(255,255,255,.72) !important;
  outline-offset:0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(217,43,43,.16) !important;
}

.outcome-tile.live-current-sign::after{
  display:none !important;
}

/* Om tecknet också är valt: grön ytterram utanför LIVE-rött. */
.outcome-tile.chosen.live-current-sign{
  outline:2px solid #47d48e !important;
  outline-offset:2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.68),
    inset 0 0 0 3px rgba(217,43,43,.14),
    0 0 0 1px rgba(71,212,142,.18) !important;
}

/* Om tecknet inte är valt syns bara LIVE-markeringen. */
.outcome-tile.live-current-sign:not(.chosen){
  outline:1px solid rgba(255,255,255,.72) !important;
  outline-offset:0 !important;
}


/* v138 – LIVE-ramen: röd innerkant + vit ytterkant.
   Den gröna ramen för valt tecken ligger kvar på själva rutan. */
.outcome-tile.live-current-sign{
  position:relative !important;
  z-index:6;
  animation:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* Vald markering ska alltid synas på själva tecknet. */
.outcome-tile.chosen.live-current-sign{
  border:2px solid #47d48e !important;
}

/* Om aktuellt LIVE-tecken inte är valt behålls den vanliga rutans kant. */
.outcome-tile.live-current-sign:not(.chosen){
  border-width:1px !important;
}

/* Själva LIVE-ramen utanför rutan:
   röd närmast rutan, vit längst ut. */
.outcome-tile.live-current-sign::after{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  inset:-5px !important;
  border:2px solid #d92b2b !important;
  border-radius:13px !important;
  box-shadow:0 0 0 2px #ffffff !important;
  pointer-events:none !important;
  animation:none !important;
}


/* v139 – LIVE markeras med bakgrund/spotlight istället för konkurrerande ram */
.outcome-tile.live-current-sign{
  position:relative !important;
  z-index:4;
  animation:none !important;
  outline:none !important;

  /* Behåll den ordinarie/valda ramen helt orörd. */
  box-shadow:
    inset 0 0 34px rgba(217,43,43,.13),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;

  background:
    radial-gradient(circle at 50% 21%, rgba(255,255,255,.055) 0 16%, transparent 34%),
    linear-gradient(180deg, rgba(145,31,42,.12), rgba(72,18,25,.045)) !important;
}

/* Ingen extra LIVE-ram runt hela rutan. */
.outcome-tile.live-current-sign::after{
  display:none !important;
}

/* Själva 1/X/2 får en liten LIVE-spotlight. */
.outcome-tile.live-current-sign > b{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  padding:0 7px;
  margin:-2px auto 2px;
  border-radius:999px;

  color:#ffffff !important;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.18), transparent 36%),
    rgba(184,38,52,.82) !important;

  border:1.5px solid rgba(255,255,255,.82);
  box-shadow:
    0 0 0 3px rgba(217,43,43,.16),
    0 4px 12px rgba(0,0,0,.22);
}

/* Vald = den gröna systemramen ska alltid vinna och synas oförändrat. */
.outcome-tile.chosen.live-current-sign{
  border-color:#47d48e !important;
}

/* Lite lugnare på hover eftersom LIVE-läget är låst. */
.outcome-tile.live-current-sign.live-locked:hover{
  transform:none !important;
}


/* v140 – importera externt SuperSystem-system */
.system-json-import{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto minmax(280px,1.15fr);
  gap:12px;
  align-items:center;
  margin:0 0 16px;
  padding:12px;
  border:1px solid rgba(90,186,255,.2);
  border-radius:11px;
  background:linear-gradient(135deg,rgba(14,37,60,.72),rgba(8,24,40,.72));
}
.system-json-import-copy{
  min-width:0;
}
.system-json-import-kicker{
  display:block;
  margin-bottom:3px;
  color:#76c8ff;
  font:700 9px 'DM Mono',monospace;
  letter-spacing:.85px;
}
.system-json-import-copy strong{
  display:block;
  color:#e7f4ff;
  font:700 12px Manrope,sans-serif;
}
.system-json-import-copy small{
  display:block;
  margin-top:3px;
  color:#8198ae;
  font:10px Manrope,sans-serif;
}
.system-json-import-button{
  min-height:36px;
  padding:8px 15px;
  border-color:rgba(90,186,255,.55);
  background:rgba(23,74,111,.38);
  color:#c5e9ff;
  white-space:nowrap;
}
.system-json-import-button:hover{
  border-color:#5abaff;
  background:rgba(28,90,135,.5);
}
.system-json-import-button:disabled{
  opacity:.58;
  cursor:wait;
}
.system-json-import-status{
  min-height:36px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(35,64,94,.68);
  border-radius:8px;
  background:#091727;
  color:#8198ae;
  font-size:10px;
  line-height:1.35;
}
.system-json-import-status.success{
  border-color:rgba(71,212,142,.42);
  background:rgba(20,73,57,.28);
  color:#9be7c5;
}
.system-json-import-status.warning{
  border-color:rgba(255,189,89,.42);
  background:rgba(91,64,20,.25);
  color:#ffd08a;
}
.system-json-import-status.error{
  border-color:rgba(255,113,138,.46);
  background:rgba(91,28,42,.25);
  color:#ffacba;
}
@media (max-width:900px){
  .system-json-import{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .system-json-import-button{
    width:100%;
  }
}

/* v144 – LIVE-tecken markeras med en röd cirkel bakom symbolen istället för ram/glow */
.outcome-tile.live-current-sign,
.live-sign-tile.is-live-active{
  animation:none !important;
}

.outcome-tile.live-current-sign{
  background:#091727 !important;
  box-shadow:none !important;
  outline:none !important;
}

.outcome-tile.live-current-sign::after{
  display:none !important;
  content:none !important;
}

.outcome-tile.live-current-sign::before,
.live-sign-tile.is-live-active::before{
  content:'';
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.28) 0 12%, rgba(255,255,255,.08) 12%, transparent 33%),
    radial-gradient(circle at center, rgba(224,50,69,.92) 0 62%, rgba(128,18,31,.78) 100%);
  box-shadow:0 6px 16px rgba(120,16,28,.22);
  z-index:0;
}

.outcome-tile.live-current-sign > b,
.live-sign-tile.is-live-active .live-sign-symbol,
.live-sign-tile.is-live-active .live-sign-text,
.live-sign-tile.is-live-active .live-sign-colors,
.live-sign-tile.is-live-active .live-sign-main{
  position:relative;
  z-index:1;
}

.outcome-tile.live-current-sign > b{
  display:block;
  min-width:0;
  height:auto;
  margin:0 auto;
  padding:0;
  border:none !important;
  border-radius:0;
  background:none !important;
  box-shadow:none !important;
  color:#ffffff !important;
}

.live-sign-tile.is-live-active{
  box-shadow:none !important;
  border-color:inherit !important;
}

.live-sign-tile.selected.is-live-active{
  border-color:#507191 !important;
}

/* v145 – renare LIVE-markering: ingen 1/X/2-text i rutorna, mindre tiles, ren röd cirkel i centrum */
body.live-edit-locked .outcome-tile{
  min-height:56px !important;
  padding:6px 8px !important;
}

/* Kolumnrubrikerna visar redan 1 / X / 2 under LIVE. */
body.live-edit-locked .outcome-tile > b{
  display:none !important;
}

.outcome-tile.live-current-sign{
  background:#091727 !important;
  box-shadow:none !important;
  outline:none !important;
}

.outcome-tile.live-current-sign::after{
  display:none !important;
  content:none !important;
}

/* Själva LIVE-indikatorn: endast en diskret röd cirkel mitt i rutan. */
.outcome-tile.live-current-sign::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.18) 0 10%, transparent 34%),
    radial-gradient(circle at center, rgba(213,45,62,.54) 0 62%, rgba(126,17,30,.36) 100%) !important;
  box-shadow:0 0 0 1px rgba(237,73,91,.36), 0 5px 14px rgba(105,15,26,.16) !important;
}

.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small,
.outcome-tile.live-current-sign > .row-share,
.outcome-tile.live-current-sign > .color-labels{
  position:relative;
  z-index:1;
}

/* Lite tajtare typografi i LIVE-rutorna. */
body.live-edit-locked .outcome-tile .odds-value{
  font-size:15px !important;
}
body.live-edit-locked .outcome-tile small{
  margin-top:3px !important;
  font-size:11px !important;
}
body.live-edit-locked .outcome-tile .row-share{
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  font-size:11px !important;
}

/* Samma princip om den separata LIVE-vyn används. */
.live-sign-tile{
  min-height:82px;
  padding:10px 12px;
}
.live-sign-tile.is-live-active{
  box-shadow:none !important;
}
.live-sign-tile.is-live-active .live-sign-symbol{
  display:none !important;
}
.live-sign-tile.is-live-active::before{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34px !important;
  height:34px !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.18) 0 10%, transparent 34%),
    radial-gradient(circle at center, rgba(213,45,62,.54) 0 62%, rgba(126,17,30,.36) 100%) !important;
  box-shadow:0 0 0 1px rgba(237,73,91,.36), 0 5px 14px rgba(105,15,26,.16) !important;
}


/* v146 – LIVE får INTE ändra storleken på teckenrutorna.
   Behåll den röda cirkeln, men återställ normal tile-layout. */

body.live-edit-locked .outcome-tile{
  min-height:76px !important;
  padding:9px !important;
}

body.live-edit-locked .outcome-tile .odds-value{
  font-size:16px !important;
}

body.live-edit-locked .outcome-tile small{
  margin-top:4px !important;
  font-size:11px !important;
}

body.live-edit-locked .outcome-tile .row-share{
  min-width:42px !important;
  width:42px !important;
  height:42px !important;
  font-size:13px !important;
}

@media (min-width:1500px){
  body.live-edit-locked .outcome-tile{
    min-height:68px !important;
    padding:9px !important;
  }

  body.live-edit-locked .outcome-tile .odds-value{
    font-size:17px !important;
  }

  body.live-edit-locked .outcome-tile small{
    font-size:12px !important;
  }

  body.live-edit-locked .outcome-tile .row-share{
    min-width:44px !important;
    width:44px !important;
    height:44px !important;
    font-size:13px !important;
  }
}

@media (max-width:900px){
  body.live-edit-locked .outcome-tile{
    min-height:54px !important;
    padding:6px !important;
  }

  body.live-edit-locked .outcome-tile .odds-value{
    font-size:14px !important;
  }
}

/* LIVE-cirkeln ligger absolut och påverkar aldrig rutans höjd/bredd. */
.outcome-tile.live-current-sign::before{
  width:34px !important;
  height:34px !important;
}

/* Separata LIVE-vyn återgår också till sin normala tile-storlek. */
.live-sign-tile{
  min-height:104px !important;
  padding:12px !important;
}


/* v147 – LIVE-rutan får ALDRIG bli större än övriga teckenrutor.
   Endast den röda cirkeln är LIVE-markering; den är absolut och layout-neutral. */
.outcome-tile.live-current-sign{
  box-sizing:border-box !important;
  height:76px !important;
  min-height:76px !important;
  max-height:76px !important;
  padding:9px !important;
  overflow:visible !important;
}

/* Återställ ramen till samma typ som en vanlig ruta. */
.outcome-tile.live-current-sign:not(.chosen){
  border:2px solid #284866 !important;
  outline:none !important;
  box-shadow:none !important;
}
.outcome-tile.chosen.live-current-sign{
  border:2px solid var(--accent) !important;
  outline:none !important;
  box-shadow:inset 0 0 0 1px rgba(73,211,151,.2) !important;
}

/* LIVE-cirkeln ligger helt ovanpå och kan inte påverka höjden. */
.outcome-tile.live-current-sign::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34px !important;
  height:34px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.outcome-tile.live-current-sign::after{
  display:none !important;
  content:none !important;
}

/* Bred desktop: exakt samma 68 px som de vanliga rutorna. */
@media (min-width:1500px){
  .outcome-tile.live-current-sign{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    padding:9px !important;
  }
}

/* Mobil: exakt samma 54 px som de vanliga rutorna. */
@media (max-width:900px){
  .outcome-tile.live-current-sign{
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    padding:6px !important;
  }
}


/* v148 – rätta LIVE-layouten: mittenrutan får inte hoppa och row-share-cirkeln ska ligga kvar till höger. */
body.live-edit-locked .outcome-tile.live-current-sign{
  height:76px !important;
  min-height:76px !important;
  max-height:76px !important;
  padding:9px !important;
  vertical-align:middle !important;
}

/* Återställ andel-rader-cirkeln till sin vanliga absoluta position. */
.outcome-tile.live-current-sign > .row-share{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  z-index:2 !important;
}

/* Endast innehållstexten ska ligga ovanpå den röda live-pricken – inte flytta runt layouten. */
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small,
.outcome-tile.live-current-sign > .color-labels{
  position:relative !important;
  z-index:1 !important;
}

/* Row-share ska inte delta i dokumentflödet i LIVE-rutan. */
.outcome-tile.live-current-sign > .row-share,
.outcome-tile.live-current-sign > .row-share *{
  display:grid !important;
  place-items:center !important;
}

/* Bred desktop */
@media (min-width:1500px){
  body.live-edit-locked .outcome-tile.live-current-sign{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    padding:9px !important;
  }
}

/* Mobil */
@media (max-width:900px){
  body.live-edit-locked .outcome-tile.live-current-sign{
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    padding:6px !important;
  }
  .outcome-tile.live-current-sign > .row-share{
    right:6px !important;
  }
}

/* v149 – färgreduceringen ska synas GENOM/BAKOM den större LIVE-cirkeln. */

/* Låt färggradienterna överlappa mitten i LIVE-rutan i stället för att lämna ett färglöst centrum. */
.outcome-tile.live-current-sign .color-labels{
  width:58% !important;
  z-index:1 !important;
}

/* Stor LIVE-ring med transparent centrum – döljer inte färgreduceringen. */
.outcome-tile.live-current-sign::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  border:4px solid rgba(236,62,80,.94) !important;
  background:rgba(177,28,44,.07) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 5px 15px rgba(106,15,26,.18) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

/* Odds/streck ska ligga ovanför LIVE-ringen. */
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small{
  position:relative !important;
  z-index:3 !important;
}

/* Andel-rader-cirkeln ska fortsätta ligga längst till höger och ovanpå allt. */
.outcome-tile.live-current-sign > .row-share{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  z-index:4 !important;
}

/* Färgkanterna ska ligga under LIVE-ringen men över basbakgrunden. */
.outcome-tile.live-current-sign > .color-labels{
  position:absolute !important;
  z-index:1 !important;
}

@media (max-width:900px){
  .outcome-tile.live-current-sign::before{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    border-width:3px !important;
  }
  .outcome-tile.live-current-sign > .row-share{
    right:6px !important;
  }
}

/* v150 – LIVE-markering som mjuk transparent bakgrund bakom odds + streckning. */
.outcome-tile.live-current-sign::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:112px !important;
  height:54px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:
    radial-gradient(ellipse at 50% 44%,
      rgba(225,55,72,.34) 0%,
      rgba(198,38,55,.25) 42%,
      rgba(151,25,39,.14) 68%,
      rgba(111,18,29,.03) 100%) !important;
  box-shadow:
    0 5px 16px rgba(104,16,28,.13),
    inset 0 0 18px rgba(255,105,118,.05) !important;
  backdrop-filter:none !important;
}

/* Färgreduceringen ska fortsätta ända in bakom LIVE-markeringen. */
.outcome-tile.live-current-sign > .color-labels{
  width:62% !important;
  z-index:1 !important;
}

/* Odds + Folkets ligger tydligt ovanpå den halvtransparenta LIVE-bakgrunden. */
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small{
  position:relative !important;
  z-index:3 !important;
}

/* Andel rader ligger fortsatt separat till höger. */
.outcome-tile.live-current-sign > .row-share{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  z-index:4 !important;
}

@media (max-width:900px){
  .outcome-tile.live-current-sign::before{
    width:92px !important;
    height:44px !important;
  }
}

/* v151 – LIVE-indikator: riktig röd cirkel. Färgreduceringen lämnas HELT oförändrad. */

/* Återställ exakt normala färgreduceringsmått även när tecknet är LIVE. */
.outcome-tile.live-current-sign > .color-labels{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:40% !important;
  margin:0 !important;
  gap:0 !important;
  border-radius:0 8px 8px 0 !important;
  overflow:hidden !important;
  z-index:1 !important;
}

.outcome-tile.live-current-sign > .color-labels.color-labels-left{
  left:0 !important;
  right:auto !important;
  width:40% !important;
  border-radius:8px 0 0 8px !important;
}

/* Riktig cirkel bakom odds + Folkets %. Ingen ring och ingen oval. */
.outcome-tile.live-current-sign::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  max-width:58px !important;
  max-height:58px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:rgba(214,36,54,.58) !important;
  box-shadow:
    0 5px 15px rgba(120,15,27,.20),
    inset 0 0 16px rgba(255,105,116,.10) !important;
  backdrop-filter:none !important;
}

/* Texten ligger över cirkeln. */
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small{
  position:relative !important;
  z-index:3 !important;
}

/* Andel-rader-cirkeln ligger kvar exakt till höger. */
.outcome-tile.live-current-sign > .row-share{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  z-index:4 !important;
}

@media (max-width:900px){
  .outcome-tile.live-current-sign::before{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
  }
}


/* v152 – mjukare LIVE-cirkel. Färgreduceringens bakgrund ändras INTE. */
.outcome-tile.live-current-sign::before{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;

  background:radial-gradient(
    circle at 50% 48%,
    rgba(226,42,61,.68) 0%,
    rgba(218,37,56,.62) 48%,
    rgba(205,31,50,.46) 66%,
    rgba(180,24,42,.22) 82%,
    rgba(160,20,38,0) 100%
  ) !important;

  box-shadow:
    0 4px 13px rgba(105,13,25,.16),
    0 0 10px rgba(224,39,58,.09) !important;
}

@media (max-width:900px){
  .outcome-tile.live-current-sign::before{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
  }
}


/* v153 – långsam, diskret puls endast när matchen faktiskt är igång */
.outcome-tile.live-current-sign.live-running::before{
  animation:liveCircleSlowPulse 2.8s ease-in-out infinite !important;
}

@keyframes liveCircleSlowPulse{
  0%,100%{
    opacity:.78;
    transform:translate(-50%,-50%) scale(.96);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.06);
  }
}

/* Respektera användare som föredrar mindre rörelse. */
@media (prefers-reduced-motion: reduce){
  .outcome-tile.live-current-sign.live-running::before{
    animation:none !important;
  }
}


/* v156 – Externt system flyttat till Systembibliotek */
.archive-external-system{
  margin:16px 0 18px;
  padding-top:16px;
  border-top:1px solid rgba(83,112,139,.22);
}
.archive-external-system .system-json-import{
  margin:0;
}
.system-panel > .settings{
  margin-top:0;
}


/* v157 – reduceringsstatistik: ett mått per rad */
.color-rules-side .filter-impact{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:4px !important;
  visibility:visible !important;
  opacity:1 !important;
}

.color-rules-side .filter-impact .impact-stat-row{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
}

.color-rules-side .filter-impact .impact-stat-row span{
  display:block;
  color:#7890a6;
  font-size:10px;
  line-height:1.35;
}

.color-rules-side .filter-impact .impact-stat-row strong{
  display:block;
  margin-left:auto;
  color:#dbe8f3;
  font:800 10px 'DM Mono',monospace;
  line-height:1.35;
  white-space:nowrap;
}

/* Statistik ska vara fullt synlig även i LIVE. */
body.live-edit-locked .color-rules-side .filter-impact,
body.live-edit-locked .color-rules-side .filter-impact *{
  opacity:1 !important;
  visibility:visible !important;
}

/* Min/max-värden får synas i LIVE, men inga öka/minska-pilar. */
body.live-edit-locked .color-rules-side .range-inputs input[type="number"]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
  opacity:.82 !important;
  cursor:default !important;
  pointer-events:none !important;
}

body.live-edit-locked .color-rules-side .range-inputs input[type="number"]::-webkit-outer-spin-button,
body.live-edit-locked .color-rules-side .range-inputs input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  margin:0 !important;
  opacity:0 !important;
  display:none !important;
}


/* v158 – reduceringsstatistiken ska inte vara fet */
.color-rules-side .filter-impact .impact-stat-row strong{
  font-weight:400 !important;
}


/* v158 – eget namn på sparade system */
.saved-coupon-name{
  display:flex;
  align-items:center;
  gap:8px;
  color:#edf5ff;
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  margin-bottom:3px;
}

.saved-coupon-name span{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:1px 6px;
  border-radius:999px;
  border:1px solid rgba(73,211,151,.38);
  background:rgba(73,211,151,.10);
  color:#83e8b8;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
}

.saved-coupon-round{
  font-size:10px;
  color:#8fa6ba;
}


/* v159 – Senaste mål, direkt under LIVE-rutan */
.latest-goals-box{
  margin-top:10px !important;
  min-height:148px;
}

.latest-goals-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.latest-goals-head > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.latest-goals-head strong{
  color:#edf5ff;
  font-size:14px;
}

.latest-goal-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 9px;
  border:1px solid #29475f;
  border-radius:999px;
  background:#091827;
  color:#8ca5ba;
  font-size:9px;
  font-weight:800;
}

.latest-goals-list{
  display:grid;
  gap:6px;
}

.latest-goals-empty{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px dashed rgba(74,108,134,.46);
  border-radius:9px;
  background:rgba(7,20,33,.44);
  color:#7891a6;
  font-size:11px;
  text-align:center;
}

.latest-goals-empty.live-waiting span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#df344c;
  box-shadow:0 0 10px rgba(223,52,76,.38);
  animation:latestGoalWaiting 2.8s ease-in-out infinite;
}

@keyframes latestGoalWaiting{
  0%,100%{opacity:.42;transform:scale(.88);}
  50%{opacity:1;transform:scale(1.08);}
}

.latest-goal-item{
  min-height:48px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:7px 9px;
  border:1px solid #213d54;
  border-radius:9px;
  background:#091827;
}

.latest-goal-item.newest{
  border-color:rgba(218,52,73,.48);
  background:
    linear-gradient(90deg,rgba(165,31,48,.12),rgba(9,24,39,0) 42%),
    #091827;
}

.latest-goal-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 40% 35%,rgba(226,53,74,.92),rgba(135,20,37,.72));
  box-shadow:0 4px 12px rgba(104,17,29,.18);
  font-size:14px;
}

.latest-goal-main{
  min-width:0;
}

.latest-goal-top,
.latest-goal-bottom{
  display:flex;
  align-items:center;
  min-width:0;
}

.latest-goal-top{
  gap:7px;
}

.latest-goal-match{
  flex:0 0 auto;
  color:#d95568;
  font:800 9px 'DM Mono',monospace;
}

.latest-goal-top strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e8f1f8;
  font-size:11px;
}

.latest-goal-score{
  flex:0 0 auto;
  margin-left:auto;
  color:#fff;
  font:900 15px 'DM Mono',monospace;
}

.latest-goal-bottom{
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
  color:#728ba0;
  font-size:9px;
}

.latest-goal-bottom span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.latest-goal-bottom span:last-child{
  flex:0 0 auto;
  color:#9bb0c1;
  font-weight:700;
}

@media(max-width:700px){
  .latest-goal-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
}


/* v160 – Senaste mål: egen vänsterruta exakt under LIVE/Snabbvy */
.latest-goals-side{
  position:absolute;
  z-index:23;
  top:0;
  left:6px;
  width:270px;
  box-sizing:border-box;
  margin:0 !important;
  padding:11px;
  border:1px solid #29445d;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(15,33,53,.98),rgba(8,21,35,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

@media (min-width:1500px){
  .latest-goals-side{
    width:var(--ss-side);
    padding:15px;
    border-radius:14px;
  }
}

/* På mindre skärmar ligger rutan i vanligt flöde direkt efter Snabbvy. */
@media (max-width:1499px){
  .latest-goals-side{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    margin:10px 14px 0 !important;
  }
}

.latest-goals-side .latest-goals-head{
  margin-bottom:8px;
}

.latest-goals-side .latest-goals-empty{
  min-height:72px;
}


/* v161 – Senaste mål matchar LIVE-rutans visuella språk */
.latest-goals-side{
  border-color:rgba(255,93,114,.32) !important;
  background:
    linear-gradient(180deg,rgba(102,24,39,.13),rgba(8,19,31,.97) 32%),
    rgba(8,19,31,.97) !important;
}

.latest-goals-side .latest-goals-head{
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(255,93,114,.18);
}

.latest-goals-side .live-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#ff9baa !important;
  font-size:8px;
}

.latest-goals-side .live-kicker::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff5d72;
  box-shadow:0 0 0 3px rgba(255,93,114,.11);
  flex:0 0 auto;
}

.latest-goals-side .latest-goals-head strong{
  color:#dce8f3;
  font-size:12px;
}

.latest-goals-side .latest-goal-count{
  min-height:24px;
  padding:0 8px;
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:#8797a8;
  font:700 9px 'DM Mono',monospace;
}

.latest-goals-side .latest-goal-item{
  min-height:0;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.latest-goals-side .latest-goal-item.newest{
  border-color:rgba(255,93,114,.24);
  background:rgba(130,34,51,.08);
}

.latest-goals-side .latest-goal-icon{
  width:28px;
  height:28px;
  background:rgba(255,93,114,.12);
  border:1px solid rgba(255,93,114,.24);
  box-shadow:none;
  font-size:13px;
}

.latest-goals-side .latest-goal-match{
  color:#ff9baa;
}

.latest-goals-side .latest-goal-top strong{
  color:#f3f7fb;
  font-size:10px;
  font-weight:800;
}

.latest-goals-side .latest-goal-score{
  color:#f3f7fb;
  font-size:14px;
  font-weight:700;
}

.latest-goals-side .latest-goal-bottom{
  color:#64788b;
  font-size:8px;
}

.latest-goals-side .latest-goal-bottom span:last-child{
  color:#8393a5;
  font-weight:700;
}

.latest-goals-side .latest-goals-empty{
  min-height:72px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#64788b;
  font-size:9px;
}

.latest-goals-side .latest-goals-empty.live-waiting span{
  width:7px;
  height:7px;
  background:#ff5d72;
  box-shadow:0 0 0 3px rgba(255,93,114,.11);
}


/* v165 – Senaste mål visas endast i LIVE och listan är scrollbar */
.latest-goals-side[hidden]{
  display:none !important;
}

.latest-goals-side .latest-goals-list{
  max-height:260px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,93,114,.34) rgba(255,255,255,.035);
}

.latest-goals-side .latest-goals-list::-webkit-scrollbar{
  width:7px;
}

.latest-goals-side .latest-goals-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.025);
  border-radius:999px;
}

.latest-goals-side .latest-goals-list::-webkit-scrollbar-thumb{
  background:rgba(255,93,114,.32);
  border-radius:999px;
}

.latest-goals-side .latest-goals-list::-webkit-scrollbar-thumb:hover{
  background:rgba(255,93,114,.46);
}


/* v166 – missad straff visas som händelse men räknas inte som mål */
.latest-goals-side .latest-goal-item.missed-penalty{
  border-color:rgba(255,190,89,.20);
  background:rgba(135,91,24,.06);
}

.latest-goals-side .latest-goal-item.missed-penalty .latest-goal-icon{
  background:rgba(255,190,89,.10);
  border-color:rgba(255,190,89,.25);
  color:#ffd47e;
  font-weight:900;
}

.latest-goals-side .latest-goal-item.missed-penalty .latest-goal-score{
  color:#e7bd70;
  font-size:10px;
  font-weight:700;
}


/* v168 – ljud för nya LIVE-händelser */
.latest-goals-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.event-sound-toggle{
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#8092a4;
  font:700 9px Manrope,sans-serif;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}

.event-sound-toggle:hover{
  border-color:rgba(255,93,114,.28);
  color:#b7c5d1;
}

.event-sound-toggle.is-on{
  border-color:rgba(255,93,114,.38);
  background:rgba(167,36,53,.13);
  color:#ff9cab;
}

.event-sound-toggle.is-on::before{
  content:'●';
  margin-right:5px;
  color:#ff5d72;
  font-size:7px;
}


/* v169 – kompakt ljudikon i Senaste mål-headern */
.latest-goals-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

.event-sound-toggle{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.025) !important;
  color:#778b9d !important;
  cursor:pointer;
  line-height:1;
}

.event-sound-toggle:hover{
  border-color:rgba(255,93,114,.30) !important;
  background:rgba(255,255,255,.045) !important;
  color:#b7c6d1 !important;
}

.event-sound-toggle.is-on{
  border-color:rgba(255,93,114,.42) !important;
  background:rgba(167,36,53,.14) !important;
  color:#ff8798 !important;
  box-shadow:0 0 0 1px rgba(255,93,114,.05) inset;
}

/* Ta bort tidigare röda text-pricken. */
.event-sound-toggle.is-on::before{
  content:none !important;
  display:none !important;
}

.event-sound-toggle .sound-icon{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.event-sound-toggle:focus-visible{
  outline:2px solid rgba(255,93,114,.45);
  outline-offset:2px;
}


/* v170 – ljudikonen ändrar bara symbol, ingen aktiv färg */
.latest-goals-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

.event-sound-toggle,
.event-sound-toggle.is-on{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.025) !important;
  color:#7f91a2 !important;
  box-shadow:none !important;
}

.event-sound-toggle:hover,
.event-sound-toggle.is-on:hover{
  border-color:rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.04) !important;
  color:#aebdca !important;
}

.event-sound-toggle .sound-icon{
  width:15px;
  height:15px;
}

/* Antal mål och ljudknapp ska ligga exakt i samma höjdlinje. */
.latest-goal-count,
.event-sound-toggle{
  align-self:center;
}


/* v174 – tydligare LIVE-puls, fortfarande utan layoutförändring */
.outcome-tile.live-current-sign.live-running::before{
  animation:liveCircleSlowPulseV174 2.25s ease-in-out infinite !important;
  transform-origin:center center;
}

@keyframes liveCircleSlowPulseV174{
  0%,100%{
    opacity:.68;
    transform:translate(-50%,-50%) scale(.93);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.10);
  }
}

/* Score-fallback: tydligt historiskt, men fortfarande ett mål. */
.latest-goals-side .latest-goal-item.inferred-goal{
  opacity:.88;
}

.latest-goals-side .latest-goal-item.inferred-goal .latest-goal-score{
  font-size:9px;
  opacity:.72;
}


/* v184 – mjukare och snyggare LIVE-cirkel */
.outcome-tile.live-current-sign{
  overflow:hidden !important;
}

.outcome-tile.live-current-sign::before{
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 33% 28%,
      rgba(255,255,255,.28) 0 9%,
      rgba(255,255,255,.12) 12%,
      transparent 30%),
    radial-gradient(circle at 50% 48%,
      rgba(255,106,124,.92) 0 34%,
      rgba(238,70,88,.78) 48%,
      rgba(194,36,53,.52) 70%,
      rgba(118,14,27,.10) 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.16),
    inset 0 -3px 8px rgba(103,12,23,.18),
    0 0 0 1px rgba(255,120,135,.16),
    0 8px 18px rgba(175,27,43,.18) !important;
  filter:saturate(1.04) !important;
}

.outcome-tile.live-current-sign::after{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    radial-gradient(circle,
      rgba(255,92,113,.24) 0 40%,
      rgba(255,92,113,.12) 56%,
      rgba(255,92,113,.05) 68%,
      transparent 78%) !important;
  filter:blur(4px) !important;
  opacity:.95 !important;
}

.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small,
.outcome-tile.live-current-sign > .row-share,
.outcome-tile.live-current-sign > .color-labels{
  position:relative !important;
  z-index:1 !important;
}


/* v185 – LIVE: levande/döda rader för 8 rätt */
.live-row-survival{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.live-row-survival-item{
  min-width:0;
  padding:9px 7px 8px;
  text-align:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.022);
}

.live-row-survival-item > span{
  display:block;
  margin-bottom:4px;
  color:#75879a;
  font-size:8px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.live-row-survival-item > strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#edf4fb;
  font-family:'DM Mono',monospace;
  font-size:14px;
  line-height:1.1;
  font-weight:700;
}

.live-row-survival.alive .live-row-survival-item:first-child > strong,
.live-row-survival.alive .live-row-survival-item:last-child > strong{
  color:#82dcb0;
}

.live-row-survival.out .live-row-survival-item:first-child > strong,
.live-row-survival.out .live-row-survival-item:last-child > strong{
  color:#ff8798;
}

.live-row-survival-item:nth-child(2) > strong{
  color:#8a99a8;
}

.live-row-progress{
  grid-column:1/-1;
  height:4px;
  margin-top:-3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}

.live-row-progress > span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:rgba(91,211,151,.72);
  transition:width .35s ease;
}

.live-side-status.out + .live-row-survival + .live-row-progress > span{
  background:rgba(255,93,114,.72);
}


/* v186 – LIVE-indikator bakom siffrorna och något mjukare */
.outcome-tile.live-current-sign{
  isolation:isolate !important;
}

/* Allt verkligt innehåll ska ligga tydligt ovanför LIVE-glöden. */
.outcome-tile.live-current-sign > b,
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small,
.outcome-tile.live-current-sign > .row-share,
.outcome-tile.live-current-sign > .color-labels{
  position:relative !important;
  z-index:3 !important;
}

.outcome-tile.live-current-sign::before{
  z-index:0 !important;
  width:35px !important;
  height:35px !important;
  opacity:.68 !important;
  background:
    radial-gradient(circle at 34% 29%,
      rgba(255,255,255,.18) 0 8%,
      rgba(255,255,255,.07) 13%,
      transparent 30%),
    radial-gradient(circle at 50% 50%,
      rgba(255,104,120,.76) 0 30%,
      rgba(234,65,83,.60) 49%,
      rgba(188,34,51,.34) 68%,
      rgba(127,18,31,.06) 100%) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.10),
    0 5px 12px rgba(150,24,39,.11) !important;
  filter:none !important;
}

.outcome-tile.live-current-sign::after{
  z-index:0 !important;
  width:50px !important;
  height:50px !important;
  opacity:.52 !important;
  background:
    radial-gradient(circle,
      rgba(255,92,113,.18) 0 34%,
      rgba(255,92,113,.09) 54%,
      rgba(255,92,113,.025) 70%,
      transparent 82%) !important;
  filter:blur(5px) !important;
}

/* Pulsen ska kännas levande men inte blända texten. */
.outcome-tile.live-current-sign.live-running::before{
  animation:liveCircleSoftPulseV186 2.4s ease-in-out infinite !important;
}

@keyframes liveCircleSoftPulseV186{
  0%,100%{
    opacity:.54;
    transform:translate(-50%,-50%) scale(.95);
  }
  50%{
    opacity:.73;
    transform:translate(-50%,-50%) scale(1.07);
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running::before{
    animation:none !important;
  }
}


/* v187 – row-share ska alltid ligga korrekt på LIVE-tecknet */
.outcome-tile.live-current-sign > .row-share{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  z-index:5 !important;

  display:grid !important;
  place-items:center !important;

  width:42px !important;
  min-width:42px !important;
  height:42px !important;

  border-radius:50% !important;
  pointer-events:none !important;
}

/* LIVE-glöden får aldrig täcka row-share eller text. */
.outcome-tile.live-current-sign::before,
.outcome-tile.live-current-sign::after{
  z-index:0 !important;
}

.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small{
  position:relative !important;
  z-index:4 !important;
}

/* Visa / dölj måste vinna även över alla LIVE-regler ovan. */
body.hide-value-on-signs .outcome-tile .value-edge,
body.hide-value-on-signs .outcome-tile.live-current-sign .value-edge{
  display:none !important;
}

body.hide-rows-on-signs .outcome-tile .row-share,
body.hide-rows-on-signs .outcome-tile.live-current-sign > .row-share{
  display:none !important;
}

@media (min-width:1500px){
  .outcome-tile.live-current-sign > .row-share{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .row-share{
    right:6px !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    font-size:11px !important;
  }
}


/* v188 – Visa/Dölj ska fungera även när LIVE-redigering är låst */
body.live-edit-locked #toggleHideValue,
body.live-edit-locked #toggleHideForecast,
body.live-edit-locked #toggleHideRowsPerSign{
  opacity:1 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

body.live-edit-locked .display-box,
body.live-edit-locked .display-box summary,
body.live-edit-locked .display-toggle,
body.live-edit-locked .display-toggle span{
  pointer-events:auto !important;
  cursor:pointer !important;
  opacity:1 !important;
}

/* Visningsinställningarna ska fortsatt vinna efter varje LIVE-rendering. */
body.hide-value-on-signs .outcome-tile .value-edge{
  display:none !important;
}

body.hide-forecast-on-signs .outcome-tile .forecast-arrow,
body.hide-forecast-on-signs .outcome-tile .forecast-value{
  display:none !important;
}

body.hide-rows-on-signs .outcome-tile .row-share{
  display:none !important;
}


/* v189 – kort målflash på aktuell matchrad */
#matches tr.live-goal-flash .match-name{
  animation:liveGoalNameFlashV189 3s ease-out;
}

#matches tr.live-goal-flash .outcome-tile{
  animation:liveGoalTileFlashV189 3s ease-out;
}

#matches tr.live-goal-flash .outcome-tile.live-current-sign::after{
  animation:liveGoalHaloFlashV189 3s ease-out;
}

@keyframes liveGoalNameFlashV189{
  0%{
    text-shadow:
      0 0 9px rgba(255,111,128,.72),
      0 0 20px rgba(255,71,94,.34);
  }
  22%{
    text-shadow:
      0 0 7px rgba(255,111,128,.50),
      0 0 15px rgba(255,71,94,.22);
  }
  100%{
    text-shadow:none;
  }
}

@keyframes liveGoalTileFlashV189{
  0%{
    box-shadow:
      0 0 0 1px rgba(255,105,123,.40),
      0 0 18px rgba(255,64,88,.30),
      0 0 34px rgba(255,64,88,.12);
  }
  20%{
    box-shadow:
      0 0 0 1px rgba(255,105,123,.25),
      0 0 13px rgba(255,64,88,.20),
      0 0 25px rgba(255,64,88,.08);
  }
  100%{
    box-shadow:
      0 0 0 1px rgba(255,105,123,0),
      0 0 0 rgba(255,64,88,0);
  }
}

@keyframes liveGoalHaloFlashV189{
  0%{
    opacity:.90;
    filter:blur(4px) brightness(1.18);
  }
  30%{
    opacity:.68;
    filter:blur(5px) brightness(1.08);
  }
  100%{
    opacity:.52;
    filter:blur(5px) brightness(1);
  }
}

@media (prefers-reduced-motion:reduce){
  #matches tr.live-goal-flash .match-name,
  #matches tr.live-goal-flash .outcome-tile,
  #matches tr.live-goal-flash .outcome-tile.live-current-sign::after{
    animation:none !important;
  }
}


/* v190 – nummerfält: stegpilar visas endast vid hover */
/* Chromium / Edge / Safari: behåll spinnerfunktionen men gör den osynlig i vila. */
input[type="number"]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  margin:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .12s ease !important;
}

/* Pilarna visas först när själva nummerfältet hovras. */
input[type="number"]:hover{
  -moz-appearance:auto !important;
  appearance:auto !important;
}

input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  opacity:1 !important;
  pointer-events:auto !important;
  display:block !important;
}

/* Samma beteende i färgreduceringens min/max-fält. */
.range-inputs input[type="number"]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
}

.range-inputs input[type="number"]::-webkit-outer-spin-button,
.range-inputs input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.range-inputs input[type="number"]:hover{
  -moz-appearance:auto !important;
  appearance:auto !important;
}

.range-inputs input[type="number"]:hover::-webkit-outer-spin-button,
.range-inputs input[type="number"]:hover::-webkit-inner-spin-button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  opacity:1 !important;
  pointer-events:auto !important;
  display:block !important;
}

/* Även LIVE-låsta min/max-fält följer samma visuella hover-princip.
   readonly/disabled-logiken styr fortfarande om värdet faktiskt får ändras. */
body.live-edit-locked .color-rules-side .range-inputs input[type="number"]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
}

body.live-edit-locked .color-rules-side .range-inputs input[type="number"]:hover{
  -moz-appearance:auto !important;
  appearance:auto !important;
}

body.live-edit-locked .color-rules-side .range-inputs input[type="number"]::-webkit-outer-spin-button,
body.live-edit-locked .color-rules-side .range-inputs input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  opacity:0 !important;
  display:block !important;
}

body.live-edit-locked .color-rules-side .range-inputs input[type="number"]:hover::-webkit-outer-spin-button,
body.live-edit-locked .color-rules-side .range-inputs input[type="number"]:hover::-webkit-inner-spin-button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  opacity:1 !important;
  display:block !important;
}


/* v191 – visade teckenodds är fair odds (100 % återbetalning) */
.outcome-tile .odds-value{
  cursor:help;
}

.outcome-tile .odds-value:hover{
  text-decoration:underline dotted rgba(155,176,200,.42);
  text-underline-offset:3px;
}


/* v195 – tydligare puls på matcher som faktiskt är LIVE */
.outcome-tile.live-current-sign.live-running::before{
  animation:liveCirclePulseV195 1.75s ease-in-out infinite !important;
  transform-origin:center center !important;
  will-change:transform,opacity,filter;
}

.outcome-tile.live-current-sign.live-running::after{
  animation:liveHaloPulseV195 1.75s ease-in-out infinite !important;
  transform-origin:center center !important;
  will-change:transform,opacity,filter;
}

@keyframes liveCirclePulseV195{
  0%,100%{
    opacity:.46;
    transform:translate(-50%,-50%) scale(.88);
    filter:saturate(.92) brightness(.94);
  }
  50%{
    opacity:.82;
    transform:translate(-50%,-50%) scale(1.14);
    filter:saturate(1.10) brightness(1.10);
  }
}

@keyframes liveHaloPulseV195{
  0%,100%{
    opacity:.30;
    transform:translate(-50%,-50%) scale(.92);
    filter:blur(6px) brightness(.95);
  }
  50%{
    opacity:.70;
    transform:translate(-50%,-50%) scale(1.18);
    filter:blur(5px) brightness(1.12);
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running::before,
  .outcome-tile.live-current-sign.live-running::after{
    animation:none !important;
  }
}


/* v196 – betydligt tydligare LIVE-puls */
.outcome-tile.live-current-sign.live-running::before{
  animation:liveCirclePulseV196 1.45s cubic-bezier(.45,0,.35,1) infinite !important;
  transform-origin:center center !important;
  will-change:transform,opacity,filter;
}

.outcome-tile.live-current-sign.live-running::after{
  animation:liveHaloPulseV196 1.45s cubic-bezier(.45,0,.35,1) infinite !important;
  transform-origin:center center !important;
  will-change:transform,opacity,filter;
}

/* Själva röda kärnan rör sig nu tydligt i storlek och ljusstyrka. */
@keyframes liveCirclePulseV196{
  0%,100%{
    opacity:.34;
    transform:translate(-50%,-50%) scale(.78);
    filter:saturate(.88) brightness(.88);
  }
  48%,52%{
    opacity:.96;
    transform:translate(-50%,-50%) scale(1.24);
    filter:saturate(1.18) brightness(1.18);
  }
}

/* Halon expanderar tydligt runt tecknet men ligger fortsatt bakom texten. */
@keyframes liveHaloPulseV196{
  0%,100%{
    opacity:.18;
    transform:translate(-50%,-50%) scale(.78);
    filter:blur(7px) brightness(.90);
  }
  48%,52%{
    opacity:.86;
    transform:translate(-50%,-50%) scale(1.36);
    filter:blur(5px) brightness(1.20);
  }
}

/* Matchens score/status-ruta hjälper också till att signalera att matchen pågår. */
body.live-edit-locked .match-live-score.live-running,
body.live-edit-locked .match-live-status.live-running{
  animation:liveStatusPulseV196 1.45s ease-in-out infinite !important;
}

@keyframes liveStatusPulseV196{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,93,114,.08),
      0 0 0 rgba(255,93,114,0);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,93,114,.32),
      0 0 13px rgba(255,93,114,.18);
  }
}

/* Ytterst subtil puls i kanten på det aktuella tecknet. */
.outcome-tile.live-current-sign.live-running{
  animation:liveTileBorderPulseV196 1.45s ease-in-out infinite !important;
}

@keyframes liveTileBorderPulseV196{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,93,114,0) !important;
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,93,114,.18),
      0 0 16px rgba(255,93,114,.10) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running,
  .outcome-tile.live-current-sign.live-running::before,
  .outcome-tile.live-current-sign.live-running::after,
  body.live-edit-locked .match-live-score.live-running,
  body.live-edit-locked .match-live-status.live-running{
    animation:none !important;
  }
}


/* v197 – tydlig puls på HELA matchen som faktiskt pågår */
#matches tr.live-match-running > td{
  animation:liveWholeRowPulseV197 1.35s ease-in-out infinite !important;
}

#matches tr.live-match-running .match-live-result{
  animation:liveScoreBadgePulseV197 1.35s ease-in-out infinite !important;
}

#matches tr.live-match-running .match-name-text{
  animation:liveMatchNamePulseV197 1.35s ease-in-out infinite !important;
}

/* Behåll den röda cirkelpulsen men gör kärnan tydligare samtidigt. */
#matches tr.live-match-running .outcome-tile.live-current-sign::before{
  animation:liveCirclePulseV197 1.35s ease-in-out infinite !important;
}

#matches tr.live-match-running .outcome-tile.live-current-sign::after{
  animation:liveHaloPulseV197 1.35s ease-in-out infinite !important;
}

@keyframes liveWholeRowPulseV197{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.04),
      inset 0 -1px 0 rgba(255,93,114,.04);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.34),
      inset 0 -1px 0 rgba(255,93,114,.34);
  }
}

@keyframes liveScoreBadgePulseV197{
  0%,100%{
    border-color:rgba(44,92,126,.78);
    box-shadow:0 0 0 rgba(255,93,114,0);
    filter:brightness(1);
  }
  50%{
    border-color:rgba(255,93,114,.72);
    box-shadow:
      0 0 0 1px rgba(255,93,114,.16),
      0 0 16px rgba(255,93,114,.24);
    filter:brightness(1.10);
  }
}

@keyframes liveMatchNamePulseV197{
  0%,100%{
    text-shadow:none;
    filter:brightness(1);
  }
  50%{
    text-shadow:0 0 10px rgba(255,93,114,.34);
    filter:brightness(1.12);
  }
}

@keyframes liveCirclePulseV197{
  0%,100%{
    opacity:.38;
    transform:translate(-50%,-50%) scale(.76);
    filter:brightness(.9) saturate(.9);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.30);
    filter:brightness(1.20) saturate(1.18);
  }
}

@keyframes liveHaloPulseV197{
  0%,100%{
    opacity:.18;
    transform:translate(-50%,-50%) scale(.76);
    filter:blur(7px) brightness(.9);
  }
  50%{
    opacity:.92;
    transform:translate(-50%,-50%) scale(1.42);
    filter:blur(5px) brightness(1.18);
  }
}

@media (prefers-reduced-motion:reduce){
  #matches tr.live-match-running > td,
  #matches tr.live-match-running .match-live-result,
  #matches tr.live-match-running .match-name-text,
  #matches tr.live-match-running .outcome-tile.live-current-sign::before,
  #matches tr.live-match-running .outcome-tile.live-current-sign::after{
    animation:none !important;
  }
}


/* v198 – riktig DOM-baserad LIVE-cirkel.
   Tidigare pseudo-element hade transform/opacity med !important och kunde därför inte animeras. */
.outcome-tile.live-current-sign::before,
.outcome-tile.live-current-sign::after{
  display:none !important;
  animation:none !important;
}

.outcome-tile.live-current-sign{
  isolation:isolate !important;
}

.outcome-tile.live-current-sign > .live-indicator-disc{
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  transform:translate(-50%,-50%) scale(.88);
  transform-origin:center;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.48;

  background:
    radial-gradient(circle at 34% 29%,
      rgba(255,255,255,.19) 0 8%,
      rgba(255,255,255,.07) 13%,
      transparent 30%),
    radial-gradient(circle at 50% 50%,
      rgba(255,111,126,.78) 0 29%,
      rgba(235,65,83,.62) 48%,
      rgba(190,35,52,.37) 67%,
      rgba(127,18,31,.04) 100%);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.10),
    0 0 8px rgba(255,76,97,.12),
    0 6px 14px rgba(146,22,38,.10);
}

/* Teckeninnehållet ligger alltid framför cirkeln. */
.outcome-tile.live-current-sign > b,
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small,
.outcome-tile.live-current-sign > .row-share,
.outcome-tile.live-current-sign > .color-labels{
  position:relative !important;
  z-index:3 !important;
}

/* Endast matcher som faktiskt pågår pulserar. */
.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV198 1.35s cubic-bezier(.42,0,.35,1) infinite;
  will-change:transform,opacity,box-shadow,filter;
}

@keyframes liveIndicatorDiscPulseV198{
  0%,100%{
    opacity:.30;
    transform:translate(-50%,-50%) scale(.72);
    filter:brightness(.88) saturate(.90);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.08),
      0 0 4px rgba(255,76,97,.06),
      0 5px 10px rgba(146,22,38,.07);
  }
  50%{
    opacity:.88;
    transform:translate(-50%,-50%) scale(1.28);
    filter:brightness(1.16) saturate(1.12);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.15),
      0 0 17px rgba(255,76,97,.28),
      0 0 30px rgba(255,76,97,.10),
      0 7px 16px rgba(146,22,38,.14);
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .live-indicator-disc{
    width:34px;
    height:34px;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running > .live-indicator-disc{
    animation:none !important;
  }
}


/* v199 – större LIVE-cirkel, lugnare puls i samma takt som kanteffekten */
.outcome-tile.live-current-sign > .live-indicator-disc{
  width:48px !important;
  height:48px !important;
  opacity:.56 !important;
  transform:translate(-50%,-50%) scale(.96) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.10),
    0 0 10px rgba(255,76,97,.10),
    0 6px 15px rgba(146,22,38,.08) !important;
}

.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV199 1.35s ease-in-out infinite !important;
}

@keyframes liveIndicatorDiscPulseV199{
  0%,100%{
    opacity:.48;
    transform:translate(-50%,-50%) scale(.94);
    filter:brightness(.97) saturate(.98);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.09),
      0 0 8px rgba(255,76,97,.08),
      0 6px 13px rgba(146,22,38,.07);
  }
  50%{
    opacity:.66;
    transform:translate(-50%,-50%) scale(1.05);
    filter:brightness(1.05) saturate(1.04);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.12),
      0 0 14px rgba(255,76,97,.16),
      0 0 22px rgba(255,76,97,.06),
      0 7px 16px rgba(146,22,38,.10);
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .live-indicator-disc{
    width:42px !important;
    height:42px !important;
  }
}


/* v200 – lugnare LIVE-cirkel + puls i själva ytterkanten på teckenrutan */

/* Lite större LIVE-cirkel i alla lägen. */
.outcome-tile.live-current-sign > .live-indicator-disc{
  width:54px !important;
  height:54px !important;
  opacity:.54 !important;
  transform:translate(-50%,-50%) scale(.98) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.09),
    0 5px 13px rgba(146,22,38,.07) !important;
}

/* Cirkelpulsen finns kvar, men är mycket lugnare. */
.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV200 1.35s ease-in-out infinite !important;
}

@keyframes liveIndicatorDiscPulseV200{
  0%,100%{
    opacity:.49;
    transform:translate(-50%,-50%) scale(.97);
    filter:brightness(.99) saturate(.99);
  }
  50%{
    opacity:.60;
    transform:translate(-50%,-50%) scale(1.025);
    filter:brightness(1.025) saturate(1.02);
  }
}

/* Ta bort känslan av en separat pulserande kant runt själva LIVE-cirkeln. */
.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.09),
    0 5px 13px rgba(146,22,38,.07) !important;
}

/* Det är NU själva ytterkanten på teckenrutan som pulserar. */
.outcome-tile.live-current-sign.live-running{
  animation:liveOutcomeBorderPulseV200 1.35s ease-in-out infinite !important;
}

@keyframes liveOutcomeBorderPulseV200{
  0%,100%{
    border-color:#284866;
    box-shadow:
      0 0 0 0 rgba(255,93,114,0) !important;
  }
  50%{
    border-color:rgba(255,104,120,.52);
    box-shadow:
      0 0 0 1px rgba(255,93,114,.10),
      0 0 9px rgba(255,93,114,.07) !important;
  }
}

/* Om tecknet samtidigt är valt ska den gröna systemmarkeringen fortfarande synas. */
.outcome-tile.chosen.live-current-sign.live-running{
  animation:liveChosenOutcomeBorderPulseV200 1.35s ease-in-out infinite !important;
}

@keyframes liveChosenOutcomeBorderPulseV200{
  0%,100%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20),
      0 0 0 rgba(255,93,114,0) !important;
  }
  50%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20),
      0 0 0 1px rgba(255,93,114,.13),
      0 0 10px rgba(255,93,114,.08) !important;
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .live-indicator-disc{
    width:47px !important;
    height:47px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running,
  .outcome-tile.chosen.live-current-sign.live-running,
  .outcome-tile.live-current-sign.live-running > .live-indicator-disc{
    animation:none !important;
  }
}


/* v201 – större LIVE-cirklar, tydligare cirkelpuls, lugnare ytterkant */

/* Alla LIVE-cirklar blir lite större, även före/efter pågående läge. */
.outcome-tile.live-current-sign > .live-indicator-disc{
  width:60px !important;
  height:60px !important;
  opacity:.56 !important;
  transform:translate(-50%,-50%) scale(.98) !important;
}

/* Själva cirkeln får tydligare puls än v200. */
.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV201 1.35s ease-in-out infinite !important;
}

@keyframes liveIndicatorDiscPulseV201{
  0%,100%{
    opacity:.43;
    transform:translate(-50%,-50%) scale(.92);
    filter:brightness(.96) saturate(.97);
  }
  50%{
    opacity:.72;
    transform:translate(-50%,-50%) scale(1.08);
    filter:brightness(1.07) saturate(1.06);
  }
}

/* Ytterkanten tonas ner och går långsammare. */
.outcome-tile.live-current-sign.live-running{
  animation:liveOutcomeBorderPulseV201 1.85s ease-in-out infinite !important;
}

@keyframes liveOutcomeBorderPulseV201{
  0%,100%{
    border-color:#284866;
    box-shadow:none !important;
  }
  50%{
    border-color:rgba(255,104,120,.32);
    box-shadow:
      0 0 0 1px rgba(255,93,114,.05),
      0 0 6px rgba(255,93,114,.035) !important;
  }
}

/* Vald grön kant ligger kvar; LIVE-effekten blir bara en mycket svag yttre glöd. */
.outcome-tile.chosen.live-current-sign.live-running{
  animation:liveChosenOutcomeBorderPulseV201 1.85s ease-in-out infinite !important;
}

@keyframes liveChosenOutcomeBorderPulseV201{
  0%,100%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20) !important;
  }
  50%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20),
      0 0 0 1px rgba(255,93,114,.06),
      0 0 6px rgba(255,93,114,.04) !important;
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .live-indicator-disc{
    width:52px !important;
    height:52px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running,
  .outcome-tile.chosen.live-current-sign.live-running,
  .outcome-tile.live-current-sign.live-running > .live-indicator-disc{
    animation:none !important;
  }
}


/* v202 – LIVE: tydligare färgpuls i cirkeln, mycket lugnare yttereffekter */

/* Behåll samma lugna takt, men låt framför allt FÄRGEN signalera LIVE. */
.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV202 1.35s ease-in-out infinite !important;
}

@keyframes liveIndicatorDiscPulseV202{
  0%,100%{
    opacity:.48;
    transform:translate(-50%,-50%) scale(.97);
    filter:brightness(.92) saturate(.82);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.07),
      0 5px 12px rgba(126,18,34,.05) !important;
  }
  50%{
    opacity:.76;
    transform:translate(-50%,-50%) scale(1.035);
    filter:brightness(1.12) saturate(1.34);
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.12),
      0 5px 13px rgba(181,27,45,.09) !important;
  }
}

/* Ytterkanten på LIVE-tecknet ska bara anas. */
.outcome-tile.live-current-sign.live-running{
  animation:liveOutcomeBorderPulseV202 2.8s ease-in-out infinite !important;
}

@keyframes liveOutcomeBorderPulseV202{
  0%,100%{
    border-color:#284866;
    box-shadow:none !important;
  }
  50%{
    border-color:rgba(255,104,120,.18);
    box-shadow:
      0 0 0 1px rgba(255,93,114,.025) !important;
  }
}

/* Grönt valt tecken ligger kvar stabilt; endast ytterst svag LIVE-ton. */
.outcome-tile.chosen.live-current-sign.live-running{
  animation:liveChosenOutcomeBorderPulseV202 2.8s ease-in-out infinite !important;
}

@keyframes liveChosenOutcomeBorderPulseV202{
  0%,100%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20) !important;
  }
  50%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20),
      0 0 0 1px rgba(255,93,114,.035) !important;
  }
}

/* Även den tidigare hela-matchen-effekten tonas ner rejält. */
#matches tr.live-match-running > td{
  animation:liveWholeRowPulseV202 2.8s ease-in-out infinite !important;
}

@keyframes liveWholeRowPulseV202{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.015),
      inset 0 -1px 0 rgba(255,93,114,.015);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.085),
      inset 0 -1px 0 rgba(255,93,114,.085);
  }
}

#matches tr.live-match-running .match-live-result{
  animation:liveScoreBadgePulseV202 2.8s ease-in-out infinite !important;
}

@keyframes liveScoreBadgePulseV202{
  0%,100%{
    box-shadow:none;
    filter:brightness(1);
  }
  50%{
    box-shadow:0 0 7px rgba(255,93,114,.055);
    filter:brightness(1.025);
  }
}

#matches tr.live-match-running .match-name-text{
  animation:none !important;
  text-shadow:none !important;
  filter:none !important;
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running,
  .outcome-tile.chosen.live-current-sign.live-running,
  .outcome-tile.live-current-sign.live-running > .live-indicator-disc,
  #matches tr.live-match-running > td,
  #matches tr.live-match-running .match-live-result{
    animation:none !important;
  }
}


/* v203 – behåll v202-cirkeln exakt, men gör ytterkantspulsen synlig igen */

/* Ovalt tecken som inte är valt: lugn men tydligt synlig LIVE-kant. */
.outcome-tile.live-current-sign.live-running{
  animation:liveOutcomeBorderPulseV203 2.35s ease-in-out infinite !important;
}

@keyframes liveOutcomeBorderPulseV203{
  0%,100%{
    border-color:#284866;
    box-shadow:none !important;
  }
  50%{
    border-color:rgba(255,104,120,.42);
    box-shadow:
      0 0 0 1px rgba(255,93,114,.065),
      0 0 8px rgba(255,93,114,.055) !important;
  }
}

/* Valda tecken behåller sin gröna kant, men får en subtil röd LIVE-glöd utanför. */
.outcome-tile.chosen.live-current-sign.live-running{
  animation:liveChosenOutcomeBorderPulseV203 2.35s ease-in-out infinite !important;
}

@keyframes liveChosenOutcomeBorderPulseV203{
  0%,100%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20) !important;
  }
  50%{
    border-color:var(--accent);
    box-shadow:
      inset 0 0 0 1px rgba(73,211,151,.20),
      0 0 0 1px rgba(255,93,114,.08),
      0 0 8px rgba(255,93,114,.06) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running,
  .outcome-tile.chosen.live-current-sign.live-running{
    animation:none !important;
  }
}


/* v204 – rätt effekt: lugn puls runt HELA matchraden.
   LIVE-cirkeln lämnas exakt som i v202/v203. */

/* Ta bort puls från själva teckenrutans ytterkant. */
.outcome-tile.live-current-sign.live-running,
.outcome-tile.chosen.live-current-sign.live-running{
  animation:none !important;
}

/* Ingen separat puls på score-badge eller matchnamn. */
#matches tr.live-match-running .match-live-result,
#matches tr.live-match-running .match-name-text{
  animation:none !important;
}

/* Över- och underkant genom hela LIVE-raden. */
#matches tr.live-match-running > td{
  animation:liveMatchOuterEdgeV204 2.65s ease-in-out infinite !important;
}

@keyframes liveMatchOuterEdgeV204{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.055),
      inset 0 -1px 0 rgba(255,93,114,.055);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.27),
      inset 0 -1px 0 rgba(255,93,114,.27);
  }
}

/* Vänster ytterkant på första cellen. */
#matches tr.live-match-running > td:first-child{
  animation:liveMatchOuterEdgeLeftV204 2.65s ease-in-out infinite !important;
}

@keyframes liveMatchOuterEdgeLeftV204{
  0%,100%{
    box-shadow:
      inset 1px 0 0 rgba(255,93,114,.055),
      inset 0 1px 0 rgba(255,93,114,.055),
      inset 0 -1px 0 rgba(255,93,114,.055);
  }
  50%{
    box-shadow:
      inset 1px 0 0 rgba(255,93,114,.27),
      inset 0 1px 0 rgba(255,93,114,.27),
      inset 0 -1px 0 rgba(255,93,114,.27);
  }
}

/* Höger ytterkant på sista cellen. */
#matches tr.live-match-running > td:last-child{
  animation:liveMatchOuterEdgeRightV204 2.65s ease-in-out infinite !important;
}

@keyframes liveMatchOuterEdgeRightV204{
  0%,100%{
    box-shadow:
      inset -1px 0 0 rgba(255,93,114,.055),
      inset 0 1px 0 rgba(255,93,114,.055),
      inset 0 -1px 0 rgba(255,93,114,.055);
  }
  50%{
    box-shadow:
      inset -1px 0 0 rgba(255,93,114,.27),
      inset 0 1px 0 rgba(255,93,114,.27),
      inset 0 -1px 0 rgba(255,93,114,.27);
  }
}

@media (prefers-reduced-motion:reduce){
  #matches tr.live-match-running > td,
  #matches tr.live-match-running > td:first-child,
  #matches tr.live-match-running > td:last-child{
    animation:none !important;
  }
}


/* v205 – LIVE-raden pulserar endast över och under, aldrig på sidorna */
#matches tr.live-match-running > td,
#matches tr.live-match-running > td:first-child,
#matches tr.live-match-running > td:last-child{
  animation:liveMatchTopBottomV205 2.65s ease-in-out infinite !important;
}

@keyframes liveMatchTopBottomV205{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.055),
      inset 0 -1px 0 rgba(255,93,114,.055) !important;
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.27),
      inset 0 -1px 0 rgba(255,93,114,.27) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #matches tr.live-match-running > td,
  #matches tr.live-match-running > td:first-child,
  #matches tr.live-match-running > td:last-child{
    animation:none !important;
  }
}


/* v206 – FIX: giltig top/bottom-puls.
   v205 hade !important inne i @keyframes, vilket gör animationen ogiltig. */
#matches tr.live-match-running > td,
#matches tr.live-match-running > td:first-child,
#matches tr.live-match-running > td:last-child{
  animation:liveMatchTopBottomV206 2.65s ease-in-out infinite !important;
}

@keyframes liveMatchTopBottomV206{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,93,114,.045),
      inset 0 -1px 0 rgba(255,93,114,.045);
  }
  50%{
    box-shadow:
      inset 0 2px 0 rgba(255,93,114,.25),
      inset 0 -2px 0 rgba(255,93,114,.25);
  }
}

@media (prefers-reduced-motion:reduce){
  #matches tr.live-match-running > td,
  #matches tr.live-match-running > td:first-child,
  #matches tr.live-match-running > td:last-child{
    animation:none !important;
  }
}


/* v207 – synkroniserad LIVE-puls.
   Cirkel och över/underkant använder samma 2.0 s-cykel och samma fas. */
.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation-duration:2s !important;
  animation-timing-function:ease-in-out !important;
  animation-delay:0s !important;
}

#matches tr.live-match-running > td,
#matches tr.live-match-running > td:first-child,
#matches tr.live-match-running > td:last-child{
  animation-duration:2s !important;
  animation-timing-function:ease-in-out !important;
  animation-delay:0s !important;
}

/* v216 – FIX: LIVE-tecknet ska behålla färgreducering och radprocent visuellt.
   v198 satte position:relative på både .color-labels och .row-share, vilket vann
   över deras normala absoluta placering och fick dem att se ut att försvinna/flytta sig. */
.outcome-tile.live-current-sign > .color-labels{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:40% !important;
  margin:0 !important;
  gap:0 !important;
  border-radius:0 8px 8px 0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:2 !important;
}

.outcome-tile.live-current-sign > .color-labels.color-labels-left{
  left:0 !important;
  right:auto !important;
  border-radius:8px 0 0 8px !important;
}

.outcome-tile.live-current-sign > .row-share{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  bottom:auto !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  z-index:5 !important;
  display:grid !important;
  place-items:center !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  pointer-events:none !important;
}

/* LIVE-cirkeln ligger bakom systemets vanliga visuella information. */
.outcome-tile.live-current-sign > .live-indicator-disc{
  z-index:0 !important;
}

.outcome-tile.live-current-sign > b,
.outcome-tile.live-current-sign > .odds-line,
.outcome-tile.live-current-sign > small{
  position:relative !important;
  z-index:3 !important;
}

body.hide-rows-on-signs .outcome-tile.live-current-sign > .row-share{
  display:none !important;
}

@media (min-width:1500px){
  .outcome-tile.live-current-sign > .row-share{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .row-share{
    right:6px !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
  }
}

/* v217 – LIVE: visa antal rätt just nu */
.live-metrics.compact{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
@media(max-width:1100px){
  .live-metrics.compact{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
  .live-metrics.compact{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .live-metrics.compact{grid-template-columns:1fr;}
}

/* v220 – tydligare LIVE-cirkel utan att störa färgreducering eller text */
.outcome-tile.live-current-sign > .live-indicator-disc{
  width:44px !important;
  height:44px !important;
  transform:translate(-50%,-50%) scale(.92) !important;
  opacity:.62 !important;
  background:
    radial-gradient(circle at 33% 28%,
      rgba(255,255,255,.30) 0 8%,
      rgba(255,255,255,.12) 12%,
      transparent 28%),
    radial-gradient(circle at 50% 50%,
      rgba(255,133,145,.96) 0 24%,
      rgba(246,83,101,.86) 40%,
      rgba(230,55,75,.74) 58%,
      rgba(200,33,53,.52) 74%,
      rgba(146,17,31,.10) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 2px 5px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,84,104,.14),
    0 0 14px rgba(255,76,97,.20),
    0 8px 18px rgba(146,22,38,.14) !important;
}

.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV220 1.30s cubic-bezier(.42,0,.35,1) infinite !important;
  will-change:transform,opacity,box-shadow,filter;
}

@keyframes liveIndicatorDiscPulseV220{
  0%,100%{
    opacity:.48;
    transform:translate(-50%,-50%) scale(.84);
    filter:brightness(.94) saturate(.98);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.14),
      inset 0 2px 4px rgba(255,255,255,.08),
      0 0 0 1px rgba(255,84,104,.10),
      0 0 8px rgba(255,76,97,.10),
      0 6px 12px rgba(146,22,38,.10);
  }
  50%{
    opacity:.98;
    transform:translate(-50%,-50%) scale(1.30);
    filter:brightness(1.18) saturate(1.14);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.24),
      inset 0 2px 6px rgba(255,255,255,.12),
      0 0 0 2px rgba(255,84,104,.16),
      0 0 18px rgba(255,76,97,.34),
      0 0 32px rgba(255,76,97,.14),
      0 9px 22px rgba(146,22,38,.18);
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .live-indicator-disc{
    width:40px !important;
    height:40px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running > .live-indicator-disc{
    animation:none !important;
  }
}

/* v221 – större LIVE-cirkel */
.outcome-tile.live-current-sign > .live-indicator-disc{
  width:52px !important;
  height:52px !important;
  transform:translate(-50%,-50%) scale(.94) !important;
}

.outcome-tile.live-current-sign.live-running > .live-indicator-disc{
  animation:liveIndicatorDiscPulseV221 1.30s cubic-bezier(.42,0,.35,1) infinite !important;
}

@keyframes liveIndicatorDiscPulseV221{
  0%,100%{
    opacity:.50;
    transform:translate(-50%,-50%) scale(.86);
    filter:brightness(.94) saturate(.98);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.14),
      inset 0 2px 4px rgba(255,255,255,.08),
      0 0 0 1px rgba(255,84,104,.10),
      0 0 10px rgba(255,76,97,.12),
      0 6px 14px rgba(146,22,38,.10);
  }
  50%{
    opacity:.99;
    transform:translate(-50%,-50%) scale(1.34);
    filter:brightness(1.18) saturate(1.14);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.24),
      inset 0 2px 6px rgba(255,255,255,.12),
      0 0 0 2px rgba(255,84,104,.16),
      0 0 20px rgba(255,76,97,.36),
      0 0 36px rgba(255,76,97,.16),
      0 10px 24px rgba(146,22,38,.18);
  }
}

@media (max-width:900px){
  .outcome-tile.live-current-sign > .live-indicator-disc{
    width:46px !important;
    height:46px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .outcome-tile.live-current-sign.live-running > .live-indicator-disc{
    animation:none !important;
  }
}


/* v222 – delbar, skrivskyddad LIVE-rättning */
.live-share-status{
  min-height:18px;
  margin-top:7px;
  font-size:12px;
  color:rgba(191,205,220,.76);
}
.live-share-status.success{color:#75d8a7;}
.live-share-status.error{color:#ff8797;}
.live-share-button{white-space:nowrap;}
body.shared-live-mode #liveToggle,
body.shared-live-mode #inlineLiveStop{
  display:none !important;
}
body.shared-live-mode #inlineLiveBar{
  border-color:rgba(255,93,114,.30);
  background:linear-gradient(90deg,rgba(255,93,114,.09),rgba(255,93,114,.025));
}
body.shared-live-mode #inlineLiveBar strong{
  color:#ff8797;
}
body.shared-live-mode #importRound,
body.shared-live-mode #fetchRound,
body.shared-live-mode #importSystemJson,
body.shared-live-mode #saveCoupon,
body.shared-live-mode #importCouponBackup,
body.shared-live-mode #reset,
body.shared-live-mode #exportSvenskaSpel{
  opacity:.48;
}

/* v226 – diskret versionsetikett i sidhuvudet */
.topbar .topbar-eyebrow{
  display:flex;
  align-items:center;
  gap:7px;
}

.topbar .app-version{
  display:inline-block;
  color:rgba(155,176,200,.62);
  font:500 8px 'DM Mono',monospace;
  letter-spacing:.35px;
  line-height:1;
  text-transform:none;
  transform:translateY(-.5px);
}