:root{
  --bg:#FAFAF9; --card:#FFFFFF; --fg:#2E2E2E; --muted:#787571;
  --border:#E5E3E0; --pink:#F0D2E5; --blue:#B1C9E2; --gray:#ECEAE7;
  --redbg:#F6DEDA; --red:#A93F2E; --alt:#FBFBFA;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.mono{font-family:Consolas,"DejaVu Sans Mono",monospace}
a{color:var(--fg)}
h1{font-size:20px;margin:6px 0 14px}
h2{font-size:17px;margin:0 0 12px}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;background:var(--bg);border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:17px;letter-spacing:1px;color:var(--fg);
  text-decoration:none;display:inline-block;padding:4px 0}
.brand:hover .sub{color:var(--fg)}
.brand .sub{font-weight:400;font-size:12.5px;color:var(--muted);
  letter-spacing:0;margin-left:10px}
.nav a{margin-left:14px;text-decoration:none;color:var(--fg);
  border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--fg)}
.nav .who{color:var(--muted);margin-right:6px}
.nav{display:inline-flex;align-items:center;gap:2px}
.pointform{display:inline-flex;margin:0 2px}
.pointsel{padding:6px 26px 6px 10px;min-height:36px;max-width:210px;
  border:1px solid var(--border);border-radius:2px;background:var(--card);
  font-size:13.5px;color:var(--fg);cursor:pointer}
.pointsel:hover{border-color:var(--muted)}
.pointsel:focus{outline:2px solid var(--fg);outline-offset:-1px}

.flash{background:var(--pink);padding:10px 22px;border-bottom:1px solid var(--border)}
.page{padding:16px 22px 26px}

.cards{display:table;table-layout:fixed;width:100%;border-spacing:12px 0;margin-bottom:16px}
.cards{display:flex;gap:12px}
.card{display:table-cell;vertical-align:top}
.card{flex:1;background:var(--card);border:1px solid var(--border);
  padding:12px 16px 10px;border-radius:2px}
.card .lbl{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.4px}
.card .val{font-size:22px;font-weight:700;margin-top:2px}
.card .sub{font-size:12px;color:var(--muted)}

.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toolbar .tl{color:var(--fg)}
.search{width:230px;padding:8px 10px;border:1px solid var(--border);
  border-radius:2px;font-size:14px}
.search:focus{outline:2px solid var(--fg);outline-offset:-1px}
select{padding:8px 10px;border:1px solid var(--border);border-radius:2px;
  background:var(--card);font-size:14px}
.spacer{flex:1}
.btn{display:inline-block;padding:8px 14px;min-height:40px;
  touch-action:manipulation;border:1px solid var(--border);
  border-radius:2px;background:var(--card);color:var(--fg);font-size:14px;
  cursor:pointer;text-decoration:none}
.btn:hover{background:#F1EFEC}
.btn.primary{background:var(--fg);border-color:var(--fg);color:#fff;font-weight:600}
.btn.primary:hover{background:#000}
.btn.danger{color:var(--red)}
.btn.danger:hover{background:var(--redbg)}
.btn.left{margin-right:auto}

table.grid{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--border)}
.grid th{background:#F4F3F1;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.3px;text-align:left;
  padding:9px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.grid td{padding:7px 8px;border-bottom:1px solid #F0EEEB;vertical-align:middle}
.grid tr:nth-child(even) td{background:var(--alt)}
.grid .r{text-align:right}
.nowrap{white-space:nowrap}
.cut{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.registry .row{cursor:pointer}
.registry .row:hover td{background:#F3F1EE}
.registry .row.printed td{background:#FDF5F9}
.registry .row.expired td{background:var(--redbg)}
.registry .row.used td{color:#9B9793}
.registry .row.neg td{color:var(--red)}
.chip{display:inline-block;padding:2px 8px;border-radius:2px;font-size:12px;
  font-weight:600;background:var(--gray)}
.chip.sold{background:var(--blue)}
.chip.printed{background:var(--pink)}
.chip.expired{background:var(--redbg)}
.statusbar{color:var(--muted);font-size:12px;margin-top:8px}

.authbox{max-width:360px;margin:60px auto;background:var(--card);
  border:1px solid var(--border);padding:22px 26px;border-radius:2px}
.authbox label,.modal label{display:block;margin:10px 0 0;
  font-size:12px;color:var(--muted)}
.authbox input,.modal input,.modal select{width:100%;margin-top:4px;
  padding:8px 10px;border:1px solid var(--border);border-radius:2px;
  font-size:14px;min-height:40px;background:var(--card);color:var(--fg)}
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color:var(--fg);transition:background-color 9999s}
input[type=checkbox]{accent-color:var(--fg);width:16px;height:16px;min-height:0}
.modal input:focus,.authbox input:focus{outline:2px solid var(--fg);outline-offset:-1px}
.authbox .btn{margin-top:16px;width:100%}

.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;inset:0;background:rgba(46,46,46,.45);
  z-index:20;overflow:auto;padding:30px 10px}
.overlay.show{display:block}
.modal{max-width:470px;margin:0 auto;background:var(--card);overflow:hidden;
  border:1px solid var(--border);border-radius:2px;padding:20px 24px}
.modal.wide{max-width:680px}
.pair{display:flex;flex-wrap:wrap;margin:0 -7px}
.pair label{flex:0 0 50%;max-width:50%;min-width:0;padding:0 7px;
  display:flex;flex-direction:column}
.pair label input,.pair label select{margin-top:auto}
.pair input,.pair select{max-width:100%}
@media (max-width:620px){.pair label{flex:0 0 100%;max-width:100%}}
.withbtn{display:flex;gap:8px;margin-top:4px}
.withbtn input{margin-top:0}
.chk{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:14px;color:var(--fg)}
.chk input{width:auto;margin:0}
.chk .color{width:auto;display:none;margin:0}
.chk.on .color{display:inline-block}
.mbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.cardhead{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px}
.mut{color:var(--muted);font-size:12.5px;margin-top:8px}
.ops{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.inline{display:inline}
.userform{max-width:560px;background:var(--card);border:1px solid var(--border);
  padding:16px 20px 20px;border-radius:2px}
.userform label{display:block;margin:10px 0 0;font-size:12px;color:var(--muted)}
.userform input,.userform select{width:100%;margin-top:4px;padding:8px 10px;
  border:1px solid var(--border);border-radius:2px;font-size:14px}
.userform .btn{margin-top:16px}
.rowform{display:inline-flex;align-items:center;gap:6px;margin:0 10px 6px 0;
  vertical-align:middle}
.rowform input,.rowform select{padding:6px 8px;border:1px solid var(--border);
  border-radius:2px;font-size:13.5px;max-width:230px}
@media (max-width:900px){
  .cards{flex-wrap:wrap}.card{flex:1 1 45%}
  .cut{max-width:120px}
}