body {
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 16px;
}

:root {
  --bg: #ffffff; --text: #222; --muted: #666; --card-bg: #f8f9fa; --border: #ddd;
  --link: #0066cc; --btn-bg: #f0f0f0; --btn-text: #333; --input-bg: #fff; --input-border: #ccc;
  --success-bg: #d4edda; --success-text: #155724; --error-bg: #f8d7da; --error-text: #721c24;
  --danger-bg: #fff0f0; --danger-border: #dc3545; --danger-text: #dc3545;
  --stat-bg: #f0f4f8;
}

body.theme-light { --bg: #ffffff; --text: #222; --muted: #666; --card-bg: #f8f9fa; --border: #ddd; --link: #0066cc; --btn-bg: #f0f0f0; --btn-text: #333; --input-bg: #fff; --input-border: #ccc; --stat-bg: #f0f4f8; }
body.theme-slate { --bg: #2d3748; --text: #e2e8f0; --muted: #a0aec0; --card-bg: #374151; --border: #4a5568; --link: #63b3ed; --btn-bg: #4a5568; --btn-text: #e2e8f0; --input-bg: #374151; --input-border: #4a5568; --stat-bg: #374151; }
body.theme-sand { --bg: #faf6f0; --text: #3d3225; --muted: #8a7b6b; --card-bg: #f5ede0; --border: #d4c9b8; --link: #b8860b; --btn-bg: #ede5d5; --btn-text: #3d3225; --input-bg: #fff; --input-border: #d4c9b8; --stat-bg: #f0e8d8; }
body.theme-mint { --bg: #f0faf5; --text: #1a3a2a; --muted: #5a7a6a; --card-bg: #e0f5ea; --border: #b0d4c0; --link: #0e7a4a; --btn-bg: #d0eadd; --btn-text: #1a3a2a; --input-bg: #fff; --input-border: #b0d4c0; --stat-bg: #ddf0e5; }
body.theme-lavender { --bg: #f5f0fa; --text: #2d1f3d; --muted: #7a6a8a; --card-bg: #eae0f5; --border: #c4b0d4; --link: #7b2ea0; --btn-bg: #ddd0ea; --btn-text: #2d1f3d; --input-bg: #fff; --input-border: #c4b0d4; --stat-bg: #e8ddf0; }
body.theme-dark { --bg: #1a1a2e; --text: #e0e0e0; --muted: #a0a0b0; --card-bg: #25253e; --border: #3a3a5e; --link: #64b5f6; --btn-bg: #3a3a5e; --btn-text: #e0e0e0; --input-bg: #25253e; --input-border: #3a3a5e; --stat-bg: #25253e; }

body { background: var(--bg); color: var(--text); }
a { color: var(--link); }
input[type="text"], input[type="number"], select, textarea { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); }
button { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--border); }
table th, table td { border-bottom-color: var(--border); }
.card, .week-block { background: var(--card-bg); }
.header-stats { background: var(--stat-bg); }
.chat-box { background: var(--card-bg); border-color: var(--border); }
.msg-ok { background: var(--success-bg); color: var(--success-text); }
.msg-err { background: var(--error-bg); color: var(--error-text); }

button.danger-btn { background: var(--danger-bg) !important; border: 1px solid var(--danger-border) !important; color: var(--danger-text) !important; }

@keyframes nav-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.nav-pending { animation: nav-pulse 2s ease-in-out infinite; font-weight: 700; }
.nav-pending-badge { color: #e67e22; font-size: 0.9em; }
.dev-banner {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  color: #856404;
  padding: 4px 12px;
  font-size: 0.78em;
  font-family: monospace;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 200;
  letter-spacing: 0.02em;
}