/* Grok subscription tab. Uses the design tokens and components of /assets/byoc-ui.css
   (panel, field, plan-card, recharge-progress, progress-steps, charge-substeps, session-help-dialog);
   no new colors. Type scale 12/13/15/17/21/28, weights 400/600, spacing in steps of 4. */
#view-grok .feature-line { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 24px; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-footnote); }
#view-grok .feature-line li { display: inline-flex; align-items: center; gap: 8px; }
#view-grok .feature-line li::before { content: "✓"; color: var(--success); font-weight: 600; }
#view-grok .grok-key-hint { color: var(--muted); font-size: var(--fs-footnote); line-height: 1.6; }
#view-grok .grok-key-hint[hidden] { display: none; }
#view-grok .grok-maintenance { display: flex; gap: 12px; align-items: flex-start; }
#view-grok .grok-maintenance .ui-icon { margin-top: 2px; color: var(--warning); }
#view-grok .message.warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
#view-grok .message.ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
#view-grok #grokSsoFormat.is-ok { color: var(--success); }
#view-grok #grokSsoFormat.is-warn { color: var(--warning); }

/* ── step 2: account, plans, card + summary ─────────────────────────────────────────── */
#view-grok .grok-account-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-soft); }
#view-grok .grok-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: var(--fs-sub); font-weight: 600; text-transform: uppercase; }
#view-grok .grok-account-copy { min-width: 0; flex: 1; }
#view-grok .grok-account-copy b { display: block; overflow: hidden; font-size: var(--fs-sub); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#view-grok .grok-account-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); }

#view-grok .grok-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 16px; }
#view-grok .grok-plan-head b { font-size: var(--fs-body); font-weight: 600; }
#view-grok .grok-interval { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fill); }
#view-grok .grok-interval button { min-width: 72px; min-height: 32px; padding: 0 16px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font: inherit; font-size: var(--fs-footnote); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
#view-grok .grok-interval button:hover { color: var(--text); }
#view-grok .grok-interval button.active { color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-weight: 600; }
#view-grok .grok-interval button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#view-grok .grok-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
#view-grok .grok-plan-grid .plan-card > span { justify-content: flex-start; min-height: 148px; gap: 4px; padding: 16px; }
#view-grok .grok-plan-name { padding-right: 24px; }
#view-grok .grok-plan-badge { display: inline-flex; padding: 0 8px; border-radius: 999px; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); font-size: var(--fs-caption); font-style: normal; line-height: 20px; }
#view-grok .grok-plan-badge.is-plain { color: var(--muted); background: var(--fill); }
#view-grok .grok-plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: auto; padding-top: 12px; font-variant-numeric: tabular-nums; }
#view-grok .grok-plan-price strong { font-size: var(--fs-title3); font-weight: 600; letter-spacing: -.01em; }
#view-grok .grok-plan-price small { color: var(--muted); font-size: var(--fs-footnote); }
#view-grok .grok-plan-sub { min-height: 18px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; font-variant-numeric: tabular-nums; }
#view-grok .grok-plan-sub s { color: var(--faint); }
#view-grok .grok-plan-sub .is-checked { color: var(--success); }
#view-grok .plan-card.is-unavailable { cursor: not-allowed; }
#view-grok .plan-card.is-unavailable > span { opacity: .5; }
#view-grok .grok-plan-grid.is-empty { display: block; }
#view-grok .grok-plan-note { margin-top: 12px; color: var(--faint); font-size: var(--fs-caption); line-height: 1.5; }

#view-grok .grok-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 24px; align-items: start; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
#view-grok .grok-card-panel { min-width: 0; }
#view-grok .grok-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#view-grok .grok-card-head b { font-size: var(--fs-body); font-weight: 600; }
#view-grok .grok-secure { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-caption); white-space: nowrap; }
#view-grok .grok-secure .ui-icon { width: 14px; height: 14px; color: var(--success); }
#view-grok .grok-paste-card { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--primary); background: transparent; font: inherit; font-size: var(--fs-footnote); font-weight: 600; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
#view-grok .grok-paste-card:hover { border-color: var(--primary); background: var(--primary-soft); }
#view-grok .grok-paste-hint { margin: 8px 0 16px; color: var(--muted); font-size: var(--fs-caption); }
#view-grok .grok-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
#view-grok .grok-card-grid .full { grid-column: 1 / -1; }
#view-grok .grok-card-panel .message { margin-top: 0; }

