@import url('./tokens.css');
@font-face{font-family:'Bricolage Grotesque';src:url('../assets/fonts/BricolageGrotesque.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/fonts/Manrope.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light;--bb-display:'Bricolage Grotesque',sans-serif;--bb-body:Manrope,sans-serif;--bb-code:'IBM Plex Mono',monospace}
[data-theme=dark]{color-scheme:dark}
body{margin:0;background:var(--bb-bg);color:var(--bb-fg);font:400 16px/1.65 var(--bb-body);text-rendering:optimizeLegibility}
::selection{background:var(--bb-sun);color:var(--bb-ink)}
html{scroll-behavior:smooth;scroll-padding-top:32px;scrollbar-color:var(--bb-muted) var(--bb-bg)}
:focus-visible{outline:3px solid var(--bb-action);outline-offset:4px}
input,textarea,select{caret-color:var(--bb-action)}
a{color:var(--bb-action);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
img,svg{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,h4{font-family:var(--bb-display);font-stretch:90%;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;margin:0 0 20px}
h1{font-size:clamp(2.75rem,5.8vw,5.75rem);font-weight:700}
h2{font-size:clamp(2rem,3.5vw,3.25rem);font-weight:700}
h3{font-size:1.45rem;font-weight:650;margin-bottom:12px}
p{max-width:72ch;margin:0 0 20px}
code,pre,.bb-mono{font-family:var(--bb-code);font-size:.84em}
code{overflow-wrap:anywhere}
pre{padding:24px;background:var(--bb-ink);color:var(--bb-paper);border-radius:8px;overflow-x:auto;line-height:1.65;white-space:pre;max-width:100%}
.bb-muted{color:var(--bb-secondary)}
.bb-small{font-size:.85rem;line-height:1.6}
.bb-stack{display:flex;flex-direction:column;gap:16px}
.bb-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;background:var(--bb-blue);color:white;border:1px solid transparent;border-radius:8px;font-weight:700;line-height:1.4;text-decoration:none;transition:background var(--bb-duration-quick) var(--bb-ease),box-shadow var(--bb-duration-quick) var(--bb-ease)}
.bb-btn:hover{background:var(--bb-blue-deep);color:white;text-decoration:none;box-shadow:0 4px 12px #182b2d19}
.bb-btn:active{box-shadow:none}
.bb-btn.secondary{background:transparent;color:var(--bb-fg);border-color:var(--bb-fg)}
.bb-btn.secondary:hover{background:var(--bb-surface);color:var(--bb-ink)}
.bb-btn.quiet{background:transparent;color:var(--bb-action);border-color:var(--bb-border)}
.bb-btn.quiet:hover{background:var(--bb-card);color:var(--bb-action)}
.bb-btn.danger{background:var(--bb-danger);color:white}
.bb-btn.danger:hover{background:#872727}
.bb-btn:disabled{background:var(--bb-surface);color:var(--bb-muted);border-color:var(--bb-line);box-shadow:none}
.bb-btn.small{min-height:44px;padding:8px 14px;font-size:.875rem}
.bb-icon{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bb-icon-button{min-width:48px;padding:12px}
.bb-spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bb-spin .8s linear infinite}
@keyframes bb-spin{to{transform:rotate(360deg)}}
.bb-field{display:flex;flex-direction:column;gap:8px;max-width:560px}
.bb-field label,.bb-field legend{font-weight:700;line-height:1.4}
.bb-field input,.bb-field textarea,.bb-field select{width:100%;min-height:48px;border:1px solid var(--bb-secondary);border-radius:8px;padding:12px 14px;background:var(--bb-card);color:var(--bb-fg)}
.bb-field input::placeholder,.bb-field textarea::placeholder{color:var(--bb-secondary);opacity:1}
.bb-field input[aria-invalid=true]{border:2px solid var(--bb-danger)}
.bb-field .error{color:var(--bb-danger);font-size:.875rem;min-height:1.6em}
[data-theme=dark] .bb-field .error{color:var(--bb-dark-danger)}
[data-theme=dark] .bb-field input[aria-invalid=true]{border-color:var(--bb-dark-danger)}
.bb-field .hint{color:var(--bb-secondary);font-size:.875rem}
.bb-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding-block:9px}
.bb-check input{accent-color:var(--bb-blue);width:20px;height:20px;margin:3px 0 0;flex-shrink:0}
.bb-badge{display:inline-flex;gap:8px;align-items:center;padding:4px 10px;border-radius:4px;font-size:.8rem;font-weight:700;line-height:1.6;background:var(--bb-info-soft);color:var(--bb-blue-deep)}
.bb-badge.success{background:var(--bb-success-soft);color:var(--bb-success)}
.bb-badge.warning{background:var(--bb-warning-soft);color:var(--bb-warning)}
.bb-badge.error{background:var(--bb-danger-soft);color:var(--bb-danger)}
.bb-note{padding:20px 24px;border:1px solid var(--bb-border);border-radius:8px;background:var(--bb-card)}
.bb-note strong{display:block;margin-bottom:8px}
.bb-note p:last-child{margin:0}
.bb-alert{display:flex;gap:12px;padding:16px;border:1px solid var(--bb-line);border-radius:8px;background:var(--bb-info-soft);color:var(--bb-blue-deep)}
.bb-alert.success{background:var(--bb-success-soft);color:var(--bb-success)}
.bb-alert.error{background:var(--bb-danger-soft);color:var(--bb-danger)}
.bb-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--bb-border);margin-bottom:24px}
.bb-tab{min-height:48px;padding:12px 18px;border:0;background:transparent;color:var(--bb-secondary);font-weight:700;border-bottom:3px solid transparent}
.bb-tab[aria-selected=true]{color:var(--bb-action);border-bottom-color:var(--bb-action)}
.bb-table-wrap{overflow-x:auto;border:1px solid var(--bb-border);border-radius:8px}
.bb-table{width:100%;border-collapse:collapse;text-align:left;white-space:normal;font-size:.9rem}
.bb-table caption{font-weight:700;text-align:left;padding:16px;background:var(--bb-card)}
.bb-table th{background:var(--bb-card);font-weight:800;color:var(--bb-fg)}
.bb-table th,.bb-table td{padding:14px 16px;border-bottom:1px solid var(--bb-border);vertical-align:top}
.bb-table tr:last-child td{border-bottom:0}
.bb-table td.number,.bb-table th.number{text-align:right;font-variant-numeric:tabular-nums}
.bb-empty{border:1px dashed var(--bb-border);border-radius:8px;padding:32px;max-width:580px}
.bb-empty p{color:var(--bb-secondary);margin:12px 0 20px}
.bb-menu{position:relative;display:inline-block}
.bb-menu summary{list-style:none}
.bb-menu summary::-webkit-details-marker{display:none}
.bb-menu[open]>.bb-menu-panel{position:absolute;inset:calc(100% + 8px) 0 auto auto;min-width:220px;padding:8px;background:var(--bb-card);border:1px solid var(--bb-border);border-radius:8px;box-shadow:0 12px 36px #182b2d26;z-index:5}
.bb-menu-panel button,.bb-menu-panel a{display:block;text-align:left;width:100%;min-height:44px;padding:10px 12px;color:var(--bb-fg);background:transparent;border:0;border-radius:4px;text-decoration:none}
.bb-menu-panel button:hover,.bb-menu-panel a:hover{background:var(--bb-surface);color:var(--bb-ink)}
.bb-dialog{width:min(92vw,480px);padding:32px;border:1px solid var(--bb-border);border-radius:16px;background:var(--bb-bg);color:var(--bb-fg);box-shadow:0 20px 64px #182b2d33}
.bb-dialog::backdrop{background:#102827a6}
.bb-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 20px;background:var(--bb-ink);color:var(--bb-paper);border:1px solid var(--bb-paper);border-radius:8px;z-index:50;box-shadow:0 8px 28px #182b2d26}
.bb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--bb-space-6)}
.bb-col-2{grid-column:span 2}
.bb-col-4{grid-column:span 4}
.bb-col-6{grid-column:span 6}
.bb-col-12{grid-column:span 12}
@media(max-width:639px){.bb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bb-space-4)}.bb-grid>.bb-col-6,.bb-grid>.bb-col-12{grid-column:1/-1}}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}