*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-strong); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
::selection { background: var(--gold-300); color: var(--espresso-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d9cfbf; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #c4b7a2; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

.ic { width: 18px; height: 18px; stroke-width: 1.75; flex: none; }
svg.lucide { width: 18px; height: 18px; flex: none; }
.ic-sm, svg.lucide.ic-sm { width: 15px; height: 15px; }
.ic-lg, svg.lucide.ic-lg { width: 22px; height: 22px; }
.ic-xl, svg.lucide.ic-xl { width: 30px; height: 30px; }

.display { font-family: var(--font-display); font-weight: 560; letter-spacing: -.02em; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.flex { display: flex; }
.col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-accent { color: var(--accent-strong); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(184,146,90,.55); } 100% { box-shadow: 0 0 0 14px rgba(184,146,90,0); } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

.anim-rise { animation: riseIn var(--t-med) var(--ease) both; }
.anim-pop { animation: popIn var(--t-med) var(--ease) both; }
.flash { animation: flash 1.6s var(--ease); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 0, #ece5d9 120px, var(--surface-3) 240px);
  background-size: 800px 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}