:root {
  --bg: #0f1115;
  --panel: #171a21;
  --text: #e6e8ec;
  --muted: #8a90a0;
  --accent: #4f8cff;
  --border: #262a33;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, system-ui, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.center { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
}
h1 { margin: 0 0 16px; font-size: 20px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
input, textarea, button {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #0c0e13;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
button {
  background: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
button:disabled { opacity: 0.5; cursor: wait; }
.error { color: #ff6b6b; font-size: 13px; min-height: 1.5em; }
.app { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px; max-width: 960px; margin: 0 auto; }
.row { display: flex; align-items: center; justify-content: space-between; }
.row h1 { margin: 0; }
.hamburger { background: transparent; border: 1px solid var(--border); width: auto; padding: 6px 10px; margin: 0; }
textarea { min-height: 160px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; }
.output { white-space: pre-wrap; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; z-index: 10; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; width: 90%; max-width: 720px; max-height: 80vh; overflow: auto; }
.skill-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.skill-item:last-child { border-bottom: none; }
.skill-edit textarea { min-height: 320px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 8px 14px; width: auto; margin: 0; color: var(--muted); font-weight: 500; }
.tab.active { color: var(--text); border-color: var(--border); background: var(--bg); }
/* Per Chromium "Create Amazing Password Forms": render a username input that
   is invisible to sighted users but still part of the form, so the password
   manager can associate the saved credential with the right account. Do NOT
   replace with display:none or visibility:hidden — Chrome ignores those. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.account-line { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.account-line strong { color: var(--text); font-weight: 600; }