/* ══════════════════════════════════════════════════════════════
   classic.css — country grid, then the proxies inside a country
   Uses .content / .left / .rail from app.css so the column split
   matches the homepage exactly.
   ══════════════════════════════════════════════════════════════ */

/* ── page header ─────────────────────────────────────────── */
.page-head p{margin:0;font-size:14px;color:var(--text-2);max-width:74ch;line-height:1.6}

/* ── auth tabs ───────────────────────────────────────────── */
.tabs{display:flex;gap:0;padding:5px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel)}
.tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 14px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap;
  transition:background .15s,color .15s
}
.tab:hover{color:var(--text)}
.tab.on{background:var(--panel-3);color:var(--text)}
.tab svg{width:15px;height:15px;flex:0 0 15px}
.tab .n{
  font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:99px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted)
}
.tab.on .n{color:var(--accent);border-color:var(--accent)}

/* ── search + summary ────────────────────────────────────── */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.search{
  display:flex;align-items:center;gap:9px;flex:1;min-width:200px;
  padding:9px 13px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);color:var(--muted)
}
.search:focus-within{border-color:var(--accent)}
.search svg{width:15px;height:15px;flex:0 0 15px}
.search input{border:0;background:none;outline:none;color:var(--text);font:inherit;font-size:13.5px;width:100%}
.search input::placeholder{color:var(--muted)}
.summary{font-size:12.8px;color:var(--muted);white-space:nowrap}
.summary b{font-family:var(--mono);color:var(--text)}

/* ── country grid ────────────────────────────────────────── */
.countries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.country{
  display:flex;align-items:center;gap:12px;padding:14px;
  transition:border-color .15s,transform .15s
}
.country:hover{border-color:var(--accent);transform:translateY(-1px)}
/* display:block matters — as an inline span the width and height were
   ignored anywhere it wasn't a direct flex child, and the image blew
   up to its natural size. */
.flag{
  display:block;width:42px;height:30px;flex:0 0 42px;
  border-radius:4px;overflow:hidden;
  background:var(--panel-3);box-shadow:0 0 0 1px var(--line)
}
.flag img{width:100%;height:100%;object-fit:cover;display:block}
.country-t{flex:1;min-width:0}
.country-t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.country-t span{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.country .go{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);color:var(--accent);transition:transform .15s
}
.country:hover .go{transform:translateX(3px);border-color:var(--accent)}
.country .go svg{width:12px;height:12px;display:block}

/* ── country detail ──────────────────────────────────────── */
.back{
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);font-size:13.5px;font-weight:600;
  color:var(--text-2);white-space:nowrap;flex:0 0 auto
}
.back:hover{background:var(--panel-2);color:var(--text)}
.back svg{width:13px;height:13px}

