/* Onyx.AI — Platform a la carte (module picker), home page + app */
.mod-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; text-align: left; }
.mod-list { display: flex; flex-direction: column; gap: 8px; }
.mod-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .025); cursor: pointer; transition: border-color .15s, background .15s; }
.mod-item:hover { border-color: rgba(255, 255, 255, .18); }
.mod-item.is-on { border-color: rgba(181, 199, 230, .5); background: linear-gradient(120deg, rgba(181, 199, 230, .08), rgba(193, 208, 234, .08)); }
.mod-item.is-levels { cursor: default; flex-wrap: wrap; }
.mod-item input[type=checkbox] { width: 18px; height: 18px; accent-color: #b5c7e6; flex-shrink: 0; margin: 0; }
.mod-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.mod-main b { font-size: 14px; color: #eceef3; font-weight: 600; }
.mod-main small { font-size: 12px; color: #9097a6; }
.mod-price { font-size: 15px; font-weight: 700; color: #eceef3; white-space: nowrap; }
.mod-price small { font-size: 11px; font-weight: 400; color: #9097a6; margin-left: 2px; }
.mod-levels { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.mod-lv { border: 0; padding: 6px 10px; border-radius: 8px; background: none; color: #9097a6; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.mod-lv.is-on { background: linear-gradient(120deg, #b5c7e6, #c1d0ea); color: #fff; font-weight: 600; }
.mod-sum { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(17, 18, 23, .92); }
.mod-sum-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #9097a6; }
.mod-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-tiers span { font-size: 11.5px; padding: 3px 8px; border-radius: 7px; background: rgba(181, 199, 230, .1); color: #cfdbef; }
.mod-tiers b { color: #b5c7e6; }
.mod-sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: #c9ccd6; }
.mod-sum-row.is-off span:last-child { color: #3ddc97; font-weight: 600; }
.mod-sum-total { display: flex; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mod-sum-total span { flex: 1; font-size: 14px; color: #c9ccd6; }
.mod-sum-total b { font-size: 26px; color: #fff; }
.mod-sum-total small { font-size: 12px; color: #9097a6; }
.mod-sum-hint { font-size: 12.5px; color: #ffb020; }
.mod-note { margin: 0; font-size: 12px; line-height: 1.5; color: #9097a6; }
.mod-go { border: 0; padding: 12px 16px; border-radius: 11px; background: linear-gradient(120deg, #b5c7e6, #becee9 48%, #c1d0ea); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 28px -10px rgba(190, 206, 233, .55); }
.mod-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.mod-state { font-size: 11.5px; padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.mod-state.is-on { background: rgba(61, 220, 151, .14); color: #3ddc97; }
.mod-state.is-end { background: rgba(255, 176, 32, .14); color: #ffb020; }
.mod-act { border: 1px solid rgba(255, 255, 255, .15); padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .04); color: #eceef3;
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.mod-act:hover { background: rgba(255, 255, 255, .08); }
.mod-act.is-add { border-color: rgba(181, 199, 230, .5); color: #b5c7e6; }
.mod-act:disabled { opacity: .5; cursor: wait; }
@media (max-width: 860px) {
  .mod-wrap { grid-template-columns: 1fr; }
  .mod-sum { position: static; }
}
.mod-sum-hint.is-ref { color: #3ddc97; }

/* volume bonus ladder */
.mod-ladder { margin: 0 0 18px; padding: 16px 18px 14px; border-radius: 14px; text-align: left;
  border: 1px solid rgba(181, 199, 230, .35); background: linear-gradient(120deg, rgba(181, 199, 230, .10), rgba(193, 208, 234, .12)); }
.mod-lad-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.mod-lad-title { font-size: 16px; font-weight: 700; color: #fff; }
.mod-lad-now { padding: 4px 10px; border-radius: 8px; background: rgba(61, 220, 151, .16); color: #3ddc97; font-size: 13px; font-weight: 700; }
.mod-lad-track { position: relative; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); margin: 0 8px 34px; }
.mod-lad-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #b5c7e6, #becee9 50%, #c1d0ea);
  box-shadow: 0 0 16px rgba(190, 206, 233, .6); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.mod-lad-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mod-lad-mark::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #1b1d25; border: 2px solid rgba(255, 255, 255, .25); box-sizing: border-box; }
.mod-lad-mark b { position: absolute; bottom: 22px; font-size: 15px; font-weight: 800; color: #9097a6; white-space: nowrap; }
.mod-lad-mark small { position: absolute; top: 22px; font-size: 11px; color: #9097a6; white-space: nowrap; }
.mod-lad-mark.is-on::before { background: linear-gradient(135deg, #b5c7e6, #c1d0ea); border-color: #fff; box-shadow: 0 0 12px rgba(193, 208, 234, .8); }
.mod-lad-mark.is-on b { color: #3ddc97; }
.mod-lad-msg { font-size: 14px; color: #c9ccd6; }
.mod-lad-msg b { color: #fff; }
.mod-lad-pct { color: #3ddc97 !important; font-size: 16px; }
.mod-sum-save { font-size: 14px; font-weight: 700; color: #3ddc97; }
.mod-sum-hint { font-size: 13.5px; font-weight: 600; }
/* IG Niche Finder: price slider (1 EUR = 200 accounts scanned a month) */
.mod-item.has-slider { flex-wrap: wrap; cursor: default; }
.mod-slider { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px 2px 2px; }
.mod-slider[hidden] { display: none; }
.mod-slider input[type=range] { width: 100%; accent-color: #b5c7e6; cursor: pointer; }
.mod-slider-info { font-size: 13px; color: #c9ccd6; line-height: 1.5; }
.mod-slider-info b { color: #fff; }
.mod-slider-info small { display: block; font-size: 11.5px; color: #9097a6; }
.mod-help { width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: none; color: #cfdbef; font: 600 11px/1 inherit; cursor: pointer; vertical-align: 1px; }
.mod-help:hover { border-color: #b5c7e6; }
.mod-help-text { flex-basis: 100%; font-size: 12.5px; line-height: 1.5; color: #c9ccd6; padding: 8px 10px; border-radius: 10px;
  background: rgba(181, 199, 230, .07); border: 1px solid rgba(181, 199, 230, .25); }
.mod-help-text[hidden] { display: none; }
.mod-help-text a { color: #cfdbef; }

/* module sold with a slider, alone in its group (IG Niche Finder): the row is the checkbox, the slider below */
.mod-item.has-slider:not(.is-levels) { display: block; }
.mod-item.has-slider .mod-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.mod-item.has-slider .mod-row .mod-main { flex: 1; }
.mod-item.has-slider .mod-slider { margin-top: 10px; }
.mod-keep { flex-basis: 100%; font-size: 12px; color: #f5b85c; padding: 2px 2px 0; }