﻿/* банк-калькулятор | legume
   Палитра стрена: бирюза --link, шрифты форума; светлая/тёмная (.dark) — сами.
   Подключается ссылкой (не вставкой в стили форума). */

.custom_tag_bank{
    --sb-card:#e7e9e8;
    --sb-row:rgba(255, 255, 255, .55);
    --sb-on:rgba(var(--link, 56, 108, 110), .1);
    --sb-line:rgba(var(--text, 30, 30, 32), .12);
    --sb-txt:rgba(var(--text, 30, 30, 32), .85);
    --sb-hi:rgb(var(--text, 30, 30, 32));
    --sb-dim:rgba(var(--text, 30, 30, 32), .5);
    --sb-acc:rgb(var(--link, 56, 108, 110));
    --sb-earn:#3f7f6a;
    --sb-spend:#a0504a;
    --sb-serif:var(--font2, 'The Silver Editorial', Georgia, serif);
    --sb-sans:var(--font, 'Rubik', sans-serif);
    --sb-caps:var(--font5, 'Jost', sans-serif);
}
.dark .custom_tag_bank{
    --sb-card:rgb(var(--catbody, 31, 31, 35));
    --sb-row:rgba(255, 255, 255, .035);
    --sb-line:rgba(255, 255, 255, .08);
    --sb-txt:rgba(var(--text, 226, 226, 230), .85);
    --sb-dim:rgba(var(--text, 226, 226, 230), .45);
    --sb-earn:#7cc2a8;
    --sb-spend:#d08a80;
}
/* пока скрипт не отработал — показываем исходный список как есть */
.custom_tag_bank:not(.is-ready){ white-space:normal; }

.sbank, .sbank *{ box-sizing:border-box; }
.sbank{
    max-width:880px;
    margin:6px auto 14px !important;
    padding:22px 24px 20px;
    border-radius:26px;
    background:var(--sb-card);
    box-shadow:0 14px 40px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .45);
    color:var(--sb-txt);
    font:400 11.5px/1.45 var(--sb-sans);
    text-align:left;
}
.dark .sbank{ box-shadow:0 14px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .05); }

.sbank-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.sbank-h{
    display:flex; align-items:center; gap:10px;
    margin:0 0 10px !important;
    font:italic 400 20px/1 var(--sb-serif);
    color:var(--sb-hi);
}
.sbank-h::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--sb-acc), transparent); opacity:.5; }
.sbank-col--earn .sbank-h{ color:var(--sb-earn); }
.sbank-col--spend .sbank-h{ color:var(--sb-spend); }
.sbank-sub{
    margin:10px 0 6px 4px !important;
    font:500 9px/1 var(--sb-caps);
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--sb-dim);
}
.sbank-gap{ height:10px; }

.sbank-row{
    margin:0 0 4px !important;
    padding:6px 8px 6px 12px;
    border-radius:14px;
    background:var(--sb-row);
    box-shadow:inset 0 0 0 1px var(--sb-line);
    transition:background .2s ease, box-shadow .2s ease;
}
.sbank-row.is-on{ background:var(--sb-on); box-shadow:inset 0 0 0 1px rgba(var(--link, 56, 108, 110), .35); }
.sbank-top{ display:flex; align-items:center; gap:10px; }
.sbank-name{ flex:1 1 auto; min-width:0; }
.sbank-price{ flex:none; font:500 11px/1 var(--sb-caps); letter-spacing:.04em; }
.sbank-col--earn .sbank-price{ color:var(--sb-earn); }
.sbank-col--spend .sbank-price{ color:var(--sb-spend); }
.sbank-ctl{ flex:none; display:flex; align-items:center; gap:4px; }
.sbank-btn{
    width:24px; height:24px;
    margin:0 !important; padding:0 !important;
    border:none;
    border-radius:50%;
    font:400 15px/24px var(--sb-sans);
    color:var(--sb-hi);
    background:rgba(var(--text, 30, 30, 32), .07);
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}
.sbank-btn:hover{ color:#fff; background:var(--sb-acc); }
.sbank-n{ min-width:20px; text-align:center; font:500 12px/1 var(--sb-caps); color:var(--sb-hi); }
.sbank-proof{
    display:none;
    width:100%;
    margin:6px 0 2px !important;
    padding:6px 12px !important;
    border:none !important;
    border-radius:10px !important;
    font:400 11px/1.3 var(--sb-sans) !important;
    color:var(--sb-txt) !important;
    background:var(--sb-card) !important;
    box-shadow:inset 0 0 0 1px var(--sb-line) !important;
    outline:none !important;
}
.sbank-row.is-on .sbank-proof{ display:block; }
.sbank-proof:focus{ box-shadow:inset 0 0 0 1px var(--sb-acc) !important; }
.sbank-proof.is-err{ box-shadow:inset 0 0 0 1px var(--sb-spend) !important; }

/* отбивка */
.sbank-sum{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
    margin:18px 0 0 !important;
    padding-top:16px;
    border-top:1px solid var(--sb-line);
}
.sbank-s{
    padding:10px 14px;
    border-radius:16px;
    background:var(--sb-row);
    box-shadow:inset 0 0 0 1px var(--sb-line);
    text-align:center;
}
.sbank-s span{ display:block; margin-bottom:4px; font:500 8.5px/1 var(--sb-caps); letter-spacing:.24em; text-transform:uppercase; color:var(--sb-dim); }
.sbank-s b{ font:400 20px/1.1 var(--sb-serif); }
.sbank-s--earn b{ color:var(--sb-earn); }
.sbank-s--spend b{ color:var(--sb-spend); }
.sbank-s--total{ background:var(--sb-on); box-shadow:inset 0 0 0 1px rgba(var(--link, 56, 108, 110), .35); }
.sbank-s--total b{ color:var(--sb-hi); }
.sbank-s--total.is-neg b{ color:var(--sb-spend); }

.sbank-acts{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px !important; }
.sbank-note{ flex:1 1 auto; font-size:11px; color:var(--sb-spend); }
.sbank-act{
    margin:0 !important;
    padding:6px 16px 7px !important;
    border:none;
    border-radius:999px;
    font:italic 400 15px/1.2 var(--sb-serif);
    color:#eef2f1;
    background:#2f4a4c;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}
.dark .sbank-act{ background:#1f5557; }
.sbank-act:hover{ background:var(--sb-acc); transform:translateY(-1px); }
.sbank-act--soft{ color:var(--sb-txt); background:var(--sb-row) !important; box-shadow:inset 0 0 0 1px var(--sb-line); }

@media (max-width:640px){
    .sbank-cols{ grid-template-columns:1fr; }
    .sbank-sum{ grid-template-columns:1fr; }
}
