:root{
  /* Core palette (unchanged) */
  --bbz-primary:#3A8DFF; --bbz-primary-600:#2563eb; --bbz-accent:#22c55e;
  --bbz-bg:#0b1220; --bbz-surface:rgba(255,255,255,.06); --bbz-card:rgba(17,24,39,.6);
  --bbz-text:#e5e7eb; --bbz-muted:#94a3b8; --bbz-border:rgba(255,255,255,.14);

  /* New semantic colors */
  --bbz-success:#16a34a; --bbz-warning:#f59e0b; --bbz-danger:#ef4444;
  --bbz-success-ink:#bbf7d0; --bbz-warning-ink:#fde68a; --bbz-danger-ink:#fecaca;

  /* Gradients + rings */
  --bbz-grad-primary: linear-gradient(135deg,var(--bbz-primary),#60a5fa);
  --bbz-ring: 0 0 0 3px rgba(58,141,255,.35);

  /* Radii & shadows */
  --radius:16px; --radius-sm:10px; --radius-lg:20px; --radius-xl:28px;
  --shadow-sm:0 8px 20px rgba(2,12,27,.25);
  --shadow:0 20px 60px rgba(2,12,27,.45);
  --shadow-lg:0 30px 80px rgba(2,12,27,.55);

  /* Typography scale */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px; --fs-4xl:48px;

  /* Spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;

  /* Motion */
  --tr-fast: .15s ease;
  --tr-slow: .3s ease;

  /* Layout */
  --container-max: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;
  background:var(--bbz-bg);
  color:var(--bbz-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none;transition:color var(--tr-fast)}
a:hover{color:#dbeafe}

.container{max-width:var(--container-max);margin:0 auto;padding:20px}
.container-wide{max-width:1320px}

.icon{width:20px;height:20px;display:inline-block;vertical-align:middle}

/* Buttons */
.btn{
  border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;
  transition:transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
  display:inline-flex;align-items:center;gap:10px;line-height:1;
}
.btn:focus-visible{outline:none;box-shadow:var(--bbz-ring)}
.btn:active{transform:translateY(1px)}

.btn.primary{background:var(--bbz-grad-primary);color:#fff;box-shadow:0 10px 30px rgba(59,130,246,.35)}
.btn.primary:hover{filter:saturate(1.1) brightness(1.05)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--bbz-border)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.outline{background:transparent;border:1px solid var(--bbz-border);color:#e5e7eb}
.btn.outline:hover{background:rgba(255,255,255,.06)}
.btn.subtle{background:rgba(59,130,246,.12);color:#bfdbfe;border:1px solid rgba(59,130,246,.25)}
.btn.destructive{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff}
.btn.success{background:linear-gradient(135deg,#16a34a,#22c55e);color:#061d0e}

/* Button sizes */
.btn.sm{padding:8px 12px;border-radius:10px;font-weight:700;font-size:var(--fs-sm)}
.btn.lg{padding:14px 20px;border-radius:14px;font-size:var(--fs-lg)}

/* Badges / Chips */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(59,130,246,.15);color:#bfdbfe;
  padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px
}
.badge.success{background:rgba(22,163,74,.18);color:var(--bbz-success-ink)}
.badge.warn{background:rgba(245,158,11,.18);color:var(--bbz-warning-ink)}
.badge.danger{background:rgba(239,68,68,.18);color:var(--bbz-danger-ink)}
.badge.outline{background:transparent;border:1px solid var(--bbz-border);color:#cbd5e1}

.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--bbz-border);background:rgba(255,255,255,.06)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#60a5fa}

/* Cards & Surfaces */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  border:1px solid var(--bbz-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.hoverable{transition:transform var(--tr-slow), box-shadow var(--tr-slow)}
.card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.surface{background:var(--bbz-surface); border:1px solid var(--bbz-border); border-radius:var(--radius);}

/* Forms */
.input{display:flex;flex-direction:column;gap:6px}
.input label{font-size:var(--fs-sm);color:#cbd5e1}
.input input,.input select,.input textarea{
  padding:12px;border-radius:12px;border:1px solid var(--bbz-border);
  background:rgba(0,0,0,.35);color:#fff;outline:none;
  transition:border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast)
}
.input textarea{min-height:110px;resize:vertical}
.input input::placeholder,.input textarea::placeholder{color:#94a3b8}
.input input:focus,.input select:focus,.input textarea:focus{box-shadow:var(--bbz-ring);border-color:#60a5fa;background:rgba(2,6,23,.45)}
.input .help{font-size:12px;color:var(--bbz-muted)}
.is-invalid{border-color:rgba(239,68,68,.7)!important;box-shadow:0 0 0 3px rgba(239,68,68,.25)!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--bbz-primary)}

/* Links — underline animation */
.link-underline{position:relative}
.link-underline::after{
  content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:linear-gradient(90deg,#60a5fa,#22c55e);transition:width .25s ease
}
.link-underline:hover::after{width:100%}

/* Layout helpers */
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.stack{display:flex;flex-direction:column;gap:12px}

/* Responsive utilities */
@media(max-width:980px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .hide-sm{display:none!important}
  .show-sm{display:block!important}
}
@media(min-width:981px){ .show-sm{display:none!important} }

/* Animations & effects */
.reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
.reveal.in{opacity:1;transform:none}
.glow{box-shadow:0 0 0 rgba(58,141,255,0);transition:box-shadow .6s}
.glow.in{box-shadow:0 10px 40px rgba(58,141,255,.25)}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.floaty{animation:floaty 3s ease-in-out infinite}
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Focus visibility */
:focus-visible{outline:none;box-shadow:var(--bbz-ring)}

/* Muted text */
.text-muted{color:var(--bbz-muted)}

/* Compact auth look: smaller, centered, stable */
.compact-auth .auth-card{
  max-width: 420px;
  width: 100%;
  padding: 18px;
  border-radius: 14px;
}

.compact-auth .auth-head img{ height: 24px }
.compact-auth .auth-title{ font-size: 22px; margin: 0 }

.compact-auth .input label{ font-size: 13px; color: #cbd5e1 }
.compact-auth .input input{
  padding: 10px 12px;
  height: 44px;
  font-size: 14px;
  border-radius: 10px;
}

.compact-auth .btn{
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 10px;
}
.compact-auth .btn.primary{ box-shadow: 0 8px 22px rgba(59,130,246,.28) }

.compact-auth .links{ font-size: 13px }

.compact-auth .footer-note{ font-size: 12px; color: #94a3b8 }

/* Make the whole section nicely centered & not too tall */
.auth-wrap{
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Mobile fine-tuning */
@media (max-width: 480px){
  .compact-auth .auth-card{ padding: 16px }
  .compact-auth .auth-title{ font-size: 20px }
  .compact-auth .input input{ height: 42px; font-size: 13.5px }
  .compact-auth .btn{ padding: 9px 12px; font-size: 13.5px }
}
/* === Mobile & media responsiveness === */
img, video, canvas, svg { max-width: 100%; height: auto; display: block }

/* Tap targets: min size ~48px for accessibility */
.btn, .chip, .badge { min-height: 44px }

/* Responsive containers & grids */
.container { padding: 16px }
@media (min-width: 640px){ .container { padding: 18px } }
@media (min-width: 1024px){ .container { padding: 20px } }

.grid.responsive-2 { grid-template-columns: 1fr }
@media (min-width: 720px){ .grid.responsive-2 { grid-template-columns: repeat(2, 1fr) } }
.grid.responsive-3 { grid-template-columns: 1fr }
@media (min-width: 720px){ .grid.responsive-3 { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1080px){ .grid.responsive-3 { grid-template-columns: repeat(3, 1fr) } }

/* Typography scale on small screens */
@media (max-width: 480px){
  h1 { font-size: 28px }
  h2 { font-size: 22px }
  h3 { font-size: 18px }
}

/* Lazy placeholders (skeleton shimmer) */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:12px}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}