.crumb{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.crumb .flag{width:34px;height:24px;flex:0 0 34px}
.crumb b{font-family:var(--display);font-size:19px;font-weight:700}
.crumb .n{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* one dropdown instead of a wall of chips — some countries have
   dozens of cities and the chips pushed the table off screen */
.city-pick{margin-left:auto;display:flex;align-items:center;gap:9px}
.city-pick label{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.city-pick select{
  min-width:210px;padding:8px 30px 8px 11px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-size:13px;outline:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat
}
.city-pick select:focus{border-color:var(--accent)}

/* proxy rows */
.rows{display:flex;flex-direction:column}
.prow{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,2fr) minmax(0,1fr) 124px;
  gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-2)
}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--panel-2)}
.rows-head{
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,2fr) minmax(0,1fr) 124px;
  gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)
}
.place{display:flex;align-items:baseline;gap:7px;min-width:0}
.place b{font-size:13px;font-weight:600;white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.place span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place b::after{content:' -';color:var(--muted);font-weight:400}
.isp{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* plain text, styled like the ISP column. As a coloured badge it read
   as a quality rating and people assumed it explained why a proxy
   did or didn't work. */
.ptype{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act{display:flex;justify-content:flex-end}
.btn.unlock{padding:6px 11px;font-size:12.5px;gap:6px;white-space:nowrap}
.btn.unlock svg{width:13px;height:13px}
/* an unlocked row stays clickable — same round chevron as the
   proxy-type cards on the homepage */
.btn.view{
  padding:6px 7px 6px 13px;font-size:12.5px;gap:8px;white-space:nowrap;
  color:var(--accent);background:var(--panel-2);border-color:var(--line)
}
.btn.view:hover{background:var(--panel-3);border-color:var(--accent)}
.btn.view .chev{
  width:20px;height:20px;flex:0 0 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);transition:transform .15s,border-color .15s
}
.btn.view:hover .chev{transform:translateX(2px);border-color:var(--accent)}
.btn.view .chev svg{width:11px;height:11px;display:block}

.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty svg{width:34px;height:34px;margin-bottom:10px;opacity:.55}
.empty p{margin:0;font-size:13px}

/* ── pagination ──────────────────────────────────────────── */
.pager{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.pager .info{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-right:auto}
.pager button{
  min-width:32px;height:32px;padding:0 9px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel-2);
  font-family:var(--mono);font-size:12px;color:var(--text-2)
}
.pager button:hover:not(:disabled){background:var(--panel-3);color:var(--text)}
.pager button:disabled{opacity:.4;cursor:default}
.pager button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ── how it works ────────────────────────────────────────── */
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
.step-n{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--accent)
}
.step-t h5{margin:0;font-size:12.6px;font-weight:600}
.step-t p{margin:1px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}

/* ── request a proxy ─────────────────────────────────────── */
.request .panel-body{display:flex;flex-direction:column;gap:9px;padding:14px}
.request p{margin:0 0 3px;font-size:12.4px;color:var(--text-2);line-height:1.5}
.request input,.request textarea{
  width:100%;padding:8px 11px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font:inherit;font-size:13px;outline:none;resize:vertical
}
.request textarea{min-height:58px}
.request input:focus,.request textarea:focus{border-color:var(--accent)}
.request input::placeholder,.request textarea::placeholder{color:var(--muted)}

/* ── unlock dialog ───────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(8,11,15,.55);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
          backdrop-filter:blur(7px) saturate(.9);
  display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .18s
}
.overlay.open{opacity:1;pointer-events:auto}
.modal{
  width:min(440px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);transform:translateY(8px);transition:transform .18s
}
.overlay.open .modal{transform:none}
.modal-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:14.5px;font-weight:600}
.modal-head .x{margin-left:auto;width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--muted)}
.modal-head .x:hover{background:var(--panel-2);color:var(--text)}
.modal-head .x svg{width:14px;height:14px}
.modal-body{padding:16px}

.target{display:flex;align-items:center;gap:11px;padding:11px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line);margin-bottom:14px}
.target .flag{width:34px;height:24px;flex:0 0 34px}

.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2)
}
.choice:hover{border-color:var(--accent);background:var(--panel-3)}
.choice-ico{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r);display:grid;place-items:center;background:var(--panel-3);border:1px solid var(--line);color:var(--accent)}
.choice-ico svg{width:17px;height:17px}
.choice-t{flex:1;min-width:0}
.choice-t b{display:block;font-size:13.5px;font-weight:600}
.choice-t span{display:block;font-size:11.8px;color:var(--muted)}
.choice-arr{color:var(--muted)}
.choice-arr svg{width:14px;height:14px;display:block}

.note{
  display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);font-size:12px;color:var(--text-2);line-height:1.45
}
.note svg{width:14px;height:14px;flex:0 0 14px;margin-top:2px;color:var(--muted)}

.waitbox{text-align:center}
.waitbox .frame{
  height:190px;border-radius:var(--r);border:1px dashed var(--line);background:var(--panel-2);
  display:grid;place-items:center;color:var(--muted);font-size:12.5px;margin-bottom:14px
}
.count{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-1px}
.count small{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:2px}

.reveal{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.reveal-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);padding:9px 12px}
.reveal-row span{font-family:var(--mono);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);flex:0 0 74px}
.reveal-row b{font-family:var(--mono);font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;flex:0 0 auto;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-3);
  color:var(--text-2);font-size:11.5px;font-weight:600
}
.mini:hover{color:var(--text);border-color:var(--text-2)}
.mini.copied{color:var(--accent);border-color:var(--accent);background:var(--panel-2)}
.mini svg{width:12px;height:12px;flex:0 0 12px}
.btn.copied{background:var(--panel-3);border-color:var(--accent);color:var(--accent)}

/* small back link at the top of the credentials dialog */
.back-mini{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;
  padding:5px 10px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel-2);font-size:12px;font-weight:600;color:var(--text-2)
}
.back-mini:hover{background:var(--panel-3);color:var(--text)}
.back-mini svg{width:12px;height:12px}

