* { 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;
  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;
  font-optical-sizing: auto;
}

.bg-white {
  background-color: #fbfaf3 !important;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfaf3 50%, #f1ecd6 100%) !important;
}

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

.bg-stone-900 {
  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;
}
.hover\:bg-stone-800:hover {
  background-image: linear-gradient(to bottom, #4a5e35, #1a2410) !important;
}

.bg-stone-300,
button:disabled.bg-stone-300,
button:disabled {
  background-color: #d4cfb8 !important;
  background-image: none !important;
  border: 1px solid #c8c4b0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.bg-amber-50,
.bg-amber-50\/40 {
  background-color: #fdfbe9 !important;
  background-image: none !important;
}

.bg-red-500 {
  background-color: #d94a14 !important;
  background-image: linear-gradient(to bottom, #ff6633, #b53800) !important;
  border: 1px solid #8a2b00 !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-red-600:hover {
  background-image: linear-gradient(to bottom, #d94a14, #8a2b00) !important;
}
.bg-red-500\/80 {
  background-color: rgba(217, 74, 20, 0.8) !important;
}

.text-stone-900 { color: #2b3a1f !important; }
.text-stone-800 { color: #3a4a2a !important; }
.text-stone-600 { color: #6b6453 !important; }
.text-stone-500 { color: #8a8270 !important; }
.text-stone-400 { color: #998f76 !important; }
.text-stone-300 { color: #c8c4b0 !important; }

.text-rose-600,
.text-rose-500,
em.text-rose-600 { color: #ff6633 !important; }
.hover\:text-rose-500:hover { color: #ff6633 !important; }

.text-red-500 { color: #d94a14 !important; }
.hover\:text-red-500:hover { color: #d94a14 !important; }
.text-amber-600 { color: #b58a14 !important; }
.text-emerald-700 { color: #4a5e35 !important; }
.bg-emerald-100 { background-color: #d8e4c4 !important; }

.border-stone-200 { border-color: #c8c4b0 !important; }
.border-stone-100 { border-color: #d4cfb8 !important; }
.border-stone-400 { border-color: #998f76 !important; }
.border-stone-900 { border-color: #2b3a1f !important; }
.border-rose-200 { border-color: #ffd0bb !important; }
.border-red-200 { border-color: #ffb8a3 !important; }
.hover\:border-stone-400:hover { border-color: #998f76 !important; }
.hover\:border-stone-900:hover { border-color: #2b3a1f !important; }
.hover\:border-rose-500:hover { border-color: #ff6633 !important; }
.hover\:border-red-200:hover  { border-color: #ffb8a3 !important; }

.rounded-3xl { border-radius: 6px !important; }
.rounded-2xl { border-radius: 5px !important; }
.rounded-xl  { border-radius: 4px !important; }
.rounded-lg  { border-radius: 3px !important; }
.rounded-md  { border-radius: 3px !important; }
.rounded     { border-radius: 2px !important; }

.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl {
  box-shadow: 0 1px 0 #ffffff inset, 0 1px 2px rgba(0,0,0,0.08) !important;
}
.shadow-sm { box-shadow: 0 1px 1px rgba(0,0,0,0.05) !important; }
.hover\:shadow:hover,
.hover\:shadow-xl:hover {
  box-shadow: 0 1px 0 #ffffff inset, 0 2px 4px rgba(0,0,0,0.12) !important;
}

@keyframes pulse-olive {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 0 rgba(43, 58, 31, 0.45); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 8px rgba(43, 58, 31, 0); }
}
.pulse { animation: pulse-olive 2s infinite; }

.sample-thumb {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  display: block;
}
.touch-none { touch-action: none; }