:root {
  --bg-start: #d9f7d9;
  --bg-end: #e9fbd7;
  --btn-bg-1: #f7fff0;
  --btn-bg-2: #efffe6;
  --accent-1: #a6e3a1;
  --accent-2: #8fd68b;
  --text: #173b2b;
  --text-soft: #406a53;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  color: var(--text);
  overflow: auto; /* 保留滚动效果 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 隐藏滚动条 */
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body { scrollbar-width: none; }

.calculator {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 12px env(safe-area-inset-right) 24px env(safe-area-inset-left);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.angle-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 3px;
}

.angle-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  color: #24543a;
  font-weight: 600;
}

.angle-toggle button.active {
  background: #b8e2b1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) inset;
}

.display {
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.expression {
  min-height: 28px;
  font-size: 18px;
  color: var(--text-soft);
  word-break: break-all;
}

.result {
  font-size: 32px;
  font-weight: 700;
  text-align: right;
  color: var(--text);
  padding-top: 4px;
}

.result.error { color: #d35454; }

.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.keypad button {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 14px 0;
  min-height: 58px; /* 移动端友好触控 */
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(180deg, var(--btn-bg-1), var(--btn-bg-2));
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  -webkit-tap-highlight-color: transparent;
}

.keypad button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.keypad .action {
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  color: #0f2a1f;
}

.keypad .span-2 { grid-column: span 2; }

.tips {
  opacity: 0.7;
  text-align: center;
  font-size: 12px;
  margin-top: auto;
  padding-bottom: 8px;
}

@media (max-width: 360px) {
  .keypad button { min-height: 52px; font-size: 16px; }
  .result { font-size: 28px; }
}