* { box-sizing: border-box; }

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

body {
  background: #ece9d8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23ece9d8'/><rect width='1' height='1' fill='%23dcd9c8'/></svg>") repeat !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23ece9d8'/><rect width='1' height='1' fill='%23dcd9c8'/></svg>") !important;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif !important;
  font-size: 12px;
  color: #444 !important;
  line-height: 1.5;
}

a       { color: #2b6fb6; text-decoration: none; }
a:hover { color: #ff6633; text-decoration: underline; }

#page {
  margin: 18px 32px 40px 32px;
  background: #ffffff;
  border: 1px solid #c8c4b0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

#page-header {
  background: #f4efd9;
  background-image: linear-gradient(to bottom, #fdfbe9, #ece4bf);
  border-bottom: 1px solid #c8c4b0;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Lucida Grande", Verdana, sans-serif;
}
#page-header .back     { font-size: 12px; color: #555; font-weight: bold; }
#page-header .back:hover { color: #ff6633; }
#page-header .logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: #2b3a1f;
  letter-spacing: -0.5px;
}
#page-header .logo .dot { color: #ff6633; }
#page-header .crumb {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: #6b6453;
}

.display {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: normal !important;
}

.bg-slate-900\/40,
.bg-slate-900\/60,
.bg-slate-800,
.bg-slate-800\/50,
.bg-purple-950\/30,
.bg-purple-950\/40 {
  background-color: #fbfaf3 !important;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfaf3 50%, #f1ecd6 100%) !important;
}

.bg-slate-700 {
  background-color: #f4efd9 !important;
  background-image: none !important;
}

.bg-purple-400,
.bg-purple-500 {
  background-color: #e64a14 !important;
  background-image: linear-gradient(to bottom, #ff8855, #d94a14) !important;
  border: 1px solid #b53800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4) !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  color: #ffffff !important;
}

.bg-emerald-400,
.bg-emerald-500 {
  background-color: #6b8650 !important;
  background-image: linear-gradient(to bottom, #8aa86a, #4a5e35) !important;
  border: 1px solid #2b3a1f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3) !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  color: #ffffff !important;
}
.bg-emerald-950\/40 {
  background-color: #e9efd6 !important;
  background-image: none !important;
}

.hover\:bg-slate-700:hover { background-color: #ece4bf !important; }

button:disabled {
  background-color: #d4cfb8 !important;
  background-image: none !important;
  border: 1px solid #c8c4b0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  color: #998f76 !important;
}

.text-stone-200 { color: #2b3a1f !important; }
.text-stone-400 { color: #998f76 !important; }
.text-stone-500 { color: #8a8270 !important; }
.text-stone-600 { color: #6b6453 !important; }
.text-stone-700 { color: #444 !important; }
.hover\:text-stone-100:hover,
.hover\:text-stone-200:hover { color: #2b3a1f !important; }

.text-purple-100 { color: #2b3a1f !important; }
.text-purple-200 { color: #6b6453 !important; }
.text-purple-300 { color: #8a8270 !important; }
.text-purple-400,
.text-purple-500 { color: #ff6633 !important; }

.text-emerald-400 { color: #4a5e35 !important; }
.hover\:text-red-400:hover { color: #d94a14 !important; }

.border-slate-700,
.border-slate-800,
.border-stone-500 { border-color: #c8c4b0 !important; }
.border-purple-500,
.border-purple-900 { border-color: #ff6633 !important; }
.border-emerald-500 { border-color: #8aa86a !important; }
.hover\:border-slate-700:hover { border-color: #998f76 !important; }
.hover\:border-stone-100:hover { border-color: #2b3a1f !important; }

@keyframes shake-fist {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-8px) rotate(-8deg); }
  50%      { transform: translateY(0) rotate(0); }
  75%      { transform: translateY(-8px) rotate(8deg); }
}
.shake { animation: shake-fist 0.18s linear infinite; display: inline-block; }

@keyframes reveal-pop {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reveal { animation: reveal-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; display: inline-block; }

@keyframes thinking {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.thinking { animation: thinking 1.2s ease-in-out infinite; }