* { 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;
  letter-spacing: -0.01em;
}

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

.bg-stone-800 {
  background-color: #f4efd9 !important;
  background-image: none !important;
}

.bg-stone-700,
.bg-stone-600 {
  background-color: #4a5e35 !important;
  background-image: linear-gradient(to bottom, #6b8650, #2b3a1f) !important;
  border: 1px solid #1a2410 !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-rose-400 {
  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;
}
.hover\:bg-rose-300:hover {
  background-image: linear-gradient(to bottom, #ffaa80, #ff6633) !important;
}
.bg-rose-400\/10 { background-color: rgba(255, 102, 51, 0.10) !important; background-image: none !important; }

.bg-emerald-500 {
  background-color: #4a5e35 !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;
}
.hover\:bg-emerald-400:hover {
  background-image: linear-gradient(to bottom, #a8c882, #6b8650) !important;
}
.bg-emerald-400\/10 { background-color: rgba(106, 134, 80, 0.12) !important; background-image: none !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;
}
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-30:disabled { opacity: 0.5; }

.text-stone-100,
.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; }
.text-stone-950 { color: #2b3a1f !important; }
.hover\:text-stone-100:hover,
.hover\:text-stone-200:hover { color: #2b3a1f !important; }

.text-rose-400 { color: #ff6633 !important; }
.hover\:text-rose-400:hover { color: #ff6633 !important; }
.text-emerald-500,
.text-emerald-600 { color: #4a5e35 !important; }
.text-amber-500 { color: #b58a14 !important; }
.hover\:text-red-400:hover { color: #d94a14 !important; }

.border-stone-700,
.border-stone-800 { border-color: #c8c4b0 !important; }
.border-rose-400  { border-color: #ff6633 !important; }
.border-emerald-500 { border-color: #4a5e35 !important; }
.hover\:border-rose-400:hover { border-color: #ff6633 !important; }
.hover\:border-red-500:hover  { border-color: #ff6633 !important; }

.rounded-lg { border-radius: 3px !important; }

textarea {
  font-family: "Lucida Grande", Verdana, sans-serif;
  font-size: 13px;
  background: #fdfbe9 !important;
  color: #2b3a1f !important;
  border: 1px solid #c8c4b0 !important;
  padding: 10px;
  width: 100%;
  resize: vertical;
}
textarea:focus { outline: none; border-color: #ff6633 !important; box-shadow: 0 0 0 1px #ff6633; }

@keyframes pulse-orange {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 0 rgba(255, 102, 51, 0.45); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 8px rgba(255, 102, 51, 0); }
}
.pulse { animation: pulse-orange 2s infinite; }

button.bg-rose-400,
button.bg-emerald-500,
.bg-rose-400.text-stone-950,
.bg-emerald-500.text-stone-950 {
  color: #ffffff !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25) !important;
}