/* Hero / homepage scientific calculator — calculator.net style, Bootstrap-proof */
.sc-hero-calc {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.sc-hero-calc-display {
  background: linear-gradient(180deg, #2b6cb0 0%, #1e4d8c 100%);
  color: #fff;
  padding: 10px 14px;
  min-height: 52px;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-all;
}

.sc-hero-calc-display .sc-expr {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  min-height: 1rem;
  margin-bottom: 2px;
}

.sc-hero-calc-keypad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #a0a0a0;
  border-top: 1px solid #909090;
}

.sc-hero-calc-keypad button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none !important;
  outline: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.1;
  min-height: 36px;
  cursor: pointer;
  background: #e4e4e4;
  color: #111;
  transition: background 0.1s;
}

.sc-hero-calc-keypad button:hover {
  background: #d0d0d0;
}

.sc-hero-calc-keypad button:active {
  background: #b8b8b8;
}

.sc-hero-calc-keypad .sc-k-fn {
  background: #d8d8d8;
  font-size: 0.75rem;
}

.sc-hero-calc-keypad .sc-k-op {
  background: #c5d5e8;
  color: #1a3a5c;
}

.sc-hero-calc-keypad .sc-k-op:hover {
  background: #a8c0dc;
}

.sc-hero-calc-keypad .sc-k-eq {
  background: #2b6cb0;
  color: #fff;
}

.sc-hero-calc-keypad .sc-k-eq:hover {
  background: #1e4d8c;
}

.sc-hero-calc-keypad .sc-k-ac {
  background: #4a6fa5;
  color: #fff;
}

.sc-hero-calc-keypad .sc-k-ac:hover {
  background: #3a5a8a;
}

.sc-hero-calc-keypad .sc-k-mode {
  background: #d8d8d8;
  font-size: 0.6875rem;
  font-weight: 700;
}

.sc-hero-calc-keypad .sc-k-mode.active {
  background: #2b6cb0;
  color: #fff;
}

.hero-visual .sc-hero-calc {
  max-width: 100%;
}

@media (min-width: 992px) {
  .hero-visual {
    display: flex;
    justify-content: flex-end;
  }

  .hero-visual .sc-hero-calc {
    max-width: 340px;
  }
}

@media (max-width: 575.98px) {
  .sc-hero-calc-keypad button {
    min-height: 34px;
    font-size: 0.75rem;
  }

  .sc-hero-calc-display {
    font-size: 1.25rem;
    min-height: 48px;
  }
}

[data-theme="dark"] .sc-hero-calc {
  background: #1e293b;
  border-color: #475569;
}

[data-theme="dark"] .sc-hero-calc-keypad button {
  background: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .sc-hero-calc-keypad .sc-k-fn {
  background: #3b4f66;
}

[data-theme="dark"] .sc-hero-calc-keypad .sc-k-op {
  background: #1e3a5f;
  color: #93c5fd;
}