@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:     #c8a96e;
  --gold-dim: #7a6040;
  --wood-dk:  #1a0f08;
  --wood-md:  #2a1a0e;
  --wood-brd: #4a3218;
  --iron:     #888;
  --iron-dk:  #444;
  --blue:     #5a8aaa;
  --blue-glow:rgba(90,140,180,0.6);
  --green:    #5a9a5a;
  --red:      #c84040;
  --plate-gap: 8px;  /* odstep pionowy miedzy plytkami zasuwek */
}

body {
  background: var(--wood-dk);
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Cinzel', Georgia, serif;
  color: var(--gold);
  padding: 24px 16px 40px;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(0,0,0,.06) 79px,rgba(0,0,0,.06) 81px),
    repeating-linear-gradient(180deg,transparent,transparent 39px,rgba(0,0,0,.04) 39px,rgba(0,0,0,.04) 40px),
    #2a1a0e;
}

h1 {
  font-size: clamp(1.2rem, 4vw, 2rem);
  letter-spacing: .35em; text-transform: uppercase;
  text-shadow: 0 0 20px rgba(200,169,110,.5), 2px 2px 4px #000;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 2px solid var(--wood-brd); text-align: center;
}
.subtitle { font-size: .7rem; letter-spacing: .2em; color: var(--gold-dim); margin-bottom: 28px; }

.wrap { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 20px; }

