/* shipit · GitHub-style theme (Primer-like) in the brand-6 "Prompt Boat" colours:
   amber #ffb757 (the prompt, "Ship", points) and blue #71b7ff (the cursor/hull, "Coin", links).
   Green stays only for GitHub-style success ticks. */
@font-face { font-family: "JBM"; src: url(/fonts/jetbrains-mono.ttf) format("truetype"); font-weight: 100 800; font-display: swap; }
:root {
  --bg: #0a0c10; --bg-subtle: #12161d; --bg-inset: #07090c; --overlay: #161b22; --hover: #1a2029;
  --border: #3d434d; --border-muted: #22272e;
  --fg: #f0f3f6; --muted: #7a828e; --faint: #5b626c;
  --link: #71b7ff; --blue: #71b7ff; --blue-hi: #9ccbff; --blue-subtle: rgba(113,183,255,.13);
  --green: #3fb950; --green-hi: #56d364; --green-btn: #2b8a3e; --green-btn-hover: #31994a; --green-subtle: rgba(63,185,80,.13);
  --gold: #ffb757; --gold-hi: #ffd08a; --gold-subtle: rgba(255,183,87,.14);
  --wm: "JBM", ui-monospace, monospace;
  --purple: #a78bfa; --danger: #f85149;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gold { color: var(--gold); }
.green { color: var(--green); }
.oc { width: 16px; height: 16px; flex: none; vertical-align: text-bottom; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.oc.f { fill: currentColor; stroke: none; }
.oc.s24 { width: 24px; height: 24px; }

/* ---------- global header (GitHub app header) ---------- */
.hd { position: sticky; top: 0; z-index: 20; background: var(--bg-inset); border-bottom: 1px solid var(--border-muted); }
.hd::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--blue) 70%, transparent); opacity: .75; }
.hd-in { display: flex; align-items: center; gap: 12px; padding: 14px 24px 12px; min-height: 64px; }
.hd-ham { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; color: var(--muted); background: transparent; }
.hd-logo { display: flex; color: var(--fg); }
.hd-logo svg { width: 32px; height: 32px; }
.hd-crumb { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.hd-crumb a { color: var(--fg); padding: 2px 6px; border-radius: 6px; }
.hd-crumb a:hover { background: var(--hover); text-decoration: none; }
.hd-crumb b { font-weight: 600; }
.hd-crumb .sep { color: var(--faint); }
.hd-sp { flex: 1; }
.hd-search { display: flex; align-items: center; gap: 8px; width: 300px; height: 32px; border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; color: var(--muted); font-size: 13px; }
.hd-search kbd { margin-left: auto; font: 11px var(--mono); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.hd-link { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 13px; }
.hd-link:hover { background: var(--hover); text-decoration: none; }
.hd-pts { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid rgba(255,183,87,.35); background: var(--gold-subtle); position: relative; overflow: hidden; border-radius: 6px; font: 600 13px var(--mono); color: var(--gold); white-space: nowrap; }
.hd-pts.bump { animation: bump .45s ease; }
@keyframes bump { 40% { transform: scale(1.1); box-shadow: 0 0 18px rgba(255,183,87,.45); } }
.hd-av { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); overflow: hidden; display: block; }
.hd-av svg, .av svg { display: block; width: 100%; height: 100%; }

/* ---------- underline nav (repo tabs) ---------- */
.unav { display: flex; gap: 8px; padding: 0 24px; border-bottom: 1px solid var(--border-muted); background: var(--bg-inset); overflow-x: auto; }
.unav a { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px; color: var(--fg); font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 6px 6px 0 0; }
.unav a:hover { text-decoration: none; background: var(--hover); }
.unav a.on { border-bottom-color: #f0883e; font-weight: 600; }
.unav a.on.g { border-bottom-color: var(--gold); }
.unav .oc { color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; background: #1b2229; color: var(--fg); font: 500 14px var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: #222a33; border-color: #3a434d; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn-primary { background: var(--blue); border-color: rgba(240,246,252,.1); color: #0a0c10; font-weight: 600; }
.btn-primary:hover { background: var(--blue-hi); border-color: rgba(240,246,252,.1); }
.btn-gold { background: var(--gold); border-color: rgba(240,246,252,.1); color: #0a0c10; font-weight: 700; }
.btn-gold:hover { background: var(--gold-hi); }
.btn-x { background: #f0f3f6; color: #0a0c10; border-color: #f0f3f6; font-weight: 600; }
.btn-x:hover { background: #fff; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 16px; }
.btn-block { width: 100%; }
.btn .Counter { margin-left: 2px; }

/* ---------- boxes ---------- */
.Box { border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.Box-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; }
.Box-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-muted); }
.Box-header + .Box-row, .Box-row:first-child { border-top: 0; }
.Box-row.hl { background: rgba(113,183,255,.06); }
.Box-body { padding: 16px; }
.Counter { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 2em; background: rgba(110,118,129,.3); font: 500 12px/18px var(--sans); text-align: center; color: var(--fg); }
.Counter.gold { background: var(--gold-subtle); color: var(--gold); }
.Counter.green { background: var(--green-subtle); color: var(--green-hi); }
.Label { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid var(--border); border-radius: 2em; font: 500 12px/18px var(--sans); color: var(--muted); white-space: nowrap; }
.Label.green { border-color: rgba(63,185,80,.45); color: var(--green-hi); }
.Label.gold { border-color: rgba(255,183,87,.45); color: var(--gold); }
.Label.blue { border-color: rgba(113,183,255,.45); color: var(--blue); }
.Label.purple { border-color: rgba(167,139,250,.45); color: var(--purple); }
.Label.test { border-color: rgba(108,182,255,.45); color: var(--link); }
.flash { padding: 12px 16px; border: 1px solid rgba(108,182,255,.35); background: rgba(56,139,253,.08); border-radius: 6px; display: flex; gap: 10px; align-items: center; }
.flash.gold { border-color: rgba(255,183,87,.4); background: var(--gold-subtle); }
.flash.green { border-color: rgba(63,185,80,.45); background: var(--green-subtle); }

/* ---------- form ---------- */
.inp { height: 32px; width: 100%; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-inset); color: var(--fg); font: 13px var(--mono); }
.inp:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(56,139,253,.3); }
.inp[readonly] { color: var(--muted); }
.lbl { display: block; font-weight: 600; margin: 0 0 6px; }
.note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- progress / status ---------- */
.prog { height: 8px; border-radius: 6px; background: #20272f; overflow: hidden; display: flex; }
.prog > span { display: block; height: 100%; }
.bar-live { height: 3px; border-radius: 2px; background: #20272f; overflow: hidden; margin-top: 8px; }
.bar-live > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,183,87,.25); border-top-color: var(--gold); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.st { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.st.ok { background: var(--green); color: #0b1015; }
.st.ok .oc { width: 12px; height: 12px; stroke-width: 2.4; }
.st.todo { border: 1.5px dashed var(--faint); }
.st.run { border: 2px solid rgba(255,183,87,.3); border-top-color: var(--gold); animation: spin .8s linear infinite; }
.st.now { border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--gold-subtle); }
.rise { animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.pop { animation: pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } }

/* ---------- contribution graph ---------- */
.cg { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; }
.cg i { width: 11px; height: 11px; border-radius: 2px; background: #161d24; outline: 1px solid rgba(255,255,255,.03); outline-offset: -1px; }
.cg i.g1 { background: #12304d; } .cg i.g2 { background: #1d5288; } .cg i.g3 { background: #3d8bd6; } .cg i.g4 { background: #71b7ff; }
.cg i.y1 { background: #4d3613; } .cg i.y2 { background: #8f6221; } .cg i.y3 { background: #d4913b; } .cg i.y4 { background: #ffb757; }
.cg-leg { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.cg-leg i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* ---------- footer ---------- */
.ft { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 28px 24px 40px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--border-muted); margin-top: 40px; }
.ft svg { width: 22px; height: 22px; }
.ft a { color: var(--muted); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--overlay); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 50; display: flex; gap: 10px; align-items: center; }

@media (max-width: 860px) {
  .hd-search, .hd-link .t, .hd-ham { display: none; }
  .hd-in { padding: 12px 16px; gap: 8px; }
  .hd-link { padding: 0 8px; }
  .unav { padding: 0 12px; }
}
@media (max-width: 520px) {
  .hd-link { display: none; }
  .hd-crumb a:not(:last-child), .hd-crumb .sep { display: none; }
  .hd-crumb { flex: 1; min-width: 0; }
  .hd-crumb a { overflow: hidden; text-overflow: ellipsis; }
  .hd-sp { display: none; }
  .hd-pts { padding: 0 8px; font-size: 12px; }
  .hd-in { gap: 6px; }
}

/* ---------- brand 6: wordmark ---------- */
.wm { font: 800 17px var(--wm); color: var(--fg); letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wm .p { color: var(--gold); }
.wm .c { display: inline-block; width: 8px; height: 17px; background: var(--blue); margin-left: 1px; animation: wmblink 1.1s steps(1) infinite; }
@keyframes wmblink { 50% { opacity: 0; } }
/* ---------- points: coins fly to the balance, the balance fills ---------- */
.hd-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,183,87,.15); }
.hd-fill i, .fillbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); box-shadow: 0 0 8px rgba(255,183,87,.6); }
.fillbar { height: 8px; border-radius: 5px; background: var(--bg-inset); border: 1px solid var(--border-muted); overflow: hidden; margin-top: 10px; width: 100%; max-width: 260px; }
.hd-snd { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.hd-snd:hover { color: var(--fg); }
.hd-snd.off { color: var(--faint); }
.cf { position: fixed; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 80; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cf svg { width: 100%; height: 100%; display: block; }
.land { animation: land .32s cubic-bezier(.2,1.6,.4,1); }
@keyframes land { 35% { transform: scale(1.12); text-shadow: 0 0 18px rgba(255,183,87,.9); box-shadow: 0 0 22px rgba(255,183,87,.55); } }
.cha { animation: cha .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes cha { 30% { transform: scale(1.18); text-shadow: 0 0 26px rgba(255,183,87,1); box-shadow: 0 0 30px rgba(255,183,87,.75); } }
.ring-flash { position: fixed; z-index: 79; pointer-events: none; border-radius: 50%; border: 2px solid var(--gold); width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.paste { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.paste .inp { flex: 1; min-width: 200px; }
.perr { color: var(--danger); font-size: 13px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .wm .c { animation: none; } .land, .cha { animation: none; } }