@import url("./variables.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-4) var(--space-3); flex: 1; }
.page-header { margin-bottom: var(--space-4); }
.page-header h1 { margin: 0 0 var(--space-2); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.page-lead, .muted { color: var(--color-muted); margin: 0; }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-4); }
.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.btn { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--color-primary); color: var(--color-primary-contrast); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }

.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--color-border); }
.badge-ok { background: #dcfce7; color: var(--color-success); }
.badge-error { background: #fee2e2; color: var(--color-danger); }

.toast-stack { position: fixed; right: var(--space-3); bottom: var(--space-3); display: grid; gap: var(--space-2); z-index: 1000; }
.toast { background: var(--color-text); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow); max-width: 360px; }
.toast-error { background: var(--color-danger); }
.toast-success { background: var(--color-success); }