:root {
  color-scheme: light;
  font-family: Arial, sans-serif;
  --border: #d5d9df;
  --muted: #667085;
  --primary: #175cd3;
  --danger: #b42318;
  --surface: #f7f8fa;
  --text: #20242a;
}

* { box-sizing: border-box; }
body { color: var(--text); background: #fff; }
button, input, select, textarea { font: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; border: 1px solid #98a2b3; border-radius: 4px; background: #fff; }
button:disabled { cursor: default; opacity: .55; }
button.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
button.danger { color: var(--danger); border-color: #f0b4ae; }
input, select, textarea { border: 1px solid #aeb5bf; border-radius: 4px; background: #fff; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); outline: 2px solid rgba(23,92,211,.14); outline-offset: 0;
}

.app-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: #fff;
}
.app-topbar h1 { margin: 0; font-size: 20px; }
.app-topbar .topbar-end { margin-left: auto; }
.surface-panel { border: 1px solid var(--border); border-radius: 7px; background: #fff; }