/* Settings › Billing › Export Center (public/settings-billing-exports.js). */

.be-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.be-tabs .tab-btn { white-space: nowrap; font-size: 14px; padding: 10px 2px; }

.be-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; align-items: start; }
.be-span-2 { grid-column: span 2; }
.be-span-3 { grid-column: 1 / -1; }
.be-title { display: flex; align-items: baseline; gap: 8px; }
.be-title .bl-chip { text-transform: uppercase; }
.be-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--amber); color: var(--amber); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }

.be-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-height: 38px; }
.be-chips:focus-within { border-color: var(--brand); }
.be-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 14px; background: var(--hover); font-size: 12.5px; max-width: 100%; }
.be-chip span { overflow: hidden; text-overflow: ellipsis; }
.be-chip button { border: 0; background: none; color: var(--muted); display: grid; place-items: center; padding: 2px; border-radius: 50%; cursor: pointer; }
.be-chip button:hover { color: var(--red); }
.be-chips input { flex: 1; min-width: 90px; border: 0; outline: none; background: none; font: inherit; color: var(--text); padding: 2px; }
.be-chips-wrap { position: relative; }
.be-chips-wrap > .be-pick { position: absolute; right: 4px; top: 4px; }
.be-chips-wrap .be-chips { padding-right: 40px; }

.be-pick { border: 0; background: none; color: var(--muted); width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.be-pick:hover { background: var(--hover); color: var(--text); }
.be-select-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.be-select-btn:hover { border-color: var(--brand); }

.be-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.be-pill { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.be-pill:hover { border-color: var(--brand); }
.be-pill.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.be-covered { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.be-covered b { color: var(--text); font-weight: 600; }

.be-foot { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.be-foot .be-msg { margin-right: auto; font-size: 13px; }
.be-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 13px; }
.be-note.ok { background: #e3f6ec; color: #11794a; }
.be-note.warn { background: #fdf3e2; color: #9a6412; }
.be-note svg { flex-shrink: 0; margin-top: 2px; }

.be-pop { padding: 10px; min-width: 260px; max-width: min(340px, calc(100vw - 24px)); }
.be-pop-search { margin-bottom: 8px; }
.be-pop-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--surface); color: var(--text); }
.be-pop-bar { display: flex; justify-content: space-between; margin-bottom: 6px; }
.be-pop-list { max-height: 260px; overflow: auto; }
.be-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; margin: 8px 0 3px; }
.be-opt { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.be-opt:hover { background: var(--hover); }
.be-range { display: grid; gap: 10px; }
.be-range .bl-field { margin: 0; }
.be-range-btns { display: flex; justify-content: flex-end; gap: 8px; }
.be-err { color: var(--red); font-size: 12.5px; }

.be-list { display: flex; flex-direction: column; }
.be-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); align-items: center; }
.be-item:first-child { border-top: 0; }
.be-item.hl { animation: be-flash 2.4s ease-out; }
@keyframes be-flash { 0%, 40% { background: var(--brand-soft); } 100% { background: transparent; } }
.be-item-name { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.be-meta { color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.be-fail { color: var(--red); font-size: 12.5px; margin-top: 3px; }
.be-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.be-bar { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; max-width: 220px; }
.be-bar i { display: block; height: 100%; background: var(--brand); }

.be-toggle { position: relative; width: 34px; height: 20px; border-radius: 10px; border: 0; background: var(--line); cursor: pointer; padding: 0; flex-shrink: 0; }
.be-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.be-toggle.on { background: var(--green); }
.be-toggle.on::after { transform: translateX(14px); }
.be-status { display: inline-flex; gap: 8px; align-items: center; }

@media (max-width: 760px) {
  .be-form { grid-template-columns: minmax(0, 1fr); }
  .be-span-2, .be-span-3 { grid-column: auto; }
  .be-item { grid-template-columns: minmax(0, 1fr); }
  .be-actions { justify-content: flex-start; }
  .be-foot { justify-content: stretch; }
  .be-foot .btn { flex: 1; }
}