* { 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-stone-50\/50,
.bg-yellow-50\/50,
.bg-orange-50 {
  background-color: #fdfbe9 !important;
  background-image: none !important;
}

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

.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;
  color: #998f76 !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;
}

.bg-orange-400,
.bg-orange-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;
}
.hover\:bg-orange-600:hover {
  background-image: linear-gradient(to bottom, #d94a14, #8a2b00) !important;
}
.hover\:bg-orange-100:hover {
  background-color: #fde9d9 !important;
}

.hover\:bg-stone-50:hover  { background-color: #fdfbe9 !important; }
.hover\:bg-stone-100:hover { background-color: #ece4bf !important; }

.text-stone-900 { color: #2b3a1f !important; }
.text-stone-700 { color: #444 !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-orange-500,
.text-orange-700 { color: #ff6633 !important; }

.hover\:text-orange-500:hover,
.hover\:text-orange-700:hover { color: #ff6633 !important; }
.hover\:text-stone-500:hover  { color: #8a8270 !important; }
.hover\:text-red-500:hover    { color: #d94a14 !important; }

.border-stone-200 { border-color: #c8c4b0 !important; }
.border-stone-100 { border-color: #d4cfb8 !important; }
.border-orange-200 { border-color: #ffd0bb !important; }

@keyframes pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes fade-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.fade-up { animation: fade-up 0.3s ease-out forwards; }

.touch-none { touch-action: none; }

.throbber-classic {
  width: 36px;
  height: 36px;
  margin: 0 auto 18px auto;
  border: 4px solid #ece4bf;
  border-top-color: #ff6633;
  border-radius: 50%;
  animation: throb-classic 0.8s linear infinite;
}
@keyframes throb-classic { to { transform: rotate(360deg); } }

.progressbar-classic {
  height: 18px;
  background: #ece4bf;
  border: 1px solid #998f76;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.progressbar-classic-fill {
  height: 100%;
  background-color: #ff6633;
  background-image:
    linear-gradient(135deg,
      rgba(255,255,255,0.35) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0.35) 75%, transparent 75%,
      transparent);
  background-size: 16px 16px;
  border-right: 1px solid #b53800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  animation: stripes-classic 1s linear infinite;
  transition: width 0.2s linear;
}
@keyframes stripes-classic {
  from { background-position: 0 0; }
  to   { background-position: 16px 0; }
}

.dots {
  display: inline-block;
  animation: dots-blink 1.2s steps(2, start) infinite;
}
@keyframes dots-blink {
  to { opacity: 0.3; }
}