:root{
  --cbbo-green:#1e3a8a;        /* azul escuro */
  --cbbo-green-dark:#102a62;
  --cbbo-bg:#f4f6f8;
  --cbbo-card:#ffffff;
  --cbbo-border:#e6e8eb;
  --cbbo-text:#1f2937;
  --cbbo-muted:#6b7280;
}

*{box-sizing:border-box}
body.cbbo-app{margin:0;background:var(--cbbo-bg);color:var(--cbbo-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}

.cbbo-layout{display:flex;min-height:100vh}
.cbbo-sidebar{
  width:280px;flex:0 0 280px;
  background:#fff;border-right:1px solid var(--cbbo-border);
}
.cbbo-main{flex:1;display:flex;flex-direction:column;min-width:0}

.cbbo-topbar{
  height:64px;background:var(--cbbo-green);
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 16px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  position:sticky;top:0;z-index:10;
}

/* admin bar não sobrepor topbar */
body.admin-bar .cbbo-topbar { top: 32px; }
@media (max-width: 782px){ body.admin-bar .cbbo-topbar { top: 46px; } }

.cbbo-topbar-actions{position:relative;display:flex;align-items:center;gap:10px}
.cbbo-gear{
  width:44px;height:44px;border:0;border-radius:10px;
  background:rgba(255,255,255,.15);
  color:#fff;display:grid;place-items:center;cursor:pointer;
}
.cbbo-gear:hover{background:rgba(255,255,255,.22)}

.cbbo-dropdown{
  position:absolute;right:0;top:54px;
  background:#fff;border:1px solid var(--cbbo-border);
  border-radius:10px;min-width:160px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  overflow:hidden;
}
.cbbo-dropdown-item{display:block;padding:10px 12px;text-decoration:none;color:var(--cbbo-text)}
.cbbo-dropdown-item:hover{background:#f3f4f6}
.cbbo-dropdown-item.cbbo-danger{color:#b91c1c}
.cbbo-dropdown-item.cbbo-danger:hover{background:#fee2e2}

.cbbo-profile{
  padding:16px;
  background:linear-gradient(135deg,#0b2a7a 0%,#1e3a8a 55%,#f7c600 100%);
  color:#fff;display:flex;gap:12px;align-items:flex-start;
}
.cbbo-profile-avatar{
  width:54px;height:54px;border-radius:14px;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;
}
.cbbo-profile-info{min-width:0}
.cbbo-profile-name{font-weight:800;line-height:1.1}
.cbbo-profile-meta{font-size:13px;opacity:.95;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbbo-profile-time{font-size:12px;opacity:.9;margin-top:6px}
.cbbo-dot{margin:0 6px;opacity:.8}

.cbbo-menu{padding:12px}
.cbbo-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cbbo-menu-list li a{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--cbbo-text);
  border:1px solid transparent;
}
.cbbo-menu-list li a:hover{background:#f3f4f6}
.cbbo-menu-list .current-menu-item > a{
  background:#eef2ff;border-color:#c7d2fe;
  font-weight:800;
}

.cbbo-content{padding:18px 22px;max-width:1100px}
.cbbo-title{font-size:38px;margin:18px 0 12px}
.cbbo-card{
  background:var(--cbbo-card);
  border:1px solid var(--cbbo-border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.cbbo-footer{
  height:54px;background:var(--cbbo-green);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;margin-top:auto;
}

/* ===== BRABAN (estilo app) ===== */
.braban-wrap{max-width:780px}
.braban-hello{font-weight:900;font-size:22px;margin:6px 0 14px}
.braban-balances{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 14px}
.braban-balance-card{
  background:#eaf0ff;border:1px solid #d7e2ff;border-radius:14px;padding:14px 14px;
}
.braban-balance-top{display:flex;justify-content:space-between;gap:10px;color:#334155;font-size:13px}
.braban-balance-value{font-size:22px;font-weight:900;color:#0f172a;margin-top:6px}
.braban-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 18px}
.braban-action{text-decoration:none;color:#0f172a;text-align:center}
.braban-action-ico{
  width:64px;height:64px;border-radius:999px;
  background:#eaf0ff;border:1px solid #d7e2ff;
  display:grid;place-items:center;margin:0 auto 8px;
  font-size:22px;
}
.braban-action-label{font-size:14px;font-weight:800}
.braban-card{
  background:#fff;border:1px solid var(--cbbo-border);
  border-radius:14px;padding:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.braban-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:10px}
.braban-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#334155}
.braban-form input,.braban-form select,.braban-form textarea{
  padding:10px 10px;border-radius:10px;border:1px solid #dbe2ea;min-width:160px
}
.braban-form textarea{min-width:320px;min-height:90px}
.braban-btn{
  padding:11px 14px;border-radius:10px;border:0;
  background:#1e3a8a;color:#fff;font-weight:900;cursor:pointer;
}
.braban-btn:hover{filter:brightness(.95)}
.braban-btn-muted{background:#64748b}
.braban-kv{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.braban-key{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;
  padding:10px 12px;min-width:260px
}
.braban-key small{display:block;color:#64748b;margin-bottom:4px}
.braban-key code{font-weight:900}
@media (max-width:720px){
  .braban-balances{grid-template-columns:1fr}
  .braban-actions{grid-template-columns:repeat(3,1fr)}
}

/* ===== Tela de Login (sem layout) ===== */
body.cbbo-auth{
  background:#0b2a7a;
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.cbbo-auth-wrap{width:100%;display:flex;justify-content:center}
.cbbo-auth-card{
  width:100%;
  max-width:420px;
  background:#ffffff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.cbbo-auth-logo{
  display:block;
  width:180px;
  max-width:70%;
  height:auto;
  margin:0 auto 18px;
}

.cbbo-auth-title{
  font-size:22px;
  font-weight:900;
  margin:0 0 12px;
  text-align:center;
  color:#0f172a;
}

.cbbo-auth-msg{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:12px;
  background:#fef3c7;
  border:1px solid #f59e0b;
  color:#7c2d12;
  font-weight:700;
}

.cbbo-auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cbbo-auth-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:800;
  color:#334155;
}

.cbbo-auth-form input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #dbe2ea;
  outline:none;
}

.cbbo-auth-form input:focus{
  border-color:#1e3a8a;
  box-shadow:0 0 0 4px rgba(30,58,138,.15);
}

.cbbo-auth-btn{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  background:#1e3a8a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.cbbo-auth-btn:hover{filter:brightness(.96)}