/* Pinterest-style theme layer: loaded after styles.css */
:root{
  --bg:#FBF7F4; --card:#FFFFFF; --ink:#2C2733; --muted:#8A8296;
  --rose:#E4786B; --rose-soft:#FCEBE7; --sage:#7BAE9B; --lilac:#A78AD8;
  --amber:#E9AE48; --line:#F0E8E3; --shadow:0 14px 34px rgba(72,52,64,.09);
  --radius:26px;
}
body{
  background:
    radial-gradient(1100px 520px at 12% -8%, #FDE9E4 0%, rgba(253,233,228,0) 60%),
    radial-gradient(900px 480px at 92% 4%, #EDE7FA 0%, rgba(237,231,250,0) 62%),
    radial-gradient(760px 460px at 50% 108%, #E7F2EC 0%, rgba(231,242,236,0) 60%),
    var(--bg);
  background-attachment:fixed;
}
.wrap{max-width:1180px}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:stretch; margin-top:20px;
}
.hero-card{
  position:relative; overflow:hidden; border-radius:32px; padding:30px 30px 28px;
  background:linear-gradient(150deg,#FFFFFF 0%,#FFF7F4 52%,#F6F0FD 100%);
  border:1px solid #F2E7E2; box-shadow:var(--shadow);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#B4695E;
  background:#fff; border:1px solid #F6DED8; border-radius:999px; padding:6px 13px;
}
.hero h2{font-size:clamp(26px,4.2vw,40px); line-height:1.12; margin:14px 0 10px; letter-spacing:-.03em}
.hero h2 em{font-style:normal; color:var(--rose)}
.hero p.lead{font-size:16px; color:var(--muted); max-width:44ch}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:#4B4354;
  box-shadow:0 4px 12px rgba(72,52,64,.05);
}
.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.hero-art{
  border-radius:32px; overflow:hidden; border:1px solid #F2E7E2; box-shadow:var(--shadow);
  background:#fff; display:flex; flex-direction:column;
}
.hero-art img{width:100%; height:100%; object-fit:cover; display:block; min-height:190px}
.hero-art figcaption{
  padding:13px 18px; font-size:13.5px; color:var(--muted); font-weight:500;
  border-top:1px solid var(--line);
}

/* ---------- try-card (интерактив для клиента) ---------- */
.try-card{
  margin-top:16px; border-radius:26px; padding:20px 22px; border:1px dashed #EBD9D2;
  background:linear-gradient(140deg,#FFFCFB,#F9F5FE);
}
.try-card h3{font-size:17px; display:flex; align-items:center; gap:8px}
.try-list{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px}
.try-item{
  text-align:left; border:1px solid var(--line); background:#fff; border-radius:18px; padding:14px;
  min-height:44px; display:flex; flex-direction:column; gap:4px; transition:.18s ease;
  box-shadow:0 4px 12px rgba(72,52,64,.05);
}
.try-item:hover{transform:translateY(-3px); border-color:#F0C9C0; box-shadow:0 12px 24px rgba(72,52,64,.12)}
.try-item b{font-size:14.5px}
.try-item span{font-size:12.5px; color:var(--muted); line-height:1.4}
.try-item .t-emoji{font-size:20px}

/* ---------- cards polish ---------- */
.card{transition:box-shadow .2s ease, transform .2s ease}
.card:hover{box-shadow:0 18px 40px rgba(72,52,64,.12)}
.grid-cards{grid-template-columns:repeat(3,1fr)}
.balance-card{grid-column:span 2; background:linear-gradient(150deg,#FFFFFF 48%,#FCEAE5)}
.balance{font-size:clamp(32px,5vw,46px)}
.sum{font-size:23px}
.card-label{letter-spacing:.1em}
.fab{background:linear-gradient(140deg,#E4786B,#F0A08C); transition:transform .18s ease}
.fab:hover{transform:scale(1.06)}
.btn{transition:transform .16s ease, filter .16s ease}
.btn:hover{transform:translateY(-1px)}
.mini:hover{transform:translateY(-1px)}
.op{transition:background .16s ease; border-radius:12px}
.op:hover{background:#FDF8F6}
.dot{transition:transform .16s ease}
.op:hover .dot{transform:scale(1.07)}

/* ---------- charts ---------- */
.donut-wrap{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.donut{width:196px; height:196px; flex:0 0 auto; transform:rotate(-90deg)}
.donut circle{transition:stroke-dasharray .7s ease}
.donut-center{text-align:center}
.donut-center b{display:block; font-size:19px; letter-spacing:-.02em}
.donut-center span{font-size:12px; color:var(--muted)}
.donut-legend{display:grid; gap:9px; flex:1 1 210px; min-width:190px}
.donut-legend .row{display:flex; align-items:center; gap:9px; font-size:14px}
.donut-legend .row i{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
.donut-legend .row b{margin-left:auto; font-size:14px}
.donut-legend .row span{color:var(--muted); font-size:12.5px; min-width:52px; text-align:right}
.spark{width:100%; height:64px; display:block}
.spark path{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.bars.tall .bar-track{height:20px; border-radius:12px}
.bar-track{background:#F6F0EB}
.bars .bar-row{transition:transform .16s ease}
.bars .bar-row:hover{transform:translateX(2px)}

/* ---------- тосты и модалка ---------- */
.modal{border-radius:28px; box-shadow:0 30px 70px rgba(40,30,40,.3)}
.type-switch{background:#F7F1EC}
.toast{background:#2C2733}

/* ---------- адаптация ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .try-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hero-card{padding:22px 20px; border-radius:24px}
  .hero-art{border-radius:24px}
  .try-list{grid-template-columns:1fr}
  .grid-cards{grid-template-columns:1fr}
  .donut{width:170px;height:170px}
  .donut-wrap{justify-content:center; text-align:center}
}

/* ---------- ввод своего баланса ---------- */
.balance-form{
  margin-top:14px; padding:14px; border-radius:18px;
  background:linear-gradient(140deg,#FFFCFB,#F9F5FE); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.balance-form .field label{font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.balance-form input{
  min-height:44px; border-radius:14px; border:1px solid var(--line); background:#fff;
  padding:0 14px; font-size:18px; font-weight:700; color:var(--ink); width:100%;
}
.balance-form input:focus{outline:2px solid var(--rose-soft); border-color:var(--rose)}
.switch{
  position:relative; display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer;
  font-size:13.5px; color:var(--muted); line-height:1.35; padding-left:34px;
}
.switch input{position:absolute; left:0; top:0; width:44px; height:44px; margin:0; opacity:0; cursor:pointer}
.switch .box{
  position:absolute; left:0; top:50%; transform:translateY(-50%); width:24px; height:24px;
  border-radius:8px; border:2px solid #E4D9D2; background:#fff; transition:.16s ease;
}
.switch input:checked + .box{background:var(--rose); border-color:var(--rose); box-shadow:0 4px 10px rgba(228,118,107,.3)}
.switch input:checked + .box::after{
  content:''; position:absolute; left:8px; top:3px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.switch input:focus-visible + .box{outline:2px solid var(--rose-soft); outline-offset:2px}
.switch-text{flex:1 1 auto}
.balance-actions{display:flex; gap:8px; flex-wrap:wrap}
.save-status{font-size:13px; line-height:1.4; color:var(--muted); margin:0}
.save-status.is-ok{color:#4F8A72; font-weight:600}
.balance-card .card-head{margin-bottom:2px}
.balance-card .card-head .card-label{margin:0}
@media (max-width:640px){
  .balance-actions .btn{flex:1 1 140px}
}

/* ---------- поле «мой баланс» ---------- */
.money-input{position:relative; display:flex; align-items:center}
.balance-form .money-input input{padding-right:60px; text-align:left}
.money-suffix{
  position:absolute; right:14px; font-size:12.5px; font-weight:700; letter-spacing:.05em;
  color:var(--muted); pointer-events:none;
}
.tiny{font-size:12.5px; line-height:1.4; margin-top:2px}

/* ---------- баланс: ноль по умолчанию и ввод своей суммы ---------- */
.balance-top{display:flex; align-items:center; gap:14px; justify-content:space-between}
.balance-txt{min-width:0}
.balance-pic{
  width:78px; height:78px; border-radius:22px; object-fit:cover; flex:0 0 auto;
  border:1px solid #F2E7E2; box-shadow:0 10px 22px rgba(72,52,64,.12);
}
.card-head-right{display:flex; align-items:center; gap:8px}
.balance-badge{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#B4695E; background:#FCEBE7; border:1px solid #F6DED8; border-radius:999px; padding:5px 11px;
}
.balance-badge.is-manual{color:#4F8A72; background:#E9F4EF; border-color:#CFE7DC}
.balance-form .field label{color:#8A8296}
.balance-form input{font-size:20px; letter-spacing:-.01em}
.balance-form input::placeholder{color:#C6BFC8; font-weight:600}
@media (max-width:420px){
  .balance-pic{width:62px; height:62px; border-radius:18px}
}

.balance-actions{position:relative;z-index:71}