/* Shared by the login, library and cut pages. The annotator keeps its own
   styles: it is a full-screen drawing surface, not a page. */
:root {
  color-scheme: dark;
  --bg: #14161a; --panel: #1c1f26; --sunken: #0f1115;
  --line: #2a2e37; --line-strong: #3a3f4a;
  --text: #e8eaed; --muted: #9aa0a6;
  --accent: #3ddc84; --accent-ink: #0b1a10;
  --info: #6ab7ff; --warn: #ffb74d; --bad: #ff6b6b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 16px; }
h2 { font-size: 15px; }

header.top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
             padding: 10px 16px; background: var(--panel);
             border-bottom: 1px solid var(--line); }
header.top form { margin: 0; }
.grow { flex: 1 1 auto; }
main { max-width: 1240px; margin: 0 auto; padding: 16px; }

button, .button {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2a2e37; color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit;
  white-space: nowrap;
}
button:hover, .button:hover { background: #333845; text-decoration: none; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-ink);
                                  border-color: transparent; font-weight: 600; }
button.primary:hover, .button.primary:hover { background: #5fe69b; }
button.danger { color: var(--bad); }
button:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=password], input[type=number] {
  background: var(--sunken); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 6px 8px; font: inherit;
}
input:focus-visible, button:focus-visible, .button:focus-visible {
  outline: 2px solid var(--info); outline-offset: 1px;
}

.chip { padding: 2px 8px; border-radius: 99px; background: #2a2e37;
        font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.error { color: var(--bad); }
.warning { color: var(--warn); }
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent);
           transition: width .3s; }
.bar.info > i { background: var(--info); }
kbd { background: #2a2e37; border-radius: 4px; padding: 1px 6px; color: var(--text);
      font: 12px ui-monospace, monospace; }
code { font: 13px ui-monospace, monospace; background: var(--sunken);
       padding: 1px 5px; border-radius: 4px; }