/* CONFIG */
.config-bar { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.config-bar label { font-size: .75rem; color: var(--gold-dim); letter-spacing: .1em; }
.config-bar select {
  background: var(--wood-dk); border: 1px solid var(--wood-brd); color: var(--gold);
  padding: 4px 8px; font-size: .8rem; border-radius: 3px; font-family: inherit; cursor: pointer;
}

/* LOCK BOX */
.lock-box {
  background: linear-gradient(135deg, var(--wood-md), var(--wood-dk));
  border: 3px solid var(--wood-brd); border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 0 40px rgba(0,0,0,.8), inset 0 1px 0 rgba(200,169,110,.06);
  position: relative; transition: border-color .3s, box-shadow .3s;
}
.lock-box::before, .lock-box::after {
  content: '✦'; position: absolute; font-size: 1rem; color: var(--gold-dim);
}
.lock-box::before { top: 8px; left: 10px; }
.lock-box::after  { top: 8px; right: 10px; }
.lock-assembly { display: flex; gap: 16px; align-items: stretch; }

.rail-bar {
  width: 26px; flex-shrink: 0; border-radius: 13px;
  background: linear-gradient(90deg, #555,#999 40%,#666 60%,#444);
  border: 2px solid #333;
  box-shadow: 2px 0 8px rgba(0,0,0,.6), inset -2px 0 4px rgba(255,255,255,.05);
  position: relative;
}
.rail-bar::after {
  content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 4px; background: linear-gradient(180deg,#222,#555,#222); border-radius: 2px;
}

.sliders-col { flex: 1; display: flex; flex-direction: column; gap: var(--plate-gap); }

/* PLATE ROW */
.s-row { display: flex; flex-direction: column; gap: 0; }
.s-main { display: flex; align-items: center; gap: 10px; }
.s-lbl { width: 22px; flex-shrink: 0; font-size: .8rem; color: var(--gold-dim); text-align: right; user-select: none; }
.s-lbl.was-raised {
  color: #ff4444;
  text-shadow: 0 0 6px rgba(255,60,60,.7);
}

/* Plate track — sliding block with holes */
.s-track {
  flex: 1; height: 44px; border-radius: 6px;
  background: linear-gradient(180deg, #2a2a2a 0%, #3a3a3a 40%, #2e2e2e 60%, #222 100%);
  border: 2px solid #444;
  position: relative; overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.04);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
/* Center pin marker */
.s-track::before {
  content: '';
  position: absolute; top: 5px; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg, transparent, rgba(220,176,58,.55), transparent);
  border-radius: 2px; z-index: 2; pointer-events: none;
}
/* Row of holes that slides */
.s-holes-row {
  position: absolute; top: 50%; left: 0;
  display: flex; gap: 8px; align-items: center;
  transform: translateY(-50%) translateX(0);
  transition: transform .11s linear;
  will-change: transform; pointer-events: none;
}

/* Holes */
.s-hole {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 40% 35%, #1a1a1a, #0a0a0a);
  border: 2px solid #1a1a1a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
  transition: all .12s; position: relative;
}

/* Active hole = pin position */
.s-hole.active {
  background: radial-gradient(circle at 40% 35%, #d4a030, #a07010);
  border-color: #e8c050;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.2), 0 0 10px rgba(220,176,58,.6), 0 0 3px rgba(220,176,58,.4);
}
/* Raised bolt — green */
.s-hole.active.raised {
  background: radial-gradient(circle at 40% 35%, #40d060, #207040);
  border-color: #50ff80;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.2), 0 0 12px rgba(60,220,80,.7), 0 0 4px rgba(60,220,80,.4);
}
/* Goal hole — red ring: where the raised bolt was detected */
.s-hole.goal {
  border-color: rgba(255,70,70,0.9);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.9), 0 0 8px rgba(255,60,60,.5), 0 0 0 2px rgba(200,0,0,0.35);
}
/* Odwiedzona dziurka — szary okąg wewnątrz */
.s-hole.visited::before {
  content: '';
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(160,160,160,0.45);
  pointer-events: none;
}
.s-hole.goal::before {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255,100,100,0.4);
  pointer-events: none;
}
/* Pin na celu — czerwony pierścień tak samo jak .goal */
.s-hole.active.goal {
  border-color: rgba(255,70,70,0.95);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.2), 0 0 10px rgba(220,176,58,.6), 0 0 0 3px rgba(200,0,0,0.6);
}
.s-hole.active.goal::before {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255,100,100,0.5);
  pointer-events: none;
}
/* Pin sticking up on active hole */
.s-hole.active::after {
  content: '';
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 6px; height: 12px;
  background: linear-gradient(180deg, #e8c050, #c89030);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 6px rgba(220,176,58,.5);
}
.s-hole.active.raised::after {
  background: linear-gradient(180deg, #50ff80, #20a040);
  box-shadow: 0 0 8px rgba(60,220,80,.6);
}


.s-ctrl { display: flex; gap: 4px; flex-shrink: 0; }
.ctrl-btn {
  background: linear-gradient(135deg,#3a2810,#2a1a08); border: 1px solid #5a3820;
  color: var(--gold); width: 28px; height: 44px; cursor: pointer; border-radius: 3px;
  font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: all .1s;
}
.ctrl-btn:hover { background: linear-gradient(135deg,#5a3820,#4a2810); border-color: var(--gold); }
.ctrl-btn:active { transform: scale(.95); }
.s-pos-ind { font-size: .7rem; color: var(--gold-dim); width: 22px; text-align: center; flex-shrink: 0; align-self: center; }

/* ACTIVE PLATE */
.s-row.is-active .s-track {
  border-color: #4488cc;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 0 14px rgba(60,130,220,.4);
}
/* Plan arrows on plate rows */
.s-arrow {
  width: 55px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: bold;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, color .2s;
  user-select: none;
}
.s-arrow.active-arrow { opacity: 1; }
.s-arrow.next-arrow   { color: #ffe080; }
.s-arrow.later-arrow  { color: #888; font-size: 1rem; opacity: .55; }
/* Red triangle — tracks the goal hole as you scroll */
.s-goal-flag {
  position: absolute;
  top: 1px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid rgba(255,70,70,0.95);
  transform: translateX(-50%);
  z-index: 10; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,80,80,0.8));
  transition: left .12s ease;
}

/* BUTTONS */
.dir-panel {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 14px 20px;
  background: linear-gradient(135deg,var(--wood-md),var(--wood-dk));
  border: 2px solid var(--wood-brd); border-radius: 6px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5);
}
.dir-arrow { font-size: 2.2rem; opacity: .12; transition: all .3s; color: var(--gold); }
.dir-arrow.on  { opacity: 1; filter: drop-shadow(0 0 12px rgba(200,169,110,.9)); animation: pulse 1.5s ease-in-out infinite; }
.dir-arrow.off { opacity: .06; color: var(--red); }
@keyframes pulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(200,169,110,.6))} 50%{filter:drop-shadow(0 0 22px rgba(200,169,110,1))} }
.dir-center { text-align: center; min-width: 120px; }
.dir-center-lbl { font-size: .65rem; color: var(--gold-dim); letter-spacing: .15em; }
.dir-center-val { font-size: 1rem; color: var(--gold); margin-top: 4px; display: block; }

/* BUTTONS */
.btn-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn {
  background: linear-gradient(135deg,#3a2810,#2a1a08);
  border: 2px solid var(--wood-brd); color: var(--gold);
  padding: 8px 20px; font-family: inherit; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  border-radius: 4px; transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.btn:hover { background: linear-gradient(135deg,#5a3820,#4a2810); border-color: var(--gold); box-shadow: 0 2px 16px rgba(200,169,110,.3); }
.btn:active { transform: scale(.97); }
.btn-edit       { border-color: var(--blue); color: #8abcdc; }
.btn-edit:hover { border-color: #8abcdc; background: linear-gradient(135deg,#1a3040,#0e2030); }
.btn-edit.active{ border-color: #8abcdc; background: linear-gradient(135deg,#1a3040,#0e2030); box-shadow: 0 0 16px rgba(90,140,180,.4); }
.btn-danger       { border-color: #8a3020; color: #e87060; }
.btn-danger:hover { border-color: #e87060; background: linear-gradient(135deg,#5a2015,#4a1810); }
.btn-warn         { border-color: #7a6020; color: #e8c060; }
.btn-warn:hover   { border-color: #e8c060; background: linear-gradient(135deg,#4a3a10,#3a2c08); }

/* STATUS */
.status { font-size: .82rem; text-align: center; min-height: 1.5em; color: var(--gold); text-shadow: 0 0 10px rgba(200,169,110,.4); letter-spacing: .05em; }

/* CONNECTION PANEL */
.conn-panel {
  background: linear-gradient(135deg,#0e1a08,#080e05);
  border: 2px solid #2a4a1a; border-radius: 6px; overflow: hidden;
}
.conn-head {
  padding: 8px 14px; background: #0a1208; border-bottom: 1px solid #1a3010;
  font-size: .75rem; letter-spacing: .1em; color: #5a8a3a;
}
.conn-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 2.5em; }
.conn-empty { font-size: .7rem; color: #3a5a2a; letter-spacing: .06em; }
.conn-plate { display: flex; align-items: baseline; gap: 6px; font-size: .72rem; padding: 3px 0; border-bottom: 1px solid #1a2a1a; }
.conn-plate:last-child { border-bottom: none; }
.conn-erase { margin-left: auto; background: none; border: none; cursor: pointer; font-size: .8rem; opacity: .45; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.conn-erase:hover { opacity: 1; }
.conn-from  { width: 16px; flex-shrink: 0; color: var(--gold); font-weight: bold; font-size: .78rem; }
.conn-arrow { color: #3a6a3a; flex-shrink: 0; font-size: .65rem; }
.conn-targets { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.conn-tag { display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px; font-size: .67rem; font-family: monospace; }
.conn-tag.same { background: #0a2a0a; border: 1px solid #2a6a2a; color: #5aaa5a; }
.conn-tag.opp  { background: #2a0a0a; border: 1px solid #6a2a2a; color: #aa5a5a; }
.conn-tag.unk  { background: #1a1a0a; border: 1px solid #4a4a1a; color: #8a8a3a; }
.conn-tag.none { background: #111; border: 1px solid #444; color: #666; }
.conn-none { color: #2a4a2a; font-size: .65rem; font-style: italic; }
.conn-cnt  { color: #2a5a2a; font-size: .58rem; opacity: .7; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a0f0a; }
::-webkit-scrollbar-thumb { background: var(--wood-brd); border-radius: 3px; }

/* MONITOR ZAMKA */
#lm {
  width: 100%; background: #0d1a22; border: 2px solid #3a5a6a; border-radius: 8px;
  box-shadow: 0 0 30px rgba(0,0,0,.85); font-family: 'Courier New', monospace; color: #8abcdc;
}
#lm-head { display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; background:#0a1218; border-bottom:1px solid #1e3a4a;
  cursor:pointer; border-radius:6px 6px 0 0; }
#lm-head-left { display:flex; align-items:center; gap:7px; }
#lm-title { font-size:.72rem; letter-spacing:.1em; color:#5a9aba; }
#lm-tog   { font-size:.7rem; color:#3a6a7a; }
#lm-dot { width:8px; height:8px; border-radius:50%; background:#333; flex-shrink:0; transition:background .3s; }
#lm-dot.on   { background:#3adc5a; box-shadow:0 0 6px #3adc5a; }
#lm-dot.err  { background:#dc3a3a; box-shadow:0 0 6px #dc3a3a; }
#lm-dot.wait { background:#dcb03a; box-shadow:0 0 6px #dcb03a; }
#lm-body { padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
#lm-pinx-wrap { display:flex; flex-direction:column; gap:3px; }
#lm-pinx-top  { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#lm-pinx-hint { font-size:.68rem; color:#a0b4c0; flex:1; }
#lm-pinx-top input[type=number] { width:58px; }
#lm-pinx-wrap input[type=range] { width:100%; margin:0; }
#lm-prev-wrap { position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:4px; overflow:hidden; }
#lm-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
#lm-cv { position:absolute; inset:0; width:100%; height:100%; }
#lm-st   { font-size:.67rem; color:#4a8aaa; min-height:1.2em; }
#lm-res  { font-size:.7rem; color:#7abcdc; line-height:1.9; }
#lm-last { font-size:.6rem; color:#2a5a4a; letter-spacing:.04em; min-height:1em; }
.lr { display:flex; align-items:center; gap:6px; }
.lb  { min-width:22px; color:#4a7a8a; font-size:.65rem; }
.lv  { font-size:.65rem; }
#lm-auto-row { display:flex; align-items:center; gap:8px; padding:4px 0;
  border-top:1px solid #1e3a4a; margin-top:2px; }
#lm-auto-row label { font-size:.67rem; color:#4a8aaa; flex:1; cursor:pointer; }
#lm-auto-cb { accent-color:#3adc5a; cursor:pointer; width:14px; height:14px; }
#lm-btns { display:flex; gap:6px; flex-wrap:wrap; }
.lb2 { background:#0a1a28; border:1px solid #3a5a6a; color:#5a9aba;
  padding:4px 10px; cursor:pointer; border-radius:4px;
  font-family:inherit; font-size:.67rem; letter-spacing:.05em; transition:all .15s; }
.lb2:hover      { border-color:#8abcdc; color:#8abcdc; }
.lb2.go         { border-color:#3adc5a; color:#3adc5a; }
.lb2.go:hover   { background:#0a2010; }
.lb2.stop       { border-color:#dc5a3a; color:#dc5a3a; }
.lb2.stop:hover { background:#200a0a; }
#lm-cfg { display:none; flex-direction:column; gap:5px; font-size:.65rem;
  border-top:1px solid #1e3a4a; padding-top:8px; }
#lm-json { display:none; flex-direction:column; gap:6px; border-top:1px solid #1e3a4a; padding-top:8px; }
#lm-json-ta { width:100%; min-height:220px; background:#020c12; border:1px solid #1e3a4a;
  color:#5adc9a; font-family:monospace; font-size:.65rem; padding:6px; border-radius:4px;
  resize:vertical; box-sizing:border-box; }
#lm-json-bar { display:flex; align-items:center; gap:8px; }
#lm-json-msg { font-size:.65rem; }

/* ── INSTRUCTIONS BOX ─── */
.instructions-box {
  width: 100%;
  background: #03111a;
  border: 1px solid #2a6a4a;
  border-left: 4px solid #3aaa6a;
  border-radius: 8px;
  padding: 12px 16px 14px;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.instructions-head {
  font-size: .78rem;
  font-weight: 700;
  color: #3aaa6a;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.instructions-list {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.instructions-list li {
  font-size: .72rem;
  color: #8abcac;
  line-height: 1.5;
}
.instructions-list li strong {
  color: #d4f0c0;
}
.instructions-list li em {
  color: #7acaaa;
  font-style: normal;
}

/* ── AD SLOT ─── */
.ad-slot {
  width: 100%;
  background: #050e14;
  border: 1px solid #1e3a4a;
  border-radius: 8px;
  padding: 8px 12px 12px;
  box-sizing: border-box;
  text-align: center;
}
.ad-label {
  font-size: .58rem;
  color: #2a5a6a;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.adsbygoogle { min-height: 90px; }

.lc { display:flex; align-items:center; gap:6px; }
.lc label              { min-width:160px; color:#4a7a8a; font-size:.63rem; }
.lc input[type=range]  { flex:1; accent-color:#5a9aba; }
.lc input[type=number] { width:54px; background:#050e14; border:1px solid #1e3a4a;
  color:#8abcdc; padding:2px 4px; border-radius:3px; font-family:inherit; font-size:.63rem; }

/* ── SOLVER ─── */
.solver-panel {
  background: linear-gradient(135deg,var(--wood-md),var(--wood-dk));
  border: 2px solid var(--wood-brd); border-radius: 6px; margin-top: 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5);
}
.solver-head {
  padding: 8px 14px; font-size: .75rem; letter-spacing: .12em;
  color: var(--gold); border-bottom: 1px solid rgba(200,160,80,.25);
}
#solverMove { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;  min-height: 80px; }
.smv-idle  { font-size: .78rem; color: rgba(180,155,110,.55); line-height: 1.6; }
.smv-start-hint { font-size: .73rem; color: rgba(180,155,110,.7); line-height: 1.5; }
.btn-capture-inline {
  align-self: flex-start;
  margin-top: 4px;
  padding: 7px 16px;
  background: linear-gradient(135deg, #1a4a2a, #0d2a18);
  border: 1px solid #3aaa6a;
  border-radius: 5px;
  color: #60ee90;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.btn-capture-inline:hover {
  background: linear-gradient(135deg, #235c34, #133520);
  box-shadow: 0 0 8px rgba(58,170,106,.45);
}
.smv-go    { font-size: 1.15rem; font-weight: bold; color: #50dd70; padding: 4px 0; }
.smv-done  { font-size: 1rem; color: #50dd70; }
.smv-warn  { font-size: 1rem; color: #e0a030; }
.smv-stop  { font-size: .95rem; color: #ff5050; line-height: 1.6; }
.sp-phase  { font-size: .65rem; letter-spacing: .12em; color: var(--gold-dim); margin-bottom: 2px; }
.sp-plan-title { font-size: .65rem; color: var(--gold-dim); margin-top: 8px; letter-spacing: .08em; }

#movesLeft { text-align: center; font-size: 1.3rem; color: var(--gold-dim); letter-spacing: .06em; padding: 6px 0 2px; min-height: 2em; }
.solver-plan { display: flex; flex-direction: column; gap: 2px; margin-top: 4px;}
.sp-row { font-size: .78rem; padding: 4px 8px; border-radius: 4px; }
.sp-current { background: rgba(60,130,220,.3); border: 1px solid rgba(60,130,220,.5); color: #88ccff; font-weight: bold; }
.sp-pending { background: rgba(0,0,0,.2); border: 1px solid rgba(100,80,50,.2); color: rgba(180,155,110,.6); }
.sp-num { display: inline-block; width: 18px; font-size: .65rem; color: rgba(180,155,110,.4); }
.safe-range { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sr-row { display: flex; align-items: center; gap: 8px; font-size: .72rem; }
.sr-lbl { color: var(--gold-dim); min-width: 20px; }
.sr-bar-wrap { flex: 1; height: 12px; background: rgba(0,0,0,.4); border-radius: 6px; position: relative; overflow: hidden; }
.sr-bar-safe  { height: 100%; background: linear-gradient(90deg, #1a7a30, #24a040); border-radius: 6px; transition: width .2s; }
.sr-bar-warn  { height: 100%; background: linear-gradient(90deg, #7a5010, #c08020); border-radius: 6px; }
.sr-bar-danger{ height: 100%; background: linear-gradient(90deg, #7a1010, #c02020); border-radius: 6px; }
.sr-val { color: var(--gold); font-size: .7rem; min-width: 30px; text-align: right; }
.sr-risk { font-size: .65rem; padding: 2px 6px; border-radius: 3px; }
.sr-risk.ok     { background: rgba(30,100,50,.5); color: #50d070; }
.sr-risk.warn   { background: rgba(120,80,0,.5);  color: #e0a030; }
.sr-risk.danger { background: rgba(120,0,0,.5);   color: #ff5050; }
.solver-steps { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ss-step { font-size: .72rem; padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.ss-step.active   { background: rgba(60,130,220,.25); border: 1px solid rgba(60,130,220,.4); color: #88ccff; }
.ss-step.done     { background: rgba(30,100,50,.2);   border: 1px solid rgba(50,160,70,.3);  color: #60bb80; }
.ss-step.warn     { background: rgba(180,60,0,.25);   border: 1px solid rgba(220,80,0,.4);   color: #ff9050; }
.ss-step.pending  { background: rgba(0,0,0,.2);       border: 1px solid rgba(100,80,50,.3);  color: rgba(180,155,110,.6); }
.ss-icon { font-size: .9rem; flex-shrink: 0; }