body { margin: 0; background: var(--surface-1); color: var(--text); font-family: var(--font-sans); }
.top { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-family: var(--font-display); border-bottom: 1px solid var(--border); }
main { max-width: 32rem; margin: 0 auto; padding: 1rem; }
h1 { font-family: var(--font-display); font-size: 1.75rem; margin: .25rem 0 .25rem; line-height: 1.25; }
.eyebrow { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; margin: 1rem 0; }
.chain { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; margin: .5rem 0 0; }
.chain a { color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .25rem .6rem; }
.chain .sep { color: var(--text-muted); }
dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
dt { color: var(--text-muted); }
dd { margin: 0; }
.actions { display: grid; gap: .6rem; margin-top: 1rem; }
button, .btn { font: inherit; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text); text-align: center; text-decoration: none; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; background: var(--text-muted); }
.dot.green { background: #3a9a5b; } .dot.orange { background: #e08a1e; } .dot.red { background: #cc3b2f; }
.muted { color: var(--text-muted); }
.err { color: var(--alert-text); background: var(--alert-bg); padding: .75rem; border-radius: var(--radius-md); }
.skeleton { color: var(--text-muted); }
label { display: block; margin: 1rem 0 .3rem; }
label.check { display: flex; gap: .5rem; align-items: center; }
input, select, textarea { box-sizing: border-box; width: 100%; font: inherit; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text); }
input[type=checkbox] { width: auto; }
.row { display: flex; gap: .5rem; }
.row input { flex: 1; }
details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--text-muted); padding: .5rem 0; }
.photo-btn { display: block; margin-top: 1rem; cursor: pointer; }
#scanner { position: fixed; inset: 0; background: #000; display: none; z-index: 10; }
#scanner.on { display: block; }
#scanner video { width: 100%; height: 100%; object-fit: cover; }
#scanner .frame { position: absolute; inset: 25% 12%; border: 3px solid #fff; border-radius: var(--radius-md); }
#scanner button { position: absolute; bottom: calc(1.5rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
.wide { width: 100%; margin: .5rem 0 1rem; }
.contents { display: grid; gap: .25rem; }
.rowlink, .tickrow { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem .25rem; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.tickrow { justify-content: flex-start; margin: 0; }
.tickrow input { width: 1.4rem; height: 1.4rem; flex: none; }
.icons { display: inline-flex; gap: .3rem; align-items: center; flex: none; margin-left: auto; }
.icons .dot { margin: 0 0 0 .2rem; }
.group { border-top: 1px solid var(--border); padding-left: .25rem; }
.group > summary { display: flex; gap: .5rem; align-items: center; padding: .6rem 0; color: var(--text); }
.group > summary a { color: var(--text); font-weight: 600; text-decoration: none; }
.group > .rowlink, .group > .group { margin-left: 1rem; }
.tickrow input { accent-color: var(--accent); }