/* BridgeBrain Member Manager Styles (v1.0.2) */
:root{
  --bb-bg: #17262d;
  --bb-bg-soft: #14252d;
  --bb-primary: #17262d;
  --bb-primary-soft: rgba(30, 207, 255, .16);
  --bb-text: #e6f2ff;
  --bb-muted: #9fb3c8;
  --bb-danger: #ff6b6b;
  --bb-success: #00d68f;
  --bb-border: #54d9d5;
  --bb-card: #0d1730;
  --bb-shadow: 0 10px 30px rgba(0,0,0,.35);
  --bb-radius: 16px;
  --bb-gap: 18px;
  --bb-font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Prevent tiny overflow that makes inputs ~10px too wide */
*, *::before, *::after{ box-sizing: border-box; }

.bbmm-wrap{
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: transparent; /* Use site's background, per request */
  color: var(--bb-text);
  font-family: var(--bb-font);
}
.bbmm-card{
  background: #0e303f;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  xbox-shadow: var(--bb-shadow);
  width: 100%;
  max-width: 980px;
  padding: 28px;
}
.bbmm-card.bbmm-small{ max-width: 480px; }
.bbmm-title{
  margin: 0 0 18px;
  font-size: 28px;
  letter-spacing: .3px;
}
.bbmm-form{ overflow: hidden; }
.bbmm-form .bbmm-field{ margin-bottom: 14px; }
.bbmm-form label{
  display: block;
  font-size: 13px;
  color: var(--bb-muted);
  margin-bottom: 6px;
}
.bbmm-form input[type="text"],
.bbmm-form input[type="email"],
.bbmm-form input[type="password"],
.bbmm-form textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--bb-border);
  outline: none;
  background: #0e303f;
  color: var(--bb-text);
  font-size: 15px;
}
.bbmm-form textarea{ resize: vertical; }

