*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0f1117;
  --surface: #1a1d27;
  --border:  #2a2d3a;
  --accent:  #6c8eff;
  --accent2: #a78bfa;
  --green:   #34d399;
  --blue:    #60a5fa;
  --brown:   #b45309;
  --text:    #e2e4ef;
  --muted:   #6b7280;
  --tab-h:   52px;
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* ── Header ── */
header { padding: 2rem 2rem 0; text-align: center; }
.header-inner {
  display: inline-flex; align-items: center; gap: 0.85rem;
  justify-content: center;
}
.header-img {
  width: 52px; height: 52px; border-radius: 12px;
  object-fit: cover; flex-shrink: 0;
}
header h1 {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
header p { margin-top: 0.35rem; color: var(--muted); font-size: 0.9rem; }

/* ── Tab bar ── */
.tab-bar { display: flex; justify-content: center; gap: 0.25rem; margin: 1.75rem auto 0; padding: 0 1rem; max-width: 820px; }
.tab-bar button {
  flex: 1; height: var(--tab-h); border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--surface); color: var(--muted);
  font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.18s, background 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.tab-bar button:hover { color: var(--text); }
.tab-bar button.active { background: var(--bg); color: var(--accent); border-color: var(--border); border-bottom-color: var(--bg); font-weight: 600; }
.tab-bar button svg { flex-shrink: 0; }

/* ── Main ── */
main { max-width: 920px; margin: 0 auto; padding: 0 1rem 3rem; }
.content-wrap { border: 1px solid var(--border); border-radius: 0 0 14px 14px; background: var(--surface); min-height: 420px; }

/* ── Panels ── */
.panel { display: none; padding: 1.75rem 1.75rem; animation: fadeIn 0.2s ease; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ── Placeholder ── */
.placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:3rem 1rem; text-align:center; }
.placeholder-icon { width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.placeholder h2 { font-size:1.5rem; font-weight:700; letter-spacing:-0.3px; }
.placeholder p  { color:var(--muted); max-width:380px; line-height:1.6; font-size:0.92rem; }
#panel-calculators .placeholder-icon { background:rgba(167,139,250,.15); }
#panel-quiz        .placeholder-icon { background:rgba(52,211,153,.15); }
#panel-calculators h2 { color:var(--accent2); }
#panel-quiz        h2 { color:var(--green); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.5rem; }
.chip { padding:.3rem .8rem; border-radius:999px; border:1px solid var(--border); font-size:.78rem; color:var(--muted); background:var(--bg); }

/* Periodic table */
.pt-wrap{display:flex;flex-direction:column;gap:1rem}.pt-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.pt-search{color:var(--muted);font-size:.72rem;display:flex;flex-direction:column;gap:.3rem}.pt-search input{width:240px;max-width:78vw;padding:.55rem .7rem;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);outline:none}.pt-search input:focus{border-color:var(--accent)}
.pt-detail{min-height:152px;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);display:grid;grid-template-columns:170px 84px 1fr;gap:1rem;align-items:center}
.pt-atom-wrap{position:relative;width:170px;height:130px;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:radial-gradient(circle at center,rgba(108,142,255,.1),transparent 68%);cursor:grab;touch-action:none}.pt-atom-wrap:active{cursor:grabbing}.pt-atom-canvas{display:block;width:100%;height:100%}.pt-drag-hint{position:absolute;left:0;right:0;bottom:5px;text-align:center;color:var(--muted);font-size:.6rem;pointer-events:none}
.pt-identity{width:84px;height:84px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(108,142,255,.13);border:1px solid rgba(108,142,255,.45)}.pt-atomic,.pt-mass-small{font-size:.68rem;color:var(--muted)}.pt-symbol-big{font-size:2rem;font-weight:700;line-height:1.05}
.pt-info-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-bottom:.55rem}.pt-info-name{font-size:1.12rem;font-weight:700}.pt-category{color:var(--accent2);font-size:.72rem}.pt-facts{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:.48rem 1rem}.pt-fact-label{display:block;color:var(--muted);font-size:.63rem;text-transform:uppercase;letter-spacing:.05em}.pt-fact-value{display:block;margin-top:.12rem;font-size:.8rem;overflow-wrap:anywhere}.pt-config{grid-column:span 2}
.pt-scroll{overflow-x:auto;padding-bottom:.3rem}.periodic-table{min-width:810px;display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(9,48px);gap:3px}.pt-element{border:1px solid transparent;border-radius:5px;padding:3px;background:rgba(108,142,255,.1);color:var(--text);cursor:pointer;text-align:left;min-width:0;transition:transform .12s,border-color .12s,filter .12s}.pt-element:hover{transform:translateY(-2px);filter:brightness(1.25)}.pt-element.selected{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}.pt-element.dimmed{opacity:.18}.pt-z{display:block;color:var(--muted);font-size:.55rem;line-height:1}.pt-symbol{display:block;font-size:.94rem;font-weight:700;line-height:1.05;margin-top:3px}
.pt-legend{display:flex;flex-wrap:wrap;gap:.4rem .8rem;color:var(--muted);font-size:.67rem}.pt-legend-item{display:flex;align-items:center;gap:.3rem}.pt-dot{width:8px;height:8px;border-radius:2px}.cat-alkali{background:rgba(245,158,11,.18)}.cat-alkaline{background:rgba(251,191,36,.14)}.cat-transition{background:rgba(108,142,255,.16)}.cat-post{background:rgba(96,165,250,.13)}.cat-metalloid{background:rgba(52,211,153,.15)}.cat-nonmetal{background:rgba(167,139,250,.17)}.cat-halogen{background:rgba(244,114,182,.15)}.cat-noble{background:rgba(34,211,238,.15)}.cat-lanthanide{background:rgba(251,113,133,.14)}.cat-actinide{background:rgba(248,113,113,.14)}
@media(max-width:700px){.tab-bar{overflow-x:auto;justify-content:flex-start}.tab-bar button{min-width:130px}.pt-detail{grid-template-columns:1fr 68px}.pt-atom-wrap{grid-column:1/-1;width:100%;height:150px}.pt-identity{width:68px;height:76px}.pt-facts{grid-template-columns:repeat(2,minmax(90px,1fr))}.pt-config{grid-column:span 2}.panel{padding:1rem}}

