/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 4a: калькулятор ферм (/mining, гілка @design_b у views/mining.erb) за
   MiningB.dc.html. Логіка — public/js/mining-vn.js, формула — public/js/mining-calc.js (calcFarm/calcFarms).
   Старий вигляд (.mining/.mn-*, public/js/mining.js) не змінено.
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .mnv-page { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; font-family: var(--vn-font-body), sans-serif; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .mnv-kicker {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--vn-radius-pill);
  border: 1px solid rgba(46, 230, 214, .35); background: rgba(46, 230, 214, .08); color: var(--vn-cyan); font-size: 13px; font-weight: 700;
}
html.vn:not([data-section="admin"]) .mnv-title {
  margin: 14px 0 0; overflow: hidden; padding-bottom: 6px; font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 72px); line-height: .95; letter-spacing: -.04em;
  background: linear-gradient(90deg, var(--vn-text) 40%, var(--vn-pink), var(--vn-orange), var(--vn-cyan)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: bHue 8s ease-in-out infinite;
}
html.vn:not([data-section="admin"]) .mnv-sub { margin: 10px 0 0; max-width: 66ch; color: var(--vn-muted); font-size: 15px; line-height: 24px; }
html.vn:not([data-section="admin"]) .mnv-warn { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: var(--vn-radius-pill); background: rgba(255, 226, 122, .08); border: 1px solid rgba(255, 226, 122, .3); color: var(--vn-yellow); font-size: 13px; font-weight: 700; }
html.vn:not([data-section="admin"]) .mnv-muted { margin: 0; color: var(--vn-muted); font-size: 13px; }
html.vn:not([data-section="admin"]) .mnv-empty { margin: 0; padding: 28px; border-radius: 22px; border: 1px dashed rgba(255, 255, 255, .16); color: var(--vn-muted); text-align: center; }

html.vn:not([data-section="admin"]) .mnv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
html.vn:not([data-section="admin"]) .mnv-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html.vn:not([data-section="admin"]) .mnv-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--vn-radius-section);
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
}
html.vn:not([data-section="admin"]) .mnv-card__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
html.vn:not([data-section="admin"]) .mnv-card__h h2, html.vn:not([data-section="admin"]) .mnv-total h2 { margin: 0; font-family: var(--vn-font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; }
html.vn:not([data-section="admin"]) .mnv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* сервери */
html.vn:not([data-section="admin"]) .mnv-srvs { display: flex; flex-wrap: wrap; gap: 8px; }
html.vn:not([data-section="admin"]) .mnv-srv { display: inline-flex; align-items: stretch; border-radius: var(--vn-radius-pill); border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); overflow: hidden; }
html.vn:not([data-section="admin"]) .mnv-srv.is-on { border-color: var(--vn-pink); background: rgba(255, 79, 163, .14); box-shadow: 0 0 0 2px rgba(255, 79, 163, .3); }
html.vn:not([data-section="admin"]) .mnv-srv button { min-height: 40px; border: 0; background: none; color: var(--vn-text); font: 700 13px var(--vn-font-body); cursor: pointer; }
html.vn:not([data-section="admin"]) .mnv-srv__b { padding: 0 6px 0 16px; }
html.vn:not([data-section="admin"]) .mnv-srv__b small { color: var(--vn-muted); font-size: 12px; font-weight: 600; }
html.vn:not([data-section="admin"]) .mnv-srv.is-on .mnv-srv__b { color: var(--vn-pink-soft); }
html.vn:not([data-section="admin"]) .mnv-srv__x { width: 36px; font-size: 18px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-srv__x:hover { color: var(--vn-red); }
html.vn:not([data-section="admin"]) .mnv-pick { display: flex; flex-direction: column; gap: 10px; }
html.vn:not([data-section="admin"]) .mnv-q input {
  width: 100%; height: 44px; box-sizing: border-box; padding: 0 16px; border-radius: var(--vn-radius-pill); border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04); color: var(--vn-text); font-size: 15px; outline: none;
}
html.vn:not([data-section="admin"]) .mnv-q input:focus { border-color: var(--vn-cyan); box-shadow: 0 0 0 3px rgba(46, 230, 214, .6); }
html.vn:not([data-section="admin"]) .mnv-pick__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; }
html.vn:not([data-section="admin"]) .mnv-pick__i {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 8px 12px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--vn-text); text-align: left; cursor: pointer;
}
html.vn:not([data-section="admin"]) .mnv-pick__i:hover { border-color: var(--vn-pink); }
html.vn:not([data-section="admin"]) .mnv-pick__i span { font-size: 12px; color: var(--vn-muted); }