#view-grok .grok-summary { position: sticky; top: 96px; display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: var(--surface-soft); }
#view-grok .grok-summary-title { color: var(--muted); font-size: var(--fs-footnote); font-weight: 600; }
#view-grok .grok-summary-plan { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: -8px 0 0; }
#view-grok .grok-summary-plan span { font-size: var(--fs-body); font-weight: 600; }
#view-grok .grok-summary-plan small { color: var(--muted); font-size: var(--fs-footnote); }
#view-grok .grok-summary-lines { display: grid; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
#view-grok .grok-summary-lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--muted); font-size: var(--fs-footnote); }
#view-grok .grok-summary-lines dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
#view-grok .grok-summary-lines .grok-summary-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); }
#view-grok .grok-summary-total dt { font-size: var(--fs-sub); font-weight: 600; }
#view-grok .grok-summary-total dd { font-size: var(--fs-title3); font-weight: 600; letter-spacing: -.01em; }
#view-grok .grok-quote-state { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; color: var(--muted); font-size: var(--fs-caption); }
#view-grok .grok-quote-state::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--warning); animation: pulse 1.2s ease-in-out infinite; }
#view-grok .grok-quote-state.is-ok::before { background: var(--success); animation: none; }
#view-grok .grok-quote-state.is-error { color: var(--danger); }
#view-grok .grok-quote-state.is-error::before { background: var(--danger); animation: none; }
#view-grok .grok-renewal { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px; border-radius: var(--r-md); color: var(--text); background: var(--primary-soft); font-size: var(--fs-caption); line-height: 1.55; }
#view-grok .grok-renewal .ui-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--primary); }
#view-grok .grok-submit { width: 100%; }
#view-grok .grok-summary-foot { color: var(--faint); font-size: var(--fs-caption); line-height: 1.55; }

/* ── step 3: progress (GPT recharge-progress component, five phases) ──────────────── */
#view-grok .grok-progress { display: grid; gap: 24px; width: 100%; max-width: 760px; margin-inline: auto; }
#view-grok .grok-progress.hidden { display: none; }
#view-grok .grok-progress .progress-header { padding-bottom: 8px; }
#view-grok .grok-progress-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
#view-grok .grok-progress-steps li { min-height: 76px; }
#view-grok .grok-progress .charge-substeps { margin: 0; }
#view-grok .grok-progress .charge-substeps.hidden { display: none; }
#view-grok .grok-progress .message { margin: 0; }
#view-grok .grok-progress .message.hidden { display: none; }
#view-grok .grok-progress .message.warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
#view-grok .grok-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 16px 20px; border-radius: var(--r-md); background: var(--surface-soft); }
#view-grok .grok-facts:empty { display: none; }
#view-grok .grok-facts div { min-width: 0; }
#view-grok .grok-facts dt { color: var(--muted); font-size: var(--fs-caption); }
#view-grok .grok-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: var(--fs-footnote); font-variant-numeric: tabular-nums; }
#view-grok .grok-progress .progress-footer-actions .hidden { display: none; }
#view-grok .grok-progress.active .progress-sync i, #view-grok .grok-progress.pending .progress-sync i { animation: pulse 1.2s ease-in-out infinite; }
#view-grok .grok-progress.is-terminal .progress-sync i { animation: none; }

