:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --green: #16a34a;
  --yellow: #ca8a04;
  --orange: #ea580c;
  --red: #dc2626;
  --gray: #64748b;
  --dark: #111827;
  --radius: 14px;
  --shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
input, select, textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: white; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--text); padding: 10px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { border-color: #cbd5e1; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.link-btn { border: 0; background: transparent; color: var(--blue); padding: 0; cursor: pointer; }
.muted { color: var(--muted); font-size: 13px; }
.truncate { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding: 22px; color: var(--muted); text-align: center; }
.note { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
code { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 6px; }