:root { --bg: #E1CBB3; --card: #FFF2E5; --text: #000000; --muted: #666666; --accent: #000000; --border: #E1CBB3; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="text"]:valid,
input[type="email"]:valid {
  background: #FFFFFF !important;
  border: 1px solid #E1CBB3 !important;
}
input[type="text"]:-webkit-autofill,
input[type="email"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #000000 !important;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #E1CBB3;
  height: 8px;
  border-radius: 4px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E1CBB3;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E1CBB3;
  cursor: pointer;
  border: none;
}
.container { max-width: 960px; margin: 0 auto; padding: 24px; }
h1 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--card); padding: 16px; border-radius: 12px; border: none; }
label { display: block; font-weight: 600; margin-bottom: 8px; }
.options { margin: 16px 0; }
button { background: var(--accent); color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; }
button.secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.product-btn {
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}
.product-btn.selected {
  background: #E1CBB3;
  color: var(--text);
  border-color: #E1CBB3;
}
.product-btn:hover {
  border-color: #E1CBB3;
}
.mode-toggle-btn {
  flex: 1;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
  transition: all 0.2s ease;
}
.mode-toggle-btn.active {
  background: #E1CBB3;
  color: var(--text);
  border-color: #E1CBB3;
}
.mode-toggle-btn:hover {
  border-color: #E1CBB3;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hidden { display: none; }
.warning { background: #f59e0b22; color: #fbbf24; padding: 8px 12px; border-radius: 8px; border: 1px solid #f59e0b44; }