:root {
  --bg-deep: #0a0f1a;
  --bg-body: #141b2b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 20% 15%, rgba(16, 185, 129, 0.08), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(6, 182, 212, 0.07), transparent 45%),
    linear-gradient(160deg, #0f172a 0%, #0a0f1a 100%);
  background-attachment: fixed;
  color: #e2e8f0;
  -webkit-tap-highlight-color: transparent;
}

.calc-body {
  background: linear-gradient(155deg, #1e293b 0%, #131c2e 100%);
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.display-box {
  background: linear-gradient(180deg, #030712 0%, #0a1120 100%);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.12);
}

.display-box.flash {
  animation: flashPulse 0.18s ease-out;
}

@keyframes flashPulse {
  0% { box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 0 2px rgba(16,185,129,0.5); }
  100% { box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 0 0 rgba(16,185,129,0); }
}

.calc-btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.calc-btn:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.history-panel {
  animation: slideDown 0.25s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hist-item {
  transition: all 0.15s ease;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Thin custom scrollbars */
.scroll-thin::-webkit-scrollbar { width: 5px; height: 5px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 3px;
}
.scroll-thin { scrollbar-width: thin; scrollbar-color: rgba(16,185,129,0.3) transparent; }

@media (max-width: 400px) {
  .calc-btn { height: 3rem; font-size: 1rem; }
}