/* ==========================================================================
   NGJT - Entransit logistics H5 (mobile first, light theme)
   Design tokens first, then components.
   Keep comments ASCII-only in this file: the editor writes non-ASCII with the
   system ANSI codepage and would corrupt it.
   ========================================================================== */
:root {
  --brand: #1d4ed8;
  --brand-d: #1e3a8a;
  --brand-m: #2563eb;
  --brand-l: #eff6ff;
  --ink: #0f172a;
  --ink2: #475569;
  --ink3: #8b9ab0;
  --line: #e6ebf3;
  --bg: #f4f6fb;
  --warn: #dc2626;
  --ok: #059669;
  --amber: #b45309;
  --r: 14px;
  --r-sm: 10px;
  --sh: 0 1px 2px rgba(15,23,42,.04), 0 8px 22px -16px rgba(15,23,42,.38);
  --sh-press: 0 1px 2px rgba(15,23,42,.05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  background-image: radial-gradient(125% 52% at 50% 0, #e6edfb 0%, rgba(230,237,251,0) 62%);
  background-repeat: no-repeat;
  color: var(--ink); font-size: 15px; line-height: 1.5;
  padding-bottom: 72px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 0 12px; }
a { color: var(--brand); }

/* ------------------------------------------------------------------ topbar */
.topbar {
  background: linear-gradient(118deg, #1e3a8a 0%, #1d4ed8 58%, #2563eb 100%);
  color: #fff; padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 8px 20px -14px rgba(30,58,138,.9);
}
.topbar h1 {
  font-size: 16.5px; margin: 0; font-weight: 600; letter-spacing: .4px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .who { font-size: 11.5px; opacity: .92; text-align: right; line-height: 1.45; flex: 0 0 auto; }
.topbar .who b { font-weight: 600; }
.topbar .ver { font-size: 10.5px; opacity: .62; font-weight: 400; letter-spacing: 0; }
.topbar .tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .back {
  color: #fff; text-decoration: none; font-size: 12.5px; white-space: nowrap;
  padding: 4px 11px 4px 8px; flex: 0 0 auto;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
}
.topbar .back:active { background: rgba(255,255,255,.32); }
.topbar .quit {
  color: #dbeafe; font-size: 11px; text-decoration: none;
  border-bottom: 1px solid rgba(219,234,254,.4); padding-bottom: .5px;
}

/* ------------------------------------------------------------ todo (home) */
.todo details.tl { border-top: 1px solid #f0f4fa; }
.todo details.tl:first-of-type { border-top: none; }
.todo details.tl:first-of-type > summary { padding-top: 4px; }
.todo summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 0; font-size: 14.5px; cursor: pointer; list-style: none;
}
.todo summary::-webkit-details-marker { display: none; }
.todo summary .cnt { color: var(--brand-d); font-size: 17.5px; font-variant-numeric: tabular-nums; }
.todo summary .cnt.warn { color: var(--warn); }
.todo summary .caret {
  font-size: 11px; color: var(--brand-m); background: var(--brand-l);
  padding: 2.5px 9px; border-radius: 999px; flex: 0 0 auto; font-weight: 500;
}
.todo details.tl[open] summary .caret { background: var(--brand-m); color: #fff; }
.todo .tl-list { padding: 0 0 12px; }
.todo .tl-row {
  display: block; text-decoration: none; color: var(--ink);
  background: #f8fafd; border: 1px solid #eaeff7; border-radius: 11px;
  padding: 9px 11px; margin-bottom: 7px;
}
.todo .tl-row:active { background: #eff5ff; border-color: #dbe7fb; }
.todo .tl-row.static { color: var(--ink2); font-size: 12.5px; }
.todo .tl-row .r1 { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.todo .tl-row .r1 b { color: var(--brand-d); font-variant-numeric: tabular-nums; }
.todo .tl-row .r2 { display: block; font-size: 14px; font-weight: 600; margin-top: 3px; }
.todo .tl-row .r3 { display: block; font-size: 12px; color: #7c8ca4; margin-top: 2px; }
.todo .tl-more { font-size: 11.5px; color: var(--ink3); padding: 2px 4px 6px; }
.todo .tl-all {
  display: block; text-align: center; font-size: 12.5px; color: var(--brand-m);
  text-decoration: none; padding: 9px; background: var(--brand-l);
  border-radius: 10px; font-weight: 500;
}
.todo .tl-all:active { background: #dbeafe; }

/* --------------------------------------------------------------- searching */
.searchbar { display: flex; gap: 7px; padding: 8px 0 2px; }
.searchbar input { flex: 1; }
.searchbar .btn { flex: 0 0 auto; padding: 9px 15px; }

/* ------------------------------------------------------------------- cards */
.card {
  background: #fff; border-radius: var(--r); padding: 14px; margin: 12px 0;
  box-shadow: var(--sh); border: 1px solid rgba(230,235,243,.9);
}
.card > h2 {
  font-size: 15px; margin: 0 0 12px; font-weight: 600;
  display: flex; align-items: baseline; gap: 7px; position: relative; padding-left: 11px;
}
.card > h2::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 3px; height: .82em; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-m), var(--brand-d));
}
.card h2 .sub { font-size: 11.5px; color: var(--ink3); font-weight: 400; }

/* -------------------------------------------------------------- stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.stat {
  position: relative; background: #fff; border-radius: 12px;
  padding: 13px 8px 11px; text-align: center; overflow: hidden;
  box-shadow: var(--sh); border: 1px solid rgba(230,235,243,.9);
}
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, #bfdbfe, var(--brand-m));
}
.stat .v {
  font-size: 18px; font-weight: 700; color: var(--brand-d); line-height: 1.32;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.stat .v.warn { color: var(--warn); }
.stat .v.ok { color: var(--ok); }
.stat .l { font-size: 11.5px; color: var(--ink3); margin-top: 3px; }

/* --------------------------------------------------------------- shortcuts */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick a {
  background: #fff; border-radius: 12px; padding: 12px 4px 11px; text-align: center;
  text-decoration: none; color: var(--ink2); font-size: 11.5px;
  box-shadow: var(--sh); border: 1px solid rgba(230,235,243,.9);
}
.quick a:active { background: #f8fbff; }
.quick a .ic {
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 auto 7px; border-radius: 11px;
  background: linear-gradient(155deg, #eff6ff, #dbeafe);
}

/* ------------------------------------------------------------------- lists */
.item {
  background: #fff; border-radius: var(--r); padding: 13px; margin-bottom: 10px;
  box-shadow: var(--sh); border: 1px solid rgba(230,235,243,.9);
}
.item .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item .no {
  font-weight: 600; font-size: 13px; color: var(--brand-d);
  letter-spacing: .3px; font-variant-numeric: tabular-nums;
}
.item .route { font-size: 15px; font-weight: 600; margin: 7px 0 4px; }
.item .meta { font-size: 12.5px; color: #64748b; line-height: 1.72; }
.item .amt { font-weight: 700; color: var(--brand-d); font-variant-numeric: tabular-nums; }
.ops { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }

/* -------------------------------------------------------------------- tags */
.tag {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.t-gray { background: #eef1f6; color: #5b6b82; }
.t-blue { background: #dbeafe; color: #1d4ed8; }
.t-green { background: #d8f5e4; color: #0d7a4e; }
.t-red { background: #fde5e5; color: #b91c1c; }
.t-amber { background: #fdf0d2; color: #a16207; }

/* ------------------------------------------------------------------- forms */
label { display: block; font-size: 12px; color: var(--ink2); margin: 9px 0 4px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #dbe3ee; border-radius: var(--r-sm);
  font-size: 15px; background: #fbfcfe; color: var(--ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #93c5fd; background: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}
textarea { min-height: 60px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 8px 15px; border-radius: var(--r-sm); border: none;
  background: linear-gradient(180deg, var(--brand-m), var(--brand));
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
  text-decoration: none; text-align: center; font-family: inherit;
  box-shadow: 0 3px 10px -5px rgba(37,99,235,.85);
  transition: transform .08s ease, box-shadow .15s;
}
.btn:active { transform: scale(.975); box-shadow: var(--sh-press); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn.ghost {
  background: #f1f5fa; color: #40506a; box-shadow: none; border: 1px solid #e3e9f2;
}
.btn.warn { background: linear-gradient(180deg, #ef4444, var(--warn));
  box-shadow: 0 3px 10px -5px rgba(220,38,38,.85); }
.btn.ok { background: linear-gradient(180deg, #10b981, var(--ok));
  box-shadow: 0 3px 10px -5px rgba(5,150,105,.8); }
.btn.block { display: block; width: 100%; margin-top: 14px; padding: 11px; font-size: 15px; }

/* ----------------------------------------------------------------- filters */
.filters {
  display: flex; gap: 7px; overflow-x: auto; padding: 10px 2px 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.filters a {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; background: #fff;
  font-size: 12.5px; font-weight: 500; color: #526279; text-decoration: none;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.filters a.on {
  background: linear-gradient(180deg, var(--brand-m), var(--brand));
  color: #fff; border-color: transparent;
  box-shadow: 0 5px 13px -7px rgba(37,99,235,1);
}

/* ------------------------------------------------------------ fold panels */
details.fold {
  background: #fff; border-radius: var(--r); padding: 12px 14px; margin: 12px 0;
  box-shadow: var(--sh); border: 1px solid rgba(230,235,243,.9);
}
details.fold > summary {
  font-weight: 600; font-size: 14px; cursor: pointer; color: var(--brand-d);
}
details.fold.inline {
  box-shadow: none; border: 1px solid var(--line); margin: 0; padding: 3px 8px;
  background: #fbfcfe; border-radius: 8px;
}
details.fold.inline > summary { font-size: 11.5px; padding: 2px 0; color: var(--brand-m); }

/* chevron for every collapsible except the todo ones (those own a pill).
   Drawn with borders, not a glyph: some CJK fonts lack the chevron char
   and would show a tofu box instead. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details:not(.tl) > summary::after {
  content: ""; float: right; flex: 0 0 auto;
  width: 7px; height: 7px; margin-top: 6px;
  border-right: 1.7px solid #a9b6c8; border-bottom: 1.7px solid #a9b6c8;
  transform: rotate(45deg);
  transition: transform .16s ease;
}
details:not(.tl)[open] > summary::after {
  transform: rotate(-45deg); margin-top: 9px;
}

/* ------------------------------------------------------------------ tabbar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 -8px 22px -18px rgba(15,23,42,.75);
  display: flex; max-width: 640px; margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar a {
  flex: 1; text-align: center; padding: 7px 0 6px; font-size: 10px;
  color: #8b9ab0; text-decoration: none; position: relative;
  transition: color .15s;
}
.tabbar a .ic {
  display: flex; align-items: center; justify-content: center;
  height: 19px; margin-bottom: 1px;
}
.tabbar a .ic svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar a.on { color: var(--brand); font-weight: 600; }
.tabbar a.on::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand-m), var(--brand-d));
}

/* ICP filing number, bottom center of every page */
.beian { text-align: center; padding: 18px 8px 10px; font-size: 11px; color: #94a3b8; line-height: 1.9; }
.beian a { color: #94a3b8; text-decoration: none; }
.beian img { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; }

/* ------------------------------------------------------------------- misc */
.empty { text-align: center; color: #a3b0c2; padding: 20px 14px; font-size: 13px; }
.tip {
  background: #f0f7ff; border-left: 3.5px solid #3b82f6; color: #1e40af;
  padding: 10px 12px; border-radius: 10px; font-size: 12.5px;
  line-height: 1.7; margin: 10px 0;
}
.tip.warn-tip { background: #fef4f4; border-left-color: #f87171; color: #991b1b; }
.tip.ok-tip { background: #ecfdf5; border-left-color: #34d399; color: #065f46; }
.sub2 { font-size: 11px; color: var(--ink3); font-weight: 400; margin-top: 2px; }
.sub2.caution { color: var(--amber); }
.meta { font-size: 12.5px; color: #64748b; line-height: 1.72; }
.page-hint { font-size: 11.5px; color: var(--ink3); padding: 8px 2px 2px; }
code {
  background: #eef4ff; color: var(--brand); padding: 1.5px 6px; border-radius: 6px;
  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .3px;
}
.flash {
  background: #ecfdf5; color: #047857; padding: 10px 13px; border-radius: 10px;
  font-size: 13px; margin: 10px 0; border-left: 3.5px solid #34d399;
}

/* ------------------------------------------------------------------ tables */
table.mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.mini th, table.mini td {
  padding: 8px 7px; border-bottom: 1px solid #f1f5f9; text-align: left;
  vertical-align: top;
}
table.mini th {
  color: #64748b; font-weight: 600; font-size: 11.5px; background: #f7f9fc;
  border-bottom: 1px solid #eef2f8;
}
table.mini th:first-child { border-radius: 8px 0 0 8px; }
table.mini th:last-child { border-radius: 0 8px 8px 0; }
table.mini tr:last-child td { border-bottom: none; }
.right { text-align: right; }

/* ------------------------------------------------------------------- login */
.login-box { max-width: 340px; margin: 13vh auto; text-align: center; padding: 0 6px; }
.login-box .logo {
  width: 68px; height: 68px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 31px; border-radius: 21px;
  background: linear-gradient(150deg, #2563eb, #1e3a8a);
  box-shadow: 0 14px 28px -14px rgba(30,58,138,.95);
}
.login-box h2 { font-size: 19px; letter-spacing: .4px; }