:root {
  --yellow: #f5b042;
  --gray-light: #f5f7fc;
  --gray-dark: #2c3e50;
  --white: #ffffff;
  --black: #1e1e2a;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, 'Segoe UI', Roboto; }
body { background: var(--gray-light); color: var(--black); padding: 2rem; }
.container { max-width: 1200px; margin: 0 auto; }
.card { background: var(--white); border-radius: 1.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.05); padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #e9ecef; }
.btn { background: var(--yellow); color: var(--black); border: none; padding: 0.6rem 1.2rem; border-radius: 2rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-outline { background: transparent; border: 1px solid var(--yellow); color: var(--yellow); }
.btn-dark { background: var(--gray-dark); color: white; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid #dee2e6; }
h1, h2 { color: var(--gray-dark); }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--black); color: white; padding: 0.8rem 1.5rem; border-radius: 2rem; opacity: 0; transition: 0.3s; z-index: 1000; }
@media (max-width: 640px) { body { padding: 1rem; } }