/* =========================================================================
   RETRO 3.0 — RENT A SERVER
   Availability strip, the live-rental panel and the history rows.
   Everything else on the page reuses store.css.
   ========================================================================= */

/* ---------- availability strip ---------- */
.avail{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);padding:16px 20px;margin-bottom:22px;
  background:linear-gradient(100deg,rgba(255,255,255,.05),transparent 62%)}
.avail.none{border-color:rgba(255,59,78,.4);background:linear-gradient(100deg,rgba(255,59,78,.10),transparent 62%)}
.av-l{display:flex;align-items:center;gap:18px;min-width:0}
.av-dots{display:flex;gap:7px;flex:0 0 auto}
.av-d{width:13px;height:13px;background:#1a1a1f;border:1px solid var(--line2)}
.av-d.on{background:var(--acc);border-color:var(--acc);box-shadow:0 0 12px rgba(43,255,155,.6)}
.av-t{font-size:14px;font-weight:600;color:#fff}
.av-t b{font-family:var(--fm);font-size:17px;margin-right:2px}
.av-s{margin-top:4px;font-size:12.5px;color:var(--sub)}
.av-ip{flex:0 0 auto;text-align:right}
.av-ip span{display:block;font-family:var(--fm);font-size:8.5px;letter-spacing:.24em;color:var(--mut)}
.av-ip b{font-family:var(--fm);font-size:14px;color:#fff;letter-spacing:.02em}
@media(max-width:640px){.av-ip{text-align:left;width:100%}}

/* ---------- the caller's live rental ---------- */
.live{border:1px solid var(--line2);margin-bottom:24px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.06),transparent 58%)}
.live.on{border-color:rgba(43,255,155,.42);box-shadow:0 0 40px rgba(43,255,155,.09)}
.live.pend{border-color:rgba(255,209,102,.42)}
.live-h{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line)}
.lv-dot{width:8px;height:8px;flex:0 0 auto;background:var(--gold);box-shadow:0 0 12px var(--gold);
  animation:bl 2.2s infinite}
.live.on .lv-dot{background:var(--acc);box-shadow:0 0 12px var(--acc)}
.lv-lb{font-family:var(--fm);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.lv-tier{margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--sub);
  border:1px solid var(--line);padding:4px 10px}

.live-b{display:flex;align-items:center;gap:clamp(18px,3vw,38px);padding:24px 22px;flex-wrap:wrap}
.lv-main{flex:1;min-width:260px}
.lv-row{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.lv-f label{display:block;font-family:var(--fm);font-size:8.5px;letter-spacing:.26em;color:var(--mut);
  margin-bottom:7px}
.lv-v{display:flex;align-items:center;gap:10px}
.lv-v b{font-family:var(--fm);font-size:19px;font-weight:700;color:#fff;letter-spacing:.01em;
  text-shadow:0 0 22px rgba(255,255,255,.28)}
.cpb{font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line);padding:5px 8px;background:none;cursor:pointer;transition:.18s}
.cpb:hover{color:#fff;border-color:var(--line3);box-shadow:var(--glow-s)}
.cpb.big{padding:8px 13px;font-size:10px}

.lv-con{display:flex;align-items:center;gap:12px;margin-top:22px;padding:13px 15px;flex-wrap:wrap;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.lv-con code{flex:1;min-width:200px;font-family:var(--fm);font-size:12.5px;color:#fff;word-break:break-all}

.lv-plist{margin-top:20px}
.pl-h{font-family:var(--fm);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sub);
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:9px}
.pl-h.empty{border-bottom:0;color:var(--mut)}
.pl{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.05)}
.pl:last-child{border-bottom:0}
.pn{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk{font-family:var(--fm);font-size:12px;color:var(--sub);flex:0 0 auto}

/* countdown ring */
.lv-ring{position:relative;width:150px;height:150px;flex:0 0 auto}
.lv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:6}
.rg-fg{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:butt;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.55));transition:stroke-dashoffset 1s linear}
.live.on .rg-fg{stroke:var(--acc);filter:drop-shadow(0 0 12px rgba(43,255,155,.65))}
.rg-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rg-t{font-family:var(--fm);font-weight:700;font-size:27px;letter-spacing:-.02em;color:#fff;
  text-shadow:0 0 22px rgba(255,255,255,.3)}
.rg-s{font-family:var(--fm);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);
  margin-top:7px}

/* ---------- history ---------- */
.hist{border:1px solid var(--line)}
.hrow{display:grid;grid-template-columns:110px minmax(0,1fr) 110px 110px;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.05)}
.hrow:last-child{border-bottom:0}
.hd{font-family:var(--fm);font-size:11.5px;color:var(--mut)}
.hl{font-size:13.5px;color:#fff}
.hp{font-family:var(--fm);font-size:11.5px;color:var(--sub)}
.hv{font-family:var(--fm);font-size:13px;color:#fff;text-align:right}
@media(max-width:640px){.hrow{grid-template-columns:1fr auto;row-gap:6px}.hp{display:none}}