/* getspaces.witbitz.chat — only what the main site's site.css (copied in at deploy) does not already have:
   the pricing cards and the account page. Same tokens, same dark mode. */
.wrap.narrow{max-width:820px}
h3{font-size:1.05rem; font-weight:680; letter-spacing:-.01em; margin:34px 0 0; color:var(--text)}
.banner{margin:1.6rem 0 0; max-width:64ch; padding:13px 16px; border-radius:11px; font-size:15px; color:var(--text);
  background:var(--seal-bg); border:1px solid color-mix(in srgb,var(--seal) 30%,transparent)}

/* ── pricing ─────────────────────────────────────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:820px}
.plan{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 26px 24px;
  display:flex; flex-direction:column}
.plan.featured{border-color:var(--azure); box-shadow:0 0 0 1px var(--azure)}
.plan-name{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azure-ink)}
.price{font-size:2.6rem; font-weight:720; letter-spacing:-.03em; margin:6px 0 4px; color:var(--text)}
.price span{font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:4px}
.plan ul.plain{flex:1; margin-bottom:22px}
.plan .btn{align-self:flex-start}

/* ── account ─────────────────────────────────────────────────────────────────────────────────── */
.acct-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.acct-head h2{overflow-wrap:anywhere}
.plan-line{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:15px; color:var(--muted)}
.plan-badge{font-weight:700; font-size:15px; color:var(--text); background:var(--line-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 12px}
.plan-card .note{margin-top:10px}
.msg{font-size:14px; color:var(--muted); margin:12px 0 0; min-height:1.2em}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:16px 18px; min-width:0}
.stat .k{display:block; font-size:13px; color:var(--muted)}
.stat .v{display:block; font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:var(--text); margin-top:2px;
  font-variant-numeric:tabular-nums}
.stat .s{display:block; font-size:12.5px; color:var(--faint); margin-top:2px}
.table-wrap{overflow-x:auto; margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--card)}
table.days{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums}
table.days th{text-align:left; font-weight:600; font-size:12.5px; color:var(--muted); padding:10px 14px;
  border-bottom:1px solid var(--line); white-space:nowrap}
table.days td{padding:9px 14px; border-top:1px solid var(--line-2); color:var(--text); white-space:nowrap}
table.days tr:first-child td{border-top:none}
table.days th:not(:first-child), table.days td:not(:first-child){text-align:right}

@media (max-width:720px){
  .plans{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}