:root{
  --ink:#0f1420; --ink-2:#182034; --line:#2a3550; --paper:#eef1f7; --paper-2:#b9c2d6;
  --cyan:#5fd4ff; --amber:#ffb454; --rose:#ff6b7a; --moss:#7fe0a8;
  --r:14px;
  font-family: "Avenir Next", "Segoe UI Variable", "Helvetica Neue", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--paper);min-height:100%}
body{padding:max(16px,env(safe-area-inset-top)) 16px 32px;line-height:1.45;font-size:16px}
#app{max-width:420px;margin:0 auto}
h1{font-size:1.35rem;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:1.05rem;font-weight:600;margin:20px 0 8px}
p{margin:8px 0}
.muted{color:var(--paper-2)}
.small{font-size:.85rem}
button{font:inherit;border:0;border-radius:var(--r);padding:14px 18px;background:var(--cyan);color:var(--ink);font-weight:600;width:100%;cursor:pointer}
button.quiet{background:var(--ink-2);color:var(--paper);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.stack>*+*{margin-top:10px}

/* The card: one memorable element. Stripe = evidence class. */
.card{position:relative;border-radius:22px;background:linear-gradient(160deg,var(--ink-2),#101828 70%);border:1px solid var(--line);padding:22px 20px 18px;overflow:hidden;min-height:170px}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:8px;background:var(--stripe,var(--paper-2))}
.card .who{font-size:1.15rem;font-weight:600}
.card .class{margin-top:34px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card .class b{font-weight:600;color:var(--stripe,var(--paper-2))}
.card.synced{--stripe:var(--amber)}
.card.bound,.card.bound-attested{--stripe:var(--moss)}
.card.paused{--stripe:var(--rose)}

.notice{border-left:3px solid var(--amber);padding:8px 12px;background:var(--ink-2);border-radius:0 var(--r) var(--r) 0}
.notice.bad{border-color:var(--rose)}
.notice.good{border-color:var(--moss)}

.rec{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line)}
.rec:last-child{border-bottom:1px solid var(--line)}
.rec .k{font-weight:600}
.rec .t{color:var(--paper-2);font-size:.85rem}
.rec .c{text-align:right;font-size:.85rem}
.rec .c.synced{color:var(--amber)} .rec .c.bound,.rec .c.bound-attested{color:var(--moss)}
.hash{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;word-break:break-all;color:var(--paper-2)}
a{color:var(--cyan)}
details summary{cursor:pointer;color:var(--paper-2)}
@media (prefers-reduced-motion:no-preference){ .card{transition:box-shadow .3s} .card.signing{box-shadow:0 0 0 3px var(--cyan)} }