/* Claimdrop — the yard. Dark gradient-mesh ground, one hot accent, the drop drawn as a stack of claim cards. */
:root{
  --ground:#0D0B1A; --ink:#EDE9FF; --dim:#9C95C6; --faint:#5E5888;
  --hot:#FF4FD8; --hot-lo:rgba(255,79,216,.16);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075); --seam:rgba(237,233,255,.12);
  --disp:'Sora',system-ui,sans-serif; --txt:'Inter Tight',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ground)}
body{margin:0;min-height:100vh;background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--txt);
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:14px;
  grid-template-areas:"crest" "shout" "caution" "pill" "deck" "rail" "foot";
  padding:10px 16px 28px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
code{font-family:var(--mono)}

.mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 8%,rgba(98,58,214,.38),transparent 70%),
    radial-gradient(50% 40% at 92% 22%,rgba(255,79,216,.20),transparent 70%),
    radial-gradient(70% 50% at 70% 95%,rgba(36,120,170,.26),transparent 70%),
    radial-gradient(45% 35% at 5% 75%,rgba(140,40,160,.22),transparent 70%)}

/* the crest: name + two links + connect, small, no bar */
.crest{grid-area:crest;display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px}
.crest-id{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 15px/1 var(--disp);letter-spacing:-.01em}
.crest-id img{border-radius:9px;display:block}
.crest-go{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--dim)}
.crest-go a{text-decoration:none}
.crest-go a:hover{color:var(--ink)}
.crest-wallet{border:1px solid var(--seam);background:var(--glass);border-radius:10px;padding:7px 11px;font-size:12.5px;color:var(--ink)}

/* the headline */
.shout{grid-area:shout;margin:4px 0 0;font:800 34px/1.04 var(--disp);letter-spacing:-.035em;max-width:16ch}
.shout em{font-style:normal;color:var(--hot);display:block}
.caution{grid-area:caution;margin:0;font-size:15px;line-height:1.45;color:var(--ink);max-width:62ch}
.caution-tag{display:inline-block;font:700 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ground);background:var(--hot);padding:4px 6px 3px;border-radius:4px;margin-right:4px;vertical-align:2px}
.caution code{font-size:13px;color:var(--dim)}
.caution .tick{font-family:var(--mono);color:var(--hot);font-weight:600}

