:root {
  --ja-bg: #0b0d12;
  --ja-surface: #141720;
  --ja-border: #1e2535;
  --ja-text: #e8ecf4;
  --ja-muted: #a0aec0;
  --ja-accent: #2f9e8f;
  --ja-danger: #e05260;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ja-bg);
  color: var(--ja-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* flex:1 rather than min-height:100vh, so the brand credit is never pushed
   below the fold on a short viewport. */
#app { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 16px; }

.ja-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ja-head h1 { font-size: 21px; margin: 0; }
/* Keep the title on one line at 375px; without this it wraps and the button
   balloons to two lines beside it. */
.ja-head h1 { white-space: nowrap; }
.ja-add { white-space: nowrap; flex: none; }

.ja-add, .ja-primary {
  background: var(--ja-accent); color: #06231f; border: 0; border-radius: 10px;
  padding: 10px 16px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ja-secondary {
  background: transparent; color: var(--ja-text); border: 1px solid var(--ja-border);
  border-radius: 10px; padding: 10px 16px; font-size: 16px; cursor: pointer;
}

.ja-codes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ja-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--ja-surface); border: 1px solid var(--ja-border);
  border-radius: 14px; padding: 14px 16px; color: inherit; cursor: pointer;
  /* Wrap onto two lines rather than letting the 30px code squeeze the name
     column to nothing -- at 375px an unwrapped row breaks an email address to
     one character per line. */
  flex-wrap: wrap;
}
/* Full width forces the name onto its own line; the code, ring and delete
   button then share the second line. */
.ja-row-main { flex: 1 1 100%; min-width: 0; }
.ja-issuer {
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Truncate rather than wrap. A long address is identifying at a glance from its
   first few characters; a six-line stack of single letters is not. */
.ja-account {
  color: var(--ja-muted); font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ja-code {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px; letter-spacing: .10em; color: var(--ja-accent);
  font-variant-numeric: tabular-nums;   /* digits must not shift width as they change */
}
.ja-ring { width: 30px; height: 30px; flex: none; }
.ja-ring circle { fill: none; stroke-width: 3; }
.ja-ring .track { stroke: var(--ja-border); }
.ja-ring .value { stroke: var(--ja-accent); transform: rotate(-90deg); transform-origin: 50% 50%; }

.ja-delete { background: none; border: 0; color: var(--ja-muted); font-size: 15px; cursor: pointer; }

.ja-empty { margin-top: 40px; text-align: center; color: var(--ja-muted); }
.ja-empty h2 { color: var(--ja-text); font-size: 19px; }

.ja-dialog {
  border: 1px solid var(--ja-border); border-radius: 18px; background: var(--ja-surface);
  color: var(--ja-text); width: min(94vw, 460px); padding: 20px;
}
.ja-dialog::backdrop { background: rgba(0,0,0,.6); }
.ja-dialog label { display: block; margin-top: 14px; font-size: 15px; color: var(--ja-muted); }
.ja-dialog input {
  width: 100%; margin-top: 6px; padding: 12px; font-size: 17px;
  background: var(--ja-bg); color: var(--ja-text);
  border: 1px solid var(--ja-border); border-radius: 10px;
}
#scan-video { width: 100%; border-radius: 12px; margin-top: 12px; }
.ja-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.ja-error { color: var(--ja-danger); font-size: 15px; }
.ja-warn  { color: #e0b252; font-size: 15px; }
.ja-drift {
  background: rgba(224,178,82,.12); border: 1px solid rgba(224,178,82,.35);
  color: #e0b252; border-radius: 10px; padding: 12px; font-size: 15px;
}

.ja-credit {
  text-align: center; font-size: 14px; opacity: .6;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
}
.ja-credit a { color: inherit; text-decoration: none; }