/* =====================================================================
 * EFL Credits — Billing & Plan view + topbar credits pill
 * Renders inside the EFL Engine dashboard (.content). Panels reuse the
 * theme's .glass-card, so surfaces follow the active Dark/Light theme.
 * Accent colors follow the theme tokens (--blue/--purple/--pink/--green
 * /--efl-grad-*) with the asset palette as fallbacks, and can be tuned
 * from Application Settings → Billing & Plan.
 * ===================================================================== */

.efl-bill{
	--b-blue:var(--efl-bill-accent,var(--blue,#2f8cff));
	--b-cyan:var(--cyan,#28f2ff);
	--b-purple:var(--efl-bill-accent2,var(--purple,#8b42ff));
	--b-popular:var(--efl-bill-popular,var(--b-purple));
	--b-violet:#6d5cff;
	--b-pink:var(--pink,#d948ff);
	--b-green:var(--green,#24e6a1);
	--b-feature:var(--efl-bill-feature,var(--b-purple));
	--b-text:var(--efl-bill-text,var(--white,#dce7ff));
	--b-muted:var(--efl-bill-muted,var(--muted,#8b9ab8));
	--b-line:var(--efl-bill-border,var(--line,rgba(126,154,255,.16)));
	--b-line-2:var(--bill-line-strong,color-mix(in srgb,var(--b-blue) 55%,transparent));
	--b-fill:var(--efl-bill-card-bg,rgba(255,255,255,.04));
	--b-fill-2:color-mix(in srgb,var(--b-fill) 55%,transparent);
	--b-track:var(--efl-bill-track,rgba(126,154,255,.16));
	--b-grad:linear-gradient(120deg,var(--efl-grad-1,var(--b-blue)),var(--efl-grad-2,var(--b-violet)),var(--efl-grad-3,var(--b-pink)));
	--b-radius:18px;
	font-family:var(--font,"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif);
	color:var(--b-text);
}

.efl-bill *{ box-sizing:border-box; }
.efl-bill .panel{ padding:clamp(18px,2.1vw,26px); }
.efl-bill .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
.efl-bill .panel-head h2{ display:flex; align-items:center; gap:9px; margin:0; font-size:16px; font-weight:700; letter-spacing:.2px; color:var(--b-text); }
.efl-bill .panel-head h2 svg{ width:18px; height:18px; color:var(--b-purple); flex:0 0 auto; }

/* ---------- Header ---------- */
.efl-bill-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 22px; }
.efl-bill-h1{ margin:0; font-size:clamp(24px,2.6vw,30px); font-weight:800; letter-spacing:-.4px; line-height:1.1; }
.efl-bill-lead{ margin:6px 0 0; color:var(--b-muted); font-size:14px; }
.efl-bill-back{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; height:40px; padding:0 16px; border-radius:11px; cursor:pointer; font:600 13.5px/1 var(--font,inherit); color:var(--b-text); background:var(--b-fill); border:1px solid var(--b-line); transition:border-color .16s,background .16s; }
.efl-bill-back:hover{ border-color:var(--b-line-2); background:var(--b-fill-2); }
.efl-bill-back svg{ width:17px; height:17px; }

.efl-bill-banner{ margin:0 0 18px; padding:13px 16px; border-radius:12px; font-size:13.5px; font-weight:600; border:1px solid var(--b-line); }
.efl-bill-banner.is-ok{ color:var(--b-green); background:color-mix(in srgb,var(--b-green) 12%,transparent); border-color:color-mix(in srgb,var(--b-green) 35%,transparent); }
.efl-bill-banner.is-warn{ color:#ffb454; background:rgba(255,180,84,.12); border-color:rgba(255,180,84,.35); }

/* ---------- Grids ---------- */
.efl-bill-grid{ display:grid; gap:18px; margin:0 0 18px; }
.efl-bill-grid--top{ grid-template-columns:minmax(300px,.92fr) 1.42fr; }
.efl-bill-grid--3{ grid-template-columns:1.5fr 1fr 1fr; }
.efl-bill-grid--2{ grid-template-columns:1.5fr 1fr; }
.efl-bill-grid--1{ grid-template-columns:1fr; }

/* ---------- Current Balance ---------- */
.efl-bill-balance{ position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; min-height:230px; }
.efl-bill-balance-info{ position:relative; z-index:2; flex:1 1 auto; }
.efl-bill-balance-label{ font-size:16px; font-weight:700; }
.efl-bill-balance-sub{ margin-top:4px; font-size:13px; color:var(--b-muted); }
.efl-bill-balance-num{ margin:12px 0 2px; font-size:clamp(38px,5vw,56px); font-weight:800; line-height:1; letter-spacing:-1.5px; }
.efl-bill-balance-num span{ font-size:.42em; font-weight:700; letter-spacing:0; background:var(--b-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.efl-bill-balance-usd{ font-size:14px; font-weight:600; color:var(--b-muted); }
.efl-bill-pill{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 14px; border-radius:11px; font-size:13px; font-weight:600; color:var(--b-text); background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-pill svg{ width:15px; height:15px; color:var(--b-purple); }
.efl-bill-pill.is-warn{ color:#ffb454; border-color:rgba(255,180,84,.4); }
.efl-bill-pill.is-warn svg{ color:#ffb454; }
.efl-bill-pill.is-trial{ color:var(--b-green); border-color:color-mix(in srgb,var(--b-green) 40%,transparent); }
.efl-bill-pill.is-trial svg{ color:var(--b-green); }
.efl-bill-card-wrap{ position:relative; z-index:1; flex:0 0 auto; width:min(48%,300px); display:flex; justify-content:flex-end; }
.efl-bill-card-art{ width:100%; height:auto; filter:drop-shadow(0 22px 44px rgba(109,92,255,.4)); transform:rotate(-5deg); }

/* ---------- Choose Your Plan ---------- */
.efl-bill-plan-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); gap:14px; }
.efl-bill-plan{ position:relative; display:flex; flex-direction:column; padding:18px 16px; border-radius:14px; background:var(--b-fill); border:1px solid var(--b-line); transition:border-color .16s,transform .16s,box-shadow .16s; }
.efl-bill-plan:hover{ border-color:var(--b-line-2); transform:translateY(-2px); }
.efl-bill-plan.is-popular{ border-color:transparent; background:color-mix(in srgb,var(--b-popular) 10%,var(--b-fill)); box-shadow:0 0 0 1.5px var(--b-popular),0 18px 40px -22px var(--b-popular); }
.efl-bill-tag{ position:absolute; top:14px; right:14px; padding:4px 10px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.8px; color:#fff; background:var(--b-grad); }
.efl-bill-plan-name{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; }
.efl-bill-plan-ic{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-plan-ic img{ width:20px; height:20px; display:block; }
.efl-bill-plan-ic.is-crown svg{ width:18px; height:18px; color:#ffd16b; }
.efl-bill-plan-credits{ margin:16px 0 2px; font-size:30px; font-weight:800; line-height:1; letter-spacing:-.5px; }
.efl-bill-plan-credits span{ font-size:.46em; font-weight:600; color:var(--b-muted); letter-spacing:0; }
.efl-bill-plan-price{ font-size:14px; font-weight:600; color:var(--b-muted); }
.efl-bill-plan-price small{ font-weight:500; }
.efl-bill-plan-trial{ margin-top:9px; font-size:12px; font-weight:600; color:var(--b-green); letter-spacing:.1px; }
.efl-bill-plan-btn{ margin-top:16px; width:100%; height:42px; border-radius:11px; cursor:pointer; font:700 13.5px/1 var(--font,inherit); color:var(--b-text); background:var(--b-fill); border:1px solid var(--b-line); transition:border-color .16s,filter .16s,background .16s; }
.efl-bill-plan-btn:hover:not(:disabled){ border-color:var(--b-line-2); }
.efl-bill-plan-btn:disabled{ opacity:.55; cursor:default; }
.efl-bill-plan.is-popular .efl-bill-plan-btn{ color:#fff; border-color:transparent; background:var(--b-grad); }
.efl-bill-plan.is-popular .efl-bill-plan-btn:hover{ filter:brightness(1.06); }
.efl-bill-plan.is-current{ box-shadow:0 0 0 1.5px var(--b-green); }

/* ---------- Top up once ---------- */
.efl-bill-head-note{ font-size:12.5px; color:var(--b-muted); }
.efl-bill-topup-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.efl-bill-pack{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:13px; background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-pack-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.efl-bill-pack-name{ font-size:15px; font-weight:700; }
.efl-bill-pack-credits{ font-size:12.5px; font-weight:600; color:var(--b-muted); }
.efl-bill-pack-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.efl-bill-pack-price{ font-size:18px; font-weight:800; letter-spacing:-.4px; }
.efl-bill-pack-btn{ height:34px; padding:0 18px; border-radius:9px; cursor:pointer; font:700 12.5px/1 var(--font,inherit); color:var(--b-purple); background:transparent; border:1px solid var(--b-line-2); transition:background .16s,color .16s; }
.efl-bill-pack-btn:hover{ background:var(--b-purple); color:#fff; border-color:transparent; }

/* ---------- Recent Activity ---------- */
.efl-bill-ledger{ list-style:none; margin:0; padding:0; }
.efl-bill-row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; padding:11px 4px; border-bottom:1px solid var(--b-line); }
.efl-bill-row:last-child{ border-bottom:0; }
.efl-bill-badge{ padding:4px 10px; border-radius:7px; font-size:11px; font-weight:700; letter-spacing:.3px; }
.efl-bill-badge.is-credit{ color:var(--b-green); background:color-mix(in srgb,var(--b-green) 14%,transparent); }
.efl-bill-badge.is-debit{ color:var(--b-pink); background:color-mix(in srgb,var(--b-pink) 14%,transparent); }
.efl-bill-reason{ font-size:13.5px; font-weight:600; color:var(--b-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.efl-bill-when{ font-size:12.5px; color:var(--b-muted); white-space:nowrap; }
.efl-bill-amt{ font-size:13.5px; font-weight:800; white-space:nowrap; }
.efl-bill-amt.is-pos{ color:var(--b-green); }
.efl-bill-amt.is-neg{ color:var(--b-pink); }
.efl-bill-viewall{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:14px; height:42px; border-radius:11px; cursor:pointer; font:600 13px/1 var(--font,inherit); color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); transition:color .16s,border-color .16s; }
.efl-bill-viewall:hover{ color:var(--b-text); border-color:var(--b-line-2); }
.efl-bill-viewall svg{ width:16px; height:16px; }
.efl-bill-empty-state{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:26px 10px; text-align:center; }
.efl-bill-empty-state img{ width:108px; height:auto; opacity:.9; }
.efl-bill-empty-state p{ margin:0; font-size:13px; color:var(--b-muted); max-width:220px; }

/* ---------- Usage Overview ---------- */
.efl-bill-period{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-period svg{ width:14px; height:14px; }
.efl-bill-usage-body{ display:flex; align-items:center; gap:18px; }
.efl-bill-donut{ flex:0 0 auto; width:148px; height:148px; }
.efl-bill-donut svg{ width:100%; height:100%; }
.efl-bill-donut-track{ stroke:var(--b-track); }
.efl-bill-donut-arc{ stroke:url(#eflDonut); }
#eflDonut stop:first-child{ stop-color:var(--b-blue); }
#eflDonut stop:last-child{ stop-color:var(--b-popular); }
.efl-bill-donut-pct{ fill:var(--b-text); font-size:26px; font-weight:400; font-family:var(--font,inherit); }
.efl-bill-donut-sub{ fill:var(--b-muted); font-size:11px; font-weight:500; font-family:var(--font,inherit); }
.efl-bill-usage-stats{ flex:1 1 auto; display:flex; flex-direction:column; gap:14px; }
.efl-bill-usage-stats>div{ display:flex; flex-direction:column; gap:2px; }
.efl-bill-usage-stats span{ font-size:12.5px; color:var(--b-muted); }
.efl-bill-usage-stats b{ font-size:19px; font-weight:800; letter-spacing:-.3px; }
.efl-bill-rem{ color:var(--b-purple); }

/* ---------- Payment Method ---------- */
.efl-bill-pay-card{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:13px; background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-pay-brand{ flex:0 0 auto; display:inline-grid; place-items:center; min-width:54px; height:34px; padding:0 10px; border-radius:7px; font-size:13px; font-weight:800; font-style:italic; letter-spacing:.5px; color:#fff; background:linear-gradient(135deg,#1a3a8f,#2f6bff); }
.efl-bill-pay-brand[data-brand="mastercard"]{ background:linear-gradient(135deg,#eb001b,#f79e1b); font-style:normal; }
.efl-bill-pay-brand[data-brand="amex"]{ background:linear-gradient(135deg,#108de0,#1b6fd0); }
.efl-bill-pay-brand.is-placeholder{ background:var(--b-fill); border:1px solid var(--b-line); color:var(--b-muted); }
.efl-bill-pay-brand.is-placeholder svg{ width:20px; height:20px; }
.efl-bill-pay-meta{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.efl-bill-pay-dots{ font-size:14.5px; font-weight:700; letter-spacing:1px; color:var(--b-text); }
.efl-bill-pay-exp{ font-size:12px; color:var(--b-muted); }
.efl-bill-pay-more{ flex:0 0 auto; color:var(--b-muted); display:inline-flex; }
.efl-bill-pay-more svg{ width:18px; height:18px; }
.efl-bill-pay-card.is-empty .efl-bill-pay-dots{ color:var(--b-muted); }
.efl-bill-pay-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:13px; height:46px; border-radius:12px; cursor:pointer; font:700 13.5px/1 var(--font,inherit); color:var(--b-text); background:var(--b-fill); border:1px solid var(--b-line-2); transition:border-color .16s,background .16s; }
.efl-bill-pay-btn:hover{ background:var(--b-fill-2); border-color:var(--b-purple); }
.efl-bill-pay-btn svg{ width:17px; height:17px; }
.efl-bill-pay-empty{ margin:13px 0 0; font-size:13px; color:var(--b-muted); }
.efl-bill-pay-secure{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--b-muted); }
.efl-bill-pay-secure svg{ width:15px; height:15px; }

/* ---------- Feature strip ---------- */
.efl-bill-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; padding:clamp(18px,2vw,24px); border-radius:var(--b-radius); background:var(--b-fill-2); border:1px solid var(--b-line); }
.efl-bill-feature{ display:flex; align-items:center; gap:13px; }
.efl-bill-feature-ic{ flex:0 0 auto; display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px; color:var(--b-feature); background:color-mix(in srgb,var(--b-feature) 12%,transparent); border:1px solid var(--b-line); }
.efl-bill-feature-ic svg{ width:26px; height:26px; display:block; }
.efl-bill-feature b{ display:block; font-size:14px; font-weight:700; color:var(--b-feature); }
.efl-bill-feature span{ display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--b-muted); }

/* ---------- Per-action status + sign-in ---------- */
.efl-bill-status{ display:block; min-height:0; margin-top:8px; font-size:12px; font-weight:600; color:var(--b-muted); }
.efl-bill-status.is-ok{ color:var(--b-green); }
.efl-bill-status.is-err{ color:var(--b-pink); }
.efl-bill-status:empty{ margin-top:0; }
.efl-bill-empty{ margin:0; color:var(--b-muted); font-size:13.5px; }
.efl-bill-signin{ text-align:center; }
.efl-bill-signin p{ color:var(--b-muted); }

/* =====================================================================
 * Topbar credits pill (injected via efl_topbar_actions_before)
 * ===================================================================== */
.efl-credits-pill{
	display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px;
	border-radius:999px; cursor:pointer; white-space:nowrap;
	font:600 14px/1 var(--font,"Inter",system-ui,sans-serif);
	color:var(--white,#dce7ff);
	background:var(--bill-pill-bg,color-mix(in srgb,var(--panel,#0e1c3a) 80%,transparent));
	border:1px solid var(--bill-pill-border,var(--line,rgba(126,154,255,.22)));
	transition:border-color .16s,box-shadow .16s,transform .12s;
}
.efl-credits-pill:hover{ border-color:var(--blue,#2f8cff); box-shadow:0 0 22px -6px rgba(47,140,255,.55); }
.efl-credits-pill:active{ transform:translateY(1px); }
.efl-credits-pill-ic{ width:17px; height:17px; flex:0 0 auto; }
.efl-credits-pill-n{ font-weight:800; letter-spacing:.2px; }
.efl-credits-pill-l{ color:var(--muted,#8b9ab8); font-weight:600; }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width:1180px){
	.efl-bill-grid--top{ grid-template-columns:1fr; }
	.efl-bill-grid--3,.efl-bill-grid--2{ grid-template-columns:1fr 1fr; }
	.efl-bill-activity{ grid-column:1 / -1; }
}
@media (max-width:860px){
	.efl-bill-grid--3,.efl-bill-grid--2{ grid-template-columns:1fr; }
	.efl-bill-plan-cards,.efl-bill-topup-row{ grid-template-columns:1fr; }
	.efl-bill-features{ grid-template-columns:1fr 1fr; }
	.efl-bill-balance{ flex-direction:column; align-items:flex-start; }
	.efl-bill-card-wrap{ width:min(80%,300px); align-self:center; justify-content:center; margin-top:6px; }
}
@media (max-width:560px){
	.efl-bill-top{ flex-direction:column; }
	.efl-bill-features{ grid-template-columns:1fr; }
	.efl-bill-row{ grid-template-columns:auto 1fr auto; }
	.efl-bill-when{ display:none; }
	.efl-credits-pill-l{ display:none; }
	.efl-credits-pill{ padding:0 11px; }
}
@media (prefers-reduced-motion:reduce){
	.efl-bill-plan,.efl-bill-back,.efl-bill-plan-btn,.efl-credits-pill{ transition:none; }
	.efl-bill-card-art{ transform:none; }
}

/* ===== Billing History modal ===== */
html.efl-bill-modal-open{ overflow:hidden; }
.efl-bill-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; font-family:var(--font,"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif); }
.efl-bill-modal[hidden]{ display:none; }
.efl-bill-modal-overlay{ position:absolute; inset:0; background:rgba(6,10,22,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:efl-bill-fade .18s ease; }
.efl-bill-modal-dialog{ position:relative; display:flex; flex-direction:column; width:min(680px,100%); max-height:min(86vh,760px); background:var(--panel,#0d1427); border:1px solid var(--b-line); border-radius:18px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); overflow:hidden; animation:efl-bill-pop .22s cubic-bezier(.2,.9,.3,1.2); }
.efl-bill-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 16px; border-bottom:1px solid var(--b-line); }
.efl-bill-modal-titles{ display:flex; align-items:center; gap:11px; }
.efl-bill-modal-titles > svg{ flex:0 0 auto; width:20px; height:20px; color:var(--b-blue); }
.efl-bill-modal-titles h3{ margin:0; font-size:17px; font-weight:700; color:var(--b-text); }
.efl-bill-modal-titles p{ margin:2px 0 0; font-size:12.5px; color:var(--b-muted); }
.efl-bill-modal-x{ flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; cursor:pointer; color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); transition:color .15s,border-color .15s,background .15s; }
.efl-bill-modal-x:hover{ color:var(--b-text); border-color:var(--b-line-2); }
.efl-bill-modal-tools{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 22px; border-bottom:1px solid var(--b-line); }
.efl-bill-modal-filters{ display:flex; gap:7px; flex-wrap:wrap; }
.efl-bill-chip{ padding:7px 14px; border-radius:999px; cursor:pointer; font:600 12.5px/1 var(--font,inherit); color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); transition:color .15s,border-color .15s,background .15s; }
.efl-bill-chip:hover{ color:var(--b-text); }
.efl-bill-chip.is-active{ color:#fff; background:var(--b-blue); border-color:transparent; }
.efl-bill-modal-search{ display:inline-flex; align-items:center; gap:8px; flex:1 1 180px; max-width:260px; height:38px; padding:0 12px; border-radius:10px; color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-modal-search > svg{ flex:0 0 auto; width:16px; height:16px; }
.efl-bill-modal-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--b-text); font:500 13px/1 var(--font,inherit); }
.efl-bill-modal-search input::placeholder{ color:var(--b-muted); }
.efl-bill-modal-body{ flex:1 1 auto; overflow-y:auto; padding:8px 14px 16px; }
.efl-bill-modal-state{ padding:46px 20px; text-align:center; font-size:13.5px; color:var(--b-muted); }
.efl-bill-modal-state.is-err{ color:var(--b-pink); }
.efl-bill-inv-list{ display:flex; flex-direction:column; }
.efl-bill-inv{ display:flex; align-items:center; gap:13px; padding:13px 8px; border-bottom:1px solid var(--b-line); }
.efl-bill-inv:last-child{ border-bottom:0; }
.efl-bill-inv-ic{ flex:0 0 auto; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--b-blue); background:color-mix(in srgb,var(--b-blue) 12%,transparent); border:1px solid var(--b-line); }
.efl-bill-inv-ic svg{ display:block; }
.efl-bill-inv-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.efl-bill-inv-num{ font-size:13.5px; font-weight:600; color:var(--b-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.efl-bill-inv-date{ font-size:12px; color:var(--b-muted); }
.efl-bill-inv-amt{ flex:0 0 auto; font-size:14px; font-weight:700; color:var(--b-text); white-space:nowrap; }
.efl-bill-inv-status{ flex:0 0 auto; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.2px; text-transform:capitalize; color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-inv-status.is-paid{ color:var(--b-green); background:color-mix(in srgb,var(--b-green) 13%,transparent); border-color:color-mix(in srgb,var(--b-green) 35%,transparent); }
.efl-bill-inv-status.is-open{ color:#ffb454; background:rgba(255,180,84,.13); border-color:rgba(255,180,84,.35); }
.efl-bill-inv-status.is-void{ color:var(--b-muted); }
.efl-bill-inv-dl{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:9px; cursor:pointer; text-decoration:none; font:600 12.5px/1 var(--font,inherit); color:var(--b-text); background:var(--b-fill); border:1px solid var(--b-line-2); transition:color .15s,border-color .15s,background .15s; }
.efl-bill-inv-dl svg{ display:block; }
.efl-bill-inv-dl:hover{ background:color-mix(in srgb,var(--b-blue) 12%,var(--b-fill)); border-color:var(--b-blue); }
.efl-bill-inv-dl.is-off{ visibility:hidden; }
@keyframes efl-bill-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes efl-bill-pop{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
@media (max-width:560px){
	.efl-bill-modal{ padding:0; }
	.efl-bill-modal-dialog{ width:100%; height:100%; max-height:100vh; border-radius:0; }
	.efl-bill-inv{ flex-wrap:wrap; }
	.efl-bill-inv-main{ flex:1 1 55%; }
	.efl-bill-inv-dl{ margin-left:auto; }
}
@media (prefers-reduced-motion:reduce){ .efl-bill-modal-overlay,.efl-bill-modal-dialog{ animation:none; } }

/* ---------- Billing cycle switch (Monthly / Yearly) ---------- */
.efl-bill-cycle{ display:inline-flex; gap:4px; margin:0 0 16px; padding:4px; border-radius:13px; background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-cycle-opt{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 16px; border:0; border-radius:9px; cursor:pointer; font:700 13px/1 var(--font,inherit); color:var(--b-muted); background:transparent; transition:color .16s,background .16s; }
.efl-bill-cycle-opt:hover{ color:var(--b-text); }
.efl-bill-cycle-opt.is-active{ color:#fff; background:var(--b-grad); }
.efl-bill-cycle-save{ padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.3px; color:#04130d; background:var(--b-green); }
.efl-bill-cycle-opt.is-active .efl-bill-cycle-save{ color:#04130d; background:rgba(255,255,255,.92); }

/* dual price blocks */
.efl-bill-price{ margin-top:2px; }
.efl-bill-price-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.efl-bill-price-main b{ font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--b-text); }
.efl-bill-price-main small{ font-size:13px; font-weight:600; color:var(--b-muted); }
.efl-bill-price-main s{ font-size:14px; font-weight:600; color:var(--b-muted); text-decoration-thickness:1.5px; opacity:.8; }
.efl-bill-save{ padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.3px; color:#04130d; background:var(--b-green); }
.efl-bill-price-permo{ margin-top:5px; font-size:12.5px; font-weight:600; color:var(--b-muted); }
.efl-bill-price-rate{ margin-top:4px; font-size:11.5px; font-weight:600; color:var(--b-green); letter-spacing:.1px; }

/* ---------- Launch offer (intro pricing, NEW, countdown) ---------- */
.efl-bill-new{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.6px; color:#04130d; background:var(--b-green); vertical-align:middle; }
.efl-bill-price-intro{ margin-top:5px; font-size:12px; font-weight:600; color:var(--b-muted); }
.efl-bill-offer{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px; }
.efl-bill-newsub{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:8px; font-size:11px; font-weight:700; color:var(--b-text); background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-countdown{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:8px; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--b-green); background:color-mix(in srgb,var(--b-green) 10%,transparent); border:1px solid color-mix(in srgb,var(--b-green) 32%,transparent); }
.efl-bill-countdown::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--b-green); animation:efl-bill-pulse 1.6s infinite; }
.efl-bill-countdown.is-ended{ color:var(--b-muted); background:var(--b-fill); border-color:var(--b-line); }
.efl-bill-countdown.is-ended::before{ animation:none; background:var(--b-muted); }
@keyframes efl-bill-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--b-green) 55%,transparent);} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* ---------- Plan feature list ---------- */
.efl-bill-feats{ list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--b-line); display:flex; flex-direction:column; gap:9px; }
.efl-bill-feat{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.4; color:var(--b-text); }
.efl-bill-feat-ic{ width:16px; height:16px; flex:0 0 auto; color:var(--b-green); margin-top:1px; }
.efl-bill-feat.is-off{ color:var(--b-muted); }
.efl-bill-feat.is-off .efl-bill-feat-ic{ color:var(--b-muted); }
.efl-bill-feat-tx{ flex:1 1 auto; }
.efl-bill-feat-badge{ flex:0 0 auto; padding:1px 7px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.3px; color:#04130d; background:var(--b-green); align-self:flex-start; }
.efl-bill-feat-i{ flex:0 0 auto; display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; font-size:10px; font-weight:800; font-style:normal; cursor:help; color:var(--b-muted); background:var(--b-fill); border:1px solid var(--b-line); align-self:flex-start; }
.efl-bill-feat-i:hover,.efl-bill-feat-i:focus{ color:var(--b-text); border-color:var(--b-line-2); outline:none; }

/* ---------- Referral / promo-code bar ---------- */
.efl-bill-ref{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 20px; }
.efl-bill-ref-icw{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; color:var(--b-green); background:color-mix(in srgb,var(--b-green) 12%,transparent); border:1px solid color-mix(in srgb,var(--b-green) 28%,transparent); }
.efl-bill-ref-icw svg{ width:22px; height:22px; }
.efl-bill-ref-tx{ flex:1 1 200px; display:flex; flex-direction:column; gap:2px; }
.efl-bill-ref-tx strong{ font-size:14px; color:var(--b-text); }
.efl-bill-ref-tx span{ font-size:12.5px; color:var(--b-muted); }
.efl-bill-ref-form{ display:flex; gap:8px; flex:0 0 auto; }
.efl-bill-ref-input{ width:170px; padding:9px 12px; border-radius:10px; border:1px solid var(--b-line); background:var(--b-fill); color:var(--b-text); font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.efl-bill-ref-input::placeholder{ letter-spacing:0; text-transform:none; color:var(--b-muted); }
.efl-bill-ref-input:focus{ outline:none; border-color:var(--b-green); }
.efl-bill-ref-btn{ padding:9px 20px; border-radius:10px; border:0; cursor:pointer; font-size:13px; font-weight:700; color:#04130d; background:var(--b-green); white-space:nowrap; }
.efl-bill-ref-btn:hover{ filter:brightness(1.06); }
.efl-bill-ref-btn:disabled{ opacity:.6; cursor:default; }
.efl-bill-ref-msg{ flex:1 1 100%; font-size:12.5px; }
.efl-bill-ref-msg.is-ok{ color:var(--b-green); }
.efl-bill-ref-msg.is-err{ color:#ff6b6b; }
.efl-bill-ref-msg.is-busy{ color:var(--b-muted); }
.efl-bill-ref-msg:empty{ display:none; }
@media (max-width:560px){ .efl-bill-ref-form{ flex:1 1 100%; } .efl-bill-ref-input{ flex:1 1 auto; width:auto; } }

/* ---------- Gift cards ---------- */
.efl-bill-gift{ display:flex; flex-direction:column; gap:18px; }
.efl-bill-gift .panel-head h2 svg{ width:20px; height:20px; }
.efl-bill-gift-redeem{ display:flex; flex-direction:column; gap:8px; }
.efl-bill-gift-lbl{ font-size:13px; color:var(--b-muted); }
.efl-bill-gift-form{ display:flex; gap:8px; flex-wrap:wrap; }
.efl-bill-gift-input{ flex:1 1 240px; padding:10px 14px; border-radius:10px; border:1px solid var(--b-line); background:var(--b-fill); color:var(--b-text); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; font-family:ui-monospace,monospace; }
.efl-bill-gift-input::placeholder{ letter-spacing:1px; color:var(--b-muted); opacity:.7; }
.efl-bill-gift-input:focus{ outline:none; border-color:var(--b-green); }
.efl-bill-gift-btn{ padding:10px 22px; border-radius:10px; border:0; cursor:pointer; font-size:14px; font-weight:700; color:#04130d; background:var(--b-green); white-space:nowrap; }
.efl-bill-gift-btn:hover{ filter:brightness(1.06); }
.efl-bill-gift-btn:disabled{ opacity:.6; cursor:default; }
.efl-bill-gift-msg{ font-size:12.5px; }
.efl-bill-gift-msg.is-ok{ color:var(--b-green); }
.efl-bill-gift-msg.is-err{ color:#ff6b6b; }
.efl-bill-gift-msg.is-busy{ color:var(--b-muted); }
.efl-bill-gift-msg:empty{ display:none; }
.efl-bill-gift-h4{ margin:0 0 12px; font-size:13px; font-weight:600; color:var(--b-text); text-transform:uppercase; letter-spacing:.5px; opacity:.85; }
.efl-bill-gift-buy, .efl-bill-gift-mine{ border-top:1px solid var(--b-line); padding-top:16px; }
.efl-bill-gift-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.efl-bill-gift-card{ display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:14px; border:1px solid var(--b-line); background:var(--b-fill); }
.efl-bill-gift-name{ font-size:14px; font-weight:600; color:var(--b-text); }
.efl-bill-gift-cr{ font-size:12.5px; color:var(--b-green); font-weight:600; }
.efl-bill-gift-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.efl-bill-gift-price{ font-size:18px; font-weight:800; color:var(--b-text); }
.efl-bill-gift-buybtn{ padding:7px 16px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; color:var(--b-text); background:color-mix(in srgb,var(--b-green) 18%,transparent); border:1px solid color-mix(in srgb,var(--b-green) 40%,transparent); }
.efl-bill-gift-buybtn:hover{ background:color-mix(in srgb,var(--b-green) 28%,transparent); }
.efl-bill-gift-buybtn:disabled{ opacity:.6; cursor:default; }
.efl-bill-gift-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.efl-bill-gift-item{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; background:var(--b-fill); border:1px solid var(--b-line); }
.efl-bill-gift-code{ font-family:ui-monospace,monospace; font-size:13px; letter-spacing:1px; color:var(--b-text); }
.efl-bill-gift-item-cr{ font-size:12.5px; color:var(--b-muted); margin-left:auto; }
.efl-bill-gift-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; }
.efl-bill-gift-badge.is-active{ color:var(--b-green); background:color-mix(in srgb,var(--b-green) 14%,transparent); }
.efl-bill-gift-badge.is-redeemed{ color:var(--b-muted); background:color-mix(in srgb,var(--b-muted) 16%,transparent); }
.efl-bill-gift-badge.is-void{ color:#ff6b6b; background:color-mix(in srgb,#ff6b6b 14%,transparent); }
@media (max-width:560px){ .efl-bill-gift-btn{ flex:1 1 100%; } }