/* ═══════════════════════════════════════════
   Неоклассический калькулятор
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --cream:       #f5f0e8;
  --cream-dark:  #e8e0d0;
  --ivory:       #faf7f2;
  --forest:      #2c4a3e;
  --forest-light:#3d6b5a;
  --forest-dark: #1e352c;
  --gold:        #b8963e;
  --gold-light:  #d4b45c;
  --gold-muted:  #a08030;
  --charcoal:    #2a2520;
  --warm-gray:   #6b6058;
  --warm-gray-lt:#9a8e84;
  --shadow:      rgba(44, 74, 62, 0.18);
  --shadow-deep: rgba(30, 53, 44, 0.3);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #e8e0d0 0%, #d5cab8 40%, #c4b89e 100%);
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Орнаменты ── */
.ornament-top, .ornament-bottom {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 24px;
  border-radius: 2px;
}
.ornament-top { margin-top: 20px; }
.ornament-bottom { margin-bottom: 16px; }

/* ── Калькулятор ── */
.calculator {
  width: 370px;
  background: var(--ivory);
  border-radius: 18px;
  box-shadow:
    0 2px 6px var(--shadow),
    0 12px 40px var(--shadow-deep),
    inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid var(--cream-dark);
  overflow: hidden;
}

/* ── Заголовок ── */
.title {
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--forest);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 0 6px;
}

/* ── Дисплей ── */
.display-wrapper {
  padding: 10px 24px 14px;
}

.display {
  background: linear-gradient(180deg, var(--forest-dark) 0%, var(--forest) 100%);
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 2.6rem;
  text-align: right;
  padding: 18px 22px;
  border-radius: 10px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  line-height: 1.15;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.5);
  border: 1px solid var(--forest-dark);
  transition: font-size 0.2s;
}

.display.small { font-size: 1.8rem; }

/* ── Кнопки ── */
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 6px 20px 18px;
}

.btn {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 16px 0;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  outline: none;
}

.btn:active {
  transform: translateY(2px);
  box-shadow: none !important;
}

/* ── Числовые кнопки ── */
.btn-num {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
  color: var(--charcoal);
  box-shadow:
    0 3px 6px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.06);
}
.btn-num:hover {
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}

/* ── Кнопка 0 — шире ── */
.btn-zero {
  grid-column: span 2;
}

/* ── Операторы ── */
.btn-accent {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: #fff;
  box-shadow:
    0 3px 8px rgba(184, 150, 62, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.35);
  border: 1px solid var(--gold-muted);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-accent:hover {
  background: linear-gradient(180deg, #dbbf6a 0%, var(--gold-light) 100%);
}

/* ── Равно ── */
.btn-equals {
  background: linear-gradient(180deg, var(--forest-light) 0%, var(--forest) 100%);
  color: #fff;
  box-shadow:
    0 3px 10px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid var(--forest-dark);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-equals:hover {
  background: linear-gradient(180deg, #4a7d6a 0%, var(--forest-light) 100%);
}

/* ── Очистка / служебные ── */
.btn-clear {
  background: linear-gradient(180deg, #c9a882 0%, #b08e68 100%);
  color: #fff;
  box-shadow:
    0 3px 6px rgba(176, 142, 104, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.3);
  border: 1px solid #9a7a56;
}
.btn-clear:hover {
  background: linear-gradient(180deg, #d4b892 0%, #c09e78 100%);
}

.btn-operator {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  color: var(--warm-gray);
  box-shadow:
    0 2px 5px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.05);
}
.btn-operator:hover {
  background: #fff;
  color: var(--forest);
}

/* ── Тонкая линия-разделитель под дисплеем ── */
.display-wrapper::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
  margin-top: 2px;
}

/* ── Адаптив ── */
@media (max-width: 420px) {
  .calculator { width: 96vw; border-radius: 14px; }
  .btn { padding: 14px 0; font-size: 1.15rem; }
  .display { font-size: 2.2rem; padding: 14px 16px; min-height: 68px; }
  .buttons { gap: 8px; padding: 4px 12px 14px; }
}