.bbmm-passwrap{ position: relative; }
.bbmm-eye{
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  background: transparent;
  border: 0; color: var(--bb-muted);
  cursor: pointer; font-size: 18px; line-height: 1;
}
.bbmm-actions{
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.bbmm-btn{
  padding: 12px 16px;
  background: var(--bb-primary);
  color: #fff;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, xbox-shadow .2s ease;
  xbox-shadow: 0 6px 18px var(--bb-primary-soft);
}
.bbmm-btn:hover{ transform: translateY(-1px); }
.bbmm-link{
  color: var(--bb-text);
  text-decoration: underline;
  text-decoration-color: var(--bb-primary);
  text-underline-offset: 3px;
}
.bbmm-alert, .bbmm-success{
  border: 1px solid var(--bb-border);
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  background: #0e303f;
  font-size: 14px;
}
.bbmm-alert{ border-left: 3px solid var(--bb-danger); }
.bbmm-success{ border-left: 3px solid var(--bb-success); }
.bbmm-footnote{ margin-top: 16px; font-size: 14px; color: var(--bb-muted); }
.bbmm-note{ font-size: 12px; color: var(--bb-muted); margin-top: 6px; }
.bbmm-grid{
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px;
}
.bbmm-field-grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
}
.bbmm-profile-photo{
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 14px; border: 1px dashed var(--bb-border); border-radius: 12px; background: #0e303f;
}
.bbmm-avatar{
  width: 140px; height: 140px; border-radius: 999px; border: 2px solid var(--bb-primary); object-fit: cover; margin-bottom: 10px;
}
.bbmm-avatar.sm{ width: 40px; height: 40px; margin: 0 8px 0 0; }
.bbmm-upload-btn{
  display: inline-block;
  border: 1px solid var(--bb-primary);
  color: var(--bb-primary);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.bbmm-upload-btn input{ display:none; }
bbmm-head{
  display:flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bbmm-user{ display:flex; align-items: center; gap: 8px; color: var(--bb-muted); }
.bbmm-grid-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.bbmm-tile{
  padding: 16px;
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  background: #0e303f;
  color: var(--bb-text);
  text-decoration: none;
  display: block;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.bbmm-tile h3{ margin: 0 0 6px; font-size: 18px; letter-spacing: .2px; }
.bbmm-tile:hover{
  transform: translateY(-2px);
  border-color: var(--bb-primary);
  box-shadow: 0 8px 22px var(--bb-primary-soft);
}
.bbmm-tile.upgrade{
  border-color: var(--bb-primary);
  background: radial-gradient(100% 100% at 0% 0%, rgba(30,207,255,.18), transparent 40%), #0a1631;
}
@media (max-width: 820px){
  .bbmm-grid{ grid-template-columns: 1fr; }
}

.bbmm-tile.upgrade {
  border-color: purple !important;
  border: 1px solid purple !important;
}

/* ===== Modals ===== */
.bbmm-modal[aria-hidden="true"]{ display:none; }
.bbmm-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.bbmm-modal-card{
  background: linear-gradient(180deg, var(--bb-card), var(--bb-bg-soft));
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  padding: 20px;
  width: 100%; max-width: 520px;
  box-shadow: var(--bb-shadow);
  color: var(--bb-text);
}
.bbmm-modal-sm{ max-width: 460px; }
.bbmm-modal-card h3{ margin-top: 0; margin-bottom: 10px; font-size: 22px; }
.bbmm-modal-actions{ display:flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.bbmm-danger{ background: var(--bb-danger); color: #fff; }
.bbmm-danger-link{ color: var(--bb-danger); }

/* Small UI bits */
.bbmm-status-line{ display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.bbmm-admin-toggle{ display:flex; align-items:center; gap:8px; color: var(--bb-muted); }
.bbmm-switch{ position: relative; display:inline-block; width: 48px; height: 26px; }
.bbmm-switch input{ display:none; }
.bbmm-slider{ position:absolute; cursor:pointer; inset:0; background:#334; border-radius: 100px; transition: .2s; }
.bbmm-slider:before{ content:""; position:absolute; height:20px; width:20px; left:4px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.bbmm-switch input:checked + .bbmm-slider{ background: var(--bb-primary); }
.bbmm-switch input:checked + .bbmm-slider:before{ transform: translateX(22px); }

.bbmm-paid-grid{ display:grid; grid-template-columns: 1fr auto; gap: 12px; align-items:center; }
.bbmm-inline-actions{ margin-top: 8px; }
.bbmm-bullet{ margin: 0 8px; color: var(--bb-muted); }
.bbmm-hr{ border: 0; height: 1px; background: var(--bb-border); margin: 18px 0; }

/* Dashboard tile icons */
.bbmm-tile h3{ display:flex; align-items:center; gap:10px; }
.bbmm-ico{ width:20px; height:20px; display:inline-block; }
.bbmm-tile h3 span{ display:inline-block; }


/* Cropper overlay */
#bbmm-crop-viewport{ position:relative; background:#111; border-radius:12px; overflow:hidden; width:320px; height:320px; }
#bbmm-crop-viewport img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.bbmm-crop-mask{
  pointer-events:none; position:absolute; inset:0;
  background: radial-gradient(circle 130px at 50% 50%, rgba(0,0,0,0) 130px, rgba(0,0,0,0.55) 131px);
}
.bbmm-crop-hint{ text-align:center; font-size:12px; color:var(--bb-muted); margin-bottom:6px; }
.bbmm-crop-ctrl{ display:flex; justify-content:center; margin:6px 0 2px; }
.bbmm-crop-ctrl input[type=range]{ width: 80%; }

/* Dashboard tile icons: larger & white */
.bbmm-tile h3{ display:flex; align-items:center; gap:12px; }
.bbmm-ico{ width:40px; height:40px; display:inline-block; color:#fff; }
.bbmm-ico path{ fill: currentColor !important; stroke: currentColor !important; }


/* API Keys grid */
.bbmm-grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 720px){ .bbmm-grid-2 { grid-template-columns: 1fr; } }