:root { --concept-gold:#f4b51a; --concept-dark:#03271b; --concept-green:#00bf69; }

.calculator-concept .calculator-shell {
  position:relative;
  z-index:10;
  width:390px;
  justify-self:end;
}
.calculator-concept .calculator { width:100%; }
.calculator-concept .concept-kicker {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:#087244;
  font-size:10px;
  font-weight:850;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.calculator-concept .concept-kicker span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--concept-green);
  box-shadow:0 0 0 4px rgba(0,191,105,.11);
}
.calculator-concept .terminal-rail { display:none; }
.calculator-concept .calculator > p { line-height:1.42; }
.calculator-concept .payment strong b { font-weight:inherit; }

/* 1. A restrained mobile-banking screen, without an imitation of a specific phone. */
.calc-mobile .calculator-shell {
  padding:13px 10px 18px;
  border:1px solid rgba(125,255,188,.22);
  border-radius:43px;
  background:linear-gradient(145deg,#0b4b34 0%,#021c13 62%,#063c2a 100%);
  box-shadow:0 38px 90px rgba(0,14,8,.48),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.45);
}
.calc-mobile .calculator-shell::before {
  position:absolute;
  z-index:14;
  top:20px;
  left:50%;
  width:72px;
  height:7px;
  border-radius:99px;
  background:#0a3022;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.13);
  transform:translateX(-50%);
  content:'';
}
.calc-mobile .calculator-shell::after {
  position:absolute;
  z-index:14;
  bottom:8px;
  left:50%;
  width:90px;
  height:4px;
  border-radius:99px;
  background:rgba(225,255,239,.52);
  transform:translateX(-50%);
  content:'';
}
.calc-mobile .calculator {
  padding:38px 24px 31px;
  border:0;
  border-radius:33px;
  background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(245,252,248,.97));
  box-shadow:inset 0 1px 0 #fff;
}
.calc-mobile .concept-kicker { margin-bottom:8px; }
.calc-mobile .payment { background:linear-gradient(145deg,#effaf4,#e5f7ed); }

/* 2. Premium bank glass: airy, layered and still highly readable. */
.calc-glass .calculator-shell::before,
.calc-glass .calculator-shell::after {
  position:absolute;
  z-index:-1;
  border:1px solid rgba(220,255,236,.22);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(61,190,122,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  content:'';
}
.calc-glass .calculator-shell::before { inset:20px -21px -18px 21px; transform:rotate(1.7deg); }
.calc-glass .calculator-shell::after { inset:42px -38px 24px 45px; opacity:.62;transform:rotate(-1deg); }
.calc-glass .calculator {
  overflow:hidden;
  border-color:rgba(237,255,245,.75);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,250,242,.88));
  box-shadow:0 38px 95px rgba(0,18,10,.38),inset 0 1px 0 #fff;
  backdrop-filter:blur(28px) saturate(1.16);
}
.calc-glass .calculator::before {
  position:absolute;
  top:-34%;
  right:-42%;
  width:84%;
  height:88%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 67%);
  content:'';
  pointer-events:none;
}
.calc-glass .calculator::after {
  position:absolute;
  top:52px;
  right:0;
  width:3px;
  height:118px;
  border-radius:4px 0 0 4px;
  background:linear-gradient(180deg,transparent,var(--concept-gold),transparent);
  box-shadow:0 0 18px rgba(244,181,26,.46);
  content:'';
}
.calc-glass .calculator > * { position:relative;z-index:2; }
.calc-glass .payment { border-color:rgba(83,202,139,.34);background:rgba(235,250,242,.72); }