/* ── my unlocked proxies, inside the dialog ──────────────────────── */
.my-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-height:340px;overflow-y:auto}
.my-row{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--panel-2);width:100%;text-align:left}
.my-row:hover{background:var(--panel-3)}
.my-row .flag{width:30px;height:21px;flex:0 0 30px}
.my-t{flex:1;min-width:0}
.my-t b{display:block;font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-t span{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-row .arr{color:var(--muted);flex:0 0 auto}
.my-row .arr svg{width:13px;height:13px;display:block}
.ok-line{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-size:13px;color:var(--accent)}
.ok-line svg{width:16px;height:16px}

/* ── responsive: classic page only ───────────────────────── */
@media (max-width:1400px){
  .countries{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1300px){
  /* the rail moves below and goes two-up, so the grid gets the full width */
  .countries{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){
  .countries{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .rows-head{display:none}
  .prow{
    grid-template-columns:1fr auto;gap:8px 12px;
    padding:13px 14px;border-bottom:1px solid var(--line)
  }
  /* location, then ISP, then the type under it — button on the right */
  .prow .place{grid-column:1;grid-row:1}
  .prow .isp{grid-column:1;grid-row:2}
  .prow .ptype{grid-column:1;grid-row:3}
  .prow .act{grid-column:2;grid-row:1 / 4;align-self:center}
}
@media (max-width:860px){
  .countries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-pick{margin-left:0;width:100%}
  .city-pick select{flex:1;min-width:0}
  .back{width:100%;justify-content:center}
  /* two tabs stacked read better than two squashed ones */
  .tabs{flex-direction:column;gap:4px}
  .tab{justify-content:flex-start}
  .tab .n{margin-left:auto}
  .bar{gap:9px}
  .summary{width:100%;order:2}
}
@media (max-width:620px){
  .countries{grid-template-columns:1fr}
  .flag{width:38px;height:27px;flex:0 0 38px}
  .crumb .here b{font-size:16px}
    .prow{padding:12px}
  .pager{flex-wrap:wrap;gap:6px}
  .pager .info{width:100%;margin-right:0;order:2}
  .modal-body{padding:14px}
  .reveal-row span{flex:0 0 62px;font-size:8.5px}
  .reveal-row b{font-size:12px}
}


/* Coins are the only way to pay, so the dialog is a single button
   rather than a list of one. */
.choices{grid-template-columns:1fr}
.choices .choice{padding:16px 18px}


/* The answer to a request, where the person is already looking. */
.req-msg{margin:8px 0 0;font-size:12.5px;line-height:1.5;min-height:1px}
.req-msg.good{color:var(--ok,#5ec07f)}
.req-msg.bad{color:var(--bad,#e07b7b)}




/* ══════════════════════════════════════════════════════════════
   WALLET
   ══════════════════════════════════════════════════════════════ */

/* ── the top of the page ───────────────────────────────────
   Balance and heading share one block. Two separate cards for
   "here is the page" and "here is your balance" wastes the most
   valuable part of the screen on nothing. */
.wallet-hero{
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  padding:24px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line)
}
.hero-t{flex:1 1 300px;min-width:0}
.hero-tag{
  display:inline-block;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(31,185,120,.35);border-radius:99px;
  padding:3px 10px;margin-bottom:10px
}
.hero-t h1{font-size:26px;font-weight:700;letter-spacing:-.7px;margin:0 0 7px}
.hero-t p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:52ch}

.hero-bal{
  flex:0 0 auto;min-width:210px;padding:16px 18px;
  border-radius:13px;background:var(--panel-2);border:1px solid var(--line)
}

/* ── the coins we take, stated plainly ─────────────────── */
.pay-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 2px 0;font-size:11.5px;color:var(--muted)
}
.pay-strip b{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-2);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;
  background:var(--panel-2)
}
.pay-strip .more{color:var(--muted)}
.page-head h1{font-size:23px;font-weight:650;margin:0 0 6px;letter-spacing:-.4px}
.page-head p{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.6;max-width:64ch}

.bal-out{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.bal-coin{width:34px;height:34px;flex:0 0 34px}
.bal-out > div{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.bal-out b{font-size:27px;font-weight:700;letter-spacing:-.7px}
.bal-out span{font-size:12.5px;color:var(--text-2)}
.bal-who{
  font-size:12.5px;color:var(--muted);padding:5px 11px;
  border:1px solid var(--line);border-radius:99px;flex:0 0 auto
}


.ost{font-size:11.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--line)}
.ost.ok{color:var(--ok,#5ec07f);border-color:#2f7d4f}
.ost.working{color:#d9a441;border-color:#7a6320}
.ost.waiting{color:var(--text-2)}
.ost.bad{color:#e07b7b;border-color:#7a3333}
.ost.dim{color:var(--muted)}
.ref{font-family:var(--mono);font-size:10.5px}

.rail .panel-body p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--text-2)}
.rail .panel-body p:last-child{margin-bottom:0}
.rail .panel-body b{color:var(--text);font-weight:600}
.rail .panel-body .btn{margin-top:10px}

@media (max-width:520px){
  .packs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:14px}
  .pack-n{font-size:19px}
}


/* ══════════════════════════════════════════════════════════════
   PACK CARDS

   The layout the bigger proxy sellers converge on, because it
   works: one large number, the unit small beside it, a per-unit
   rate so packs can be compared, and the price last. The featured
   card is lifted with a colour band rather than a coloured body —
   on a dark page a fully tinted card fights the rest of the UI.
   ══════════════════════════════════════════════════════════════ */
.packs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:16px;padding:20px;align-items:stretch
}

.pk{
  position:relative;display:flex;flex-direction:column;
  border-radius:14px;background:var(--panel-2);
  border:1px solid var(--line);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),
             border-color .18s, box-shadow .18s
}
.pk:hover{transform:translateY(-3px);border-color:#39414c;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7)}
.pk.busy{opacity:.55;pointer-events:none;transform:none}

/* The featured card is outlined, and its label is a small pill that
   floats on the top edge instead of a full-width band. A band made
   that one card taller than its neighbours, so its Buy button sat
   lower than all the others. A floating pill takes no height, so
   every card in the row stays level and the buttons line up. */
/* One 1px line, not two. The inset shadow used to sit on top of the
   border and read as a 2px rule. */
.pk-feat{border-color:var(--accent)}
.pk-ribbon{
  position:absolute;top:-9px;right:12px;z-index:2;
  border-radius:99px;background:var(--accent);color:#04120b;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;line-height:1;white-space:nowrap;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.6)
}
.pk:not(.pk-feat) .pk-ribbon{
  background:var(--panel-3);color:var(--text-2);
  border:1px solid var(--line);font-weight:700
}


@media (max-width:560px){
  .packs{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;padding:14px}
  .pk-num{font-size:22px}
  .pk-price .val{font-size:22px}
  .pk-in{padding:15px 13px 13px}
}


@media (max-width:760px){
  .wallet-hero{padding:18px;gap:16px}
  .hero-t h1{font-size:22px}
  .hero-bal{flex:1 1 100%;min-width:0}
}


/* ── the cards, centred ────────────────────────────────────
   Everything on one axis. With the rate line gone there are only
   four things to read, and stacking them down the middle reads
   faster than a left rail of mixed sizes. */
.pk-in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  flex:1;padding:22px 16px 18px;gap:0
}

.pk-coin{width:40px;height:40px;flex:0 0 40px;margin-bottom:14px;opacity:.95}

.pk-amt{display:flex;flex-direction:column;line-height:1.05;margin-bottom:4px}
.pk-num{font-size:26px;font-weight:700;letter-spacing:-1px}
.pk-unit{font-size:11.5px;color:var(--muted);margin-top:5px;letter-spacing:.03em;
  line-height:1.4;max-width:15ch;margin-left:auto;margin-right:auto}

.pk-extra{font-size:11.5px;color:var(--accent);margin-top:6px}

.pk-price{
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  margin:18px 0 14px;padding-top:16px;
  border-top:1px solid var(--line);width:100%
}
.pk-price .cur{font-size:15px;font-weight:600;color:var(--text-2)}
.pk-price .val{font-size:27px;font-weight:700;letter-spacing:-.9px}
.pk-feat .pk-price .val{color:var(--accent)}

/* the price sits at the bottom whatever the card above it says */
.pk-amt{margin-bottom:auto}

.pk-buy{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:10px 12px;border-radius:9px;cursor:pointer;
  font-size:13px;font-weight:600;
  background:transparent;border:1px solid var(--line);color:var(--text);
  transition:background .15s,border-color .15s,color .15s
}
.pk-buy svg{width:14px;height:14px;transition:transform .15s}
.pk-buy:hover{border-color:var(--accent);color:var(--accent)}
.pk-buy:hover svg{transform:translateX(2px)}
.pk-feat .pk-buy{background:var(--accent);border-color:var(--accent);color:#04120b}
.pk-feat .pk-buy:hover{filter:brightness(1.07);color:#04120b}

/* ── a shelf of cards, with no box around it ───────────────
   The panel wrapper was a card holding cards — two nested frames
   saying the same thing. A heading and the grid is enough. */
.shelf{margin-top:4px}
.shelf + .shelf{margin-top:34px}
.shelf-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:0 2px 6px
}
.shelf-head h2{font-size:15px;font-weight:650;margin:0;letter-spacing:-.2px}
.shelf-head span{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto
}
.shelf .packs{padding:26px 0 0}

@media (max-width:560px){
  .pk-in{padding:18px 13px 15px}
  .pk-coin{width:34px;height:34px;flex:0 0 34px;margin-bottom:11px}
  .pk-num{font-size:22px}
  .pk-price{margin:14px 0 11px;padding-top:13px}
  .pk-price .val{font-size:23px}
  .shelf-head span{margin-left:0;width:100%}
}

/* ── purchase history ──────────────────────────────────────
   Was a five-column table. Each purchase is really one fact —
   "2,000 coins for $1.99" — with a date and a state attached, so
   it reads better as a row than as a grid of narrow cells.

   The row has three parts: a state dot, the purchase, the state in
   words. The reference only appears while it still matters (an
   order still waiting or still crediting), since that is the only
   time anyone needs to quote it. */
.orders{margin-top:40px}

.order-list{
  display:flex;flex-direction:column;gap:8px;
  padding:26px 0 0;max-height:420px;overflow:auto
}

.ord{
  display:flex;align-items:center;gap:13px;
  padding:13px 15px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line)
}
.ord-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:var(--muted);margin-top:1px
}
.ord.s-ok   .ord-dot{background:#5ec07f;box-shadow:0 0 0 3px rgba(94,192,127,.15)}
.ord.s-working .ord-dot{background:#d9a441;box-shadow:0 0 0 3px rgba(217,164,65,.15)}
.ord.s-waiting .ord-dot{background:var(--text-2)}
.ord.s-bad  .ord-dot{background:#e07b7b}

.ord-main{flex:1;min-width:0}
.ord-what{font-size:13.5px;font-weight:600;letter-spacing:-.1px}
.ord-what .sep{color:var(--muted);font-weight:400;margin:0 6px}
.ord-what .usd{font-family:var(--mono);font-size:12.5px;color:var(--text-2);font-weight:600}
.ord-sub{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:4px;font-size:11.5px;color:var(--muted)
}
.ord-sub .ref{
  font-family:var(--mono);font-size:10.5px;color:var(--text-2);
  background:var(--panel-3);border-radius:5px;padding:1px 6px
}
.ord-state{flex:0 0 auto;white-space:nowrap}

.ord-empty{
  padding:28px 16px;text-align:center;font-size:13px;color:var(--muted);
  border:1px dashed var(--line);border-radius:12px
}

@media (max-width:560px){
  .orders{margin-top:30px}
  .ord{flex-wrap:wrap;gap:10px;padding:12px 13px}
  .ord-main{flex:1 1 100%;order:2}
  .ord-state{order:1;margin-left:auto}
}

/* ── signed out, in the hero ───────────────────────────────
   Not the balance box with different words: the balance box
   sets a 27px display face for a number, and "Sign in to top
   up" rendered in it shouted at people who had done nothing
   wrong. Its own, quieter, markup. */
.bal-none{display:flex;flex-direction:column;gap:13px}
.bal-none-t{display:flex;flex-direction:column;gap:3px;line-height:1.3}
.bal-none-t b{font-size:15.5px;font-weight:650;letter-spacing:-.2px}
.bal-none-t span{font-size:12.5px;color:var(--text-2)}
.bal-none-act{display:flex;gap:8px;flex-wrap:wrap}
.bal-none-act .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* A second button that reads as an alternative, not a rival. */
.btn.ghost{
  background:transparent;border:1px solid var(--line);color:var(--text);
  transition:border-color .15s,color .15s
}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ── an order you can still act on ─────────────────────────
   The action sits under the state pill, so the row reads
   "where it got to, and what you can do about it". */
.ord-end{
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  flex:0 0 auto
}
.ord-go{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 13px;border-radius:8px;cursor:pointer;white-space:nowrap;
  font-size:12px;font-weight:650;
  background:var(--accent);border:1px solid var(--accent);color:#04120b;
  transition:filter .15s
}
.ord-go:hover{filter:brightness(1.07)}
/* Starting over is a weaker offer than finishing what you began. */
.ord-go.again{
  background:transparent;border-color:var(--line);color:var(--text-2);
  font-weight:600
}
.ord-go.again:hover{border-color:var(--accent);color:var(--accent);filter:none}

.ord-left{color:var(--accent)}

@media (max-width:560px){
  .ord-end{flex-direction:row;align-items:center}
}


/* ══════════════════════════════════════════════════════════════
   PURCHASE HISTORY — one panel with ruled rows, like the proxy
   lists, instead of a stack of separate cards. The state pill and
   its button sit side by side so each row stays one line tall.
   ══════════════════════════════════════════════════════════════ */
.order-list{
  gap:0;margin-top:26px;padding:0;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)
}
.order-list:has(> .ord-empty){border:0;background:none}
.ord{
  border:0;border-radius:0;background:none;
  border-top:1px solid var(--line-2,var(--line));padding:11px 16px
}
.ord:first-child{border-top:0}
.ord:hover{background:var(--panel-2)}
.ord-end{flex-direction:row;align-items:center;gap:10px}

/* ── the top block sits on the page (the balance keeps its box),
   with one straight rule under it dividing it from what follows ─ */
.wallet-hero{
  background:none;border:0;border-radius:0;padding:4px 2px 24px;
  border-bottom:1px solid var(--line)
}