/* Пробник першого кроку («Режим») і кроку «Налаштування» вікна «Нова
   сесія» — у стилі кроку «Челендж» (картка «Карта»: штриховка, водяний
   знак, світло за курсором, відблиск при виборі). Варіанти карток режиму
   під html[data-modefx]; без атрибута — як є. Оздоби (.mf-x) ставить
   modefx.js. Усе під #runBox, щоб не зачепити інші форми журналу з тими
   самими класами ac-*. */

/* спільна колонка перемикачів усіх пробників (її створює перший із них) */
.fx-dock{position:fixed; left:14px; bottom:14px; z-index:100000; display:flex;
  flex-direction:column; align-items:flex-start; gap:6px}
.fx-dock > *{position:static !important}

/* ─────────────── перемикач ─────────────── */
.modefx-sw{position:fixed; left:14px; bottom:14px; z-index:100000; display:flex;
  align-items:center; gap:4px; padding:4px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel); font:500 12px/1 inherit;
  box-shadow:0 8px 30px rgba(0,0,0,.35)}
.modefx-sw span{padding:0 8px; color:var(--faint); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase}
.modefx-sw button{border:0; background:none; color:var(--dim); font:inherit;
  padding:7px 10px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s}
.modefx-sw button:hover{color:var(--text); background:var(--panel-2)}
.modefx-sw button.on{color:var(--text); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent)}

/* ═══════════════ картка режиму: спільне для A/B/C ═══════════════ */
html[data-modefx] #runBox .rs-mode{position:relative; isolation:isolate; overflow:hidden;
  gap:6px; padding:16px; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px,
      transparent 1px 8px),
    linear-gradient(160deg, var(--panel-2), var(--bg, #050505) 90%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  transition:border-color .25s, box-shadow .35s, transform .25s cubic-bezier(.16,1,.3,1)}
html[data-modefx] #runBox .rs-mode:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--text) 16%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px,
      transparent 1px 8px),
    linear-gradient(160deg, var(--panel-2), var(--bg, #050505) 90%)}
html[data-modefx] #runBox .rs-mode:active{transform:scale(.98)}
html[data-modefx] #runBox .rs-mode.on{border-color:var(--accent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px,
      transparent 1px 8px),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--panel-2)), var(--bg, #050505) 90%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent) 40%, transparent),
    0 16px 40px -18px color-mix(in srgb, var(--accent) 55%, transparent)}
html[data-modefx] #runBox .rs-mode > .t, html[data-modefx] #runBox .rs-mode > p{position:relative; z-index:2}
html[data-modefx] #runBox .rs-mode b{font-size:15px}
html[data-modefx] #runBox .rs-mode p{font-size:12px; color:var(--dim)}
html[data-modefx] #runBox .mf-x{position:absolute; pointer-events:none}
html[data-modefx] #runBox .mf-glow{inset:0; z-index:1; opacity:0; transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%)}
html[data-modefx] #runBox .rs-mode:hover .mf-glow{opacity:1}
html[data-modefx] #runBox .mf-sheen{inset:0; z-index:3; opacity:0; transform:translateX(-100%);
  background:linear-gradient(105deg, transparent 35%,
    color-mix(in srgb, #fff 16%, transparent) 50%, transparent 65%)}
html[data-modefx] #runBox .rs-mode.mf-pick .mf-sheen{animation:mf-sheen .9s cubic-bezier(.16,1,.3,1)}
html[data-modefx] #runBox .rs-mode.mf-pick{animation:mf-pick .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes mf-sheen{from{opacity:1; transform:translateX(-100%)} to{opacity:1; transform:translateX(100%)}}
@keyframes mf-pick{from{transform:scale(.975)} to{transform:none}}
html[data-modefx] #runStep1:not([hidden]){animation:mf-up .38s cubic-bezier(.16,1,.3,1) both}
html[data-modefx] #runStep2:not([hidden]){animation:mf-up .38s cubic-bezier(.16,1,.3,1) both}
@keyframes mf-up{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}


/* ═══════════════ A · «Карти» ═══════════════
   Три картки в ряд, як картки програм: вища картка, великий водяний
   знак режиму в кутку (свічки, прапор, гаманець). */
html[data-modefx="a"] #runBox .rs-mode{min-height:132px; justify-content:space-between}
html[data-modefx="a"] #runBox .rs-mode p{max-width:66%}
html[data-modefx="a"] #runBox .mf-wm{right:-10px; bottom:-14px; z-index:0; width:74px; height:74px;
  color:var(--text); opacity:.07; transition:opacity .4s, color .4s, transform .5s cubic-bezier(.16,1,.3,1)}
html[data-modefx="a"] #runBox .mf-wmi{width:100%; height:100%; stroke-width:1.1}
html[data-modefx="a"] #runBox .rs-mode:hover .mf-wm{transform:rotate(-6deg) scale(1.04)}
html[data-modefx="a"] #runBox .rs-mode.on .mf-wm{color:var(--accent); opacity:.22}


/* ═══════════════ B · «Список» ═══════════════
   Режими стовпчиком: плитка зі значком, назва з рядком під нею, кружок
   вибору праворуч. */
html[data-modefx="b"] #runBox .rs-modes{grid-template-columns:minmax(0,1fr); gap:8px}
html[data-modefx="b"] #runBox .rs-mode{display:grid; grid-template-columns:44px minmax(0,1fr) 20px;
  column-gap:14px; row-gap:3px; align-items:center; padding:13px 16px}
