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

:root {
  --green:     #0d9b6a;
  --green-lt:  #e6f7f1;
  --purple:    #7c3aed;
  --orange:    #e67e22;
  --orange-dk: #d35400;
  --blue:      #3498db;
  --red:       #e74c3c;
  --dark:      #1a1a2e;
  --bg:        #f0f0ec;
  --muted:     #6b7280;
  --border:    #e5e7eb;

  --drawer-ddl:   linear-gradient(150deg, #064e3b 0%, #1e1b4b 100%);
  --drawer-child: linear-gradient(150deg, #7c2d12 0%, #d97706 100%);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  min-height: 100%;
  background: #0a0400;
  color: var(--dark);
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100dvh;
  padding-top: var(--safe-top);
}

h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }

.hidden { display: none !important; }

/* ── Loading ── */
.loading-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 999;
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
#toast-container {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 1000; pointer-events: none;
}
.toast {
  background: rgba(26,26,46,.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  color: white; white-space: nowrap;
  animation: toast-in .25s ease;
}
.toast.error   { border-color: rgba(231,76,60,.5);  color: #fca5a5; }
.toast.success { border-color: rgba(13,155,106,.5); color: #6ee7b7; }
@keyframes toast-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}