/* AI 利用枠 (quota-format.js quotaWidget) and the マイページ 利用履歴 list. Colours follow the page: the AI pages'
 * --g-* tokens (with their dark theme), otherwise the site chrome --sc-* tokens. */
.fq{--fq-text:var(--g-text,var(--sc-ink,#0d1424));--fq-muted:var(--g-text-2,var(--sc-muted,#5b6577));--fq-faint:var(--g-text-3,var(--sc-faint,#8a93a6));
  --fq-track:var(--g-line,#e6eaf2);--fq-fill:#3b6fd4;--fq-low:#c87800;--fq-alert:#c9214b;--fq-line:var(--g-line-2,var(--sc-line,#dfe4ee));
  display:grid;gap:8px;min-width:0;color:var(--fq-text)}
.fq [hidden]{display:none!important}
.fq{--fq-track:#dfe7f3;--fq-fill:#2f6fd6;gap:0;container-type:inline-size}
/* A usage panel: a sentence on how the month is going, rows with the same columns — name and reset date, a thin bar
 * (the whole allowance is the track, what is left is filled), the share left — then 追加クレジット and the way on. */
.fq__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fq__head h3{margin:0;font-size:15px;font-weight:650;color:var(--fq-text)}
.fq__plan{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:6px;background:var(--g-hover,var(--sc-soft,#f2f4f8));color:var(--fq-muted);font-size:12px;font-weight:600}
/* Above the page's own paragraph rules (.customer-account .portal-card p). */
.fq>p.fq__status,.portal-card .fq>p.fq__status{margin:0 0 14px;font-size:17px;font-weight:650;line-height:1.5;color:var(--fq-text)}
.portal-card .fq>p.fq__status{margin-top:10px}
.fq__row{display:grid;grid-template-columns:minmax(170px,210px) minmax(0,1fr) 84px;align-items:center;gap:22px;padding:16px 0;border-top:1px solid var(--fq-line);min-width:0}
.fq__row--credits{grid-template-columns:minmax(0,1fr) auto;align-items:start}
.fq__name{display:grid;gap:3px;min-width:0}
.fq__name strong{font-size:14px;font-weight:600;line-height:1.45;color:var(--fq-text)}
.fq__name small{font-size:12.5px;line-height:1.5;color:var(--fq-faint)}
.fq__value{font-size:13px;color:var(--fq-muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fq__amount{font-size:15px;font-weight:650;color:var(--fq-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.fq__bar{height:6px;border-radius:999px;background:var(--fq-track);overflow:hidden}
.fq__bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--fq-fill);transition:width .5s ease}
.fq__bar[data-level=low] i{background:#d98a0b}
.fq__bar[data-level=empty]{background:#f6dfe5}
@media (prefers-reduced-motion:reduce){.fq__bar i{transition:none}}
.fq__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin-top:8px}
.fq__foot>small{font-size:12.5px;color:var(--fq-faint)}
.fq__actions{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
.fq__btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--fq-line);border-radius:10px;background:var(--g-bg,#fff);color:var(--fq-text);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.fq__btn:hover{border-color:var(--fq-muted)}
.fq__btn--primary{background:#244e84;border-color:#244e84;color:#fff}
.fq__btn--primary:hover{background:#173e70;border-color:#173e70}
@container (max-width:420px){.fq__row{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}.fq__row>.fq__bar{grid-column:1/-1;grid-row:2}}
.fq--compact .fq__row{padding:13px 0}.fq--compact>p.fq__status{font-size:16px}
.mb-card .fq__note{margin:0}

/* マイページ「利用履歴」 */
.fq-usage{display:grid;gap:16px;min-width:0}
.fq-usage .mb-card{min-width:0}
.fq-usage__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 0}
.fq-usage__kpi{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--sc-line,#e5e8f0);border-radius:12px;min-width:0}
.fq-usage__kpi span{font-size:12px;color:var(--sc-muted,#5b6577)}
.fq-usage__kpi strong{font-size:18px;line-height:1.35;color:var(--sc-ink,#0d1424);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fq-usage__kpi small{font-size:11.5px;color:var(--sc-faint,#8a93a6)}
.fq-usage__chart{margin:16px 0 0}
.fq-usage__chart figcaption,.fq-usage__subhead{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--sc-muted,#5b6577)}
.fq-usage__bars{display:flex;align-items:flex-end;gap:3px;height:72px;padding:0 0 1px;border-bottom:1px solid var(--sc-line,#e5e8f0)}
.fq-usage__bars span{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end}
.fq-usage__bars i{display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0;background:#2b5fd9}
.fq-usage__bars span[data-zero] i{background:var(--sc-soft,#eef0f6)}
.fq-usage__axis{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--sc-faint,#8a93a6)}
.fq-usage__kinds{display:grid;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.fq-usage__kinds li{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:1.6;padding:6px 0;border-bottom:1px dashed var(--sc-line,#e5e8f0)}
.fq-usage__kinds li:last-child{border-bottom:0}
.fq-usage__kinds strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fq-history{display:grid;margin:0;padding:0;list-style:none}
.fq-history li{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;padding:12px 2px;border-bottom:1px solid var(--sc-line,#e5e8f0)}
.fq-history li:last-child{border-bottom:0}
.fq-history time{font-size:12.5px;color:var(--sc-muted,#5b6577);font-variant-numeric:tabular-nums;white-space:nowrap}
.fq-history__what{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.fq-history__what b{font-size:13.5px;font-weight:650;color:var(--sc-ink,#0d1424)}
.fq-history__what span{font-size:12.5px;color:var(--sc-muted,#5b6577);overflow-wrap:anywhere}
.fq-history__change{font-size:13.5px;font-weight:650;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sc-ink,#0d1424)}
.fq-history__change[data-sign=plus]{color:#17603f}
.fq-history__change[data-sign=none]{color:var(--sc-faint,#8a93a6);font-weight:500}
.fq-history__change span{display:block}
.fq-usage__more{display:flex;justify-content:center;margin-top:12px}
@media (max-width:640px){
  .fq-usage__kpis{grid-template-columns:minmax(0,1fr)}
  .fq-history li{grid-template-columns:minmax(0,1fr) auto}
  .fq-history time{grid-column:1/-1}
}