/* Mythox — Plan & credits (Phase 5b). REIS skin, namespaced .bill-* */
.bill-meter { margin: 12px 0 18px; }
.bill-meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.bill-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.bill-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s ease; }

.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 6px; }
.bill-card {
  position: relative; border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 16px 16px; background: var(--surface); display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .3s var(--ease);
}
.bill-card:hover { transform: translateY(-3px); box-shadow: 0 10px 34px var(--glow); border-color: var(--accent); }
.bill-card.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--gold-line) inset; }
.bill-tag {
  position: absolute; top: 12px; right: 12px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-on-accent); background: var(--accent); padding: 3px 8px; border-radius: 999px; font-weight: 700;
}
.bill-name { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bill-price { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 30px; color: var(--text); margin: 4px 0 12px; }
.bill-price .bill-per { font-size: 14px; color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.bill-feats { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.bill-feats li { position: relative; padding-left: 18px; font-size: 13px; color: var(--text); margin: 7px 0; line-height: 1.4; }
.bill-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.bill-btn { width: 100%; }
.bill-note { margin-top: 14px; font-size: 12.5px; }

@media (max-width: 560px) {
  .bill-grid { grid-template-columns: 1fr; }
}

/* Bring-your-own-key section (MAX) — Reis 2026-06-12 */
.bill-byo{ margin-top:18px; padding:18px; border:1px solid var(--line,#222827); border-radius:14px; background:var(--surface,#0e1112); }
.bill-byo.locked{ border-style:dashed; }
.bill-byo-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.bill-byo-head h4{ margin:0; font-size:15px; }
.bill-byo-badge{ font-size:10px; font-weight:800; letter-spacing:.05em; color:var(--gold-ink,#0a0c08); background:var(--gold,#C6FF3F); border-radius:6px; padding:2px 8px; opacity:.65; }
.bill-byo-badge.on{ opacity:1; }
.bill-byo p{ font-size:13px; line-height:1.55; margin:0 0 12px; }
.bill-byo a{ color:var(--gold,#C6FF3F); white-space:nowrap; }
.bill-byo-status{ font-size:12.5px; margin-bottom:10px; }
.bill-byo-row{ display:flex; gap:8px; }
.bill-byo-row input{
  flex:1; min-width:0; font-family:inherit; font-size:13.5px; color:var(--ivory,#f2f5f3);
  background:var(--surface-2,#141819); border:1px solid var(--line,#222827); border-radius:9px; padding:10px 12px; outline:none; transition:border-color .15s;
}
.bill-byo-row input:focus{ border-color:var(--gold-2,#9ad62f); }
.bill-byo-clear{ margin-top:10px; font-size:12.5px; padding:7px 14px; }

/* Buy more credits (report 28 §35.1) — $5-step amount slider */
.bill-buy{ margin:-6px 0 18px; }
.bill-buy-toggle{ font-size:13px; padding:8px 14px; }
.bill-buy-body{ margin-top:10px; padding:16px; border:1px solid var(--border,#222827); border-radius:14px; background:var(--surface,#0e1112); }
.bill-buy-body p{ font-size:13px; line-height:1.55; }
.bill-topup-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.bill-topup-chip{ font-size:13px; padding:6px 14px; }
.bill-topup-range{ width:100%; accent-color:var(--accent,#C6FF3F); margin:2px 0 10px; cursor:pointer; }
.bill-topup-readout{ font-size:15px; margin-bottom:14px; }
.bill-topup-readout strong{ color:var(--text); }
.bill-topup-buy{ width:100%; }