roi-calculator{
  color-scheme:light;

  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#fbfdff;
  --line:#e6eaf2;

  --text:#0f172a;
  --muted:#4b5874;

  --shadow-1:0 10px 28px rgba(15,37,96,.10),0 2px 8px rgba(15,37,96,.06);
  --shadow-2:0 16px 36px rgba(15,37,96,.14);

  --ring:0 0 0 3px rgba(96,165,250,.40);

  --accent:#2563eb;
  --accent2:#06b6d4;

  --safeL:env(safe-area-inset-left,0px);
  --safeR:env(safe-area-inset-right,0px);
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);

  --padX:clamp(14px,3vw,28px);
  --padY:28px;

  --wrapMax:1400px;
  --gap:10px;

  display:block;
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  margin:0;
  width:100%;
  max-width:100%;

  padding-top:calc(var(--padY) + var(--safeT));
  padding-bottom:calc(var(--padY) + var(--safeB));
  padding-left:0;
  padding-right:0;

  border:1px solid var(--line);
  border-radius:0;
  box-shadow:var(--shadow-1);

  background: transparent;

  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:none;

  contain:layout paint;
  overflow:hidden;
  overflow-x:clip;
}

@supports not (overflow-x:clip){
  roi-calculator{ overflow-x:hidden; }
}

roi-calculator::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.65;
  background:
    radial-gradient(1000px 420px at 0% 0%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(37,99,235,.10), transparent 58%),
    radial-gradient(900px 420px at 0% 100%, rgba(6,182,212,.10), transparent 58%),
    radial-gradient(900px 420px at 100% 100%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg));
}

roi-calculator::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at -10% -30%, rgba(255,255,255,.82), transparent 60%),
    radial-gradient(800px 400px at 110% -20%, rgba(255,255,255,.78), transparent 65%),
    radial-gradient(900px 420px at 0% 115%, rgba(16,185,129,.08), transparent 55%),
    linear-gradient(180deg, rgba(99,102,241,.06), rgba(14,165,233,.06) 50%, rgba(16,185,129,.06));
}

roi-calculator :where(*, *::before, *::after){ box-sizing:border-box; }
roi-calculator :where(h2, h3, p){ margin:0; }

roi-calculator .section{
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

roi-calculator .wrap{
  max-width:var(--wrapMax);
  margin:0 auto;
  min-width:0;
  width:100%;

  padding-left:calc(var(--padX) + var(--safeL));
  padding-right:calc(var(--padX) + var(--safeR));
}

roi-calculator .card{
  width:100%;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-1);
  overflow:hidden;
}

roi-calculator .hero{
  padding:12px;
  border-bottom:1px solid var(--line);
}

roi-calculator .title-band{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;

  padding:12px 12px 11px;
  border-radius:16px;
  border:1px solid rgba(230,234,242,.95);
  box-shadow:var(--shadow-1);

  background:
    radial-gradient(700px 260px at 0% 0%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(700px 260px at 100% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 320px at 20% 140%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));

  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
}

