* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Cormorant Garamond', serif;
}

body {
  background: #1a0e08;
}

.desk-bg {
  background:
    repeating-linear-gradient(
      87deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      #3d2010 0px,
      #4a2a15 3px,
      #3a1e0e 6px,
      #442612 9px,
      #3d2010 12px
    ),
    linear-gradient(180deg, #2d1a0e 0%, #3d2414 30%, #45291a 60%, #2d1a0e 100%);
}

.title-bar {
  background: linear-gradient(180deg, #2c1a10 0%, #1e1008 100%);
  border-bottom: 1px solid #4a2a15;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  user-select: none;
  -webkit-user-select: none;
}

.title-bar-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  border: none;
  cursor: default;
}

.leather-texture {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(80,50,30,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(80,50,30,0.2) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 1px,
      rgba(0,0,0,0.05) 1px,
      rgba(0,0,0,0.05) 2px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 3px
    ),
    linear-gradient(135deg, #3E2723 0%, #4E342E 25%, #3E2723 50%, #5D4037 75%, #3E2723 100%);
}

.gold-emboss {
  color: #C8A951;
  text-shadow:
    0 1px 0 #B8942E,
    0 2px 2px rgba(0,0,0,0.4),
    0 0 10px rgba(200,169,81,0.2);
  font-family: 'Playfair Display', serif;
}

.page-texture {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      rgba(180,170,150,0.08) 27px,
      rgba(180,170,150,0.08) 28px
    ),
    radial-gradient(ellipse at 30% 20%, rgba(255,250,235,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(240,230,210,0.3) 0%, transparent 60%),
    linear-gradient(135deg, #FFF8F0 0%, #F5F0E8 40%, #FFF5EB 70%, #F0EBE0 100%);
  background-color: #FFF8F0;
}

.page-left {
  border-right: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    inset -8px 0 15px -8px rgba(0,0,0,0.12),
    inset 2px 0 4px -2px rgba(0,0,0,0.05);
}

.page-right {
  border-left: 1px solid rgba(0,0,0,0.05);
  box-shadow:
    inset 8px 0 15px -8px rgba(0,0,0,0.12),
    inset -2px 0 4px -2px rgba(0,0,0,0.05);
}

.font-handwriting {
  font-family: 'Caveat', cursive;
}

.font-display {
  font-family: 'Playfair Display', serif;
}

.font-body {
  font-family: 'Cormorant Garamond', serif;
}

.book-shadow {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 10px 30px rgba(0,0,0,0.4),
    0 5px 15px rgba(0,0,0,0.3),
    0 0 1px rgba(0,0,0,0.2);
}

.spine-shadow {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.08) 20%,
    rgba(62,39,35,0.9) 40%,
    rgba(62,39,35,1) 50%,
    rgba(62,39,35,0.9) 60%,
    rgba(0,0,0,0.08) 80%,
    rgba(0,0,0,0.25) 100%
  );
}

.page-turn-hint:hover .corner-fold {
  transform: translateY(-6px) translateX(-3px) rotate(-5deg);
}

.corner-fold {
  transition: transform 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeInUp 0.4s ease forwards;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.loading-shimmer {
  background: linear-gradient(90deg, #2C1810 25%, #5D4037 50%, #2C1810 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes whiskSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.whisk-spin {
  animation: whiskSpin 0.8s linear infinite;
  display: inline-block;
}

@keyframes bookOpen {
  0% { transform: perspective(1500px) rotateY(0deg) scale(0.8); opacity: 0.5; }
  100% { transform: perspective(1500px) rotateY(0deg) scale(1); opacity: 1; }
}

.book-open-anim {
  animation: bookOpen 0.6s ease forwards;
}

@keyframes coverOpen {
  0% { transform: perspective(1200px) rotateY(0deg); }
  100% { transform: perspective(1200px) rotateY(-180deg); }
}

.page-stack-edge {
  background: repeating-linear-gradient(
    0deg,
    #F5F0E8 0px,
    #F5F0E8 1px,
    #e8e0d4 1px,
    #e8e0d4 2px
  );
}

input.recipe-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(44,24,16,0.2);
  outline: none;
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: #2C1810;
  text-align: center;
  width: 80%;
  padding: 8px 4px;
  transition: border-color 0.3s ease;
}

input.recipe-input:focus {
  border-bottom-color: #C8A951;
}

input.recipe-input::placeholder {
  color: rgba(44,24,16,0.3);
  font-style: italic;
}

.bookmark-ribbon {
  position: absolute;
  top: -4px;
  right: 20px;
  width: 24px;
  height: 50px;
  background: #8B0000;
  z-index: 10;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}

.search-overlay {
  background: rgba(26,14,8,0.85);
  backdrop-filter: blur(8px);
}

@keyframes pageFlipLeft {
  0% { transform: perspective(1200px) rotateY(0deg); transform-origin: left center; }
  100% { transform: perspective(1200px) rotateY(-180deg); transform-origin: left center; }
}

@keyframes pageFlipRight {
  0% { transform: perspective(1200px) rotateY(0deg); transform-origin: right center; }
  100% { transform: perspective(1200px) rotateY(180deg); transform-origin: right center; }
}

.decorative-flourish {
  opacity: 0.15;
}

/* Scrollbar for recipe content */
.recipe-scroll::-webkit-scrollbar {
  width: 6px;
}
.recipe-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.recipe-scroll::-webkit-scrollbar-thumb {
  background: rgba(44,24,16,0.2);
  border-radius: 3px;
}
.recipe-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(44,24,16,0.35);
}

@media (max-width: 768px) {
  .book-container {
    flex-direction: column !important;
  }
}