
:root{--bb-navy:#183653;--bb-blue:#2f78c4;--bb-sky:#eaf4fc;--bb-line:#d4e2ed;--bb-muted:#64798d;--bb-gold:#b98a28}
.bb-brand-logo{display:block;width:100%;height:auto;max-width:210px;object-fit:contain}
.sidebar>.logo{background:rgba(255,255,255,.72);border:1px solid rgba(63,116,161,.13);border-radius:12px;padding:8px;box-shadow:0 6px 20px rgba(26,57,84,.06)}
.sidebar>.logo .bb-brand-logo{max-width:205px;margin:auto}.authCard .bb-brand-logo,.legal .bb-brand-logo,.boot .bb-brand-logo{max-width:260px;margin:0 auto 10px}
.sidebar{background:linear-gradient(180deg,#f6fafe 0%,#edf5fb 55%,#e7f0f7 100%)!important}
.sidebar nav a{transition:background .16s ease,border-color .16s ease,transform .16s ease;border:1px solid transparent}
.sidebar nav a:not(.bb-plan-locked):hover{background:#fff;border-color:#d7e5f0;transform:translateX(2px)}
.bb-nav-icon,.sidebar nav a>b{display:grid;place-items:center;background:rgba(52,118,180,.08);border-radius:6px;min-width:22px;height:22px;color:var(--bb-blue)}
.bb-control{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(90,120,150,.14)}
.bb-control button{width:100%;border:1px solid #b8cce0;background:#fff;color:#244761;border-radius:9px;padding:9px 8px;font-weight:850;font-size:10px;text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(28,62,91,.04)}
.bb-plan-button{display:flex;align-items:center;justify-content:space-between;gap:6px}.bb-plan-button span{color:#6d8194}.bb-plan-button b{color:#1f5f98}
.bb-plan-hint{margin:7px 0 3px;padding:8px;border-radius:8px;background:linear-gradient(135deg,#eef7fe,#fff);border:1px solid #d7e8f5;color:#45637d}.bb-plan-hint b,.bb-plan-hint span{display:block}.bb-plan-hint b{font-size:9px;letter-spacing:.03em}.bb-plan-hint span{font-size:8px;line-height:1.35;margin-top:2px}
.bb-plan-locked{opacity:.56!important;cursor:not-allowed!important}.bb-tier-lock{margin-left:auto!important;background:#f7e9ec!important;color:#8b3f4b!important;border-radius:9px!important;padding:2px 5px!important;font-size:7px!important;font-weight:900!important;letter-spacing:.03em}
.bb-banner{position:sticky;top:56px;z-index:25;background:linear-gradient(90deg,#fff6cf,#fffaf0);border-bottom:1px solid #dfc86d;padding:9px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:#654d0c}.bb-banner div{display:flex;flex-direction:column}.bb-banner span{font-size:10px}.bb-banner button,.bb-exit,.bb-compare,.bb-close,.bb-preview-plan,.bb-preview-required{border:0;border-radius:8px;background:var(--bb-navy);color:#fff;padding:8px 10px;font-weight:800;cursor:pointer}
.bb-modal-bg{position:fixed;inset:0;z-index:1100;background:rgba(15,28,40,.6);display:grid;place-items:center;padding:14px;backdrop-filter:blur(3px)}
.bb-modal{width:min(790px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 28px 80px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.5)}
.bb-modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.bb-modal-head small,.bb-gate>small{font-size:10px;letter-spacing:.13em;color:#4b7190;font-weight:900}.bb-modal-head h2,.bb-gate h2{margin:3px 0 12px;font-size:27px}.bb-x{border:0;background:#eef3f7;color:#35526b;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.bb-lead{color:#536b80;line-height:1.55}
.bb-visibility-rule{display:flex;gap:10px;align-items:flex-start;background:#eef7fe;border:1px solid #cee3f4;border-radius:10px;padding:12px;margin:10px 0 16px}.bb-visibility-rule b{white-space:nowrap;color:#1d5f97}.bb-visibility-rule span{font-size:12px;color:#56728a;line-height:1.45}
.bb-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.bb-plan-card{border:1px solid var(--bb-line);border-top:4px solid #9fb4c6;border-radius:12px;padding:14px;background:linear-gradient(180deg,#fff,#fbfdff)}.bb-plan-card.active{box-shadow:0 0 0 2px rgba(47,120,196,.16),0 8px 24px rgba(30,73,108,.08)}.bb-tier-free{border-top-color:#8699a9}.bb-tier-starter{border-top-color:#2f78c4}.bb-tier-professional{border-top-color:#23598b}.bb-tier-team{border-top-color:#b98a28}.bb-plan-card-head{display:flex;justify-content:space-between;gap:10px}.bb-plan-card-head small{font-size:9px;letter-spacing:.12em;color:#71879a;font-weight:900}.bb-plan-card-head h3{margin:2px 0;font-size:20px}.bb-plan-card-head strong{font-size:12px;color:#48657e}.bb-plan-card p{font-size:12px;line-height:1.45;color:#61768a;margin:8px 0}.bb-feature-chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}.bb-feature-chips span{background:#edf4f9;border:1px solid #dae7f0;border-radius:20px;padding:4px 7px;font-size:8px;color:#48667f}.bb-plan-state{font-size:10px;font-weight:850;margin:8px 0}.bb-plan-state.included{color:#217057}.bb-plan-state.locked{color:#8a4e55}.bb-preview-plan{width:100%;margin-top:5px;background:var(--bb-blue)}
.bb-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0}.bb-options button{border:1px solid #d8e2eb;background:#fbfdff;border-radius:10px;padding:12px;text-align:left;cursor:pointer;color:#263e53}.bb-options button.active{border-color:#3c7eb8;background:#edf6fd;box-shadow:0 0 0 1px #3c7eb8}.bb-options b,.bb-options span{display:block}.bb-options span,.bb-note,.bb-admin-tip{color:#657789;font-size:11px;line-height:1.45;margin-top:4px}.bb-admin-tip{background:#f4f8fb;border-radius:8px;padding:9px}.bb-gate h3{color:#335b7d}.bb-gate-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.bb-compare{background:#2f78c4}.bb-exit{background:#7c4248;margin-right:8px}
.bb-collapsible-copy{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.bb-collapsible-copy.bb-expanded{display:block;-webkit-line-clamp:unset;overflow:visible}.bb-copy-toggle{border:0;background:transparent;color:#236fab;font-size:11px;font-weight:800;padding:3px 0;cursor:pointer}
@media(max-width:900px){.bb-brand-logo{max-width:108px}.sidebar>.logo{padding:5px}.bb-control button{font-size:8px;padding:6px 5px}.bb-plan-hint{padding:6px}.bb-plan-hint span{font-size:7px}.bb-plan-grid,.bb-options{grid-template-columns:1fr}.bb-banner{font-size:10px}.bb-modal{padding:16px}.bb-visibility-rule{display:block}.bb-visibility-rule b{display:block;margin-bottom:3px}}
@media(max-width:600px){.bb-brand-logo{max-width:98px}.bb-modal-head h2{font-size:23px}.bb-plan-card{padding:11px}.bb-plan-card-head h3{font-size:17px}}