/* ══════════════════════════════════════
   Kp SIMULATOR
══════════════════════════════════════ */
.sim { display:flex; flex-direction:column; gap:1rem; }

/* Header row */
.sim-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem; }
.sim-title  { font-size:1.2rem; font-weight:700; color:var(--accent); }
.sim-sub    { color:var(--muted); font-size:0.79rem; margin-top:.25rem; line-height:1.5; max-width:500px; }
.rxn-badge  { display:flex; align-items:center; gap:.55rem; border:1px solid var(--border); border-radius:8px; padding:.4rem .85rem; background:var(--bg); font-size:1rem; font-weight:600; white-space:nowrap; }
.rxn-n2o4 { color:#94a3b8; }
.rxn-no2  { color:#f59e0b; }
.rxn-arr  { color:var(--muted); }

/* Sliders */
.sliders { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.75rem; }
.sl-row  { display:grid; grid-template-columns:1.1rem 1fr 1fr 80px; align-items:center; gap:.6rem; }
.sl-icon { font-size:.9rem; line-height:1; }
.sl-lbl-wrap { display:flex; flex-direction:column; gap:2px; }
.sl-label { font-size:.82rem; color:var(--muted); white-space:nowrap; }
.sl-badge { font-size:.62rem; padding:.1rem .38rem; border-radius:3px; width:fit-content; }
.sl-badge-t  { background:rgba(108,142,255,.12); color:var(--accent); }
.sl-badge-ok { background:rgba(52,211,153,.12);  color:var(--green); }
.sl-val { text-align:right; font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

input[type=range] { -webkit-appearance:none; width:100%; height:5px; border-radius:3px; background:var(--border); outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--accent); cursor:pointer; transition:transform .15s; }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.2); }

