:root{
  --bg:#000;--fg:#d7d7d7;--panel:#0a0a0a;--line:#1f1f1f;--green:#22c55e;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background-color:#030303;color:var(--fg);
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(34,197,94,.18), transparent 62%),
    radial-gradient(620px 460px at 92% 108%, rgba(56,189,248,.10), transparent 62%),
    radial-gradient(720px 520px at 6% 108%, rgba(34,197,94,.07), transparent 62%);
  filter:saturate(1.1);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to right, rgba(34,197,94,.028) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(to bottom, rgba(34,197,94,.028) 0 1px, transparent 1px 90px);
}
.calc-app{
  position:relative;z-index:1;
  width:min(420px,100vw);
  height:100dvh;
  display:flex;flex-direction:column;
  background:#000;
}
@media (min-width:480px){
  .calc-app{height:min(760px,92dvh);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.7)}
}
.calc-top{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#2a2a2a,#141414);
}
.calc-dots{display:flex;gap:6px}
.calc-dots i{width:11px;height:11px;border-radius:50%;display:block}
.calc-dots i:nth-child(1){background:#ff5f57}
.calc-dots i:nth-child(2){background:#febc2e}
.calc-dots i:nth-child(3){background:#28c840}
.back{color:#4ade80;text-decoration:none;font-size:12.5px}
.title{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#5f5f5f;flex:1;text-align:center}
.status{font-size:11px;color:#4d4d4d}
.calc-screen{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:18px 16px;border-bottom:1px solid var(--line);background:#050505;
  min-height:140px;
}
.history{
  min-height:20px;max-height:110px;overflow-y:auto;
  color:#5f5f5f;font-size:12.5px;line-height:1.6;text-align:right;
  display:flex;flex-direction:column-reverse;
}
.history div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.display{font-size:clamp(40px,9vw,54px);font-weight:600;color:#f2f2f2;text-align:right;line-height:1.1;overflow-wrap:anywhere}
.pad{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;
}
button{
  font-family:inherit;font-size:clamp(18px,4.6vw,22px);
  padding:clamp(14px,3.6vh,22px) 0;
  border-radius:12px;border:1px solid #242424;background:#121212;color:#d7d7d7;cursor:pointer;
  transition:transform .08s, filter .08s;
}
button:active{transform:scale(.95)}
button.op{background:#0f2a1a;border-color:#1d4d2e;color:#4ade80}
button.fn{background:#151515;color:#9a9a9a}
button.eq{background:linear-gradient(180deg,#4ade80,#22c55e);color:#04150a;border:0;font-weight:700}