/* VisualHQ shared look: the blue and orange of the official logo, light surfaces, soft rounded corners. */
:root {
  --navy: #0a5fad;          /* the blue of the logo (the variable keeps its old name so every page follows) */
  --navy-2: #084c8b;        /* a darker blue for hover and focus */
  --gold: #fbad48;          /* the orange of the logo */
  --ink: #1d2733;
  --muted: #5b6f8f;
  --line: #d9e0ea;
  --surface: #ffffff;
  --page: #f4f6f9;
  --ok: #2f9e44;
  --warn: #e08a00;
  --bad: #d6336c;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--page); }
a { color: var(--navy-2); }

button, .button {
  font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--navy);
  padding: 7px 14px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .button:hover { border-color: var(--navy-2); }
button:disabled { opacity: .45; cursor: default; border-color: var(--line); }
button.primary, .button.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover, .button.primary:hover { background: var(--navy-2); }
button.danger { color: var(--bad); }
button.small { padding: 4px 9px; font-size: 12.5px; }

input, select {
  font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--navy-2); outline-offset: -1px; }

.brand { font-weight: 700; font-size: 20px; letter-spacing: .2px; color: var(--navy); }
.brand b { color: var(--gold); font-weight: 700; }
.brand img { display: block; height: 28px; width: auto; }

.muted { color: var(--muted); }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: #e8eef8; color: var(--navy); }
.chip.edited { background: #fdf0d6; color: #8a5a00; }
.chip.ok { background: #e3f4e8; color: #226b34; }
.chip.warn { background: #fdf0d6; color: #8a5a00; }
.chip.bad { background: #fde3ec; color: #a01d49; }

.message { padding: 10px 14px; border-radius: 8px; margin: 10px 0; background: #eef3fb; border: 1px solid var(--line); }
.message.error { background: #fde8ef; border-color: #f3b6c9; color: #7a1636; }
.message.good { background: #e6f5ea; border-color: #b6dfc1; color: #1d5a2c; }