/* Gas chamber */
.chamber-wrap { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.chamber-head { padding:.38rem .8rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); background:var(--bg); border-bottom:1px solid var(--border); }
.gas-chamber  { display:flex; height:80px; }
.g-n2o4 { background:#1c2743; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8; overflow:hidden; transition:width .45s cubic-bezier(.4,0,.2,1); }
.g-no2  { background:rgba(180,83,9,.42); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fbbf24; overflow:hidden; transition:width .45s cubic-bezier(.4,0,.2,1); }
.g-name { font-size:.82rem; font-weight:600; }
.g-hint { font-size:.6rem; opacity:.6; margin-top:1px; }

/* ── Step-by-step calc box ── */
.calc-box {
  background:#080b12; border:1px solid var(--border); border-radius:10px;
  padding:.9rem 1.1rem; overflow-x:auto;
}
.calc-box-title { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.7rem; }
.calc-steps { display:flex; flex-direction:column; gap:0; font-family:'Courier New','Consolas',monospace; font-size:.8rem; }
.cs-label { font-family:'Segoe UI',system-ui,sans-serif; font-size:.68rem; color:var(--muted); margin-bottom:.1rem; padding-left:.1rem; }
.cs-line  { color:var(--text); line-height:1.9; white-space:nowrap; }
.cs-arrow { font-family:'Segoe UI',system-ui,sans-serif; color:var(--muted); font-size:.72rem; padding:.08rem 0 .08rem .3rem; white-space:nowrap; }
.cs-sep   { border-top:1px solid var(--border); margin:.4rem 0; }

/* Highlighted values */
.hc  { color:var(--accent2); font-weight:700; }
.hp  { color:var(--blue); font-weight:700; }
.hkp { color:var(--accent); font-weight:700; font-size:.95rem; }

/* Kc line at bottom */
.kc-line { font-family:'Segoe UI',system-ui,sans-serif; font-size:.74rem; color:var(--muted); margin-top:.55rem; padding-top:.55rem; border-top:1px solid var(--border); }
.kc-line .hkc { color:var(--accent2); }
.kc-line .hkp2 { color:var(--accent); font-weight:600; }

/* Stats row */
.stats-row { display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:.7rem; }
@media(max-width:600px) {
  .stats-row { grid-template-columns:1fr; }
  .sl-row    { grid-template-columns:1.1rem 1fr 1fr 70px; }
  .calc-steps { font-size:.7rem; }
}
.stat-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem .9rem; transition:border-color .35s, box-shadow .35s; }
.sc-lbl    { font-size:.67rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.38rem; }

