/* Dusk on the porch, phone-first. Tokens match public/index.html. */
:root{
  --night:#141a2e; --dusk:#1d2540; --dusk-2:#232c4a; --line:#2e3858; --text:#eef0f6; --muted:#a3abc4;
  --lamp:#f5c46b; --lamp-soft:rgba(245,196,107,.16); --ok:#7fd3a0; --warn:#f0a35e; --bad:#f08a8a;
  --display:"Young Serif",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --dock-h:76px;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(40rem 28rem at 50% -8%,var(--lamp-soft),transparent 60%),var(--night);
  background-attachment:fixed;
  color:var(--text);font:16px/1.55 var(--body);
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  overscroll-behavior-y:none;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
button{font:600 16px var(--body);color:var(--text);cursor:pointer;min-height:44px;border-radius:12px}
button:disabled{opacity:.6}

/* Top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 calc(-1 * max(16px,env(safe-area-inset-left)));padding:calc(env(safe-area-inset-top) + 10px) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  background:rgba(20,26,46,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent}
.mark{display:flex;align-items:center;gap:10px;min-height:44px;font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 6px var(--lamp-soft),0 0 24px 4px var(--lamp-soft);flex:none}
.lamp.big{width:20px;height:20px;box-shadow:0 0 0 10px var(--lamp-soft),0 0 40px 10px var(--lamp-soft)}
.langpick select{font:500 14px var(--body);color:var(--text);background:var(--dusk);border:1px solid var(--line);border-radius:10px;padding:0 10px;min-height:40px;max-width:44vw}

main{max-width:560px;margin:0 auto;padding:12px 0 calc(var(--dock-h) + env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;gap:14px}
body[data-view="detail"] main{padding-bottom:calc(env(safe-area-inset-bottom) + 32px)}

/* Bottom dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;
  padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(20,26,46,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
body[data-view="detail"] .dock{display:none}
.dock input{flex:1;min-width:0;font:500 16px var(--mono);color:var(--text);background:var(--dusk);border:1px solid var(--line);border-radius:12px;padding:0 14px;min-height:50px}
.dock input::placeholder{color:#6b7494;font-family:var(--body)}
.go{background:var(--lamp);border:1px solid var(--lamp);color:var(--night);padding:0 20px;min-height:50px}
.ghost{background:transparent;border:1px solid var(--line);padding:0 14px}
.back{background:transparent;border:0;color:var(--lamp);padding:0 4px;font-weight:600}
.danger{background:transparent;border:1px solid rgba(240,138,138,.35);color:var(--bad);padding:0 16px;width:100%}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:48px 4px 0}
.empty h1{font:400 clamp(34px,10vw,44px)/1.08 var(--display);margin:12px 0 0}
.empty p{margin:0;color:var(--muted);font-size:17px;max-width:32ch}
.install{background:var(--dusk);border:1px dashed var(--lamp);color:var(--lamp);padding:0 16px;width:100%}
.install-ios{font-size:14px;color:var(--muted);margin:8px 0 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}

/* Package list */
.listhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.listhead h2,.label{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:var(--dusk);border:1px solid var(--line);color:inherit;text-decoration:none}
.card:active{background:var(--dusk-2)}
.card-top,.status-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-title{margin:0;font:400 19px/1.3 var(--display)}
.card-sub{margin:0;font-size:14px;color:var(--muted)}
.card-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.eta-mini{color:var(--lamp);font-weight:600}
.eta-mini.late{color:var(--warn)}
.eta-mini.done{color:var(--ok)}

/* Pills */
.pill{font:600 13px var(--body);padding:3px 12px;border-radius:999px;background:var(--lamp-soft);color:var(--lamp);white-space:nowrap}
.pill.ok{background:rgba(127,211,160,.14);color:var(--ok)}
.pill.warn{background:rgba(240,163,94,.14);color:var(--warn)}
.pill.bad{background:rgba(240,138,138,.14);color:var(--bad)}
.num{font:500 12px var(--mono);color:var(--muted);overflow-wrap:anywhere}

/* Detail */
.topline{display:flex;justify-content:space-between;align-items:center}
.panel{background:var(--dusk);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px}
.nickname{font:500 15px var(--body);color:var(--text);background:transparent;border:0;border-bottom:1px dashed var(--line);padding:6px 0;min-height:40px;border-radius:0}
.nickname::placeholder{color:#6b7494}
.summary{font:400 22px/1.35 var(--display);margin:0}
.route{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding-top:12px;border-top:1px dashed var(--line);font-size:15px}
.route .to{text-align:right}
.route small{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.route .arrow{color:var(--lamp)}
.eta{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--night);border:1px solid var(--line)}
.eta b{font:400 21px/1.3 var(--display);color:var(--lamp)}
.eta.late b{color:var(--warn)}
.eta.done b{color:var(--ok)}
.eta span{font-size:13px;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.steps li{display:flex;flex-direction:column;gap:6px;font-size:10.5px;line-height:1.2;color:var(--muted);min-width:0}
.steps li::before{content:"";height:4px;border-radius:2px;background:var(--line)}
.steps li.on::before{background:var(--lamp)}
.steps li.on{color:var(--text)}
.steps li.now{font-weight:600}
.facts{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.facts b{color:var(--text);font-weight:600}
.note{margin:0;font-size:13px;color:var(--muted)}
.note.warn{color:var(--warn)}

ol.log{list-style:none;margin:0;padding:0}
ol.log li{display:grid;grid-template-columns:16px 1fr;gap:12px;position:relative;padding-bottom:18px}
ol.log li::before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;background:var(--line)}
ol.log li:last-child::before{display:none}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:var(--night);margin-top:3px}
ol.log li:first-child .dot{border-color:var(--lamp);background:var(--lamp);box-shadow:0 0 0 5px var(--lamp-soft)}
.ev{min-width:0}
.ev p{margin:0;font-size:16px}
ol.log li:first-child .ev p{font-weight:600}
.ev .meta{font-size:13px;color:var(--muted);display:flex;gap:2px 10px;flex-wrap:wrap;margin-top:2px}
.ev .meta time{font-family:var(--mono);font-size:12px}
details.orig{margin-top:2px}
details.orig summary{font-size:12px;color:#7a83a3;cursor:pointer;list-style:none;min-height:28px;display:flex;align-items:center}
details.orig summary::-webkit-details-marker{display:none}
details.orig div{font:12px var(--mono);color:var(--muted);overflow-wrap:anywhere}

.skel{height:16px;border-radius:6px;background:linear-gradient(90deg,var(--dusk-2),var(--line),var(--dusk-2));background-size:200% 100%;animation:sh 1.2s linear infinite}
.skel.short{width:60%}
@keyframes sh{to{background-position:-200% 0}}

.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 12px);z-index:10;margin:0 auto;max-width:520px;
  padding:12px 16px;border-radius:12px;background:var(--dusk-2);border:1px solid var(--line);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toast.err{border-color:rgba(240,138,138,.45);color:var(--bad)}
body[data-view="detail"] .toast{bottom:calc(env(safe-area-inset-bottom) + 16px)}

@media (prefers-reduced-motion:reduce){.skel{animation:none}}