roi-calculator h2{
  font-size:clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight:950;
  letter-spacing:.01em;
  line-height:1.12;

  background:linear-gradient(100deg, #7c3aed, #2563eb 35%, #06b6d4 68%, #10b981);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

roi-calculator .subtitle{
  color:var(--muted);
  font-weight:750;
  font-size:.98rem;
  line-height:1.5;
  max-width:70ch;
}

roi-calculator .body{ padding:12px; }

roi-calculator .layout{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
  grid-template-areas:
    "inputs"
    "controls"
    "results";
  min-width:0;
}

@media (min-width:980px){
  roi-calculator .layout{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:
      "inputs results"
      "controls results";
    column-gap:14px;
    row-gap:var(--gap);
  }
}

roi-calculator :where(.panel, .kpi, .cmp-card, .winnerBox){
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow-1);
}

roi-calculator .panel{
  border-radius:14px;
  padding:12px;
}

roi-calculator .panel h3{
  margin:0 0 10px;
  font-size:1rem;
  font-weight:950;
  letter-spacing:.01em;
}

roi-calculator .inputs{
  grid-area:inputs;
  display:flex;
  flex-direction:column;

  --ctrlW:200px;
  --ctrlH:36px;
  --ctrlPadY:8px;
  --ctrlPadX:10px;
  --unitGap:10px;
}

roi-calculator .rows{
  display:flex;
  flex-direction:column;
  gap:12px;
}

roi-calculator .row{
  display:grid;
  grid-template-columns:minmax(190px,.95fr) minmax(0,1fr);
  gap:12px;
  align-items:center;
}

@media (max-width:560px){
  roi-calculator .row{
    grid-template-columns:1fr;
    gap:8px;
  }
}

roi-calculator label{
  font-size:.95rem;
  color:var(--muted);
  font-weight:750;
}

roi-calculator :where(input[type="number"], select){
  border:1px solid rgba(148,163,184,.55);
  border-radius:12px;
  font-size:16px;

  background:#fff;
  color:var(--text);

  min-height:var(--ctrlH);
  padding:var(--ctrlPadY) var(--ctrlPadX);
  box-shadow:0 1px 0 rgba(15,23,42,.03);

  appearance:none;
  -webkit-appearance:none;
}

roi-calculator :where(input, select):focus{
  outline:none;
  box-shadow:var(--ring);
}

roi-calculator input[type="number"]::-webkit-outer-spin-button,
roi-calculator input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

roi-calculator input[type="number"]{ -moz-appearance:textfield; }

roi-calculator .unit{
  display:flex;
  align-items:center;
  gap:var(--unitGap);
  min-width:0;
}

roi-calculator .unit input[type="number"]{
  width:min(100%, var(--ctrlW));
  max-width:var(--ctrlW);
  border-radius:10px;
}

roi-calculator .row select{
  width:min(100%, var(--ctrlW));
  max-width:var(--ctrlW);
  justify-self:start;
}

roi-calculator .unit span{
  white-space:normal;
  overflow-wrap:anywhere;
  color:var(--muted);
  font-size:.9rem;
  line-height:1;
}

roi-calculator .hr{
  height:1px;
  background:var(--line);
  margin:4px 0;
}

roi-calculator .sectionLabel{
  display:flex;
  align-items:center;
  gap:10px;

  color:var(--muted);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:6px 0 2px;
  font-size:.78rem;
}

roi-calculator .sectionLabel::before{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
  border-radius:999px;
}

roi-calculator .customAccent{
  border-left:3px solid rgba(6,182,212,.55);
  padding-left:12px;
  border-radius:12px;
  margin-top:2px;

  display:flex;
  flex-direction:column;
  gap:12px;
}

roi-calculator .controls{
  grid-area:controls;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

roi-calculator .btn{
  appearance:none;
  cursor:pointer;

  border:1px solid rgba(37,99,235,.70);
  border-radius:12px;
  padding:10px 14px;

  font-weight:900;
  font-size:1rem;
  line-height:1;

  background:linear-gradient(180deg,#3b82f6,var(--accent));
  color:#fff;

  box-shadow:0 10px 18px rgba(37,99,235,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  roi-calculator .btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-2);
  }
}

roi-calculator .btn:active{ transform:translateY(0); }
roi-calculator .btn:focus-visible{ outline:none; box-shadow:var(--ring); }

roi-calculator .btn.secondary{
  background:linear-gradient(180deg,#fff,#f8fafc);
  color:var(--text);
  border-color:rgba(148,163,184,.55);
  box-shadow:var(--shadow-1);
}

roi-calculator .status{
  font-size:.95rem;
  color:var(--muted);
}

roi-calculator .results{
  grid-area:results;
  display:grid;
  gap:var(--gap);
  min-width:0;
}

roi-calculator .kpi{
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, #fff, #f7fbff);
}

roi-calculator .kpi .label{
  font-size:.78rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:900;
  margin:0 0 6px;
  line-height:1.2;
}

roi-calculator .kpi .value{
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight:950;
  line-height:1.12;
}

roi-calculator .mono{ font-variant-numeric: tabular-nums; }

roi-calculator .compare{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
}

roi-calculator .cmp-card{
  border-radius:14px;
  padding:12px;
}

roi-calculator .cmp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

roi-calculator .cmp-head h3{
  margin:0;
  font-size:1rem;
  font-weight:950;
}

roi-calculator .badge{
  font-size:.78rem;
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:999px;
  color:rgba(75,88,116,.85);
  background:rgba(255,255,255,.7);
}

roi-calculator .win{
  border:2px solid #22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

roi-calculator .stack{
  display:grid;
  gap:8px;
}

roi-calculator .split{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:1rem;
  min-width:0;
}

roi-calculator .split span:first-child{
  color:var(--muted);
  font-size:.95rem;
  max-width:70%;
}

roi-calculator .split span:last-child{
  max-width:55%;
  overflow-wrap:anywhere;
}

roi-calculator .winnerBox{
  border-radius:14px;
  padding:12px;
}

roi-calculator .barWrap{
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}

roi-calculator .bar{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}

@media (prefers-reduced-motion:no-preference){
  roi-calculator .bar{ transition:width .35s ease; }
}

roi-calculator .barNote{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  color:rgba(75,88,116,.75);
  margin-top:6px;
}

roi-calculator .delta{
  font-size:.95rem;
  color:#16a34a;
  font-weight:850;
  margin-top:6px;
}

roi-calculator .warn{
  color:#b91c1c;
  font-size:.95rem;
  margin-top:6px;
}

roi-calculator .noscript{
  padding:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-weight:750;
}

@media (max-width:600px){
  roi-calculator{
    --padY:20px;
    --padX:12px;
  }

  roi-calculator .hero{ padding:10px; }
  roi-calculator .body{ padding:10px; }

  roi-calculator :where(.panel, .kpi, .cmp-card, .winnerBox){
    border-radius:12px;
    padding:11px;
  }
}

@media (max-width:520px){
  roi-calculator .inputs{ --ctrlW:100%; }

  roi-calculator .unit{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  roi-calculator .unit span{ align-self:flex-start; }

  roi-calculator :where(.unit input[type="number"], .row select){
    width:100%;
    max-width:100%;
  }
}

@media (max-width:420px){
  roi-calculator .controls{
    position:sticky;
    bottom:0;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;

    padding-bottom:calc(10px + var(--safeB));
    box-shadow:var(--shadow-1);
  }
}

roi-calculator > *{
  position:relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  roi-calculator,
  roi-calculator *{
    scroll-behavior:auto;
  }

  roi-calculator *,
  roi-calculator *::before,
  roi-calculator *::after{
    animation:none;
    transition:none;
  }

  roi-calculator .btn:hover{
    transform:none;
    box-shadow:var(--shadow-1);
  }

  roi-calculator .title-band{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  roi-calculator .controls{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}