html[data-modefx="b"] #runBox .mf-ic{position:relative; grid-column:1; grid-row:1 / span 2;
  z-index:2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  color:var(--dim); background:color-mix(in srgb, var(--text) 5%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  transition:color .3s, background .3s, box-shadow .3s}
html[data-modefx="b"] #runBox .mf-ici{width:22px; height:22px}
html[data-modefx="b"] #runBox .rs-mode.on .mf-ic{color:var(--accent); background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent)}
html[data-modefx="b"] #runBox .rs-mode > .t{grid-column:2; grid-row:1; align-self:end}
html[data-modefx="b"] #runBox .rs-mode > p{grid-column:2; grid-row:2; align-self:start}
html[data-modefx="b"] #runBox .mf-radio{position:relative; grid-column:3; grid-row:1 / span 2;
  z-index:2; width:20px; height:20px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--faint); transition:box-shadow .25s cubic-bezier(.34,1.56,.64,1)}
html[data-modefx="b"] #runBox .rs-mode.on .mf-radio{box-shadow:inset 0 0 0 6px var(--accent)}


/* ═══════════════ C · «Обкладинки» ═══════════════
   Над назвою — маленька картинка того, що режим рахує: свічки (R),
   криву до цілі (челендж), баланс (депозит). В обраної картинка зелена,
   а лінія при виборі домальовується. */
html[data-modefx="c"] #runBox .rs-mode{padding:0 0 14px}
html[data-modefx="c"] #runBox .rs-mode > .t, html[data-modefx="c"] #runBox .rs-mode > p{padding:0 16px}
html[data-modefx="c"] #runBox .mf-cover{position:relative; z-index:2; display:block; height:70px;
  margin-bottom:8px; padding:12px 14px 6px;
  border-bottom:1px solid color-mix(in srgb, var(--text) 7%, transparent)}
html[data-modefx="c"] #runBox .mf-art{display:block; width:100%; height:100%; overflow:visible}
html[data-modefx="c"] #runBox .mf-wick{stroke:color-mix(in srgb, var(--text) 25%, transparent); stroke-width:1.2;
  vector-effect:non-scaling-stroke}
html[data-modefx="c"] #runBox .mf-body{fill:color-mix(in srgb, var(--text) 14%, transparent)}
html[data-modefx="c"] #runBox .mf-body.up{fill:color-mix(in srgb, var(--text) 30%, transparent)}
html[data-modefx="c"] #runBox .mf-line{fill:none; stroke:color-mix(in srgb, var(--text) 30%, transparent);
  stroke-width:1.6; stroke-linejoin:round; vector-effect:non-scaling-stroke}
html[data-modefx="c"] #runBox .mf-goal{stroke:color-mix(in srgb, var(--text) 20%, transparent);
  stroke-dasharray:3 4; vector-effect:non-scaling-stroke}
html[data-modefx="c"] #runBox .mf-dot{fill:color-mix(in srgb, var(--text) 30%, transparent)}
html[data-modefx="c"] #runBox .mf-area{fill:color-mix(in srgb, var(--text) 5%, transparent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-wick{stroke:color-mix(in srgb, var(--accent) 55%, transparent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-body{fill:color-mix(in srgb, var(--accent) 35%, transparent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-body.up{fill:var(--accent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-line{stroke:var(--accent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-goal{stroke:color-mix(in srgb, var(--accent) 45%, transparent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-dot{fill:var(--accent)}
html[data-modefx="c"] #runBox .rs-mode.on .mf-area{fill:color-mix(in srgb, var(--accent) 12%, transparent)}
html[data-modefx="c"] #runBox .rs-mode.mf-pick .mf-line{stroke-dasharray:100;
  animation:mf-draw .9s cubic-bezier(.16,1,.3,1)}
