/* Plano e faturamento (frontend/src/features/settings/billing.js). Usa as variáveis do tema do app,
   então o modo escuro vem junto. */
.bl-notice{margin:0 0 14px;padding:12px 16px;border-radius:var(--radius-lg,14px);border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:13px;line-height:1.5}
.bl-notice.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:color-mix(in srgb,var(--green-tint) 60%,var(--white))}
.bl-notice.warn{border-color:#e9c37a;background:color-mix(in srgb,#fdf1dc 70%,var(--white))}
.bl-notice.bad{border-color:#e7a29b;background:color-mix(in srgb,#fbe6e4 70%,var(--white))}

.bl-summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg,14px);padding:22px 24px;box-shadow:var(--shadow-card)}
.bl-summary-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.bl-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--green-dark)}
.bl-summary h2{font:700 22px var(--font-display);margin:4px 0;color:var(--ink)}
.bl-summary-head p{margin:0;color:var(--muted);font-size:13px}
.bl-status{flex:none;padding:5px 11px;border-radius:var(--radius-pill,999px);font-size:11px;font-weight:700}
.bl-status.ok{background:var(--green-soft);color:var(--green-dark)}
.bl-status.warn{background:#fdf1dc;color:#93600c}
.bl-status.bad{background:#fbe6e4;color:#ad3a33}
.bl-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 10px}
.bl-meter>div{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:12px;color:var(--muted)}
.bl-meter strong{font:700 17px var(--font-display);color:var(--ink)}
.bl-meter strong small{font:500 11px var(--font-body);color:var(--muted)}
.bl-meter i{display:block;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.bl-meter i b{display:block;height:100%;border-radius:99px;background:var(--green)}
.bl-meter.full i b{background:#d99a2b}
.bl-meter.over i b{background:#c9483f}
.bl-meter.over strong{color:#c9483f}
.bl-summary footer{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bl-owner-only{margin:16px 0 0;color:var(--muted);font-size:13px}

.bl-plans-section{margin-top:26px}
.bl-plans-section h3{font:700 16px var(--font-display);margin:0 0 12px;color:var(--ink)}
.bl-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.bl-plan{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg,14px);padding:18px}
.bl-plan.current{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}
.bl-plan header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bl-plan h3{font:700 15px var(--font-display);margin:0;color:var(--ink)}
.bl-tag{font-size:10px;font-weight:700;color:var(--green-dark);background:var(--green-soft);padding:3px 8px;border-radius:99px}
.bl-plan>strong{font:700 22px var(--font-display);color:var(--ink)}
.bl-plan>strong small{font:500 12px var(--font-body);color:var(--muted)}
.bl-plan p{margin:0;color:var(--muted);font-size:12px}
.bl-plan ul{margin:6px 0 10px;padding-left:18px;color:var(--ink);font-size:12px;line-height:1.7}
.bl-plan .btn{margin-top:auto}

.bl-configure{margin-top:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg,14px);padding:20px 22px}
.bl-configure.hidden{display:none}
.bl-configure h4{font:700 15px var(--font-display);margin:0 0 4px;color:var(--ink)}
.bl-extras{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.bl-extras label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink)}
.bl-extras input{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--white);color:var(--ink);font:14px var(--font-body)}
.bl-extras small{color:var(--muted);font-weight:500}
.bl-configure footer{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.bl-configure footer>div{margin-right:auto;display:flex;flex-direction:column}
.bl-configure footer span{font-size:11px;color:var(--muted)}
.bl-configure footer strong{font:700 20px var(--font-display);color:var(--ink)}

[data-theme="dark"] .bl-status.warn,[data-theme="dark"] .bl-notice.warn{background:#3d2f15;color:#f0c46e;border-color:#6b5222}
[data-theme="dark"] .bl-status.bad,[data-theme="dark"] .bl-notice.bad{background:#3d211f;color:#ef9a94;border-color:#63312e}

@media(max-width:720px){
  .bl-meters,.bl-extras{grid-template-columns:1fr}
  .bl-summary-head{flex-direction:column}
  .bl-configure footer{flex-wrap:wrap}
}