/* ── SETTINGS VIEW ──────────────────────────────────── */
.settings-wrap {
  padding: 24px;
  max-width: 760px;
}

.settings-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 24px;
}

.settings-section {
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 16px;
}

.settings-sec-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--b1);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--b1);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-label { font-size: 13px; color: var(--tx); font-weight: 500; }
.settings-row-sub   { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* Members table */
.members-table {
  width: 100%;
  border-collapse: collapse;
}

.members-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--t3);
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--b1);
}

.members-table td {
  padding: 10px 8px;
  font-size: 13px;
  color: var(--tx);
  border-bottom: 1px solid var(--b1);
}

.member-avi {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}

.role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: capitalize;
}
.role-owner    { background: #ffd70022; color: #d4a017; }
.role-admin    { background: var(--accent-d); color: var(--accent); }
.role-producer { background: #3dba6e22; color: #3dba6e; }
.role-viewer   { background: var(--b2); color: var(--t2); }

/* Settings Tabs */
.settings-tab-nav{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--b1);padding-bottom:0}
.settings-tab{background:none;border:none;color:var(--t3);font-size:13px;font-weight:500;cursor:pointer;padding:8px 14px;border-radius:6px 6px 0 0;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.15s,border-color 0.15s}
.settings-tab:hover{color:var(--tx)}
.settings-tab.on{color:var(--tx);font-weight:600;border-bottom-color:var(--accent)}
.settings-tab-content{display:none}
.settings-tab-content.active{display:block}

/* ═══════════════════════════════════════
   BILLING TAB
═══════════════════════════════════════ */
.billing-current{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:var(--s2);border:1px solid var(--b1);border-radius:12px;margin-bottom:24px}
.billing-plan-name{font-size:18px;font-weight:700;color:var(--tx)}
.billing-plan-desc{font-size:13px;color:var(--t2);margin-top:2px}
.billing-plan-badge{padding:4px 12px;border-radius:9999px;font-size:11px;font-weight:700;letter-spacing:0.5px;background:var(--accent-bg);color:var(--accent)}
.billing-plan-badge.pro{background:var(--warning-bg);color:var(--warning)}
.billing-plan-badge.enterprise{background:rgba(167,139,250,0.12);color:#a78bfa}
.billing-section-title{font-size:13px;font-weight:600;color:var(--t2);margin-bottom:12px}
.billing-meters{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:8px}
.billing-meter{padding:14px 16px;background:var(--s2);border:1px solid var(--b1);border-radius:8px}
.billing-meter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.billing-meter-label{font-size:12px;font-weight:500;color:var(--t2)}
.billing-meter-value{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--tx)}
.billing-meter-value.warning{color:var(--warning)}
.billing-meter-value.danger{color:var(--error)}
.billing-meter-bar{height:4px;background:var(--s4,var(--b1));border-radius:2px;overflow:hidden}
.billing-meter-fill{height:100%;border-radius:2px;transition:width 0.4s ease;background:var(--accent)}
.billing-meter-fill.warning{background:var(--warning)}
.billing-meter-fill.danger{background:var(--error)}
.billing-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.billing-plans-grid{grid-template-columns:1fr}}
.billing-plan-card{padding:24px;background:var(--s2);border:1px solid var(--b1);border-radius:12px;display:flex;flex-direction:column;transition:border-color 0.15s}
.billing-plan-card.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.billing-plan-card-name{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:4px}
.billing-plan-card-price{font-size:28px;font-weight:700;color:var(--tx);margin-bottom:4px}
.billing-plan-card-price span{font-size:14px;font-weight:400;color:var(--t3)}
.billing-plan-card-desc{font-size:13px;color:var(--t2);margin-bottom:16px}
.billing-plan-features{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.billing-plan-features li{font-size:13px;color:var(--tx);display:flex;align-items:flex-start;gap:8px}
.billing-plan-features li::before{content:'✓';color:var(--success,#34d399);font-weight:700;flex-shrink:0}
.billing-plan-features li.disabled{color:var(--t3)}
.billing-plan-features li.disabled::before{content:'—';color:var(--t4,var(--t3))}
.billing-plan-btn{width:100%;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all 0.15s;text-align:center}
.billing-plan-btn.primary{background:var(--accent);color:#fff}
.billing-plan-btn.primary:hover{background:var(--accent-hover,#818cf8)}
.billing-plan-btn.secondary{background:var(--s3);color:var(--tx);border:1px solid var(--b2)}
.billing-plan-btn.secondary:hover{background:var(--s4,var(--s3))}
.billing-plan-btn.current-btn{background:var(--s3);color:var(--t3);cursor:default}
.billing-note{font-size:12px;color:var(--t3);margin-top:24px;text-align:center;padding:16px 0;border-top:1px solid var(--b1)}

/* Invite modal */
.invite-modal-body {
  padding: 20px;
}

.invite-role-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.invite-role-row select {
  flex-shrink: 0;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--b2);
  border-radius: var(--r);
  color: var(--tx);
  font-size: 13px;
}