/* Kp card */
.kp-card.flash-temp  { border-color:var(--accent); box-shadow:0 0 14px rgba(108,142,255,.3); }
.kp-card.flash-press { border-color:var(--green);  box-shadow:0 0 14px rgba(52,211,153,.25); }
.kp-num  { font-size:1.06rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.kp-unit { font-size:.67rem; color:var(--muted); margin-top:1px; }
.kp-tag  { display:inline-block; margin-top:.4rem; font-size:.65rem; padding:.16rem .45rem; border-radius:4px; background:rgba(108,142,255,.1); color:var(--accent); transition:background .3s, color .3s; }
.kp-tag.t-green { background:rgba(52,211,153,.1); color:var(--green); }

/* Pressure bars */
.pb-row   { display:grid; grid-template-columns:44px 1fr 72px; align-items:center; gap:.35rem; margin-bottom:.4rem; }
.pb-sp    { font-size:.74rem; color:var(--muted); }
.pb-track { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.pb-fill  { height:100%; border-radius:4px; transition:width .45s cubic-bezier(.4,0,.2,1); }
.pb-blue  { background:#475569; }
.pb-amber { background:var(--brown); }
.pb-val   { font-size:.74rem; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.ptot-row { font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.ptot-row span { color:var(--text); font-weight:600; }

/* Dissociation */
.big-alpha  { font-size:1.7rem; font-weight:700; color:var(--accent2); font-variant-numeric:tabular-nums; }
.alpha-sub  { font-size:.67rem; color:var(--muted); margin-top:.2rem; }

/* Insight */
.insight { padding:.58rem 1rem; border-radius:8px; border:1px solid var(--border); background:var(--bg); font-size:.8rem; color:var(--muted); text-align:center; line-height:1.5; transition:border-color .35s, color .35s; }
.insight.i-temp  { border-color:var(--accent); color:var(--accent); }
.insight.i-press { border-color:var(--green);  color:var(--green); }

/* ── Sim sub-nav ── */
.sim-subnav { display:flex; gap:.5rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; }
.subnav-btn { padding:.32rem .85rem; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--muted); font-size:.82rem; font-weight:500; cursor:pointer; transition:all .18s; }
.subnav-btn:hover { color:var(--text); border-color:var(--border); }
.subnav-btn.active { background:rgba(108,142,255,.12); color:var(--accent); border-color:rgba(108,142,255,.4); }

/* ── Sub-sim containers ── */
.subsim { display:none; }
.subsim.active { display:block; }

/* ── Orbital viewer ── */
.orbital-wrap { display:flex; flex-direction:column; gap:1rem; }
.orbital-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem; }
.orb-selector { display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.orb-family-row { display:flex; gap:.3rem; }
.orb-family-btn { padding:.26rem .68rem; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--muted); font-size:.82rem; font-weight:700; cursor:pointer; transition:all .18s; font-family:'Courier New',monospace; letter-spacing:.05em; }
.orb-family-btn:hover { color:var(--text); border-color:var(--accent); }
.orb-family-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.orb-subgroup { display:none; gap:.28rem; flex-wrap:wrap; justify-content:flex-end; }
.orb-subgroup.active { display:flex; }
.orb-btn { padding:.26rem .68rem; border:none; border-radius:5px; background:rgba(255,255,255,.06); color:var(--muted); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .18s; font-family:'Courier New',monospace; }
.orb-btn:hover { color:var(--text); }
.orb-btn.active { background:rgba(108,142,255,.25); color:var(--accent); }
#orbital-canvas-wrap { border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#080c15; position:relative; height:440px; }
#orbital-canvas-wrap canvas { display:block; width:100%!important; height:100%!important; }
.orb-hint { position:absolute; bottom:.55rem; left:50%; transform:translateX(-50%); font-size:.66rem; color:rgba(107,114,128,.55); white-space:nowrap; pointer-events:none; }
.orbital-info { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.8rem 1.1rem; font-size:.81rem; color:var(--muted); line-height:1.65; }
.orbital-info strong { color:var(--text); }
.node-badge { display:inline-block; padding:.1rem .45rem; border-radius:4px; font-size:.72rem; background:rgba(167,139,250,.15); color:var(--accent2); font-weight:600; }

/* ══════════════════════════════════════
   ELECTRON CONFIGURATION BUILDER
══════════════════════════════════════ */
.elcfg-wrap { display:flex; flex-direction:column; gap:1rem; }

/* Element badge */
.elcfg-badge {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.5rem 1.1rem; border:1px solid var(--border);
  border-radius:8px; background:var(--bg); min-width:84px; text-align:center;
}
.elcfg-symbol { font-size:1.45rem; font-weight:700; color:var(--accent); line-height:1; }
.elcfg-z      { font-size:.68rem;  color:var(--muted); margin-top:3px; }

/* Controls */
.elcfg-controls { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.elcfg-btn {
  padding:.3rem .82rem; border:1px solid var(--border);
  border-radius:6px; background:var(--bg); color:var(--muted);
  font-size:.82rem; font-weight:500; cursor:pointer; transition:all .18s;
}
.elcfg-btn:hover:not(:disabled) { color:var(--text); border-color:var(--accent); }
.elcfg-btn.primary { background:rgba(108,142,255,.12); color:var(--accent); border-color:rgba(108,142,255,.4); }
.elcfg-btn.primary:hover:not(:disabled) { background:rgba(108,142,255,.22); }
.elcfg-btn:disabled { opacity:.38; cursor:not-allowed; }
.elcfg-count { font-size:.82rem; color:var(--muted); margin-left:.35rem; font-variant-numeric:tabular-nums; }

/* Orbital diagram */
.elcfg-diagram {
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.55rem;
}

/* One row = one sublevel */
.elcfg-row { display:flex; align-items:center; gap:.6rem; }

/* Sublevel label (1s, 2p, 3d …) */
.elcfg-lbl {
  font-family:'Courier New',monospace; font-size:.8rem; color:var(--muted);
  width:26px; text-align:right; flex-shrink:0;
}

/* Box group */
.elcfg-boxes { display:flex; gap:.28rem; }

/* Individual orbital box */
.elcfg-box {
  width:38px; height:34px; border:1px solid var(--border); border-radius:4px;
  background:rgba(255,255,255,.025);
  display:flex; align-items:center; justify-content:space-around; padding:0 3px;
}

/* Arrow spans — transparent when empty so space is reserved */
.elcfg-arrow {
  font-size:1.05rem; line-height:1; font-weight:700;
  width:13px; text-align:center; display:inline-block;
  color:transparent; transition:color .2s;
}
.elcfg-up  { color:var(--accent); }   /* spin-up: blue */
.elcfg-dn  { color:var(--accent2); }  /* spin-down: purple */
.elcfg-new { color:var(--green) !important; } /* most recently added: green */

/* Energy-level line extending right of the boxes */
.elcfg-line-fill { flex:1; height:1px; background:var(--border); opacity:.4; }

/* Configuration text */
.elcfg-config-wrap {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:.8rem 1.1rem;
}
.elcfg-config-label {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-bottom:.38rem;
}
.elcfg-config-text {
  font-family:'Courier New',monospace; font-size:1rem;
  color:var(--text); font-weight:600; word-break:break-all; line-height:1.5;
}

/* ══════════════════════════════════════
   Cr & Cu EXCEPTIONS
══════════════════════════════════════ */
.exc-wrap { display:flex; flex-direction:column; gap:1rem; }

.exc-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:1rem 1.25rem;
  display:flex; flex-direction:column; gap:.85rem;
}

.exc-element-header { display:flex; align-items:center; gap:.75rem; }
.exc-el-badge {
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:#fff;
  background:var(--accent);
}
.exc-el-badge.exc-cu { background:var(--accent2); }
.exc-el-name { font-size:1rem; font-weight:700; color:var(--text); }
.exc-z       { font-size:.8rem; font-weight:400; color:var(--muted); margin-left:.5rem; }
.exc-el-sub  { font-size:.71rem; color:var(--muted); margin-top:2px; }

.exc-compare { display:flex; align-items:flex-start; gap:1rem; }
.exc-side    { flex:1; display:flex; flex-direction:column; gap:.45rem; }
.exc-divider {
  font-size:1.6rem; color:var(--muted); align-self:center;
  flex-shrink:0; padding:0 .25rem;
}

.exc-side-label {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  padding:.18rem .5rem; border-radius:4px; width:fit-content; font-weight:600;
}
.exc-label-wrong { background:rgba(239,68,68,.12); color:#f87171; }
.exc-label-right { background:rgba(52,211,153,.12);  color:var(--green); }

.exc-config {
  font-family:'Courier New',monospace; font-size:.88rem;
  color:var(--muted); font-weight:600;
}

.exc-orbital-mini { display:flex; flex-direction:column; gap:.35rem; }
.exc-row { display:flex; align-items:center; gap:.5rem; }
.exc-rlbl {
  font-family:'Courier New',monospace; font-size:.78rem;
  color:var(--muted); width:24px; text-align:right; flex-shrink:0;
}

/* highlight arrows in the "actual" diagram */
.exc-hi { color:var(--green) !important; }

.exc-reason {
  display:flex; align-items:flex-start; gap:.55rem;
  background:rgba(108,142,255,.07); border:1px solid rgba(108,142,255,.2);
  border-radius:8px; padding:.65rem .85rem;
  font-size:.81rem; color:var(--muted); line-height:1.55;
}
.exc-reason strong { color:var(--text); }
.exc-reason-icon  { font-size:1rem; flex-shrink:0; margin-top:1px; }

.exc-summary {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:.8rem 1.1rem;
  font-size:.82rem; color:var(--muted); line-height:1.6;
}
.exc-summary-title {
  font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-bottom:.38rem;
}

@media(max-width:580px) {
  .exc-compare { flex-direction:column; }
  .exc-divider { display:none; }
}