:root {
  --bg: #f5f6f8; --card: #fff; --fg: #15181d; --muted: #646c78; --line: #e1e4e9;
  --accent: #2459d8; --accent-fg: #fff; --warn: #c8261f; --ok: #15803d; --pending: #b45309;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116; --card: #171b22; --fg: #e7eaef; --muted: #8d95a2; --line: #283039;
    --accent: #5b8cff; --accent-fg: #0b1020; --warn: #f87171; --ok: #4ade80; --pending: #fbbf24;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
h1 { margin: 0; font-size: 1.45em; }
h2 { margin: 0 0 4px; font-size: 1.1em; }

button, .btn {
  font: inherit; cursor: pointer; border: 1px solid transparent; border-radius: 10px;
  padding: .6em 1em; background: var(--accent); color: var(--accent-fg); text-align: center;
}
.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.danger { color: var(--warn); }
button:disabled { opacity: .55; cursor: progress; }
input, select {
  font: inherit; width: 100%; padding: .6em .7em; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--fg);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { display: grid; gap: .3em; font-size: .87em; color: var(--muted); }
.btn { display: inline-block; font-size: 1em; }
.muted { color: var(--muted); margin: 0; }
.center { text-align: center; }
.msg { min-height: 1.3em; margin: 0; font-size: .87em; color: var(--muted); }
.msg.err { color: var(--warn); }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.end { justify-content: flex-end; }
.end > * { flex: none; }

/* lock screen */
#lock { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.card { width: min(380px, 100%); display: grid; gap: 14px; padding: 28px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

/* vault */
#vault { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }
header { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; align-items: center; padding: 12px 0; background: var(--bg); }
header input { flex: 1; min-width: 0; }
.icon { flex: none; padding: .45em .8em; font-size: 1.15em; line-height: 1.2; }
.sync { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.sync.ok { background: var(--ok); }
.sync.pending { background: var(--pending); }
.sync.err { background: var(--warn); }

#list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.entry {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto;
  grid-template-areas: "av meta ring more" "av code ring more";
  column-gap: 12px; align-items: center;
  padding: 10px 6px 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.avatar { grid-area: av; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; color: #fff; background: hsl(var(--h, 220) 50% 46%); }
.meta { grid-area: meta; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.issuer { font-weight: 600; }
.label { color: var(--muted); }
.label:not(:empty)::before { content: " · "; }
.issuer:empty + .label::before { content: none; }
.code {
  grid-area: code; justify-self: start; padding: 0; border: 0; background: none; color: var(--accent);
  font: 600 1.85em/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em;
}
.ring { grid-area: ring; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p, 1) * 360deg), var(--line) 0); }
.expiring .code { color: var(--warn); }
.expiring .ring { background: conic-gradient(var(--warn) calc(var(--p, 1) * 360deg), var(--line) 0); }
.more { grid-area: more; padding: .35em .6em; border: 0; background: none; color: var(--muted); font-size: 1.25em; }

/* dialogs */
dialog { width: min(420px, calc(100vw - 32px)); padding: 22px; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog form { display: grid; gap: 12px; }
.menu button { text-align: left; }
.edit .new-only { display: none !important; }
details summary { cursor: pointer; color: var(--muted); font-size: .87em; }
details[open] { display: grid; gap: 10px; }
video { width: 100%; border-radius: 10px; background: #000; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: .6em 1em; border-radius: 10px; background: var(--fg); color: var(--bg);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
#toast.show { opacity: 1; }