html, body {
  height: 100%;
  overscroll-behavior: none;
  margin: 0;
  background-color: #7a5230;
}

body {
  font-family: system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
  font-size: 16px !important;
}

.app-bg {
  background-image:
    repeating-linear-gradient(180deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 6px),
    linear-gradient(90deg, #d4a574 0%, #c8956c 25%, #b8855a 50%, #c0905f 75%, #d4a574 100%);
}

.shelf-ledge {
  height: 20px;
  width: 100%;
  border-radius: 2px;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px),
    linear-gradient(180deg, #c8956c 0%, #a0714f 40%, #8b6545 70%, #7a5230 100%);
  box-shadow: 0 4px 8px rgba(74,47,21,0.5), 0 2px 3px rgba(74,47,21,0.3);
}

.book-ribbon {
  position: absolute;
  top: 0;
  right: 4px;
  width: 12px;
  height: 24px;
  border-radius: 0 0 2px 2px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.book-shadow {
  box-shadow: 3px 3px 8px rgba(0,0,0,0.4), inset -2px 0 4px rgba(0,0,0,0.2);
}

.modal-shadow {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.2);
}

.pt-safe {
  padding-top: max(16px, env(safe-area-inset-top));
}

.pb-safe {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 0.8s linear infinite;
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.15; }
}
.ghost-pulse {
  animation: pulse-opacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}