:root{
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* color */
  --blue-600:#1A4FC0; --blue-700:#163F9E; --blue-50:#EEF3FF; --blue-deep:#003C9D;
  --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-tint:var(--blue-50);
  --ink:#0C1424; --ink-soft:#3B4557; --muted:#697488;
  --hairline:#E7EBF2; --hairline-2:#F0F3F8; --border-strong:#D6DCE7;
  --white:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#F0F3F8; --surface-ink:#0C1424;
  --success:#157A53; --success-tint:#E8F7F0; --warning:#8F5E0B; --warning-tint:#FBF3E3;
  --danger:#B73E3E; --danger-tint:#FBECEC; --focus-ring:rgba(26,79,192,.35);
  /* type */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --fs-display:56px; --fs-h1:40px; --fs-h2:32px; --fs-h3:24px; --fs-h4:20px;
  --fs-lg:18px; --fs-body:16px; --fs-sm:14px; --fs-xs:12px;
  --lh-display:1.05; --lh-body:1.6;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-mono:-0.005em;
  /* spacing / radius */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;
  --radius-8:8px; --radius-10:10px; --radius-16:16px; --radius-20:20px; --radius-pill:999px;
  /* shadow */
  --shadow-xs:0 1px 2px rgba(12,20,36,.05);
  --shadow-sm:0 1px 3px rgba(12,20,36,.07),0 1px 2px rgba(12,20,36,.05);
  --shadow-md:0 4px 14px rgba(12,20,36,.08),0 2px 6px rgba(12,20,36,.05);
  --shadow-lg:0 12px 30px rgba(12,20,36,.10),0 4px 10px rgba(12,20,36,.06);
  --shadow-xl:0 24px 60px rgba(12,20,36,.14),0 8px 20px rgba(12,20,36,.08);
  /* motion / layout */
  --ease:cubic-bezier(.22,.61,.36,1); --dur-fast:150ms; --dur-base:200ms; --dur-slow:300ms;
  --transition:all var(--dur-base) var(--ease);
  --container:1200px; --container-narrow:760px; --header-h:64px;
}
*,*::before,*::after{ box-sizing:border-box; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
::selection{ background:var(--blue-50); color:var(--ink); }

/* ---- Button ---- */
.bb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-snug);
  border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease); }
.bb-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.bb-btn:active{ transform:scale(.99); }
.bb-btn[disabled],.bb-btn:disabled{ opacity:.5; cursor:not-allowed; }
.bb-btn--sm{ height:36px; padding:0 16px; font-size:var(--fs-sm); }
.bb-btn--md{ height:44px; padding:0 22px; font-size:var(--fs-body); }
.bb-btn--lg{ height:52px; padding:0 28px; font-size:var(--fs-lg); }
.bb-btn--block{ width:100%; }
.bb-btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.bb-btn--primary:hover{ background:var(--accent-hover); box-shadow:var(--shadow-md); }
.bb-btn--secondary{ background:var(--white); color:var(--ink); border-color:var(--border-strong); }
.bb-btn--secondary:hover{ background:var(--surface-2); border-color:var(--muted); }
.bb-btn--ghost{ background:transparent; color:var(--ink-soft); }
.bb-btn--ghost:hover{ background:var(--surface-2); color:var(--ink); }
.bb-btn--tint{ background:var(--accent-tint); color:var(--accent); }
.bb-btn--tint:hover{ background:#E2EAFD; }
.bb-btn--danger{ background:var(--danger); color:#fff; }
.bb-btn--danger:hover{ filter:brightness(.95); }

/* ---- IconButton ---- */
.bb-iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer; color:var(--ink-soft);
  background:transparent; transition:var(--transition); }
.bb-iconbtn:hover{ background:var(--surface-2); color:var(--ink); }
.bb-iconbtn--outline{ border-color:var(--border-strong); background:var(--white); }
.bb-iconbtn--solid{ background:var(--accent); color:#fff; }
.bb-iconbtn--solid:hover{ background:var(--accent-hover); color:#fff; }
.bb-iconbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }

/* ---- Field / Input / Textarea / Select ---- */
.bb-field{ display:flex; flex-direction:column; gap:7px; }
.bb-label{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink); }
.bb-label .bb-req{ color:var(--danger); margin-left:2px; }
.bb-control{ width:100%; font-family:var(--font-sans); font-size:var(--fs-body); color:var(--ink);
  background:var(--white); border:1px solid var(--border-strong); border-radius:var(--radius-10);
  padding:11px 13px; transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease); }