html[data-modefx="c"] #runBox .rs-mode.mf-pick .mf-body{animation:mf-grow .5s cubic-bezier(.16,1,.3,1) both;
  transform-box:fill-box; transform-origin:50% 100%}
@keyframes mf-draw{from{stroke-dashoffset:100} to{stroke-dashoffset:0}}
@keyframes mf-grow{from{transform:scaleY(.2); opacity:.4} to{transform:none; opacity:1}}


/* ═══════════════ «Налаштування»: поля в тому ж стилі ═══════════════
   Поля — графітові картки з освітленим верхом; фокус — м'яке зелене
   кільце замість подвійної рамки. */
html[data-modefx] #runStep2 .ac-in, html[data-modefx] #runStep2 .rs-pick,
html[data-modefx] #runAcc .ac-in{min-height:48px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 70%),
    var(--panel);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  transition:border-color .2s, box-shadow .25s}
html[data-modefx] #runStep2 .ac-in:hover, html[data-modefx] #runStep2 .rs-pick:hover,
html[data-modefx] #runAcc .ac-in:hover{border-color:color-mix(in srgb, var(--text) 18%, transparent)}
html[data-modefx] #runStep2 .ac-in:focus, html[data-modefx] #runStep2 .ac-in:focus-visible,
html[data-modefx] #runStep2 .rs-pick:focus-within, html[data-modefx] #runAcc .ac-in:focus{
  outline:none; border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
html[data-modefx] #runStep2 .rs-in{font-size:14.5px}
html[data-modefx] #runStep2 input[type="date"]{font-family:var(--mono); font-size:13.5px;
  font-variant-numeric:tabular-nums; color-scheme:dark}

/* Свій депозит: сума — великим числом, як розмір рахунку в челенджі;
   швидкі суми — вкладки з рискою, що їде до обраної (як фірми). */
html[data-modefx] #runAcc #runBal{min-height:0; height:64px; box-sizing:border-box; font-size:28px; font-weight:500;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
/* валюта — тієї ж висоти, що й сума поруч: інакше поля стояли сходинкою */
html[data-modefx] #runAcc #runCur{min-height:0; height:64px; box-sizing:border-box; font-size:17px; font-weight:500;
  letter-spacing:.04em; text-align:center}
html[data-modefx] #runAcc .ac-picks{position:relative; isolation:isolate; gap:2px; margin-top:10px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; box-shadow:inset 0 -1px 0 var(--line)}
html[data-modefx] #runAcc .ac-picks::-webkit-scrollbar{display:none}
html[data-modefx] #runAcc .ac-picks::before{content:""; position:absolute; left:0; bottom:0; z-index:-1;
  height:2px; width:var(--fw, 0); border-radius:2px; background:var(--accent);
  transform:translateX(var(--fx, 0)); pointer-events:none;
  transition:transform .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1)}
html[data-modefx] #runAcc .ac-picks.mf-now::before{transition:none}
html[data-modefx] #runAcc .ac-pick{flex:none; border:0; border-radius:0; background:none;
  padding:8px 11px 10px; color:var(--faint); font-family:var(--mono); font-size:12px;
  box-shadow:none; transition:color .2s}
html[data-modefx] #runAcc .ac-pick:hover{color:var(--text); background:none}
html[data-modefx] #runAcc .ac-pick.on{background:none; color:var(--text); font-weight:600}

@media(max-width:640px){
  html[data-modefx="a"] #runBox .rs-modes, html[data-modefx="c"] #runBox .rs-modes{grid-template-columns:minmax(0,1fr)}
  html[data-modefx="a"] #runBox .rs-mode{min-height:96px}
}
@media(prefers-reduced-motion:reduce){
  html[data-modefx] #runBox .rs-mode, html[data-modefx] #runBox .mf-x,
  html[data-modefx] #runBox .mf-x *, html[data-modefx] #runStep1, html[data-modefx] #runStep2{
    animation:none !important; transition:none !important}
  html[data-modefx] #runBox .rs-mode:hover{transform:none}
}