/* Void — same system as choose.tg (one-screen showcase, borderless tiles,
   SF Pro / Inter + GeistMono for money), in grey-black-white only. */
@font-face { font-family: Inter; src: url(/fonts/inter.woff2) format('woff2'); font-weight: 300 700; font-display: block; }
@font-face { font-family: GeistMono; src: url(/fonts/geistmono.woff2) format('woff2'); font-weight: 300 700; font-display: block; }

:root {
  --bg: #0f0f11;
  --tile: #18181b;
  --tile-hi: #1f1f23;
  --sunk: #0a0a0c;
  --raise: #232327;
  /* Soft white: pure #fff on a dark room screen glares, so text and the
     accent sit around 85% — still clearly white, no halo. */
  --ink: #d8d8dc;
  --ink-2: #a6a6ad;
  --mute: #75757e;
  --faint: #55555d;
  --acc: #d4d4d8;
  --acc-ink: #0f0f11;
  --r: 14px;
  --r-s: 10px;
  --gap: 18px;
  --pad: 17px;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Inter, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, GeistMono, Menlo, Consolas, monospace;
  --fast: 180ms cubic-bezier(.2,.6,.3,1);
  --ease: cubic-bezier(.2,.7,.3,1);
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
/* Number changes: the old value leaves the way the new one arrives (up for +,
   down for −), 220ms — a nudge, not a slot machine. */
@keyframes tickUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes tickDown { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(240, 240, 242, .22); }

.wrap { width: min(660px, 100%); margin: 0 auto; padding: 0 18px; }

/* nav */
.nav { flex: none; padding: 16px 0 0; }
.nav .wrap { display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.logo img { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .logo img { height: 26px; } }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav .bot {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tile); border-radius: 999px; padding: 7px 14px 7px 12px;
  font-size: 13.5px; color: var(--ink-2);
  transition: background var(--fast), color var(--fast);
}
.nav .bot svg { width: 15px; height: 15px; fill: var(--mute); transition: fill var(--fast); }
.nav .bot:hover { background: var(--tile-hi); color: var(--ink); }
.nav .bot:hover svg { fill: var(--ink); }

main { flex: 1; min-height: 0; display: flex; }
main .wrap { display: flex; flex-direction: column; justify-content: safe center; gap: var(--gap); padding: 20px 18px 18px; }
#shop { display: flex; flex-direction: column; gap: var(--gap); }
#shop.boot > * { animation: rise .46s var(--ease) backwards; }
#shop.boot > *:nth-child(1) { animation-delay: .03s; }
#shop.boot > *:nth-child(2) { animation-delay: .10s; }
#shop.boot > *:nth-child(3) { animation-delay: .17s; }
#shop.boot > *:nth-child(4) { animation-delay: .24s; }
#shop.boot > *:nth-child(5) { animation-delay: .31s; }

.title { flex: none; }
h1 { margin: 0 0 6px; font-size: clamp(22px, 4.6vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
h1 span { color: var(--mute); }
.lede { margin: 0; color: var(--mute); font-size: 14px; }

/* tabs */
.tabs { flex: none; display: flex; gap: 7px; }
.tab {
  flex: 1; min-width: 0; padding: 15px 10px; border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--tile); color: var(--mute); font-size: 15.5px; font-weight: 500;
  transition: background .26s var(--ease), color .26s var(--ease);
}
.tab:hover { background: var(--tile-hi); color: var(--ink-2); }
.tab.on { background: var(--acc); color: var(--acc-ink); font-weight: 600; }
.tab:active { transform: scale(.985); }
.tab svg { width: 19px; height: 19px; flex: none; fill: currentColor; }
@media (max-width: 560px) { .tab { gap: 7px; padding: 13px 6px; font-size: 14px; } .tab svg { width: 17px; height: 17px; } }
@media (max-width: 380px) { .tab .name { display: none; } .tab svg { width: 21px; height: 21px; } }

.cap { flex: none; display: flex; align-items: baseline; gap: 9px; margin: 2px 0 calc(var(--gap) * -0.55); }
.cap b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.cap span { color: var(--faint); font-size: 13px; }

/* tiles */
.grid { flex: none; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 10px; }
.tile {
  position: relative; text-align: left; background: var(--tile);
  border-radius: var(--r); padding: 16px 16px 14px;
  transition: background .26s var(--ease), color .26s var(--ease), transform var(--fast);
}
.tile:hover { background: var(--tile-hi); transform: translateY(-2px); }
.tile:active { transform: translateY(0) scale(.985); }
.grid.swap .tile { animation: pop .42s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.tile .n { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.tile .u { color: var(--mute); font-size: 12.5px; margin-top: 1px; }
.tile .p { margin-top: 14px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.tile .s { position: absolute; top: 14px; right: 15px; font-size: 11px; color: var(--faint); }
.tile.on { background: var(--acc); color: var(--acc-ink); }
.tile.on .u, .tile.on .s { color: rgba(15, 15, 17, .6); }
.tile.on .p { color: var(--acc-ink); font-weight: 500; }
@media (max-width: 560px) { .grid { grid-template-columns: repeat(var(--cols-m, 2), 1fr); } }

/* checkout */
.checkout { flex: none; background: var(--tile); border-radius: var(--r); padding: var(--pad); }
.line { display: flex; align-items: center; gap: 22px; }
.line .what { flex: 1 1 auto; min-width: 0; }
.line .what span { display: block; color: var(--faint); font-size: 12.5px; }
.line .what b { display: block; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line .total { flex: none; margin-left: auto; text-align: right; }
.line .total span { display: block; color: var(--faint); font-size: 12.5px; }
.line .total b { font-family: var(--mono); font-size: 23px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.pay {
  flex: none; padding: 14px 26px; border-radius: var(--r-s);
  background: var(--acc); color: var(--acc-ink); font-size: 15px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 9px;
  transition: filter var(--fast), transform var(--fast);
}
.pay svg { width: 15px; height: 15px; fill: currentColor; }
.pay:hover { filter: brightness(.92); }
.pay:active { transform: translateY(1px); }
.note { margin-top: 12px; color: var(--faint); font-size: 12.5px; }
@media (max-width: 560px) {
  .line { flex-wrap: wrap; gap: 10px 12px; }
  .line .what { flex: 1 1 100%; }
  .line .what b { white-space: normal; }
  .line .total { margin-left: 0; margin-right: auto; text-align: left; }
  .pay { flex: 1; justify-content: center; }
}

.foot { flex: none; padding: 0 0 14px; color: var(--faint); font-size: 12px; }
.foot .wrap { display: flex; gap: 14px; flex-wrap: wrap; }
.foot .end { margin-left: auto; }
.foot a:hover { color: var(--ink); }

/* configurator (servers tab) */
.cfg { flex: none; display: grid; gap: 10px; }
.cfg .row {
  display: flex; align-items: center; gap: 14px;
  background: var(--tile); border-radius: var(--r); padding: 12px 12px 12px 16px;
}
/* entrance only when the tab opens, never on value changes */
.cfg.swap .row { animation: pop .42s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.cfg .row .lbl { flex: 1 1 auto; min-width: 0; }
.cfg .row .lbl b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.cfg .row .lbl span { display: block; color: var(--mute); font-size: 12.5px; font-family: var(--mono); margin-top: 1px; }
.cfg .row .val { font-family: var(--mono); font-size: 15px; color: var(--ink); min-width: 92px; text-align: center; overflow: hidden; }
.cfg .row .val span { display: inline-block; }
.cfg .row .val.up span { animation: tickUp .22s var(--ease); }
.cfg .row .val.down span { animation: tickDown .22s var(--ease); }
.line .total b span { display: inline-block; }
.line .total b.up span { animation: tickUp .26s var(--ease); }
.line .total b.down span { animation: tickDown .26s var(--ease); }
.cfg .row .btn {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-s);
  background: var(--raise); color: var(--ink-2); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.cfg .row .btn:hover { background: var(--tile-hi); color: var(--ink); }
.cfg .row .btn:active { transform: scale(.94); }
.cfg .row .btn:disabled { opacity: .35; cursor: not-allowed; }
/* proxy: choose.tg's sliding-pill switch */
.switch { position: relative; display: flex; gap: 7px; background: var(--tile); border-radius: var(--r-s); padding: 4px; flex: none; width: 240px; max-width: 100%; }
.switch .pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 7px); border-radius: 7px; background: var(--acc); transition: transform .34s var(--ease); }
.switch.right .pill { transform: translateX(calc(100% + 6px)); }
.switch button { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 9px 8px; border-radius: 7px; color: var(--mute); font-size: 13.5px; white-space: nowrap; transition: color .28s var(--ease); }
.switch button.on { color: var(--acc-ink); font-weight: 600; }
.switch button:not(.on):hover { color: var(--ink-2); }
@media (max-width: 560px) {
  .cfg .row { flex-wrap: wrap; }
  .cfg .row .lbl { flex: 1 1 100%; }
  .cfg .row .val { flex: 1; }
  .switch { width: 100%; }
}

/* parking */
.park { flex: none; background: var(--tile); border-radius: var(--r); padding: 22px var(--pad) var(--pad); animation: rise .42s var(--ease); }
.park .u { color: var(--mute); font-size: 13px; }
.park .n { font-size: clamp(22px, 5vw, 30px); font-weight: 600; letter-spacing: -.035em; word-break: break-all; margin-top: 2px; }
.park .p { margin-top: 12px; font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); }
.park .txt { margin: 14px 0 0; color: var(--mute); font-size: 14px; max-width: 46ch; }
.park .line { margin-top: 18px; }