.bb-control::placeholder{ color:var(--muted); }
.bb-control:hover{ border-color:var(--muted); }
.bb-control:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.bb-control--mono{ font-family:var(--font-mono); font-size:var(--fs-sm); letter-spacing:var(--tracking-mono); }
.bb-control--error{ border-color:var(--danger); }
.bb-control--error:focus{ box-shadow:0 0 0 3px var(--danger-tint); }
textarea.bb-control{ resize:vertical; min-height:88px; line-height:1.55; }
select.bb-control{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.bb-hint{ font-size:var(--fs-xs); color:var(--muted); }
.bb-errmsg{ font-size:var(--fs-xs); color:var(--danger); }

/* ---- Checkbox / Radio / Switch ---- */
.bb-check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-body); color:var(--ink); }
.bb-check input{ accent-color:var(--accent); width:18px; height:18px; cursor:pointer; }
.bb-switch{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.bb-switch input{ position:absolute; opacity:0; }
.bb-switch .bb-track{ width:40px; height:22px; border-radius:var(--radius-pill); background:var(--border-strong);
  transition:background var(--dur-base) var(--ease); position:relative; flex:0 0 auto; }
.bb-switch .bb-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease); }
.bb-switch input:checked + .bb-track{ background:var(--accent); }
.bb-switch input:checked + .bb-track .bb-thumb{ transform:translateX(18px); }

/* ---- Card ---- */
.bb-card{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-16); padding:24px; }
.bb-card--elevated{ border-color:transparent; box-shadow:var(--shadow-md); }
.bb-card__title{ font-size:var(--fs-h4); font-weight:var(--fw-bold); color:var(--ink); margin:0; letter-spacing:var(--tracking-snug); }
.bb-card__subtitle{ font-size:var(--fs-sm); color:var(--muted); margin:4px 0 0; }
.bb-card__body{ margin-top:14px; color:var(--ink-soft); }
.bb-card__footer{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); }

/* ---- Badge ---- */
.bb-badge{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-snug); padding:4px 10px; border-radius:var(--radius-pill); }
.bb-badge .bb-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.bb-badge--neutral{ background:var(--surface-3); color:var(--ink-soft); }
.bb-badge--accent{ background:var(--accent-tint); color:var(--accent); }
.bb-badge--success{ background:var(--success-tint); color:var(--success); }
.bb-badge--warning{ background:var(--warning-tint); color:var(--warning); }
.bb-badge--danger{ background:var(--danger-tint); color:var(--danger); }

/* ---- Tag ---- */
.bb-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--tracking-mono); padding:4px 9px; border-radius:var(--radius-8);
  background:var(--surface-3); color:var(--ink-soft); border:1px solid var(--hairline); }
.bb-tag--accent{ background:var(--accent-tint); color:var(--accent); border-color:transparent; }
.bb-tag__x{ cursor:pointer; opacity:.6; } .bb-tag__x:hover{ opacity:1; }

/* ---- Avatar ---- */
.bb-avatar{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:var(--fw-semibold); overflow:hidden; flex:0 0 auto; }
.bb-avatar img{ width:100%; height:100%; object-fit:cover; }
.bb-avatar--sm{ width:28px; height:28px; font-size:var(--fs-xs); }
.bb-avatar--md{ width:38px; height:38px; font-size:var(--fs-sm); }
.bb-avatar--lg{ width:48px; height:48px; font-size:var(--fs-body); }