/* ── my orders: collapsed by default ──────────────────────────────────────────────── */
#view-grok .grok-orders { margin-top: 24px; padding: 8px 24px 8px 8px; }
#view-grok .grok-orders-head { display: flex; align-items: center; gap: 8px; }
#view-grok .grok-orders-toggle { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; border-radius: var(--r-md); color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
#view-grok .grok-orders-toggle:hover { background: var(--fill); }
#view-grok .grok-orders-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-grok .grok-orders-heading { min-width: 0; }
#view-grok .grok-orders-heading b { display: block; font-size: var(--fs-body); font-weight: 600; }
#view-grok .grok-orders-heading small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-footnote); }
#view-grok .grok-orders-heading small .is-busy { color: var(--warning); }
#view-grok .grok-chevron { width: 10px; height: 10px; flex: 0 0 10px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
#view-grok .grok-orders-toggle[aria-expanded="true"] .grok-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
#view-grok .grok-orders-body { padding: 4px 0 16px 16px; }
#view-grok .grok-orders-body[hidden] { display: none; }
#view-grok .grok-orders-list { display: grid; margin: 0; }
#view-grok .grok-order-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 104px 96px; align-items: center; gap: 16px; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
#view-grok .grok-order-row:first-child { border-top: 0; }
#view-grok .grok-order-row:hover { border-radius: var(--r-sm); background: var(--fill); }
#view-grok .grok-order-row:hover + .grok-order-row { border-top-color: transparent; }
#view-grok .grok-order-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-sm); }
#view-grok .grok-order-row > span { min-width: 0; }
#view-grok .grok-order-row b { display: block; font-size: var(--fs-footnote); font-weight: 600; }
#view-grok .grok-order-row small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
#view-grok .grok-order-amount { font-size: var(--fs-footnote); font-variant-numeric: tabular-nums; }
#view-grok .grok-order-time { color: var(--muted); font-size: var(--fs-caption); text-align: right; font-variant-numeric: tabular-nums; }
#view-grok .grok-order-row .status { justify-self: start; font-size: var(--fs-caption); }
#view-grok .grok-order-row.is-current { background: var(--primary-soft); border-radius: var(--r-sm); }
#view-grok .grok-orders-more { display: flex; justify-content: center; margin-top: 8px; }
#view-grok .grok-orders-more .hidden { display: none; }
#view-grok .grok-orders-list > .grok-key-hint { padding: 8px 12px; }

/* ── sso guide dialog (session-help-dialog component) ─────────────────────────────── */
.grok-sso-dialog kbd { display: inline-grid; min-width: 22px; height: 22px; margin: 0 2px; padding: 0 6px; place-items: center; border-radius: 6px; color: var(--text); background: var(--fill); box-shadow: inset 0 -1px 0 var(--line-strong); font-size: var(--fs-caption); }
.grok-sso-dialog code { padding: 0 4px; border-radius: 4px; color: var(--text); background: var(--fill); font-size: var(--fs-caption); }

@media (max-width: 960px) {
  #view-grok .grok-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-grok .grok-checkout { grid-template-columns: 1fr; }
  #view-grok .grok-summary { position: static; }
}
@media (max-width: 640px) {
  #view-grok #grokSteps li { white-space: nowrap; }
  #view-grok #grokSteps li:not(:last-child)::after { width: 16px; margin: 0 8px; }
  #view-grok .grok-plan-head { flex-wrap: wrap; margin-top: 24px; }
  #view-grok .grok-interval { width: 100%; }
  #view-grok .grok-interval button { flex: 1; }
  #view-grok .grok-plan-grid .plan-card > span { min-height: 132px; padding: 12px; }
  #view-grok .grok-card-grid { grid-template-columns: 1fr; }
  #view-grok .grok-checkout { margin-top: 24px; padding-top: 24px; }
  #view-grok .grok-summary { padding: 16px; }
  #view-grok .grok-progress-steps { grid-template-columns: minmax(0, 1fr); }
  #view-grok .grok-progress-steps li { min-height: 56px; }
  #view-grok .grok-facts { grid-template-columns: 1fr; }
  #view-grok .grok-orders { padding: 4px; }
  #view-grok .grok-orders-body { padding: 0 8px 12px; }
  #view-grok .grok-order-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  #view-grok .grok-order-row .status { justify-self: end; }
  #view-grok .grok-order-amount { grid-column: 1; grid-row: 2; color: var(--muted); font-size: var(--fs-caption); }
  #view-grok .grok-order-time { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  #view-grok .grok-quote-state::before, #view-grok .grok-progress .progress-sync i { animation: none; }
  #view-grok .grok-chevron { transition: none; }
}

#view-grok .grok-3ds { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: 14px; background: var(--primary-soft); }
#view-grok .grok-3ds-head b { display: block; color: var(--text); font-size: var(--fs-footnote); font-weight: 600; }
#view-grok .grok-3ds-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-caption); line-height: 1.6; }
#view-grok .grok-3ds .button { width: 100%; min-height: 44px; }
#view-grok .grok-3ds .message { margin: 0; }