:root {
  color-scheme: dark;
  --bg: #050807;
  --bg-2: #0a100d;
  --panel: #0c1410;
  --line: #1b2b22;
  --line-2: #284034;
  --text: #d6ffe6;
  --text-2: #8fbfa2;
  --muted: #5a7d68;
  --green: #39ff88;
  --green-soft: rgb(57 255 136 / 0.12);
  --amber: #ffb000;
  --cyan: #3ee6ff;
  --red: #ff4d5e;
  --violet: #b98cff;
  --mono: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 15px/1.5 var(--mono); -webkit-tap-highlight-color: transparent; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgb(57 255 136 / 0.10), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 110%, rgb(62 230 255 / 0.06), transparent 70%); }
/* scanlines: a whisper, never in the way of reading */
.crt { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: 0.55; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--cyan); }
::selection { background: var(--green); color: var(--bg); }

.app { width: min(720px, 100%); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.boot { color: var(--green); }
.cursor { display: inline-block; color: var(--green); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.muted { color: var(--muted); }
.glow { color: var(--green); text-shadow: 0 0 10px rgb(57 255 136 / 0.6); }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: 6px 0 14px; }
.prompt { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prompt .host { color: var(--green); text-shadow: 0 0 12px rgb(57 255 136 / 0.5); }
.prompt .path { color: var(--cyan); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--green); color: var(--text); }
.chip--on { color: var(--green); border-color: rgb(57 255 136 / 0.45); background: var(--green-soft); }
.chip--warn { color: var(--amber); border-color: rgb(255 176 0 / 0.45); background: rgb(255 176 0 / 0.08); }
.led { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ---------- panels and controls ---------- */
.panel { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgb(57 255 136 / 0.035), transparent 40%), var(--panel); }
.panel__head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.panel__head .dots { display: flex; gap: 5px; margin-right: 4px; }
.panel__head .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.panel__head .dots i:first-child { background: var(--red); opacity: 0.7; }
.panel__head .dots i:nth-child(2) { background: var(--amber); opacity: 0.7; }
.panel__head .dots i:last-child { background: var(--green); opacity: 0.7; }
.panel__body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
label.f { display: flex; flex-direction: column; gap: 5px; }
label.f > span { color: var(--text-2); font-size: 12px; letter-spacing: 0.04em; }
.input { width: 100%; height: 48px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2); background: #030504; color: var(--text); font-size: 16px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgb(57 255 136 / 0.15), 0 0 24px -6px rgb(57 255 136 / 0.5); }
.input--big { height: 56px; font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; }
.input--big::placeholder { text-transform: none; letter-spacing: 0; }
.input::placeholder { color: var(--muted); }
select.input { appearance: none; background: #030504 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2339ff88' fill='none' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--green); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn--go { background: var(--green); border-color: var(--green); color: #022010; box-shadow: 0 0 28px -6px rgb(57 255 136 / 0.7); }
.btn--go:hover:not(:disabled) { background: #6dffa8; }
.btn--danger { color: var(--red); border-color: rgb(255 77 94 / 0.4); }
.btn--small { min-height: 38px; padding: 0 12px; font-size: 13px; }
.carriers { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #030504; color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.pick:hover { color: var(--text); border-color: var(--text-2); }
.pick.is-on { color: var(--bg); background: var(--green); border-color: var(--green); }
.pick .why { font-weight: 400; opacity: 0.75; }
.detect { color: var(--text-2); font-size: 13px; min-height: 1.5em; }
.detect b { color: var(--green); }

/* ---------- list ---------- */
.section { display: flex; align-items: baseline; gap: 10px; margin: 26px 2px 10px; color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.section::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section b { color: var(--text-2); }
.list { display: flex; flex-direction: column; gap: 10px; }
.card { display: block; width: 100%; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line-2)); background: var(--panel); color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; animation: in 0.3s ease both; }
.card:hover { border-color: var(--line-2); border-left-color: var(--c); transform: translateY(-1px); box-shadow: 0 10px 30px -18px var(--c); }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.card__top { display: flex; align-items: flex-start; gap: 10px; }
.card__name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__meta { margin-top: 2px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__last { margin-top: 10px; display: flex; gap: 8px; font-size: 13px; color: var(--text-2); }
.card__last span:first-child { flex: 1; min-width: 0; }
.card__last time { flex: none; color: var(--muted); }
.card__err { margin-top: 8px; color: var(--amber); font-size: 12px; }
.tag { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.tag--live::before { content: '● '; animation: blink 1.4s steps(1) infinite; }
.s-pending { --c: var(--violet); }
.s-transit { --c: var(--cyan); }
.s-out { --c: var(--amber); }
.s-pickup { --c: var(--amber); }
.s-delivered { --c: var(--green); }
.s-problem { --c: var(--red); }

/* the 4-step progress, as a terminal gauge */
.track { margin-top: 12px; }
.track__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.track__bar i { height: 6px; border-radius: 2px; background: var(--line); }
.track__bar i.on { background: var(--c); box-shadow: 0 0 10px -1px var(--c); }
.track__bar i.now { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.track__labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 5px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.track__labels span.on { color: var(--text-2); }

.empty { padding: 34px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty pre { margin: 0 0 12px; color: var(--green); font: 12px/1.15 var(--mono); opacity: 0.85; }

/* ---------- detail ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; height: 40px; color: var(--text-2); text-decoration: none; font-weight: 700; }
.back:hover { color: var(--green); }
.hero { padding: 18px 16px; }
.hero h1 { margin: 6px 0 2px; font-size: 22px; line-height: 1.25; word-break: break-word; }
.hero .num { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; border-radius: 7px; background: #030504; border: 1px solid var(--line); color: var(--text-2); font-size: 14px; letter-spacing: 0.08em; cursor: pointer; }
.hero .num:hover { border-color: var(--green); color: var(--text); }
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.log { margin: 0; padding: 4px 0; list-style: none; }
.log li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.log li:first-child { border-top: 0; }
.log li::before { content: '›'; color: var(--muted); font-weight: 800; }
.log li:first-child::before { content: '▶'; color: var(--c, var(--green)); text-shadow: 0 0 8px var(--c, var(--green)); }
.log .when { color: var(--muted); font-size: 12px; }
.log .what { color: var(--text); }
.log li:first-child .what { color: var(--c, var(--green)); font-weight: 700; }
.log .where { color: var(--text-2); font-size: 13px; }

/* ---------- settings ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.kv { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.kv:first-child { border-top: 0; }
.kv > div { flex: 1; min-width: 0; }
.kv small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ok { color: var(--green); font-weight: 800; }
.ko { color: var(--amber); font-weight: 800; }
.note { margin: 0; padding: 12px 14px; border-radius: 9px; border: 1px solid rgb(255 176 0 / 0.35); background: rgb(255 176 0 / 0.06); color: #ffe2a3; font-size: 13px; }
.note--info { border-color: rgb(62 230 255 / 0.35); background: rgb(62 230 255 / 0.06); color: #c5f6ff; }
.note ol { margin: 6px 0 0; padding-left: 20px; }
code { padding: 1px 5px; border-radius: 4px; background: #030504; border: 1px solid var(--line); color: var(--green); font-size: 0.92em; }

/* ---------- login ---------- */
.login { min-height: 80dvh; display: grid; place-items: center; }
.login .panel { width: min(400px, 100%); }
.ascii { margin: 0; color: var(--green); font: 26px/1.05 var(--mono); text-shadow: 0 0 10px rgb(57 255 136 / 0.5); white-space: pre; overflow: hidden; }
.error { margin: 0; color: var(--red); min-height: 1.4em; font-size: 13px; }

/* ---------- sheet (dialogs) and toasts ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; background: rgb(0 0 0 / 0.65); backdrop-filter: blur(3px); animation: fade 0.15s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(560px, 100%); max-height: 90dvh; overflow-y: auto; border-radius: 16px 16px 0 0; border: 1px solid var(--line-2); border-bottom: 0; background: var(--panel); padding-bottom: env(safe-area-inset-bottom); animation: up 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 700px) { .sheet-bg { align-items: center; } .sheet { border-radius: 16px; border-bottom: 1px solid var(--line-2); } }
.toasts { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast { padding: 12px 14px; border-radius: 9px; border: 1px solid rgb(57 255 136 / 0.45); background: #07110c; color: var(--text); box-shadow: 0 16px 40px rgb(0 0 0 / 0.6); animation: up 0.2s ease; font-size: 14px; }
.toast::before { content: '> '; color: var(--green); }
.toast--bad { border-color: rgb(255 77 94 / 0.6); }
.toast--bad::before { content: '! '; color: var(--red); }
.spin { display: inline-block; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}