:root{
  --ink:#12222b;
  --ink-soft:#5a6b74;
  --paper:#eef1ef;
  --surface:#ffffff;
  --line:#dbe2e0;
  --arrived:#0d7a5f;
  --arrived-soft:#e4f2ed;
  --danger:#b3261e;
  --focus:#1b6ea8;
  --radius:14px;
  --tap:52px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:96px;
}
a{color:var(--focus)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------------------------------------------------------------- sign in */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate-card{background:var(--surface);border-radius:var(--radius);padding:24px;width:100%;max-width:380px;
  box-shadow:0 1px 0 var(--line),0 12px 30px rgba(18,34,43,.08)}
.gate-card h1{margin:0;font-size:22px;letter-spacing:-.01em}
.gate-note{margin:6px 0 20px;color:var(--ink-soft);font-size:14px}
.gate-error{background:#fdecea;color:var(--danger);padding:10px 12px;border-radius:10px;font-size:14px;margin:0 0 14px}

label{display:block;font-size:13px;color:var(--ink-soft);margin:14px 0 5px}
input[type=text],input[type=password],input[type=tel],input[type=search],textarea,select{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px;min-height:var(--tap)
}
textarea{min-height:84px;resize:vertical}

.btn-primary,.btn-quiet,.btn-danger{
  font:inherit;font-weight:600;border-radius:10px;min-height:var(--tap);padding:0 18px;cursor:pointer;border:1px solid transparent
}
.btn-primary{background:var(--ink);color:#fff;width:100%;margin-top:20px}
.btn-quiet{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-danger{background:#fff;border-color:#f0c9c6;color:var(--danger)}

/* ------------------------------------------------------------------- bar */
.bar{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 0}
.bar-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bar h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.desk{margin:2px 0 0;font-size:12px;color:#9fb4bd}
.desk a{color:#9fb4bd}
.tally{text-align:right;line-height:1;white-space:nowrap}
.tally strong{font-size:26px;font-variant-numeric:tabular-nums}
.tally span{font-size:15px;color:#9fb4bd;font-variant-numeric:tabular-nums}
.tally em{display:block;font-style:normal;font-size:11px;color:#9fb4bd;margin-top:4px}

.progress{height:4px;background:rgba(255,255,255,.16);border-radius:3px;margin:12px 0 0;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:#4ecb9c;transition:width .35s ease}

.controls{padding:12px 0 12px}
.search{position:relative}
.search input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.search input::placeholder{color:#93a9b3}
.search input::-webkit-search-cancel-button{display:none}
.search input{padding-right:52px}
#clearSearch{position:absolute;right:6px;top:6px;width:40px;height:40px;border:0;border-radius:8px;
  background:transparent;color:#cfe0e6;font-size:22px;cursor:pointer}

.filters{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;font:inherit;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.09);color:#dbe7ec;border:1px solid rgba(255,255,255,.16)}
.chip.is-on{background:#fff;color:var(--ink);border-color:#fff;font-weight:600}
.filters select{flex:0 0 auto;width:auto;max-width:52vw;min-height:38px;padding:6px 10px;font-size:14px;
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:#dbe7ec;border-radius:999px}

/* ------------------------------------------------------------------ list */
main{padding:0 14px}
.count{margin:14px 2px 8px;font-size:13px;color:var(--ink-soft)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:stretch;overflow:hidden}
.row.is-in{background:var(--arrived-soft);border-color:#bcded2}
.row.flash{animation:flash .5s ease}
@keyframes flash{from{background:#d6efe6}to{}}

.mark{flex:0 0 auto;width:58px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.mark i{width:26px;height:26px;border-radius:50%;border:2px solid #b9c6cb;display:block;position:relative;
  transition:background .15s ease,border-color .15s ease}
.row.is-in .mark i{background:var(--arrived);border-color:var(--arrived)}
.row.is-in .mark i::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:12px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

.body{flex:1 1 auto;padding:12px 4px 12px 0;min-width:0;text-align:left;background:none;border:0;font:inherit;cursor:pointer;color:inherit}
.name{font-weight:600;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.org{font-size:13px;color:var(--ink-soft);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{font-size:12px;color:var(--ink-soft);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.meta a{color:var(--focus);text-decoration:none}
.note{margin-top:8px;font-size:13px;background:#fffaf0;border-left:3px solid #e3b341;padding:6px 8px;border-radius:0 8px 8px 0;color:#6a5426}
.tag{font-size:11px;font-weight:600;color:#8a6a00;background:#fdf1cf;padding:2px 7px;border-radius:999px}
.stamp{font-size:11px;color:var(--arrived);font-weight:600}

.empty{text-align:center;color:var(--ink-soft);font-size:14px;padding:40px 20px;margin:0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 8px;font-size:12px;color:var(--ink-soft)}
.foot .btn-quiet{min-height:42px;display:inline-flex;align-items:center;text-decoration:none}

/* ------------------------------------------------------------------- fab */
.fab{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:30;
  background:var(--ink);color:#fff;border:0;border-radius:999px;padding:0 22px;height:52px;
  font:inherit;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(18,34,43,.28)}

/* ---------------------------------------------------------------- editor */
dialog{border:0;padding:0;background:transparent;max-width:100%;width:100%}
dialog::backdrop{background:rgba(18,34,43,.5)}
#editorForm{background:var(--surface);border-radius:16px 16px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom) + 20px);
  max-height:90dvh;overflow:auto}
dialog{margin:auto auto 0;top:auto;bottom:0}
#editorForm h2{margin:0 0 4px;font-size:18px}
.switch{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:var(--ink)}
.switch input{width:22px;height:22px;min-height:0}
.editor-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.editor-actions .btn-primary{flex:1 1 100%;margin-top:0}
.editor-actions .btn-quiet,.editor-actions .btn-danger{flex:1 1 45%}

/* ----------------------------------------------------------------- toast */
.toast{position:fixed;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 78px);z-index:40;
  background:var(--ink);color:#fff;padding:12px 14px;border-radius:12px;font-size:14px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(18,34,43,.3)}
.toast button{background:transparent;border:0;color:#7fe0bd;font:inherit;font-weight:700;cursor:pointer;padding:6px}
.toast.bad{background:var(--danger)}

@media (min-width:720px){
  body{padding-bottom:40px}
  .bar{padding-left:24px;padding-right:24px}
  .bar-top,.progress,.controls{max-width:820px;margin-left:auto;margin-right:auto}
  main{max-width:820px;margin:0 auto;padding:0 24px}
  dialog{margin:auto;bottom:auto;max-width:520px}
  #editorForm{border-radius:16px}
  .toast{left:auto;right:24px;bottom:24px;max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}