/* 3. A personal bank offer rather than an impersonal utility panel. */
.calc-offer .calculator-shell::before {
  position:absolute;
  z-index:-1;
  inset:-12px 20px 18px -14px;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(0,191,105,.46),rgba(3,39,27,.78));
  box-shadow:0 32px 86px rgba(0,18,10,.38);
  content:'';
}
.calc-offer .calculator {
  padding-top:31px;
  border-color:rgba(255,255,255,.78);
  background:#fff;
  box-shadow:0 32px 82px rgba(0,18,10,.31);
}
.calc-offer .concept-kicker {
  margin:-3px 0 15px;
  padding:7px 10px;
  border:1px solid rgba(202,143,8,.19);
  border-radius:999px;
  background:#fff8e4;
  color:#8a6207;
  letter-spacing:.045em;
}
.calc-offer .concept-kicker span { background:var(--concept-gold);box-shadow:0 0 0 4px rgba(244,181,26,.13); }
.calc-offer .calculator h2 { max-width:290px;font-size:25px; }
.calc-offer .payment {
  position:relative;
  border-color:#ccecdc;
  background:linear-gradient(135deg,#f1fbf5 0%,#e4f7ec 100%);
  text-align:left;
}
.calc-offer .payment::after {
  position:absolute;
  top:15px;
  right:15px;
  padding:5px 8px;
  border-radius:999px;
  background:#dff6e9;
  color:#087a43;
  font-size:9px;
  font-weight:850;
  content:'ПРЕДВАРИТЕЛЬНО';
}
.calc-offer .payment strong { font-size:31px; }
.calc-offer .calc-button { border-radius:14px; }

/* 4. A compact financial terminal with a quiet status rail. */
.calc-terminal .quiet-layout { grid-template-columns:minmax(0,600px) 430px;gap:190px; }
.calc-terminal .calculator-shell {
  width:430px;
  padding-right:64px;
}
.calc-terminal .calculator-shell::before {
  position:absolute;
  z-index:-1;
  inset:17px 40px -16px 19px;
  border:1px solid rgba(115,236,173,.19);
  border-radius:29px;
  background:linear-gradient(145deg,rgba(4,71,47,.94),rgba(2,31,21,.96));
  box-shadow:0 37px 92px rgba(0,15,9,.47),inset 0 1px 0 rgba(255,255,255,.08);
  content:'';
}
.calc-terminal .calculator {
  width:366px;
  padding:26px 25px;
  border-color:rgba(255,255,255,.72);
  border-radius:22px 14px 14px 22px;
  box-shadow:0 25px 72px rgba(0,17,10,.32);
}
.calc-terminal .terminal-rail {
  position:absolute;
  z-index:-1;
  top:48px;
  right:-18px;
  display:grid;
  width:96px;
  gap:0;
  padding:18px 10px 18px 22px;
  border:1px solid rgba(129,244,184,.20);
  border-left:0;
  border-radius:0 19px 19px 0;
  background:linear-gradient(180deg,#073e2b,#03271b);
  box-shadow:12px 20px 42px rgba(0,14,8,.30),inset 0 1px 0 rgba(255,255,255,.07);
}
.calc-terminal .terminal-rail span {
  display:grid;
  justify-items:center;
  gap:5px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(231,255,241,.96);
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
}
.calc-terminal .terminal-rail span:last-child { border-bottom:0; }
.calc-terminal .terminal-rail i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#35e48a;
  box-shadow:0 0 10px rgba(53,228,138,.72);
}
.calc-terminal .terminal-rail span:nth-child(2) i { background:var(--concept-gold);box-shadow:0 0 10px rgba(244,181,26,.58); }
.calc-terminal .concept-kicker { color:#397359; }
.calc-terminal .payment { border-radius:12px; }
.calc-terminal .car-note,.calc-terminal .calc-button { border-radius:11px; }

@media (prefers-reduced-motion:no-preference) {
  .calculator-concept .calculator-shell { animation:concept-calculator-in .7s .16s cubic-bezier(.18,.88,.3,1) both; }
  .calculator-concept .calculator { opacity:1;animation:none; }
  .calc-glass .calculator-shell::after { animation:concept-glass-drift 5.5s ease-in-out infinite alternate; }
  .calc-terminal .terminal-rail i { animation:concept-status 2.4s ease-in-out infinite; }
  .calc-terminal .terminal-rail span:nth-child(2) i { animation-delay:.45s; }
  .calc-terminal .terminal-rail span:nth-child(3) i { animation-delay:.9s; }
}
@keyframes concept-calculator-in { from{opacity:0;transform:translateY(19px) scale(.98)} to{opacity:1;transform:none} }
@keyframes concept-glass-drift { from{transform:translate3d(0,0,0) rotate(-1deg)} to{transform:translate3d(-8px,-5px,0) rotate(-.4deg)} }
@keyframes concept-status { 0%,100%{opacity:.58}50%{opacity:1} }

@media (max-width:1180px) {
  .calc-terminal .quiet-layout { grid-template-columns:minmax(0,1fr) 410px;gap:95px; }
  .calc-terminal .calculator-shell { width:410px; }
}
@media (max-width:980px) {
  .calculator-concept .calculator-shell { width:min(100%,430px);justify-self:start; }
  .calc-terminal .quiet-layout { grid-template-columns:1fr;gap:38px; }
  .calc-terminal .calculator-shell { width:min(100%,430px); }
}
@media (max-width:520px) {
  .calc-mobile .calculator-shell { padding:10px 7px 16px;border-radius:35px; }
  .calc-mobile .calculator { padding:36px 19px 27px;border-radius:27px; }
  .calc-terminal .calculator-shell { padding-right:0; }
  .calc-terminal .calculator { width:100%;border-radius:22px; }
  .calc-terminal .terminal-rail { display:none; }
}