* { box-sizing: border-box; font-family: system-ui, sans-serif; }
body { margin: 0; }
#tabs { display: flex; gap: .5rem; padding: .5rem; background: #1e293b; }
#tabs button { background: #334155; color: #fff; border: 0; padding: .4rem .8rem; cursor: pointer; }
#tabs button.active { background: #2563eb; }
#tabs .logout { margin-left: auto; color: #cbd5e1; }
main { padding: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.filters input { padding: .3rem; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { border: 1px solid #e2e8f0; padding: .4rem; text-align: left; }
.prow { cursor: pointer; }
.thumb { width: 40px; height: 40px; object-fit: cover; }
.progress { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.chip { background: #e0e7ff; padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; }
#drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100%; background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,.15); padding: 1rem; overflow: auto; }
#drawer.hidden { display: none; }
#drawer label, .filters label { display: block; margin: .3rem 0; font-size: .85rem; }
#drawer input, #drawer textarea { width: 100%; padding: .3rem; }
.danger, .error { color: #dc2626; }
.ok { color: #16a34a; }
.login-box { max-width: 280px; margin: 10vh auto; display: flex; flex-direction: column; gap: .6rem; }
.preview { max-width: 200px; display: block; margin: .5rem 0; }
.capture-page { max-width: 480px; margin: 2rem auto; padding: 1rem; }
.hidden { display: none; }
.export-row { margin: .8rem 0; }
.btn { display: inline-block; padding: .3rem .7rem; background: #2563eb; color: #fff;
  border-radius: 4px; text-decoration: none; margin-right: .3rem; }
.hint { color: #64748b; font-size: .8rem; }