/* умови */
html.vn:not([data-section="admin"]) .mnv-cond { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; align-items: end; }
html.vn:not([data-section="admin"]) .mnv-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.vn:not([data-section="admin"]) .mnv-f--wide { grid-column: 1 / -1; }
html.vn:not([data-section="admin"]) .mnv-f label, html.vn:not([data-section="admin"]) .mnv-f__l { font-size: 12.5px; font-weight: 700; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-f label b { color: var(--vn-cyan); font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .mnv-num { width: 100%; box-sizing: border-box; height: 42px; font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .mnv-f small { font-size: 12px; }
html.vn:not([data-section="admin"]) .mnv-ck { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 700; cursor: pointer; }
html.vn:not([data-section="admin"]) .mnv-ck input { width: 20px; height: 20px; accent-color: var(--vn-pink); }

/* ферми */
html.vn:not([data-section="admin"]) .mnv-farms { display: flex; flex-direction: column; gap: 14px; }
html.vn:not([data-section="admin"]) .mnv-farm {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--vn-radius-card);
  background: linear-gradient(160deg, rgba(46, 230, 214, .06), rgba(185, 140, 255, .04)), var(--vn-bg); border: 1px solid rgba(46, 230, 214, .2);
  animation: bIn .55s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .mnv-farm__h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html.vn:not([data-section="admin"]) .mnv-farm__name {
  flex: 1 1 200px; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid transparent; background: none;
  color: var(--vn-text); font: 800 18px var(--vn-font-display); text-transform: uppercase; outline: none;
}
html.vn:not([data-section="admin"]) .mnv-farm__name:hover { border-color: rgba(255, 255, 255, .14); }
html.vn:not([data-section="admin"]) .mnv-farm__name:focus { border-color: var(--vn-cyan); box-shadow: 0 0 0 3px rgba(46, 230, 214, .6); }
html.vn:not([data-section="admin"]) .mnv-farm__n { font: 700 12px var(--vn-font-mono); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-slots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
html.vn:not([data-section="admin"]) .mnv-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 2px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--vn-text); cursor: pointer;
  font: 700 18px var(--vn-font-mono); transition: border-color .2s, transform .2s;
}
html.vn:not([data-section="admin"]) .mnv-slot b { font-size: 16px; line-height: 1; }
html.vn:not([data-section="admin"]) .mnv-slot small { font-size: 11px; font-weight: 700; }
html.vn:not([data-section="admin"]) .mnv-slot.is-empty { border-style: dashed; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-slot.is-btc { border-color: rgba(255, 159, 69, .45); background: rgba(255, 159, 69, .1); }
html.vn:not([data-section="admin"]) .mnv-slot.is-btc small { color: var(--vn-orange); }
html.vn:not([data-section="admin"]) .mnv-slot.is-asc { border-color: rgba(185, 140, 255, .5); background: rgba(185, 140, 255, .1); }
html.vn:not([data-section="admin"]) .mnv-slot.is-asc small { color: var(--vn-purple); }
html.vn:not([data-section="admin"]) .mnv-slot.is-asic { border-color: rgba(46, 230, 214, .55); background: rgba(46, 230, 214, .12); }
html.vn:not([data-section="admin"]) .mnv-slot.is-asic small { color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .mnv-slot.is-open { box-shadow: 0 0 0 2px var(--vn-pink); }
@media (hover: hover) { html.vn:not([data-section="admin"]) .mnv-slot:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .35); } }
html.vn:not([data-section="admin"]) .mnv-ed {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255, 79, 163, .06); border: 1px solid rgba(255, 79, 163, .3);
  animation: bFade .3s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .mnv-ed__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html.vn:not([data-section="admin"]) .mnv-ed__row > .mnv-f__l { min-width: 70px; }
html.vn:not([data-section="admin"]) .mnv-ed .b-chip { min-width: 40px; justify-content: center; }
html.vn:not([data-section="admin"]) .mnv-ed .b-chip:disabled { opacity: .4; cursor: not-allowed; }
html.vn:not([data-section="admin"]) .mnv-ed__act { justify-content: flex-end; }
html.vn:not([data-section="admin"]) .mnv-farm__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; align-items: end; }
html.vn:not([data-section="admin"]) .mnv-farm__out { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; margin: 0; }
html.vn:not([data-section="admin"]) .mnv-farm__out > div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
html.vn:not([data-section="admin"]) .mnv-farm__out dt, html.vn:not([data-section="admin"]) .mnv-rows dt { font-size: 12px; font-weight: 700; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-farm__out dd, html.vn:not([data-section="admin"]) .mnv-rows dd { margin: 2px 0 0; font: 700 14px var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .mnv-farm__out dd.is-profit { color: var(--vn-cyan); font-size: 16px; }
html.vn:not([data-section="admin"]) .is-neg { color: var(--vn-red) !important; }
html.vn:not([data-section="admin"]) .mnv-farm__act { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
html.vn:not([data-section="admin"]) .mnv-move { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-move select { height: 40px; padding: 0 12px; border-radius: var(--vn-radius-pill); border: 1px solid rgba(255, 255, 255, .14); background: var(--vn-surface); color: var(--vn-text); font: 600 13px var(--vn-font-body); }
html.vn:not([data-section="admin"]) .mnv-del { min-height: 40px; padding: 0 16px; border-radius: var(--vn-radius-pill); color: var(--vn-red); }
html.vn:not([data-section="admin"]) .mnv-addfarm { align-self: flex-start; min-height: 44px; padding: 0 22px; border-radius: var(--vn-radius-pill); }

/* підсумок */
html.vn:not([data-section="admin"]) .mnv-total {
  position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--vn-radius-section);
  background: linear-gradient(160deg, rgba(255, 159, 69, .14), rgba(255, 79, 163, .06)), var(--vn-bg); border: 1px solid rgba(255, 159, 69, .3);
}
html.vn:not([data-section="admin"]) .mnv-total h2 small { display: block; margin-top: 4px; font: 600 12.5px var(--vn-font-body); text-transform: none; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .mnv-big span { display: block; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vn-orange); }
html.vn:not([data-section="admin"]) .mnv-big b { display: block; margin-top: 4px; font: 700 clamp(28px, 3.2vw, 38px)/1.05 var(--vn-font-mono); color: var(--vn-cyan); overflow-wrap: anywhere; }
html.vn:not([data-section="admin"]) .mnv-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; }
html.vn:not([data-section="admin"]) .mnv-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 1100px) {
  html.vn:not([data-section="admin"]) .mnv-grid { grid-template-columns: minmax(0, 1fr); }
  html.vn:not([data-section="admin"]) .mnv-total { position: static; order: -1; }
}
@media (max-width: 760px) {
  html.vn:not([data-section="admin"]) .mnv-card, html.vn:not([data-section="admin"]) .mnv-farm, html.vn:not([data-section="admin"]) .mnv-total { padding: 14px; }
  html.vn:not([data-section="admin"]) .mnv-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html.vn:not([data-section="admin"]) .mnv-num, html.vn:not([data-section="admin"]) .mnv-q input, html.vn:not([data-section="admin"]) .mnv-farm__name { font-size: 16px; }
  html.vn:not([data-section="admin"]) .mnv-ed .b-chip { min-height: 40px; }
}