/*
 * BridgeBrain Persona Licensing - Styles
 * Clean, modern UI with desaturated blue-gray palette.
 */
:root{
  --bb-bg:#0f1a20;
  --bb-surface:#15232b;
  --bb-muted:#1a2c36;
  --bb-accent:#53b8f7;
  --bb-accent-2:#41f6fc;
  --bb-text:#d7e2e8;
  --bb-text-dim:#a7b6bf;
  --bb-green:#3bc8a5;
  --bb-yellow:#f2cf66;
  --bb-red:#ff6b6b;
  --bb-border: #243743;
  --bb-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.bbplf-wrap{
  background:var(--bb-bg);
  color:var(--bb-text);
  padding:24px;
  border-radius:16px;
  box-shadow: var(--bb-shadow);
}
.bbplf-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.bbplf-card{
  background:var(--bb-surface);
  border:1px solid var(--bb-border);
  border-radius:16px;
  padding:16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bbplf-card:hover{ transform: translateY(-2px); box-shadow: var(--bb-shadow);}
.bbplf-title{ font-size:1.1rem; margin:0 0 8px 0; color:var(--bb-text);}
.bbplf-sub{ color:var(--bb-text-dim); font-size:.9rem;}
.bbplf-badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem;
  border:1px solid var(--bb-border); background:var(--bb-muted); color:var(--bb-text-dim);
}
.bbplf-btn{
  appearance:none; border:none; border-radius:12px; padding:10px 14px; cursor:pointer;
  background:linear-gradient(180deg, var(--bb-accent), var(--bb-accent-2));
  color:#051018; font-weight:600; margin-top:12px;
}
.bbplf-btn.secondary{
  background:transparent; border:1px solid var(--bb-border); color:var(--bb-text);
}
.bbplf-input, .bbplf-select, .bbplf-textarea{
  width:100%; background:var(--bb-muted); border:1px solid var(--bb-border); color:var(--bb-text);
  border-radius:12px; padding:10px 12px; outline:none;
}
.bbplf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.bbplf-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.bbplf-kv{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--bb-border); }
.bbplf-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; z-index:99999;
}
.bbplf-modal{
  background:var(--bb-surface); border:1px solid var(--bb-border); border-radius:16px; width:min(720px, 92vw); max-height:90vh; overflow:auto; padding:20px;
  box-shadow: var(--bb-shadow);
}
.bbplf-modal h3{ margin-top:0;}
.bbplf-close{ float:right; cursor:pointer; color:var(--bb-text-dim);}
.bbplf-table{ width:100%; border-collapse:collapse;}
.bbplf-table th, .bbplf-table td{ padding:10px; border-bottom:1px solid var(--bb-border); text-align:left; color:var(--bb-text);}
.bbplf-help{ color:var(--bb-text-dim); font-size:.85rem;}
.bbplf-breadcrumb{ font-size:.9rem; color:var(--bb-text-dim); margin-bottom:10px;}
.bbplf-chip{ background:var(--bb-muted); border:1px solid var(--bb-border); color:var(--bb-text-dim); padding:4px 8px; border-radius:999px; margin-right:6px; display:inline-block;}
.bbplf-alert{ padding:12px; border-radius:12px; background:#0c271f; border:1px solid #1e4c3e; color:#bfe7d8; }
.bbplf-warning{ padding:12px; border-radius:12px; background:#2a240c; border:1px solid #544a17; color:#f2e2a6; }
a.bbplf-link{ color:var(--bb-accent); text-decoration:none; }
a.bbplf-link:hover{ text-decoration:underline; }

/* Navigation Menu Styles */
.bbplf-nav-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.bbplf-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: var(--bb-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bbplf-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--bb-shadow);
  border-color: var(--bb-accent);
}
.bbplf-nav-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.bbplf-nav-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bb-text);
}