:root{
  /* Brand */
  --drk-red:#e60005;
  --drk-white:#ffffff;

  /* Neutrals (soft UI) */
  --drk-text:#2c3e50;
  --drk-link:#0b5bd3;
  --border:#e0e0e0;
  --control-border:#ced4da;
  --page-bg:#f7f7f7;
  --surface:#ffffff;
  --surface-muted:#f8f9fa;

  /* Shape & depth */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-soft: 0 2px 8px rgba(0,0,0,.06);

  /* Spacing & type */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;

  --fs-sm:.92rem;
  --fs-xs:.82rem;

  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:var(--font-sans); color:var(--drk-text); background:var(--page-bg); }
a{ color:inherit; }
.container{ max-width:1200px; margin:0 auto; padding:0 var(--space-5); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(230,0,5,.25);
  background:var(--drk-red);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{ filter:brightness(.98); }
.btn:active{ transform:translateY(1px); }

.btn--ghost{
  background:var(--surface-muted);
  border:1px solid var(--control-border);
  color:#666;
}

.input,.select,select,textarea{
  width:100%;
  height:38px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--control-border);
  background:#fff;
  font:inherit;
}
textarea{ height:auto; padding:10px 12px; }

.label{ display:block; font-weight:700; margin-bottom:6px; color:#333; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}

.alert{
  padding:12px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
}
.alert--info{ border-color:rgba(11,91,211,.25); background:rgba(11,91,211,.05); }

.text-small{ font-size:var(--fs-sm); color:#666; }
.mono{ font-family:var(--font-mono); }

.mt-2{ margin-top:var(--space-2); }
.mt-3{ margin-top:var(--space-3); }
.mt-4{ margin-top:var(--space-4); }