:root{
  --bb-brand:#0ea5e9;
  --bb-brand-dark:#0369a1;
  --bb-ink:#0f172a;
  --bb-muted:#64748b;
  --bb-soft:#f8fafc;
  --bb-soft-blue:#eef8ff;
  --bb-line:#e2e8f0;
  --bb-card:#ffffff;
  --bb-green:#16a34a;
  --bb-yellow:#f59e0b;
  --bb-red:#dc2626;
  --bb-shadow:0 18px 42px rgba(15,23,42,.08);
  --red:var(--bb-brand);
  --red-dark:var(--bb-brand-dark);
  --tgfx-red:var(--bb-brand);
  --tgfx-red-dark:var(--bb-brand-dark);
  --tgfx-red-soft:var(--bb-soft-blue);
  --tgfx-text:var(--bb-ink);
  --tgfx-muted:var(--bb-muted);
  --tgfx-border:var(--bb-line);
  --tgfx-bg:#ffffff;
  --tgfx-card:#ffffff;
}

html{background:#fff}
body{
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fafc 42%,#ffffff 100%)!important;
  color:var(--bb-ink);
}

.announcement{
  background:#0f172a!important;
  border-bottom:1px solid rgba(14,165,233,.24);
  color:#f8fafc!important;
}

.navbar,
.navbar-shell{
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid var(--bb-line)!important;
  box-shadow:0 8px 30px rgba(15,23,42,.04);
}

.brand img,
.navbar-brand img{
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(15,23,42,.08));
}

.nav-links a,
.navbar nav a,
.nav-link{
  color:#334155!important;
}

.nav-links a:hover,
.navbar nav a:hover,
.nav-link:hover,
.nav-link.active{
  color:var(--bb-brand-dark)!important;
  background:var(--bb-soft-blue);
}

.hero{
  position:relative;
  isolation:isolate;
}

.hero h1,
.hero-title,
.section-head h2,
.section-title{
  color:var(--bb-ink)!important;
  letter-spacing:-.045em!important;
}

.hero p,
.lead,
.section-subtitle,
.section-head p,
.feature-card p,
.product-desc,
footer p{
  color:var(--bb-muted)!important;
}

.hero-kicker,
.eyebrow{
  background:var(--bb-soft-blue)!important;
  border:1px solid #cdefff!important;
  color:var(--bb-brand-dark)!important;
}

.primary-btn,
.btn-brand,
.cart-btn,
.add-btn,
.checkout-btn,
.hero-btn{
  background:linear-gradient(135deg,var(--bb-brand),var(--bb-brand-dark))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 14px 28px rgba(14,165,233,.18)!important;
}

.secondary-btn,
.btn-soft,
.account-link,
.clear-btn{
  background:#fff!important;
  color:var(--bb-ink)!important;
  border:1px solid var(--bb-line)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.05)!important;
}

.account-link:hover,
.secondary-btn:hover,
.btn-soft:hover,
.primary-btn:hover,
.btn-brand:hover,
.cart-btn:hover,
.add-btn:hover,
.checkout-btn:hover{
  transform:translateY(-2px);
  filter:none!important;
}

.hero-panel,
.showcase-card,
.feature-card,
.shop-controls,
.product-card,
.pricing-card,
.contact-card,
.info-card,
.sidebar-card,
.main-card,
.small-card,
.project-card,
.cta-card{
  background:var(--bb-card)!important;
  border:1px solid var(--bb-line)!important;
  box-shadow:var(--bb-shadow)!important;
}

.hero-panel::before{display:none!important}
.showcase-card,
.feature-card,
.product-card,
.pricing-card,
.main-card,
.small-card,
.project-card{
  animation:bbLiftIn .55s ease both;
}

@keyframes bbLiftIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

.mini-metric,
.tag,
.billing-chip,
.tier-badge,
.skill-tags span,
.project-tags span{
  background:#f8fafc!important;
  border-color:var(--bb-line)!important;
  color:#475569!important;
}

.mini-metric strong,
.price,
.feature-card i,
.plan-icon,
.card-icon,
.info-icon,
.project-type,
.feature-list i{
  color:var(--bb-brand-dark)!important;
}

.product-icon,
.brand-badge,
.popular-badge{
  background:linear-gradient(135deg,var(--bb-brand),var(--bb-brand-dark))!important;
  color:#fff!important;
}

.tier-badge.basic{background:#ecfeff!important;color:#0369a1!important}
.tier-badge.premium{background:#fff7ed!important;color:#9a3412!important}
.tier-badge.business{background:#f0fdf4!important;color:#166534!important}
.tier-badge.enterprise{background:#f8fafc!important;color:#334155!important}
.tier-badge.plugin{background:#eff6ff!important;color:#1d4ed8!important}
.billing-chip.monthly{background:#f0fdf4!important;color:#166534!important;border-color:#bbf7d0!important}

.shop-controls{
  border-radius:18px!important;
}

.search-box,
.select-box,
.form-control,
.form-select{
  border:1px solid var(--bb-line)!important;
  background:#fff!important;
  color:var(--bb-ink)!important;
}

.search-box:focus,
.select-box:focus,
.form-control:focus,
.form-select:focus{
  border-color:var(--bb-brand)!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.14)!important;
}

.pill.active,
.pill:hover{
  background:var(--bb-ink)!important;
  color:#fff!important;
  border-color:var(--bb-ink)!important;
  box-shadow:none!important;
}

.cta-inner{
  background:#0f172a!important;
  border:1px solid rgba(14,165,233,.26);
  box-shadow:0 22px 55px rgba(15,23,42,.16)!important;
}

.cta-inner a{
  color:var(--bb-brand-dark)!important;
}

footer,
.footer{
  background:#fff!important;
  border-top:1px solid var(--bb-line)!important;
  color:#64748b!important;
}

.alert{
  border:0!important;
  border-radius:14px!important;
  box-shadow:0 12px 24px rgba(15,23,42,.06);
  font-weight:750;
}
.alert-success{background:#dcfce7!important;color:#166534!important}
.alert-warning{background:#fef3c7!important;color:#92400e!important}
.alert-danger{background:#fee2e2!important;color:#991b1b!important}
.alert-info{background:#e0f2fe!important;color:#075985!important}

.toast-msg{
  background:#0f172a!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px!important;
}

.auth-simple{
  min-height:100vh;
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important;
}

.auth-simple .card{
  border:1px solid var(--bb-line)!important;
  border-radius:18px!important;
  box-shadow:var(--bb-shadow)!important;
}

.auth-simple .card::before{
  content:"";
  display:block;
  width:96px;
  height:28px;
  margin:0 auto 14px;
  background:url("BolderBiz.svg") center/contain no-repeat;
}

.auth-simple .btn-primary{
  background:linear-gradient(135deg,var(--bb-brand),var(--bb-brand-dark))!important;
  border:0!important;
  border-radius:13px;
  min-height:46px;
  font-weight:850;
}

.project-image{
  background:
    linear-gradient(135deg,#0f172a,#1e293b)!important;
  color:#e0f2fe!important;
}

@media (max-width:760px){
  .hero{padding-top:48px!important}
  .navbar-main,.navbar{padding-left:14px!important;padding-right:14px!important}
  .brand img{width:84px!important;height:auto!important}
  .product-card{min-height:auto!important}
}