/* 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; }
/* Top-up amount chooser (PE1 extras item 4). The same segmented-pill container as .bill-cycle
   above and .cr-packs below, so the three amount pickers in this app look like one thing.
   The chosen amount is now SHOWN as chosen: before this, tapping $50 moved the slider and gave
   no sign it had worked, so the button you had just pressed looked exactly like the two you had
   not. The slider is still there for any amount in between, and it clears the highlight the
   moment it lands somewhere no preset covers, because a highlight that stays on $50 while the
   customer is buying $65 is worse than no highlight at all. */
.bill-topup-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;
  padding:6px; border:1px solid var(--line,#222827); border-radius:13px; background:var(--surface-2,#141819);
}
html[data-mode="light"] .bill-topup-chips{ border-color:var(--border); background:var(--surface-2); }
.bill-topup-chip{ font-size:13px; font-weight:600; padding:7px 16px; border-radius:8px; transition:background .15s,color .15s,border-color .15s; }
.bill-topup-chip.on{ background:rgba(255,255,255,.92); color:#090A0C; border-color:transparent; }
html[data-mode="light"] .bill-topup-chip.on{ background:var(--text); color:var(--bg); }
.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%; }

/* Credit activity receipt list (WO-1.1) */
.bill-activity{ margin:0 0 18px; border:1px solid var(--border,#222827); border-radius:14px; background:var(--surface,#0e1112); overflow:hidden; }
.bill-activity-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border-bottom:1px solid var(--border,#222827); }
.bill-activity-head h4{ margin:0; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.bill-activity-more{ font-size:12px; padding:6px 10px; }
.bill-activity-list{ display:grid; }
.bill-activity-row{ display:grid; grid-template-columns:74px minmax(0,1fr) minmax(64px,auto) minmax(58px,auto); align-items:center; gap:10px; padding:10px 14px; border-top:1px solid color-mix(in srgb, var(--text) 7%, transparent); font-size:13px; }
.bill-activity-row:first-child{ border-top:0; }
.bill-activity-date{ color:var(--muted); white-space:nowrap; }
.bill-activity-main{ min-width:0; display:flex; align-items:center; gap:8px; }
.bill-activity-main strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--text); }
.bill-model{ flex:0 1 auto; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--border,#222827); border-radius:999px; padding:2px 7px; color:var(--muted); font-size:11px; }
.bill-activity-amount{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.bill-activity-amount.pos{ color:var(--accent,#C6FF3F); }
.bill-activity-amount.neg{ color:var(--text); }
.bill-activity-balance{ text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.bill-activity-empty{ margin:0; padding:13px 14px; font-size:13px; }

@media (max-width: 560px) {
  .bill-activity-row{ grid-template-columns:58px minmax(0,1fr) minmax(54px,auto); gap:8px; }
  .bill-activity-balance{ display:none; }
  .bill-model{ max-width:86px; }
}

/* Credit limits (WO-1.4) */
.bill-limits{ margin:0 0 18px; border:1px solid var(--border,#222827); border-radius:14px; background:var(--surface,#0e1112); overflow:hidden; }
.bill-limits-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:13px 14px; border-bottom:1px solid var(--border,#222827); }
.bill-limits-head h4{ margin:0 0 3px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.bill-limits-head p{ margin:0; font-size:12.5px; line-height:1.45; }
.bill-limits-badge{ flex:0 0 auto; border:1px solid var(--border,#222827); border-radius:999px; padding:4px 8px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em; }
.bill-limits-loading{ margin:0; padding:13px 14px; font-size:13px; }
.bill-limits-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr); gap:14px; padding:14px; }
.bill-limits-meter{ min-width:0; }
.bill-limits-hint{ margin:8px 0 0; font-size:11.5px; line-height:1.5; }
.bill-limits-form label{ display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.bill-limits-row{ display:flex; gap:8px; align-items:stretch; }
.bill-limits-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; }
.bill-limits-row input:focus{ border-color:var(--gold-2,#9ad62f); }
.bill-limits-row .btn{ white-space:nowrap; }
#bill-limits-msg{ margin:8px 0 0; min-height:16px; font-size:12px; }

@media (max-width: 680px) {
  .bill-limits-head{ flex-direction:column; }
  .bill-limits-grid{ grid-template-columns:1fr; }
}

/* Yearly per-month note under each plan price (item 18, 2026-06-26) */
.bill-yearly{ display:block; font-size:11px; color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; margin-top:3px; }

/* Monthly / Yearly billing-cycle switch (item 18, 2026-06-26) - segmented pill */
.bill-cycle{ display:inline-flex; gap:4px; margin:0 0 16px; padding:4px; border:1px solid var(--line,#222827); border-radius:11px; background:var(--surface-2,#141819); }
.bill-cyc{ font-family:inherit; font-size:13px; font-weight:600; color:var(--muted,#9aa3a0); background:transparent; border:0; border-radius:8px; padding:7px 16px; cursor:pointer; transition:background .15s,color .15s; }
.bill-cyc.on{ background:rgba(255,255,255,.92); color:#090A0C; }
.bill-cyc-save{ font-size:11px; font-weight:700; color:var(--gold,#C6FF3F); margin-left:5px; }
.bill-cyc.on .bill-cyc-save{ color:#0a7c2f; }
html[data-mode="light"] .bill-cycle{ border-color:var(--border); background:var(--surface-2); }
html[data-mode="light"] .bill-cyc{ color:var(--muted); }
html[data-mode="light"] .bill-cyc.on{ background:var(--text); color:var(--bg); }
html[data-mode="light"] .bill-cyc.on .bill-cyc-save{ color:var(--bg); opacity:.78; }

/* Top-cluster Credits summary popover content (item 17). Sits inside #cos-pop's card. */
.cr-sum{ font-family:var(--font-body); }
.cr-big{ margin:0 0 12px; font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--text); line-height:1.15; }
.cr-big-sub, .cr-big .muted{ font-size:13px; font-weight:600; color:var(--muted); }
.cr-sec{ margin:0 0 14px; }
.cr-h{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:7px; }
.cr-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--border); font-size:13.5px; color:var(--text); }
.cr-row:first-of-type{ border-top:0; }
.cr-row .muted{ font-size:11.5px; }
.cr-row strong{ font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.cr-foot{ font-size:11.5px; line-height:1.5; margin:8px 0 0; }
.cr-buy{ width:100%; margin-top:6px; }

/* Buy-more-credits pack chooser inside the Credits popover (WO-M-1 Part C, item 6).
   Groups the pack buttons in the same segmented-pill container look as .bill-cycle
   above (the app's approved segmented-pill picker style); each pack button itself
   already gets its pill shape from the global .btn/.btn-gold classes - this only
   adds the missing row layout + the price/credits sub-lines (was missing entirely). */
.cr-buy-section{ margin-top:4px; }
.cr-packs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px;
  padding:6px; border:1px solid var(--line,#222827); border-radius:13px; background:var(--surface-2,#141819);
}
html[data-mode="light"] .cr-packs{ border-color:var(--border); background:var(--surface-2); }
.cr-pack-btn{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; line-height:1.25; padding:9px 15px; }
.cr-pack-price{ font-size:12.5px; font-weight:700; }
.cr-pack-desc{ font-size:10px; font-weight:500; opacity:.8; }
.cr-prelaunch-note{ color:var(--warn,#E8BF4A); font-weight:600; }