:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #475569;
  --text-subtle: #94a3b8;
  --text-faint: #cbd5e1;
  --border: rgba(15, 23, 42, 0.06);
  --border-input: rgba(15, 23, 42, 0.08);
  --brand: #155eef;
  --brand-tint: rgba(21, 94, 239, 0.10);
  --danger: #dc2626;
  --ring-track: rgba(15, 23, 42, 0.08);
  --sync-syncing: #f59e0b;
  --sync-ok: #10b981;
  --sync-idle: #94a3b8;

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --r-card: 12px;
  --r-avatar: 9px;
  --r-icon: 8px;
  --r-badge: 5px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
}

/* ==== Banner ==== */
.banner {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  font-size: 12px;
  line-height: 1.45;
  background: var(--surface);
}
.banner[data-variant="warning"] { background: #fff8eb; color: #92400e; border-color: rgba(245, 158, 11, 0.25); }
.banner[data-variant="info"] { background: #eef4ff; color: #1d4ed8; border-color: rgba(21, 94, 239, 0.18); }
.banner[data-variant="error"] { background: #fef2f2; color: #b42318; border-color: rgba(220, 38, 38, 0.22); }

/* ==== Page header (H1 + SyncPill) ==== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 14px;
}

.page-title {
  margin: 0;
  font: 700 26px/1.2 var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-subtitle {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==== Sync pill ==== */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.10);
  transition: background 200ms ease, color 200ms ease;
}

.sync-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sync-idle);
  flex: 0 0 auto;
}

.sync-pill[data-state="syncing"] {
  background: rgba(245, 158, 11, 0.12);
}
.sync-pill[data-state="syncing"] .sync-pill__dot {
  background: var(--sync-syncing);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  animation: sync-pulse 1.2s ease-in-out infinite;
}

.sync-pill[data-state="ok"] {
  background: rgba(16, 185, 129, 0.12);
}
.sync-pill[data-state="ok"] .sync-pill__dot {
  background: var(--sync-ok);
}

@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ==== Search bar ==== */
.search-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 2px 8px;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-card);
  background: var(--surface);
  min-width: 0;
}

.search__kbd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-subtle);
  background: rgba(15, 23, 42, 0.02);
  line-height: 1;
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 400 14px/1.4 var(--font-ui);
}

.search input::placeholder { color: var(--text-subtle); }

.search__actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.icon-button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-icon);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
}
.icon-button:hover { background: rgba(15, 23, 42, 0.05); color: var(--text); }
.icon-button:active { transform: scale(0.96); }

.icon-button svg { width: 16px; height: 16px; display: block; }

/* ==== Section header ==== */
.section { display: flex; flex-direction: column; gap: 8px; }

.section + .section { margin-top: 6px; }

.section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 8px;
}

.section__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  flex: 0 0 auto;
}

.section__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.section__rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section[data-accent="true"] .section__title { color: var(--brand); }
.section[data-accent="true"] .section__count { color: rgba(21, 94, 239, 0.45); }

.section__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==== List ==== */
.list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 18px;
}

/* ==== Row (item card) ==== */
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  min-width: 0;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.row:hover { border-color: var(--border-input); }

.row__grip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  cursor: grab;
}
.row__grip svg { width: 14px; height: 14px; display: block; }
.row__grip:active { cursor: grabbing; }

.row__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-avatar);
  background: var(--av-bg, #eef2f7);
  color: var(--av-fg, #475569);
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

.row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row__title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.row__issuer {
  font: 600 13px/1.3 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.row__pin-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--r-badge);
  background: var(--brand-tint);
  color: var(--brand);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.row__account {
  font: 500 11px/1.3 var(--font-ui);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.row__code {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 22px/1 var(--font-mono);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 200ms ease, transform 120ms ease;
  position: relative;
}
.row__code:active { transform: scale(0.97); }

.row--danger .row__code { color: var(--danger); }
.row--danger .ring__num { fill: var(--danger); }
.row--danger .ring__progress { stroke: var(--danger); }

.row__ring {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.row--pinned { /* same visual; emphasis is via section, not card border */ }

.row.drag-source { opacity: 0.45; }

.row.drag-over-before::before,
.row.drag-over-after::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  pointer-events: none;
}
.row.drag-over-before::before { top: -1px; }
.row.drag-over-after::after { bottom: -1px; }

/* ==== Countdown ring ==== */
.ring-svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}
.ring__track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 2.5;
}
.ring__progress {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 800ms linear, stroke 200ms ease;
}
.ring__num {
  fill: var(--brand);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==== Copy feedback ==== */
.copy-feedback {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--sync-ok);
  color: #fff;
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.92);
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.copy-feedback[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ==== Empty state ==== */
.empty-state {
  padding: 22px 16px;
  border: 1px dashed var(--border-input);
  border-radius: var(--r-card);
  background: var(--surface);
  text-align: center;
}
.empty-state p {
  margin: 0 0 12px;
  color: var(--text-muted);
  font: 400 13px/1.55 var(--font-ui);
}

/* ==== Buttons (settings/actions) ==== */
.primary-button,
.ghost-button {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
  border: 0;
  transition: transform 120ms ease, opacity 140ms ease;
}
.primary-button { background: var(--brand); color: #fff; }
.primary-button:active { transform: scale(0.98); }
.ghost-button { background: transparent; border: 1px solid var(--border-input); color: var(--text); }
.ghost-button:active { transform: scale(0.98); }

/* ==== Settings overlay ==== */
.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.32);
  overflow-y: auto;
}
.settings-card {
  width: min(100%, 430px);
  max-height: calc(100vh - 32px);
  padding: 20px 18px 16px;
  border-radius: 16px 16px 12px 12px;
  background: var(--surface);
  overflow-y: auto;
  border: 1px solid var(--border);
}
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.settings-header h2 {
  margin: 0;
  font: 700 18px/1.2 var(--font-ui);
  letter-spacing: -0.01em;
}
.settings-copy,
.settings-footnote {
  margin: 8px 0 0;
  color: var(--text-muted);
  font: 400 12px/1.55 var(--font-ui);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.field span {
  font: 500 12px/1 var(--font-ui);
  color: var(--text-muted);
  letter-spacing: 0;
}
.scan-button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border-input);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--brand);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.field input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-input);
  border-radius: 10px;
  font: 400 13px/1 var(--font-ui);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.settings-actions .primary-button,
.settings-actions .ghost-button {
  width: 100%;
}

/* ==== Scanner overlay ==== */
.scanner-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  padding: 12px;
  background: rgba(15, 23, 42, 0.45);
}
.scanner-card {
  width: min(100%, 430px);
  padding: 16px;
  border-radius: 16px 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.scanner-video-wrap {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 1 / 1;
}
.scanner-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scanner-status {
  margin: 10px 2px 0;
  color: var(--text-muted);
  font: 400 12px/1.5 var(--font-ui);
}

/* ==== Context menu ==== */
.context-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 148px;
  padding: 6px;
  border: 1px solid var(--border-input);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.context-menu-item {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: 500 13px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.context-menu-item:hover { background: rgba(15, 23, 42, 0.04); }
.delete-item-button { color: var(--danger); }