/* the CA capsule: sticky, floats in the column */
.capsule{grid-area:pill;position:sticky;top:10px;z-index:30;display:flex;align-items:center;gap:8px;
  padding:7px 7px 7px 12px;border-radius:16px;border:1px solid rgba(255,79,216,.45);
  background:rgba(20,15,38,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -14px rgba(255,79,216,.45)}
.capsule-k{flex:none;font:800 11px/1 var(--disp);letter-spacing:.08em;color:var(--hot)}
.capsule-addr{flex:1;min-width:0;font-size:11.5px;line-height:1.3;word-break:break-all;user-select:all;color:var(--ink)}
.capsule-addr.is-wait{color:var(--dim);user-select:none;word-break:normal;font-family:var(--txt);font-size:12.5px}
.capsule-copy{flex:none;border:0;border-radius:11px;height:36px;padding:0 14px;background:var(--hot);color:#1A0716;font:700 13px/1 var(--txt)}
.capsule-copy.is-done{background:#7CF5C4}
.capsule-gm{flex:none;font-size:11px;color:var(--dim);padding:0 4px}

/* the deck: top card, the slip, the stack under it */
.deck{grid-area:deck;display:flex;flex-direction:column;gap:12px;min-width:0}
.deck-head{display:flex;justify-content:space-between;align-items:baseline;font:600 12px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.deck-pool b{font-family:var(--mono);color:var(--ink);letter-spacing:0;font-size:14px}
.topcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ring body" "beat beat";gap:14px 16px;
  padding:16px;border-radius:22px;background:linear-gradient(150deg,rgba(255,79,216,.14),rgba(98,58,214,.10) 55%,rgba(255,255,255,.03));
  border:1px solid rgba(255,79,216,.5);box-shadow:0 24px 50px -28px rgba(255,79,216,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.topcard.is-first{border-style:dashed;animation:beckon 2.2s ease-in-out infinite}
.topcard.is-fresh{animation:land .7s cubic-bezier(.2,.9,.3,1.2)}
@keyframes beckon{50%{box-shadow:0 0 0 6px var(--hot-lo),0 24px 50px -28px rgba(255,79,216,.55)}}
@keyframes land{0%{transform:translateY(-26px) rotate(-2deg);opacity:.2}100%{transform:none;opacity:1}}
.ring{grid-area:ring;--p:1;width:104px;height:104px;border-radius:50%;
  background:conic-gradient(var(--hot) calc(var(--p) * 1turn),rgba(237,233,255,.10) 0);display:grid;place-items:center;transition:background .4s}
.ring-in{width:86px;height:86px;border-radius:50%;background:#15102A;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px}
.ring-t{font:600 22px/1 var(--mono);letter-spacing:-.02em}
.ring-k{font-size:9.5px;line-height:1.15;color:var(--dim);margin-top:4px;max-width:70px}
.ring.is-out{background:conic-gradient(#7CF5C4 1turn,transparent 0)}
.topcard-body{grid-area:body;display:flex;flex-direction:column;gap:3px;min-width:0;align-self:center}
.topcard-k{font:600 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--hot)}
.topcard-amt{font:800 30px/1.05 var(--disp);letter-spacing:-.03em;overflow-wrap:anywhere}
.topcard-amt small{font:500 12px/1 var(--txt);color:var(--dim);margin-left:6px;letter-spacing:0}
.topcard-who{font-size:13px;color:var(--dim)}
.topcard-who code{color:var(--ink);font-size:12.5px}
.topcard-pay{font-size:13.5px;line-height:1.35}
.topcard-pay b{color:var(--hot)}
.beat{grid-area:beat;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(13,11,26,.55);border:1px solid var(--seam)}
.beat-k{font-size:12.5px;color:var(--dim)}
.beat-v{font:600 18px/1 var(--mono);color:var(--ink)}

.claimslip{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--seam)}
.claimslip-l{font:600 12px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.claimslip-row{display:flex;gap:8px}
.claimslip-row input{flex:1;min-width:0;height:50px;border-radius:13px;border:1px solid var(--seam);background:rgba(13,11,26,.7);color:var(--ink);
  font:600 20px/1 var(--mono);padding:0 14px;outline:none}
.claimslip-row input:focus{border-color:var(--hot)}
.claimslip-go{flex:none;height:50px;border:0;border-radius:13px;padding:0 18px;background:var(--hot);color:#1A0716;font:800 15px/1 var(--disp);letter-spacing:-.01em}
.claimslip-bump{display:flex;gap:6px}
.claimslip-bump button{border:1px solid var(--seam);background:transparent;border-radius:9px;padding:6px 10px;font-size:12.5px;color:var(--dim)}
.claimslip-bump button:hover{color:var(--ink);border-color:var(--dim)}
.claimslip-note{margin:0;font-size:13px;line-height:1.45;color:var(--dim)}
.claimslip-note b{color:var(--ink)}
.claimslip-note .no{color:#FF9F8E}

/* the beaten claims: cards fanned under the top card */
.under{list-style:none;margin:0;padding:0 6px;display:flex;flex-direction:column}
.uc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 14px;margin-top:-4px;
  border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--seam);
  box-shadow:0 -8px 16px -12px rgba(0,0,0,.8)}
.uc:nth-child(odd){transform:rotate(-.6deg)}
.uc:nth-child(even){transform:rotate(.5deg) translateX(3px)}
.uc:first-child{margin-top:0}
.uc.is-new{animation:slide .6s ease-out}
@keyframes slide{0%{transform:translateY(-18px);opacity:0}}
.uc-no{font:600 12px/1 var(--mono);color:var(--faint)}
.uc-mid{display:flex;flex-direction:column;min-width:0}
.uc-amt{font:700 16px/1.15 var(--disp);letter-spacing:-.01em}
.uc-who{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-cut{font:600 13px/1 var(--mono);color:var(--hot);text-align:right}
.uc-cut small{display:block;font:400 10px/1.2 var(--txt);color:var(--dim);margin-top:3px}
.uc.is-ghost{background:transparent;border-style:dashed;color:var(--faint)}
.uc.is-ghost .uc-amt{color:var(--faint);font-weight:600;font-size:14px}
.uc-more{font-size:12.5px;color:var(--dim);padding:10px 4px 0;text-align:center}

/* the rail: tape, settle, warning label, kept drops */
.rail{grid-area:rail;display:flex;flex-direction:column;gap:14px;min-width:0}
.rail>section{padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--seam)}
.rail-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font:700 14px/1 var(--disp);letter-spacing:-.01em}
.rail-h i{font:400 11.5px/1 var(--mono);color:var(--dim)}
.tape-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:330px;overflow:auto}
.tape-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;font-size:13px;line-height:1.4;padding:6px 0;border-bottom:1px solid rgba(237,233,255,.06)}
.tape-list time{font:500 11.5px/1.6 var(--mono);color:var(--faint)}
.tape-list code{font-size:12px;color:var(--dim)}
.tape-list b{color:var(--ink)}
.tape-list .hot{color:var(--hot)}
.tape-list li.is-print{animation:print .8s ease-out}
@keyframes print{0%{background:var(--hot-lo);clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.tape-list li.tape-empty{display:block;color:var(--dim);border:0}
.settle-line{margin:0 0 10px;font-size:13.5px;color:var(--dim)}
.settle-line b{color:var(--ink)}
.settle-btns{display:flex;gap:8px;flex-wrap:wrap}
.settle-btns button{flex:1 1 140px;height:42px;border-radius:12px;border:1px solid var(--seam);background:var(--glass-2);font-weight:600;font-size:13.5px}
.settle-btns button:not(:disabled):hover{border-color:var(--hot)}
.cautions-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--dim)}
.cautions-list b{color:var(--ink)}
.worked{margin-top:12px;padding:12px;border-radius:13px;border:1px dashed rgba(255,79,216,.45);background:rgba(255,79,216,.06)}
.worked-k{font:700 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--hot)}
.worked p{margin:6px 0 0;font-size:13.5px}
.closed-list{list-style:none;margin:0;padding:0;font-size:13px}
.closed-list li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(237,233,255,.06);color:var(--dim)}
.closed-list li b{font-family:var(--mono);color:var(--ink);font-weight:500}

.tail{grid-area:foot;padding-top:18px;border-top:1px solid var(--seam);font-size:12.5px;color:var(--dim);min-width:0}
.tail-links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px}
.tail-refs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0 0 10px}
.tail-refs dt{color:var(--faint)}
.tail-refs dd{margin:0;font-family:var(--mono);font-size:11.5px;word-break:break-all}
.tail-note{margin:0;color:var(--faint)}

.flap{position:fixed;inset:0;z-index:60;background:rgba(6,5,14,.72);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.flap-card{width:100%;max-width:640px;max-height:82vh;overflow:auto;border-radius:20px;background:#17112C;border:1px solid var(--seam);padding:16px}
.flap-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:700 16px/1 var(--disp)}
.flap-top button{border:1px solid var(--seam);background:transparent;border-radius:9px;padding:6px 10px;font-size:12.5px}
.flap-body{font-size:13.5px;color:var(--dim)}
.flap-body b{color:var(--ink)}
.flap-body table{width:100%;border-collapse:collapse;font-size:12.5px}
.flap-body th,.flap-body td{text-align:left;padding:6px 4px;border-bottom:1px solid rgba(237,233,255,.07)}
.flap-body .wallets{display:flex;flex-direction:column;gap:8px}
.flap-body .wallets button{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--seam);background:var(--glass)}
.flap-body .wallets img{width:24px;height:24px}
.toasts{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:#22183F;border:1px solid var(--hot);color:var(--ink);padding:9px 14px;border-radius:12px;font-size:13px;box-shadow:0 10px 30px -10px #000}

/* 720+: one column still, a wider measure and a bigger card */
@media (min-width:720px){
  body{padding:14px max(28px,calc((100vw - 760px)/2)) 36px;row-gap:16px}
  .shout{font-size:48px;max-width:18ch}
  .caution{font-size:16px}
  .capsule-addr{font-size:13px}
  .topcard{padding:22px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ring body beat"}
  .beat{flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;background:transparent;border:0;padding:0}
  .ring{width:128px;height:128px}.ring-in{width:106px;height:106px}.ring-t{font-size:27px}
  .topcard-amt{font-size:38px}
  .beat-v{font-size:22px}
  .rail{display:grid;grid-template-columns:1fr 1fr}
  .rail .tape,.rail .cautions{grid-column:1 / -1}
}
/* 1000+: the page recomposes — headline, CA and the deck on the left, the tape as a sticky column on the right */
@media (min-width:1000px){
  body{padding:16px max(32px,calc((100vw - 1180px)/2)) 40px;column-gap:32px;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
    grid-template-rows:auto auto auto auto 1fr auto;
    grid-template-areas:"crest crest" "shout rail" "caution rail" "pill rail" "deck rail" "foot foot";align-content:start}
  .shout{font-size:58px;max-width:15ch}
  .caution{font-size:17px}
  .rail{display:flex;position:sticky;top:16px;align-self:start}
  .topcard{padding:26px}
  .ring{width:150px;height:150px}.ring-in{width:126px;height:126px}.ring-t{font-size:32px}.ring-k{font-size:10.5px;max-width:90px}
  .topcard-amt{font-size:46px}
  .beat-v{font-size:26px}
  .uc{padding:13px 18px}
  .uc-amt{font-size:18px}
  .tape-list{max-height:300px}
  .tail{display:grid;grid-template-columns:1fr 1.4fr;gap:10px 30px}
  .tail-note{grid-column:1 / -1}
}