@charset "UTF-8";
/*!
 * WebBlocks UI v2.34.0 (https://webblocksui.com/)
 * Copyright 2026 WebBlocks UI
 * Licensed under MIT
 */
:root {
color-scheme: light;
--wb-bg:        #f4f6fb;
--wb-surface:   #ffffff;
--wb-surface-2: #edf1f7;
--wb-surface-3: #e2e8f2;
--wb-text:  #18212f;
--wb-muted: #5a6a84;
--wb-border: #d6e0ee;
--wb-accent:           #2563eb;
--wb-accent-hover:     #1d4ed8;
--wb-accent-active:    #1e40af;
--wb-accent-soft:      #dbeafe;
--wb-accent-softer:    #eff6ff;
--wb-accent-border:    #93c5fd;
--wb-accent-text:      #1d4ed8;
--wb-accent-on:        #ffffff;
--wb-accent-ring:      rgb(37 99 235);
--wb-accent-ring-rgb:  37 99 235;
--wb-accent-selection: #dbeafe;
--wb-accent-glow-rgb:  37 99 235;
--wb-primary:      var(--wb-accent);
--wb-primary-dark: var(--wb-accent-hover);
--wb-primary-soft: var(--wb-accent-soft);
--wb-success:       #15803d;
--wb-success-dark:  #166534;
--wb-success-soft:  #dcfce7;
--wb-success-light: #86efac;
--wb-warning:       #b45309;
--wb-warning-dark:  #92400e;
--wb-warning-soft:  #ffedd5;
--wb-warning-light: #fed7aa;
--wb-danger:        #b91c1c;
--wb-danger-dark:   #991b1b;
--wb-danger-soft:   #fee2e2;
--wb-danger-light:  #fca5a5;
--wb-info:          #0369a1;
--wb-info-dark:     #075985;
--wb-info-soft:     #e0f2fe;
--wb-info-light:    #7dd3fc;
--wb-font:         Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: var(--wb-font);
--wb-font-mono:    ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
--wb-font-size-xs: 0.75rem;   /* 12px */
--wb-font-size-sm: 0.875rem;  /* 14px */
--wb-font-size-md: 1rem;      /* 16px */
--wb-font-size-lg: 1.125rem;  /* 18px */
--wb-font-size-xl: 1.25rem;   /* 20px */
--wb-line-height-base:    1.5;
--wb-line-height-tight:   1.25;
--wb-line-height-relaxed: 1.75;
--wb-s1:  0.25rem;  /* 4px  */
--wb-s2:  0.5rem;   /* 8px  */
--wb-s3:  0.75rem;  /* 12px */
--wb-s4:  1rem;     /* 16px */
--wb-s5:  1.25rem;  /* 20px */
--wb-s6:  1.5rem;   /* 24px */
--wb-s7:  1.75rem;  /* 28px */
--wb-s8:  2rem;     /* 32px */
--wb-s10: 2.5rem;   /* 40px */
--wb-s12: 3rem;     /* 48px */
--wb-s16: 4rem;     /* 64px */
--wb-s20: 5rem;     /* 80px */
--wb-r-sm:   5px;
--wb-r-md:   9px;
--wb-r-lg:   14px;
--wb-r-xl:   20px;
--wb-r-full: 9999px;
--wb-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--wb-shadow-md: 0 4px 14px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
--wb-shadow-lg: 0 12px 36px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
--wb-shadow-xl: 0 24px 64px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.06);
--wb-t:   0.18s ease;
--wb-t-f: 0.10s ease;
--wb-overlay:       rgba(0, 0, 0, 0.5);    /* modal/drawer backdrop */
--wb-overlay-dark:  rgba(0, 0, 0, 0.55);   /* command-palette backdrop */
--wb-overlay-white: rgba(255, 255, 255, 0.3); /* spinner-white track */
--wb-white:         #ffffff;               /* always-white (switch knob, etc.) */
--wb-z-overlay:  400;
--wb-z-dropdown: 410;
--wb-z-modal:    420;
--wb-z-toast:    430;
--wb-z-loading:  440;
--wb-sidebar-w:  260px;
--wb-content-w:  1200px;
--wb-content-sm: 720px;
}
html[data-mode="dark"] {
color-scheme: dark;
--wb-bg:        #0c111d;
--wb-surface:   #131929;
--wb-surface-2: #1a2235;
--wb-surface-3: #202c42;
--wb-text:  #e4ecfa;
--wb-muted: #8b9bb8;
--wb-border: #29364f;
--wb-accent-soft:  rgba(37,99,235,0.18);
--wb-success-soft: rgba(21,128,61,0.18);
--wb-warning-soft: rgba(180,83,9,0.20);
--wb-danger-soft:  rgba(185,28,28,0.22);
--wb-info-soft:    rgba(3,105,161,0.20);
--wb-overlay:      rgba(0, 0, 0, 0.65);
--wb-overlay-dark: rgba(0, 0, 0, 0.70);
--wb-shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
--wb-shadow-md: 0 4px 14px rgba(0,0,0,0.35);
--wb-shadow-lg: 0 12px 36px rgba(0,0,0,0.45);
--wb-shadow-xl: 0 24px 64px rgba(0,0,0,0.55);
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"] {
color-scheme: dark;
--wb-bg:        #0c111d;
--wb-surface:   #131929;
--wb-surface-2: #1a2235;
--wb-surface-3: #202c42;
--wb-text:  #e4ecfa;
--wb-muted: #8b9bb8;
--wb-border: #29364f;
--wb-accent-soft:  rgba(37,99,235,0.18);
--wb-success-soft: rgba(21,128,61,0.18);
--wb-warning-soft: rgba(180,83,9,0.20);
--wb-danger-soft:  rgba(185,28,28,0.22);
--wb-info-soft:    rgba(3,105,161,0.20);
--wb-overlay:      rgba(0, 0, 0, 0.65);
--wb-overlay-dark: rgba(0, 0, 0, 0.70);
--wb-shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
--wb-shadow-md: 0 4px 14px rgba(0,0,0,0.35);
--wb-shadow-lg: 0 12px 36px rgba(0,0,0,0.45);
--wb-shadow-xl: 0 24px 64px rgba(0,0,0,0.55);
}
}
html[data-preset="modern"] {
--wb-font:         Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-preset="minimal"] {
--wb-r-sm: 2px;
--wb-r-md: 4px;
--wb-r-lg: 6px;
--wb-r-xl: 10px;
--wb-s1:  0.125rem;
--wb-s2:  0.25rem;
--wb-s3:  0.375rem;
--wb-s4:  0.625rem;
--wb-s5:  0.75rem;
--wb-s6:  1rem;
--wb-s8:  1.25rem;
--wb-s10: 1.5rem;
--wb-s12: 2rem;
--wb-s16: 2.5rem;
--wb-s20: 3rem;
--wb-shadow-sm: none;
--wb-shadow-md: 0 1px 2px rgba(0,0,0,0.06);
--wb-shadow-lg: 0 2px 6px rgba(0,0,0,0.08);
--wb-shadow-xl: 0 4px 12px rgba(0,0,0,0.10);
--wb-font:         ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-preset="editorial"] {
--wb-r-sm: 8px;
--wb-r-md: 14px;
--wb-r-lg: 20px;
--wb-r-xl: 28px;
--wb-s1:  0.375rem;
--wb-s2:  0.75rem;
--wb-s3:  1rem;
--wb-s4:  1.25rem;
--wb-s5:  1.5rem;
--wb-s6:  2rem;
--wb-s8:  2.5rem;
--wb-s10: 3rem;
--wb-s12: 4rem;
--wb-s16: 5rem;
--wb-s20: 6rem;
--wb-shadow-sm: 0 2px 8px  rgba(0,0,0,0.08), 0 1px 3px  rgba(0,0,0,0.06);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.12), 0 3px 8px  rgba(0,0,0,0.06);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.18), 0 12px 28px rgba(0,0,0,0.08);
--wb-font:         ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: Georgia, "Times New Roman", Times, serif;
}
html[data-mode="dark"][data-preset="editorial"] {
--wb-shadow-sm: 0 2px 8px  rgba(0,0,0,0.40), 0 1px 3px  rgba(0,0,0,0.30);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.50), 0 3px 8px  rgba(0,0,0,0.30);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.30);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.60), 0 12px 28px rgba(0,0,0,0.35);
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-preset="editorial"] {
--wb-shadow-sm: 0 2px 8px  rgba(0,0,0,0.40), 0 1px 3px  rgba(0,0,0,0.30);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.50), 0 3px 8px  rgba(0,0,0,0.30);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.30);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.60), 0 12px 28px rgba(0,0,0,0.35);
}
}
html[data-preset="playful"] {
--wb-r-sm: 8px;
--wb-r-md: 14px;
--wb-r-lg: 20px;
--wb-r-xl: 28px;
--wb-s1:  0.375rem;
--wb-s2:  0.75rem;
--wb-s3:  1rem;
--wb-s4:  1.25rem;
--wb-s5:  1.5rem;
--wb-s6:  2rem;
--wb-s8:  2.5rem;
--wb-s10: 3rem;
--wb-s12: 4rem;
--wb-s16: 5rem;
--wb-s20: 6rem;
--wb-shadow-sm: 0 2px 8px  rgba(0,0,0,0.08), 0 1px 3px  rgba(0,0,0,0.06);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.12), 0 3px 8px  rgba(0,0,0,0.06);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.18), 0 12px 28px rgba(0,0,0,0.08);
--wb-font:         Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-mode="dark"][data-preset="playful"] {
--wb-shadow-sm: 0 2px 8px  rgba(0,0,0,0.40), 0 1px 3px  rgba(0,0,0,0.30);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.50), 0 3px 8px  rgba(0,0,0,0.30);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.30);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.60), 0 12px 28px rgba(0,0,0,0.35);
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-preset="playful"] {
--wb-shadow-sm: 0 2px 8px  rgba(0,0,0,0.40), 0 1px 3px  rgba(0,0,0,0.30);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.50), 0 3px 8px  rgba(0,0,0,0.30);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.30);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.60), 0 12px 28px rgba(0,0,0,0.35);
}
}
html[data-preset="corporate"] {
--wb-r-sm: 2px;
--wb-r-md: 4px;
--wb-r-lg: 6px;
--wb-r-xl: 10px;
--wb-shadow-sm: none;
--wb-shadow-md: 0 1px 2px rgba(0,0,0,0.06);
--wb-shadow-lg: 0 2px 6px rgba(0,0,0,0.08);
--wb-shadow-xl: 0 4px 12px rgba(0,0,0,0.10);
--wb-font:         ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
::selection {
background: var(--wb-accent-selection);
}
html[data-accent="ocean"] {
--wb-accent:           #118AB2;
--wb-accent-hover:     #0F7A9D;
--wb-accent-active:    #0B6482;
--wb-accent-soft:      #D9F0F7;
--wb-accent-softer:    #EEF9FC;
--wb-accent-border:    #9FD4E5;
--wb-accent-text:      #0A4D63;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(17 138 178);
--wb-accent-ring-rgb:  17 138 178;
--wb-accent-selection: #CBEAF4;
--wb-accent-glow-rgb:  17 138 178;
}
html[data-mode="dark"][data-accent="ocean"] {
--wb-accent:           #4CC9F0;
--wb-accent-hover:     #3AB8DF;
--wb-accent-active:    #2BA3C8;
--wb-accent-soft:      #0F2530;
--wb-accent-softer:    #0A1B24;
--wb-accent-border:    #1E5264;
--wb-accent-text:      #A8EAFB;
--wb-accent-on:        #06202A;
--wb-accent-ring:      rgb(76 201 240);
--wb-accent-ring-rgb:  76 201 240;
--wb-accent-selection: #123342;
--wb-accent-glow-rgb:  76 201 240;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="ocean"] {
--wb-accent:           #4CC9F0;
--wb-accent-hover:     #3AB8DF;
--wb-accent-active:    #2BA3C8;
--wb-accent-soft:      #0F2530;
--wb-accent-softer:    #0A1B24;
--wb-accent-border:    #1E5264;
--wb-accent-text:      #A8EAFB;
--wb-accent-on:        #06202A;
--wb-accent-ring:      rgb(76 201 240);
--wb-accent-ring-rgb:  76 201 240;
--wb-accent-selection: #123342;
--wb-accent-glow-rgb:  76 201 240;
}
}
html[data-accent="forest"] {
--wb-accent:           #2E8B57;
--wb-accent-hover:     #27764A;
--wb-accent-active:    #1F603C;
--wb-accent-soft:      #DCEFE4;
--wb-accent-softer:    #F1F8F4;
--wb-accent-border:    #A9D3B9;
--wb-accent-text:      #1F5A39;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(46 139 87);
--wb-accent-ring-rgb:  46 139 87;
--wb-accent-selection: #CFE6D8;
--wb-accent-glow-rgb:  46 139 87;
}
html[data-mode="dark"][data-accent="forest"] {
--wb-accent:           #52B788;
--wb-accent-hover:     #45A97B;
--wb-accent-active:    #38966B;
--wb-accent-soft:      #12241B;
--wb-accent-softer:    #0C1913;
--wb-accent-border:    #295542;
--wb-accent-text:      #BEEFD4;
--wb-accent-on:        #0A1812;
--wb-accent-ring:      rgb(82 183 136);
--wb-accent-ring-rgb:  82 183 136;
--wb-accent-selection: #173025;
--wb-accent-glow-rgb:  82 183 136;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="forest"] {
--wb-accent:           #52B788;
--wb-accent-hover:     #45A97B;
--wb-accent-active:    #38966B;
--wb-accent-soft:      #12241B;
--wb-accent-softer:    #0C1913;
--wb-accent-border:    #295542;
--wb-accent-text:      #BEEFD4;
--wb-accent-on:        #0A1812;
--wb-accent-ring:      rgb(82 183 136);
--wb-accent-ring-rgb:  82 183 136;
--wb-accent-selection: #173025;
--wb-accent-glow-rgb:  82 183 136;
}
}
html[data-accent="sunset"] {
--wb-accent:           #F97316;
--wb-accent-hover:     #EA670D;
--wb-accent-active:    #D45A08;
--wb-accent-soft:      #FDE6D6;
--wb-accent-softer:    #FFF3EB;
--wb-accent-border:    #F7BE97;
--wb-accent-text:      #9A4410;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(249 115 22);
--wb-accent-ring-rgb:  249 115 22;
--wb-accent-selection: #FAD9C3;
--wb-accent-glow-rgb:  249 115 22;
}
html[data-mode="dark"][data-accent="sunset"] {
--wb-accent:           #FB923C;
--wb-accent-hover:     #F28327;
--wb-accent-active:    #E56F0F;
--wb-accent-soft:      #2B170C;
--wb-accent-softer:    #1C1008;
--wb-accent-border:    #6B381B;
--wb-accent-text:      #FFD1AB;
--wb-accent-on:        #2A1407;
--wb-accent-ring:      rgb(251 146 60);
--wb-accent-ring-rgb:  251 146 60;
--wb-accent-selection: #3A1F10;
--wb-accent-glow-rgb:  251 146 60;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="sunset"] {
--wb-accent:           #FB923C;
--wb-accent-hover:     #F28327;
--wb-accent-active:    #E56F0F;
--wb-accent-soft:      #2B170C;
--wb-accent-softer:    #1C1008;
--wb-accent-border:    #6B381B;
--wb-accent-text:      #FFD1AB;
--wb-accent-on:        #2A1407;
--wb-accent-ring:      rgb(251 146 60);
--wb-accent-ring-rgb:  251 146 60;
--wb-accent-selection: #3A1F10;
--wb-accent-glow-rgb:  251 146 60;
}
}
html[data-accent="royal"] {
--wb-accent:           #4F46E5;
--wb-accent-hover:     #4338CA;
--wb-accent-active:    #3730A3;
--wb-accent-soft:      #E2E6FF;
--wb-accent-softer:    #F1F3FF;
--wb-accent-border:    #B8C1FF;
--wb-accent-text:      #2F2A8B;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(79 70 229);
--wb-accent-ring-rgb:  79 70 229;
--wb-accent-selection: #D9DEFF;
--wb-accent-glow-rgb:  79 70 229;
}
html[data-mode="dark"][data-accent="royal"] {
--wb-accent:           #818CF8;
--wb-accent-hover:     #6F7BF1;
--wb-accent-active:    #5B67E6;
--wb-accent-soft:      #15172E;
--wb-accent-softer:    #0E1020;
--wb-accent-border:    #31376A;
--wb-accent-text:      #D7DCFF;
--wb-accent-on:        #0C0F1C;
--wb-accent-ring:      rgb(129 140 248);
--wb-accent-ring-rgb:  129 140 248;
--wb-accent-selection: #1D2140;
--wb-accent-glow-rgb:  129 140 248;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="royal"] {
--wb-accent:           #818CF8;
--wb-accent-hover:     #6F7BF1;
--wb-accent-active:    #5B67E6;
--wb-accent-soft:      #15172E;
--wb-accent-softer:    #0E1020;
--wb-accent-border:    #31376A;
--wb-accent-text:      #D7DCFF;
--wb-accent-on:        #0C0F1C;
--wb-accent-ring:      rgb(129 140 248);
--wb-accent-ring-rgb:  129 140 248;
--wb-accent-selection: #1D2140;
--wb-accent-glow-rgb:  129 140 248;
}
}
html[data-accent="mint"] {
--wb-accent:           #14B8A6;
--wb-accent-hover:     #0FA594;
--wb-accent-active:    #0B8A7C;
--wb-accent-soft:      #D8F4F0;
--wb-accent-softer:    #ECFBF8;
--wb-accent-border:    #98DED6;
--wb-accent-text:      #0D6158;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(20 184 166);
--wb-accent-ring-rgb:  20 184 166;
--wb-accent-selection: #C8EEE8;
--wb-accent-glow-rgb:  20 184 166;
}
html[data-mode="dark"][data-accent="mint"] {
--wb-accent:           #2DD4BF;
--wb-accent-hover:     #21C5B0;
--wb-accent-active:    #18AC9A;
--wb-accent-soft:      #0D231F;
--wb-accent-softer:    #081715;
--wb-accent-border:    #256A61;
--wb-accent-text:      #BFF8F0;
--wb-accent-on:        #071513;
--wb-accent-ring:      rgb(45 212 191);
--wb-accent-ring-rgb:  45 212 191;
--wb-accent-selection: #10332E;
--wb-accent-glow-rgb:  45 212 191;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="mint"] {
--wb-accent:           #2DD4BF;
--wb-accent-hover:     #21C5B0;
--wb-accent-active:    #18AC9A;
--wb-accent-soft:      #0D231F;
--wb-accent-softer:    #081715;
--wb-accent-border:    #256A61;
--wb-accent-text:      #BFF8F0;
--wb-accent-on:        #071513;
--wb-accent-ring:      rgb(45 212 191);
--wb-accent-ring-rgb:  45 212 191;
--wb-accent-selection: #10332E;
--wb-accent-glow-rgb:  45 212 191;
}
}
html[data-accent="amber"] {
--wb-accent:           #F59E0B;
--wb-accent-hover:     #E08E07;
--wb-accent-active:    #C97A04;
--wb-accent-soft:      #FDECC8;
--wb-accent-softer:    #FFF7E6;
--wb-accent-border:    #F4CD82;
--wb-accent-text:      #8A5A03;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(245 158 11);
--wb-accent-ring-rgb:  245 158 11;
--wb-accent-selection: #F8E1B6;
--wb-accent-glow-rgb:  245 158 11;
}
html[data-mode="dark"][data-accent="amber"] {
--wb-accent:           #FBBF24;
--wb-accent-hover:     #F4B10F;
--wb-accent-active:    #E59D05;
--wb-accent-soft:      #271B08;
--wb-accent-softer:    #191205;
--wb-accent-border:    #6A4F17;
--wb-accent-text:      #FFE2A0;
--wb-accent-on:        #221705;
--wb-accent-ring:      rgb(251 191 36);
--wb-accent-ring-rgb:  251 191 36;
--wb-accent-selection: #34250A;
--wb-accent-glow-rgb:  251 191 36;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="amber"] {
--wb-accent:           #FBBF24;
--wb-accent-hover:     #F4B10F;
--wb-accent-active:    #E59D05;
--wb-accent-soft:      #271B08;
--wb-accent-softer:    #191205;
--wb-accent-border:    #6A4F17;
--wb-accent-text:      #FFE2A0;
--wb-accent-on:        #221705;
--wb-accent-ring:      rgb(251 191 36);
--wb-accent-ring-rgb:  251 191 36;
--wb-accent-selection: #34250A;
--wb-accent-glow-rgb:  251 191 36;
}
}
html[data-accent="rose"] {
--wb-accent:           #E11D48;
--wb-accent-hover:     #CD153E;
--wb-accent-active:    #AE1235;
--wb-accent-soft:      #F9DCE3;
--wb-accent-softer:    #FFF1F4;
--wb-accent-border:    #F0B1C1;
--wb-accent-text:      #8E1230;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(225 29 72);
--wb-accent-ring-rgb:  225 29 72;
--wb-accent-selection: #F5CED9;
--wb-accent-glow-rgb:  225 29 72;
}
html[data-mode="dark"][data-accent="rose"] {
--wb-accent:           #FB7185;
--wb-accent-hover:     #F85E75;
--wb-accent-active:    #F04462;
--wb-accent-soft:      #2B1117;
--wb-accent-softer:    #1B0B0F;
--wb-accent-border:    #6D2332;
--wb-accent-text:      #FFD1DA;
--wb-accent-on:        #250D12;
--wb-accent-ring:      rgb(251 113 133);
--wb-accent-ring-rgb:  251 113 133;
--wb-accent-selection: #39151D;
--wb-accent-glow-rgb:  251 113 133;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="rose"] {
--wb-accent:           #FB7185;
--wb-accent-hover:     #F85E75;
--wb-accent-active:    #F04462;
--wb-accent-soft:      #2B1117;
--wb-accent-softer:    #1B0B0F;
--wb-accent-border:    #6D2332;
--wb-accent-text:      #FFD1DA;
--wb-accent-on:        #250D12;
--wb-accent-ring:      rgb(251 113 133);
--wb-accent-ring-rgb:  251 113 133;
--wb-accent-selection: #39151D;
--wb-accent-glow-rgb:  251 113 133;
}
}
html[data-accent="slate-fire"] {
--wb-accent:           #DC2626;
--wb-accent-hover:     #C51F1F;
--wb-accent-active:    #A61B1B;
--wb-accent-soft:      #F7DDDD;
--wb-accent-softer:    #FFF3F3;
--wb-accent-border:    #EDB0B0;
--wb-accent-text:      #8A1919;
--wb-accent-on:        #FFFFFF;
--wb-accent-ring:      rgb(220 38 38);
--wb-accent-ring-rgb:  220 38 38;
--wb-accent-selection: #F4CFCF;
--wb-accent-glow-rgb:  220 38 38;
}
html[data-mode="dark"][data-accent="slate-fire"] {
--wb-accent:           #F87171;
--wb-accent-hover:     #F35E5E;
--wb-accent-active:    #E74747;
--wb-accent-soft:      #2C1212;
--wb-accent-softer:    #1C0B0B;
--wb-accent-border:    #6F2828;
--wb-accent-text:      #FFD1D1;
--wb-accent-on:        #250D0D;
--wb-accent-ring:      rgb(248 113 113);
--wb-accent-ring-rgb:  248 113 113;
--wb-accent-selection: #391717;
--wb-accent-glow-rgb:  248 113 113;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"][data-accent="slate-fire"] {
--wb-accent:           #F87171;
--wb-accent-hover:     #F35E5E;
--wb-accent-active:    #E74747;
--wb-accent-soft:      #2C1212;
--wb-accent-softer:    #1C0B0B;
--wb-accent-border:    #6F2828;
--wb-accent-text:      #FFD1D1;
--wb-accent-on:        #250D0D;
--wb-accent-ring:      rgb(248 113 113);
--wb-accent-ring-rgb:  248 113 113;
--wb-accent-selection: #391717;
--wb-accent-glow-rgb:  248 113 113;
}
}
html[data-radius="sharp"] {
--wb-r-sm:   2px;
--wb-r-md:   4px;
--wb-r-lg:   6px;
--wb-r-xl:   10px;
}
html[data-radius="soft"] {
--wb-r-sm:   8px;
--wb-r-md:   14px;
--wb-r-lg:   20px;
--wb-r-xl:   28px;
}
html[data-density="compact"] {
--wb-s1:  0.125rem;  /* 2px  */
--wb-s2:  0.25rem;   /* 4px  */
--wb-s3:  0.375rem;  /* 6px  */
--wb-s4:  0.625rem;  /* 10px */
--wb-s5:  0.75rem;   /* 12px */
--wb-s6:  1rem;      /* 16px */
--wb-s8:  1.25rem;   /* 20px */
--wb-s10: 1.5rem;    /* 24px */
--wb-s12: 2rem;      /* 32px */
--wb-s16: 2.5rem;    /* 40px */
--wb-s20: 3rem;      /* 48px */
}
html[data-density="comfortable"] {
--wb-s1:  0.375rem;  /* 6px  */
--wb-s2:  0.75rem;   /* 12px */
--wb-s3:  1rem;      /* 16px */
--wb-s4:  1.25rem;   /* 20px */
--wb-s5:  1.5rem;    /* 24px */
--wb-s6:  2rem;      /* 32px */
--wb-s8:  2.5rem;    /* 40px */
--wb-s10: 3rem;      /* 48px */
--wb-s12: 4rem;      /* 64px */
--wb-s16: 5rem;      /* 80px */
--wb-s20: 6rem;      /* 96px */
}
html[data-shadow="flat"] {
--wb-shadow-sm: none;
--wb-shadow-md: 0 1px 2px rgba(0,0,0,0.06);
--wb-shadow-lg: 0 2px 6px rgba(0,0,0,0.08);
--wb-shadow-xl: 0 4px 12px rgba(0,0,0,0.10);
}
html[data-shadow="soft"] {
--wb-shadow-sm: 0 2px 8px rgba(0,0,0,0.08),  0 1px 3px rgba(0,0,0,0.06);
--wb-shadow-md: 0 8px 24px rgba(0,0,0,0.12),  0 3px 8px rgba(0,0,0,0.06);
--wb-shadow-lg: 0 20px 48px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06);
--wb-shadow-xl: 0 36px 80px rgba(0,0,0,0.18), 0 12px 28px rgba(0,0,0,0.08);
}
html[data-font="system"] {
--wb-font:         ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-font="modern"] {
--wb-font:         Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-font="editorial"] {
--wb-font:         ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--wb-font-heading: Georgia, "Times New Roman", Times, serif;
}
html[data-border="none"] {
--wb-border: transparent;
}
html[data-border="subtle"] {
--wb-border: color-mix(in srgb, var(--wb-text) 8%, transparent);
}
html[data-border="medium"] {
--wb-border: color-mix(in srgb, var(--wb-text) 15%, transparent);
}
html[data-border="strong"] {
--wb-border: color-mix(in srgb, var(--wb-text) 28%, transparent);
}
html[data-border="accent"] {
--wb-border: var(--wb-primary);
}
html[data-border="dashed"] {
--wb-border-style: dashed;
}
:root {
--wb-border-style: solid;
--wb-border-width: 1px;
}
.wb-border        { border: var(--wb-border-width) var(--wb-border-style) var(--wb-border); }
.wb-border-t      { border-top:    var(--wb-border-width) var(--wb-border-style) var(--wb-border); }
.wb-border-b      { border-bottom: var(--wb-border-width) var(--wb-border-style) var(--wb-border); }
.wb-border-l      { border-left:   var(--wb-border-width) var(--wb-border-style) var(--wb-border); }
.wb-border-r      { border-right:  var(--wb-border-width) var(--wb-border-style) var(--wb-border); }
.wb-border-none   { border: none; }
.wb-border-1 { --wb-border-width: 1px; }
.wb-border-2 { --wb-border-width: 2px; }
.wb-border-4 { --wb-border-width: 4px; }
.wb-border-solid  { --wb-border-style: solid; }
.wb-border-dashed { --wb-border-style: dashed; }
.wb-border-dotted { --wb-border-style: dotted; }
.wb-border-primary { border-color: var(--wb-primary); }
.wb-border-success { border-color: var(--wb-success); }
.wb-border-warning { border-color: var(--wb-warning); }
.wb-border-danger  { border-color: var(--wb-danger);  }
.wb-border-info    { border-color: var(--wb-info);    }
.wb-border-muted   { border-color: var(--wb-muted);   }
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
tab-size: 4;
}
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
margin: 0;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
img {
display: inline-block;
max-width: 100%;
}
svg, video, canvas, audio, iframe, embed, object {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
padding: 0;
}
[hidden] {
display: none !important;
}
body {
font-family: var(--wb-font);
font-size: 1rem;
line-height: 1.6;
background: var(--wb-bg);
color: var(--wb-text);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: var(--wb-text);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p {
color: var(--wb-text);
}
a {
color: var(--wb-primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: 2px;
border-radius: 2px;
}
strong, b { font-weight: 700; }
em, i     { font-style: italic; }
small { font-size: 0.875em; }
code, kbd, samp, pre {
font-family: var(--wb-font-mono);
font-size: 0.875em;
}
code {
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-sm);
padding: 0.15em 0.4em;
color: var(--wb-danger);
}
pre {
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
padding: var(--wb-s4);
overflow-x: auto;
}
pre code {
background: none;
border: none;
padding: 0;
color: inherit;
}
blockquote {
border-left: 3px solid var(--wb-primary);
padding: var(--wb-s2) var(--wb-s4);
color: var(--wb-muted);
background: var(--wb-primary-soft);
border-radius: 0 var(--wb-r-md) var(--wb-r-md) 0;
}
hr {
border: none;
border-top: 1px solid var(--wb-border);
margin: var(--wb-s6) 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: var(--wb-s3) var(--wb-s4);
text-align: left;
border-bottom: 1px solid var(--wb-border);
}
th {
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--wb-muted);
}
img {
height: auto;
}
input, textarea, select {
color: var(--wb-text);
background: var(--wb-surface);
}
input::placeholder,
textarea::placeholder {
color: var(--wb-muted);
opacity: 1;
}
:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: 2px;
}
.wb-hidden        { display: none !important; }
.wb-block         { display: block !important; }
.wb-inline        { display: inline !important; }
.wb-inline-block  { display: inline-block !important; }
.wb-flex          { display: flex !important; }
.wb-inline-flex   { display: inline-flex !important; }
.wb-grid-display  { display: grid !important; }
.wb-flex-col      { flex-direction: column !important; }
.wb-flex-row      { flex-direction: row !important; }
.wb-flex-wrap     { flex-wrap: wrap !important; }
.wb-flex-nowrap   { flex-wrap: nowrap !important; }
.wb-flex-1        { flex: 1 !important; }
.wb-flex-shrink-0 { flex-shrink: 0 !important; }
.wb-items-start   { align-items: flex-start !important; }
.wb-items-center  { align-items: center !important; }
.wb-items-end     { align-items: flex-end !important; }
.wb-items-stretch { align-items: stretch !important; }
.wb-justify-start   { justify-content: flex-start !important; }
.wb-justify-center  { justify-content: center !important; }
.wb-justify-end     { justify-content: flex-end !important; }
.wb-justify-between { justify-content: space-between !important; }
.wb-gap-0  { gap: 0; }
.wb-gap-1  { gap: var(--wb-s1); }
.wb-gap-2  { gap: var(--wb-s2); }
.wb-gap-3  { gap: var(--wb-s3); }
.wb-gap-4  { gap: var(--wb-s4); }
.wb-gap-6  { gap: var(--wb-s6); }
.wb-gap-8  { gap: var(--wb-s8); }
.wb-w-full  { width: 100% !important; }
.wb-w-auto  { width: auto !important; }
.wb-h-full  { height: 100% !important; }
.wb-min-w-0 { min-width: 0 !important; }
.wb-overflow-hidden  { overflow: hidden !important; }
.wb-overflow-auto    { overflow: auto !important; }
.wb-overflow-scroll  { overflow: scroll !important; }
.wb-overflow-x-auto  { overflow-x: auto !important; }
.wb-overflow-y-auto  { overflow-y: auto !important; }
.wb-truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.wb-m-0   { margin: 0 !important; }
.wb-mt-0  { margin-top: 0 !important; }
.wb-mb-0  { margin-bottom: 0 !important; }
.wb-mt-1  { margin-top: var(--wb-s1) !important; }
.wb-mt-2  { margin-top: var(--wb-s2) !important; }
.wb-mt-3  { margin-top: var(--wb-s3) !important; }
.wb-mt-4  { margin-top: var(--wb-s4) !important; }
.wb-mt-5  { margin-top: var(--wb-s5) !important; }
.wb-mt-6  { margin-top: var(--wb-s6) !important; }
.wb-mt-8  { margin-top: var(--wb-s8) !important; }
.wb-mb-1  { margin-bottom: var(--wb-s1) !important; }
.wb-mb-2  { margin-bottom: var(--wb-s2) !important; }
.wb-mb-3  { margin-bottom: var(--wb-s3) !important; }
.wb-mb-4  { margin-bottom: var(--wb-s4) !important; }
.wb-mb-5  { margin-bottom: var(--wb-s5) !important; }
.wb-mb-6  { margin-bottom: var(--wb-s6) !important; }
.wb-mb-8  { margin-bottom: var(--wb-s8) !important; }
.wb-ms-auto { margin-inline-start: auto !important; }
.wb-me-auto { margin-inline-end: auto !important; }
.wb-mx-auto { margin-inline: auto !important; }
.wb-p-0  { padding: 0 !important; }
.wb-p-2  { padding: var(--wb-s2) !important; }
.wb-p-3  { padding: var(--wb-s3) !important; }
.wb-p-4  { padding: var(--wb-s4) !important; }
.wb-p-6  { padding: var(--wb-s6) !important; }
.wb-px-4 { padding-inline: var(--wb-s4) !important; }
.wb-px-6 { padding-inline: var(--wb-s6) !important; }
.wb-py-2 { padding-block: var(--wb-s2) !important; }
.wb-py-4 { padding-block: var(--wb-s4) !important; }
.wb-py-6 { padding-block: var(--wb-s6) !important; }
.wb-text-xs   { font-size: 0.75rem !important; }
.wb-text-sm   { font-size: 0.85rem !important; }
.wb-text-base { font-size: 1rem !important; }
.wb-text-lg   { font-size: 1.125rem !important; }
.wb-text-xl   { font-size: 1.25rem !important; }
.wb-text-2xl  { font-size: 1.5rem !important; }
.wb-text-3xl  { font-size: 1.875rem !important; }
.wb-text-4xl  { font-size: 2.25rem !important; }
.wb-font-normal  { font-weight: 400 !important; }
.wb-font-medium  { font-weight: 500 !important; }
.wb-font-semibold { font-weight: 600 !important; }
.wb-font-bold    { font-weight: 700 !important; }
.wb-mono         { font-family: var(--wb-font-mono) !important; }
.wb-text-start   { text-align: start !important; }
.wb-text-center  { text-align: center !important; }
.wb-text-end     { text-align: end !important; }
.wb-text-left    { text-align: left !important; }
.wb-text-right   { text-align: right !important; }
.wb-leading-tight  { line-height: 1.25 !important; }
.wb-leading-normal { line-height: 1.5 !important; }
.wb-leading-loose  { line-height: 2 !important; }
.wb-no-decoration  { text-decoration: none !important; }
.wb-lowercase      { text-transform: lowercase !important; }
.wb-nowrap         { white-space: nowrap !important; }
.wb-tracking-tight  { letter-spacing: -0.025em; }
.wb-tracking-normal { letter-spacing: 0; }
.wb-tracking-wide   { letter-spacing: 0.05em; }
.wb-tracking-wider  { letter-spacing: 0.1em; }
.wb-tracking-widest { letter-spacing: 0.15em; }
.wb-text-primary  { color: var(--wb-primary) !important; }
.wb-text-success  { color: var(--wb-success) !important; }
.wb-text-warning  { color: var(--wb-warning) !important; }
.wb-text-danger   { color: var(--wb-danger) !important; }
.wb-text-muted    { color: var(--wb-muted) !important; }
.wb-text-default  { color: var(--wb-text) !important; }
.wb-bg-surface    { background: var(--wb-surface) !important; }
.wb-bg-surface-2  { background: var(--wb-surface-2) !important; }
.wb-bg-primary    { background: var(--wb-primary) !important; color: #fff !important; }
.wb-bg-success    { background: var(--wb-success) !important; color: #fff !important; }
.wb-bg-danger     { background: var(--wb-danger) !important; color: #fff !important; }
.wb-bg-warning    { background: var(--wb-warning) !important; }
.wb-border        { border: 1px solid var(--wb-border) !important; }
.wb-border-top    { border-top: 1px solid var(--wb-border) !important; }
.wb-border-bottom { border-bottom: 1px solid var(--wb-border) !important; }
.wb-border-0      { border: none !important; }
.wb-rounded       { border-radius: var(--wb-r-md) !important; }
.wb-rounded-sm    { border-radius: var(--wb-r-sm) !important; }
.wb-rounded-lg    { border-radius: var(--wb-r-lg) !important; }
.wb-rounded-xl    { border-radius: var(--wb-r-xl) !important; }
.wb-rounded-full  { border-radius: 9999px !important; }
.wb-shadow-sm { box-shadow: var(--wb-shadow-sm) !important; }
.wb-shadow    { box-shadow: var(--wb-shadow-md) !important; }
.wb-shadow-lg { box-shadow: var(--wb-shadow-lg) !important; }
.wb-shadow-0  { box-shadow: none !important; }
.wb-relative  { position: relative !important; }
.wb-absolute  { position: absolute !important; }
.wb-fixed     { position: fixed !important; }
.wb-sticky    { position: sticky !important; }
.wb-inset-0   { inset: 0 !important; }
.wb-cursor-pointer  { cursor: pointer !important; }
.wb-cursor-default  { cursor: default !important; }
.wb-cursor-not-allowed { cursor: not-allowed !important; }
.wb-opacity-50  { opacity: 0.5 !important; }
.wb-opacity-75  { opacity: 0.75 !important; }
.wb-opacity-100 { opacity: 1 !important; }
.wb-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@media (max-width: 600px) {
.wb-hidden-sm { display: none !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
.wb-hidden-md { display: none !important; }
}
@media (min-width: 901px) {
.wb-hidden-lg { display: none !important; }
}
@media (max-width: 768px) {
.wb-visible-desktop { display: none !important; }
}
@media (min-width: 769px) {
.wb-visible-mobile { display: none !important; }
}
.wb-container {
width: 100%;
max-width: var(--wb-container-max, 1200px);
margin-inline: auto;
padding-inline: var(--wb-s6);
}
.wb-container-sm  { max-width: 680px; }
.wb-container-md  { max-width: 900px; }
.wb-container-lg  { max-width: 1200px; }
.wb-container-xl  { max-width: 1440px; }
.wb-container-full { max-width: none; }
.wb-section {
padding-block: var(--wb-s12);
}
.wb-section-sm { padding-block: var(--wb-s6); }
.wb-section-lg { padding-block: calc(var(--wb-s12) * 2); }
.wb-stack {
display: flex;
flex-direction: column;
}
.wb-stack > * + * { margin-top: var(--wb-s4); }
.wb-stack-1 > * + * { margin-top: var(--wb-s1); }
.wb-stack-2 > * + * { margin-top: var(--wb-s2); }
.wb-stack-3 > * + * { margin-top: var(--wb-s3); }
.wb-stack-4 > * + * { margin-top: var(--wb-s4); }
.wb-stack-6 > * + * { margin-top: var(--wb-s6); }
.wb-stack-8 > * + * { margin-top: var(--wb-s8); }
.wb-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wb-s3);
}
.wb-cluster-2  { gap: var(--wb-s2); }
.wb-cluster-4  { gap: var(--wb-s4); }
.wb-cluster-6  { gap: var(--wb-s6); }
.wb-cluster-end   { justify-content: flex-end; }
.wb-cluster-center { justify-content: center; }
.wb-cluster-between { justify-content: space-between; }
.wb-split {
display: flex;
align-items: center;
gap: var(--wb-s4);
}
.wb-split > :first-child { flex: 1; }
.wb-split > :last-child  { flex-shrink: 0; }
.wb-grid {
display: grid;
gap: var(--wb-s6);
}
.wb-grid-2 { display: grid; gap: var(--wb-s6); grid-template-columns: repeat(2, 1fr); }
.wb-grid-3 { display: grid; gap: var(--wb-s6); grid-template-columns: repeat(3, 1fr); }
.wb-grid-4 { display: grid; gap: var(--wb-s6); grid-template-columns: repeat(4, 1fr); }
.wb-grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--wb-s6);
}
.wb-grid-auto-sm {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.wb-grid-auto-lg {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.wb-grid > .wb-card,
.wb-grid-2 > .wb-card,
.wb-grid-3 > .wb-card,
.wb-grid-4 > .wb-card,
.wb-grid-auto > .wb-card,
.wb-grid-auto-sm > .wb-card,
.wb-grid-auto-lg > .wb-card {
display: flex;
flex-direction: column;
height: 100%;
}
.wb-grid > .wb-card > .wb-card-body,
.wb-grid-2 > .wb-card > .wb-card-body,
.wb-grid-3 > .wb-card > .wb-card-body,
.wb-grid-4 > .wb-card > .wb-card-body,
.wb-grid-auto > .wb-card > .wb-card-body,
.wb-grid-auto-sm > .wb-card > .wb-card-body,
.wb-grid-auto-lg > .wb-card > .wb-card-body {
flex: 1 1 auto;
}
.wb-grid > .wb-card > .wb-card-footer,
.wb-grid-2 > .wb-card > .wb-card-footer,
.wb-grid-3 > .wb-card > .wb-card-footer,
.wb-grid-4 > .wb-card > .wb-card-footer,
.wb-grid-auto > .wb-card > .wb-card-footer,
.wb-grid-auto-sm > .wb-card > .wb-card-footer,
.wb-grid-auto-lg > .wb-card > .wb-card-footer {
margin-top: auto;
}
@media (max-width: 900px) {
.wb-grid-3,
.wb-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.wb-grid-2,
.wb-grid-3,
.wb-grid-4 {
grid-template-columns: 1fr;
}
.wb-container {
padding-inline: var(--wb-s4);
}
}
.wb-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--wb-s4);
}
.wb-row-gap-2 { gap: var(--wb-s2); }
.wb-row-gap-4 { gap: var(--wb-s4); }
.wb-row-gap-6 { gap: var(--wb-s6); }
.wb-row-gap-8 { gap: var(--wb-s8); }
[class*="wb-col-sm-"],
[class*="wb-col-md-"],
[class*="wb-col-lg-"],
[class*="wb-col-xl-"] {
grid-column: span 12;
}
.wb-col-1  { grid-column: span 1; }
.wb-col-2  { grid-column: span 2; }
.wb-col-3  { grid-column: span 3; }
.wb-col-4  { grid-column: span 4; }
.wb-col-5  { grid-column: span 5; }
.wb-col-6  { grid-column: span 6; }
.wb-col-7  { grid-column: span 7; }
.wb-col-8  { grid-column: span 8; }
.wb-col-9  { grid-column: span 9; }
.wb-col-10 { grid-column: span 10; }
.wb-col-11 { grid-column: span 11; }
.wb-col-12 { grid-column: span 12; }
.wb-col    { grid-column: span 1; flex: 1; } /* auto */
@media (min-width: 576px) {
.wb-col-sm-1  { grid-column: span 1; }
.wb-col-sm-2  { grid-column: span 2; }
.wb-col-sm-3  { grid-column: span 3; }
.wb-col-sm-4  { grid-column: span 4; }
.wb-col-sm-5  { grid-column: span 5; }
.wb-col-sm-6  { grid-column: span 6; }
.wb-col-sm-7  { grid-column: span 7; }
.wb-col-sm-8  { grid-column: span 8; }
.wb-col-sm-9  { grid-column: span 9; }
.wb-col-sm-10 { grid-column: span 10; }
.wb-col-sm-11 { grid-column: span 11; }
.wb-col-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
.wb-col-md-1  { grid-column: span 1; }
.wb-col-md-2  { grid-column: span 2; }
.wb-col-md-3  { grid-column: span 3; }
.wb-col-md-4  { grid-column: span 4; }
.wb-col-md-5  { grid-column: span 5; }
.wb-col-md-6  { grid-column: span 6; }
.wb-col-md-7  { grid-column: span 7; }
.wb-col-md-8  { grid-column: span 8; }
.wb-col-md-9  { grid-column: span 9; }
.wb-col-md-10 { grid-column: span 10; }
.wb-col-md-11 { grid-column: span 11; }
.wb-col-md-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
.wb-col-lg-1  { grid-column: span 1; }
.wb-col-lg-2  { grid-column: span 2; }
.wb-col-lg-3  { grid-column: span 3; }
.wb-col-lg-4  { grid-column: span 4; }
.wb-col-lg-5  { grid-column: span 5; }
.wb-col-lg-6  { grid-column: span 6; }
.wb-col-lg-7  { grid-column: span 7; }
.wb-col-lg-8  { grid-column: span 8; }
.wb-col-lg-9  { grid-column: span 9; }
.wb-col-lg-10 { grid-column: span 10; }
.wb-col-lg-11 { grid-column: span 11; }
.wb-col-lg-12 { grid-column: span 12; }
}
@media (min-width: 1200px) {
.wb-col-xl-1  { grid-column: span 1; }
.wb-col-xl-2  { grid-column: span 2; }
.wb-col-xl-3  { grid-column: span 3; }
.wb-col-xl-4  { grid-column: span 4; }
.wb-col-xl-5  { grid-column: span 5; }
.wb-col-xl-6  { grid-column: span 6; }
.wb-col-xl-7  { grid-column: span 7; }
.wb-col-xl-8  { grid-column: span 8; }
.wb-col-xl-9  { grid-column: span 9; }
.wb-col-xl-10 { grid-column: span 10; }
.wb-col-xl-11 { grid-column: span 11; }
.wb-col-xl-12 { grid-column: span 12; }
}
@media (max-width: 575px) {
.wb-row > [class*="wb-col-"] {
grid-column: span 12;
}
}
.wb-col-offset-1  { grid-column-start: 2; }
.wb-col-offset-2  { grid-column-start: 3; }
.wb-col-offset-3  { grid-column-start: 4; }
.wb-col-offset-4  { grid-column-start: 5; }
.wb-col-offset-6  { grid-column-start: 7; }
.wb-row-center  { justify-items: center; }
.wb-row-end     { justify-items: end; }
.wb-row-stretch { align-items: stretch; }
.wb-row-top     { align-items: start; }
.wb-row-middle  { align-items: center; }
.wb-row-bottom  { align-items: end; }
.wb-navbar {
display: flex;
align-items: center;
gap: var(--wb-s3);
height: var(--wb-navbar-h, 56px);
padding-inline: var(--wb-s6);
background: var(--wb-surface);
border-bottom: 1px solid var(--wb-border);
position: sticky;
top: 0;
z-index: var(--wb-z-navbar, 100);
}
.wb-navbar--static {
position: static;
}
.wb-navbar-glass {
background: color-mix(in srgb, var(--wb-surface) 80%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.wb-navbar-filled {
background: var(--wb-primary);
border-bottom-color: transparent;
color: #fff;
}
.wb-navbar-filled .wb-navbar-link {
color: rgba(255, 255, 255, 0.85);
}
.wb-navbar-filled .wb-navbar-link:hover,
.wb-navbar-filled .wb-navbar-link.is-active {
color: #fff;
background: rgba(255, 255, 255, 0.12);
}
.wb-navbar > .wb-container,
.wb-navbar > .wb-container-full,
.wb-navbar > .wb-container-lg,
.wb-navbar > .wb-container-xl {
display: flex;
align-items: center;
gap: var(--wb-s3);
width: 100%;
padding-inline: 0;
}
.wb-navbar-identity {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-width: 0;
flex-shrink: 1;
}
.wb-navbar-brand {
display: flex;
align-items: center;
gap: var(--wb-s2);
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
color: var(--wb-text);
flex-shrink: 0;
}
.wb-navbar-brand:hover {
text-decoration: none;
color: var(--wb-text);
}
.wb-navbar-brand-note {
display: block;
font-size: 0.72rem;
font-weight: 500;
color: var(--wb-muted);
}
.wb-navbar-context {
display: block;
font-size: 0.72rem;
font-weight: 500;
color: var(--wb-muted);
line-height: 1.25;
}
.wb-navbar-identity .wb-navbar-brand {
font-size: 1rem;
line-height: 1.1;
}
.wb-navbar-brand img,
.wb-navbar-brand svg {
height: 28px;
width: auto;
}
.wb-navbar-spacer {
flex: 1;
}
.wb-navbar-links {
display: flex;
align-items: center;
gap: var(--wb-s1);
}
.wb-navbar-nav {
display: flex;
align-items: center;
gap: var(--wb-s1);
list-style: none;
margin: 0;
padding: 0;
}
.wb-navbar-nav-item {
margin: 0;
}
.wb-navbar-link {
position: relative;
display: flex;
align-items: center;
gap: var(--wb-s1);
padding: 0.35em 0.75em;
border-radius: var(--wb-r-md);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
color: var(--wb-muted);
transition:
    background var(--wb-t),
    color var(--wb-t);
white-space: nowrap;
}
.wb-navbar-link:hover {
color: var(--wb-text);
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-navbar-link.is-active {
color: var(--wb-primary);
background: var(--wb-primary-soft);
}
.wb-navbar-link[aria-current="page"] {
color: var(--wb-primary);
background: var(--wb-primary-soft);
}
.wb-navbar-nav--active-underline .wb-navbar-link.is-active,
.wb-navbar-nav--active-underline .wb-navbar-link[aria-current="page"] {
background: transparent;
color: var(--wb-text);
font-weight: 700;
}
.wb-navbar-nav--active-underline .wb-navbar-link.is-active::after,
.wb-navbar-nav--active-underline .wb-navbar-link[aria-current="page"]::after {
content: "";
position: absolute;
inset-inline: 0.75em;
inset-block-end: 0.08em;
height: 2px;
border-radius: 999px;
background: var(--wb-primary);
}
.wb-navbar-nav--active-pill .wb-navbar-link.is-active,
.wb-navbar-nav--active-pill .wb-navbar-link[aria-current="page"] {
color: var(--wb-primary);
background: var(--wb-primary-soft);
font-weight: 700;
}
.wb-navbar-nav--active-dot .wb-navbar-link.is-active,
.wb-navbar-nav--active-dot .wb-navbar-link[aria-current="page"] {
color: var(--wb-text);
font-weight: 700;
}
.wb-navbar-nav--active-dot .wb-navbar-link.is-active::before,
.wb-navbar-nav--active-dot .wb-navbar-link[aria-current="page"]::before {
content: "";
width: 0.45em;
height: 0.45em;
border-radius: 999px;
background: var(--wb-primary);
flex: 0 0 auto;
}
.wb-navbar-nav--active-background .wb-navbar-link.is-active,
.wb-navbar-nav--active-background .wb-navbar-link[aria-current="page"] {
color: var(--wb-text);
background: var(--wb-surface-2);
box-shadow: inset 0 0 0 1px var(--wb-border);
font-weight: 700;
}
.wb-navbar-nav--active-none .wb-navbar-link.is-active,
.wb-navbar-nav--active-none .wb-navbar-link[aria-current="page"] {
color: var(--wb-muted);
background: transparent;
font-weight: 500;
box-shadow: none;
}
.wb-navbar-filled .wb-navbar-nav--active-underline .wb-navbar-link.is-active,
.wb-navbar-filled .wb-navbar-nav--active-underline .wb-navbar-link[aria-current="page"],
.wb-navbar-filled .wb-navbar-nav--active-dot .wb-navbar-link.is-active,
.wb-navbar-filled .wb-navbar-nav--active-dot .wb-navbar-link[aria-current="page"] {
color: #fff;
}
.wb-navbar-filled .wb-navbar-nav--active-underline .wb-navbar-link.is-active::after,
.wb-navbar-filled .wb-navbar-nav--active-underline .wb-navbar-link[aria-current="page"]::after,
.wb-navbar-filled .wb-navbar-nav--active-dot .wb-navbar-link.is-active::before,
.wb-navbar-filled .wb-navbar-nav--active-dot .wb-navbar-link[aria-current="page"]::before {
background: #fff;
}
.wb-navbar-end {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-shrink: 0;
}
.wb-navbar-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--wb-r-md);
color: var(--wb-text);
}
.wb-navbar-toggle:hover {
background: var(--wb-surface-2);
}
.wb-navbar-toggle span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform var(--wb-t), opacity var(--wb-t);
}
.wb-navbar-toggle.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.wb-navbar-toggle.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wb-navbar-toggle.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.wb-navbar-drawer {
display: none;
flex-direction: column;
gap: var(--wb-s1);
padding: var(--wb-s3) var(--wb-s4);
background: var(--wb-surface);
border-bottom: 1px solid var(--wb-border);
}
.wb-navbar-drawer.is-open {
display: flex;
}
.wb-navbar-drawer .wb-navbar-link {
width: 100%;
padding: 0.6em 0.75em;
}
@media (max-width: 768px) {
.wb-navbar-links {
display: none;
}
.wb-navbar-toggle {
display: flex;
}
.wb-navbar:not(.wb-navbar--static) + .wb-navbar-drawer.is-open {
    position: fixed;
    inset-block-start: var(--wb-navbar-h, 56px);
    inset-inline: 0;
    z-index: calc(var(--wb-z-navbar, 100) - 1);
    max-block-size: calc(100dvh - var(--wb-navbar-h, 56px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (min-width: 769px) {
.wb-navbar-drawer {
display: none !important;
}
}
.wb-navbar-stacked {
flex-direction: column;
height: auto;
padding-inline: 0;
gap: 0;
}
.wb-navbar-row {
display: flex;
align-items: center;
gap: var(--wb-s3);
width: 100%;
padding-inline: var(--wb-s6);
}
.wb-navbar-start {
display: flex;
align-items: center;
gap: var(--wb-s3);
flex: 1;
min-width: 0;
}
.wb-navbar-stacked .wb-navbar-row:first-child {
height: var(--wb-navbar-h, 56px);
border-bottom: 1px solid var(--wb-border);
}
.wb-navbar-sub {
min-height: 40px;
border-bottom: 1px solid var(--wb-border);
gap: 0;
padding-inline: var(--wb-s4);
}
.wb-navbar-stacked {
border-bottom: none;
}
.wb-navbar-sub .wb-navbar-link {
border-radius: 0;
padding: 0.5em 0.75em;
font-size: 0.875rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* overlap row border-bottom */
}
.wb-navbar-sub .wb-navbar-link:hover {
background: transparent;
color: var(--wb-text);
border-bottom-color: var(--wb-border);
}
.wb-navbar-sub .wb-navbar-link.is-active {
color: var(--wb-accent);
background: transparent;
border-bottom-color: var(--wb-accent);
}
@media (max-width: 768px) {
.wb-navbar-sub {
display: none;
}
.wb-navbar-sub.is-open {
display: flex;
flex-wrap: wrap;
padding-block: var(--wb-s2);
}
}
.wb-navbar-update-indicator {
position: relative;
color: var(--wb-muted);
}
.wb-navbar-update-indicator[data-wb-update-indicator-state="update_available"] {
color: var(--wb-accent);
}
.wb-navbar-update-dot {
display: none;
position: absolute;
inset-block-start: 0.35rem;
inset-inline-end: 0.35rem;
inline-size: 0.65rem;
block-size: 0.65rem;
border: 2px solid var(--wb-surface);
border-radius: 9999px;
background: var(--wb-danger);
}
.wb-navbar-update-indicator[data-wb-update-indicator-state="update_available"] .wb-navbar-update-dot {
display: block;
}
.wb-sidebar {
display: flex;
flex-direction: column;
width: var(--wb-sidebar-w, 260px);
min-height: 100%;
background: var(--wb-surface);
border-right: 1px solid var(--wb-border);
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
}
.wb-sidebar-narrow {
width: var(--wb-sidebar-narrow-w, 64px);
}
.wb-sidebar-header,
.wb-sidebar-brand {
display: flex;
align-items: center;
gap: var(--wb-s2);
height: var(--wb-navbar-h, 56px);
padding-inline: var(--wb-s4);
border-bottom: 1px solid var(--wb-border);
flex-shrink: 0;
font-weight: 700;
font-size: 1.05rem;
color: var(--wb-text);
text-decoration: none;
}
.wb-sidebar-brand-copy {
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.wb-sidebar-brand-logo {
width: 3rem;
height: 3rem;
flex-shrink: 0;
object-fit: contain;
}
.wb-sidebar-brand-note {
display: block;
font-size: 0.68rem;
font-weight: 500;
line-height: 1.2;
color: var(--wb-muted);
}
.wb-sidebar-header:hover,
.wb-sidebar-brand:hover {
text-decoration: none;
color: var(--wb-text);
}
.wb-sidebar-nav {
display: flex;
flex-direction: column;
gap: var(--wb-s1);
padding: var(--wb-s3) var(--wb-s2);
flex: 1;
}
.wb-sidebar-section {
margin-top: var(--wb-s4);
}
.wb-sidebar-label {
display: block;
padding: 0 var(--wb-s2);
margin-bottom: var(--wb-s2);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
user-select: none;
}
.wb-sidebar-link {
display: flex;
align-items: center;
gap: var(--wb-s3);
padding: 0.45em var(--wb-s3);
border-radius: var(--wb-r-md);
font-size: 0.9rem;
font-weight: 500;
color: var(--wb-muted);
text-decoration: none;
transition:
    background var(--wb-t),
    color var(--wb-t);
white-space: nowrap;
overflow: hidden;
}
.wb-sidebar-link:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
text-decoration: none;
}
.wb-sidebar-link.is-active {
background: var(--wb-primary-soft);
color: var(--wb-primary);
font-weight: 600;
}
.wb-sidebar-link .wb-sidebar-icon {
font-size: 1.05rem;
flex-shrink: 0;
width: 1.2em;
text-align: center;
}
.wb-sidebar-link .wb-sidebar-badge {
margin-left: auto;
flex-shrink: 0;
}
.wb-sidebar-sub {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: calc(var(--wb-s3) + 1.2em + var(--wb-s3));
margin-top: 2px;
}
.wb-sidebar-sub .wb-sidebar-link {
font-size: 0.85rem;
padding-block: 0.35em;
color: var(--wb-muted);
}
.wb-sidebar-sub .wb-sidebar-link.is-active {
color: var(--wb-primary);
background: transparent;
font-weight: 600;
}
.wb-sidebar-footer {
padding: var(--wb-s3) var(--wb-s2);
border-top: 1px solid var(--wb-border);
flex-shrink: 0;
}
.wb-sidebar-footer > p {
text-align: center;
}
.wb-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: calc(var(--wb-z-sidebar, 200) - 1);
}
.wb-sidebar-backdrop.is-open {
display: block;
}
@media (max-width: 768px) {
.wb-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: var(--wb-z-sidebar, 200);
transform: translateX(-100%);
transition: transform var(--wb-t-sidebar, 0.25s ease);
box-shadow: var(--wb-shadow-lg);
}
.wb-sidebar.is-open {
transform: translateX(0);
}
}
.wb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wb-s2);
padding: 0.5em 1.1em;
border: 1px solid transparent;
border-radius: var(--wb-r-md);
font: inherit;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
user-select: none;
transition:
    background var(--wb-t),
    border-color var(--wb-t),
    color var(--wb-t),
    box-shadow var(--wb-t),
    transform var(--wb-t-f);
-webkit-appearance: none;
}
.wb-btn:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: 3px;
}
.wb-btn:active {
transform: translateY(1px);
}
.wb-btn:disabled,
.wb-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.wb-btn-primary {
background: var(--wb-primary);
color: var(--wb-accent-on);
border-color: var(--wb-primary);
}
.wb-btn-primary:hover {
background: var(--wb-primary-dark);
border-color: var(--wb-primary-dark);
text-decoration: none;
color: var(--wb-accent-on);
}
.wb-btn-secondary {
background: var(--wb-surface);
color: var(--wb-text);
border-color: var(--wb-border);
}
.wb-btn-secondary:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-btn-ghost {
background: transparent;
color: var(--wb-text);
border-color: transparent;
}
.wb-btn-ghost:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-btn-outline {
background: transparent;
color: var(--wb-primary);
border-color: var(--wb-primary);
}
.wb-btn-outline:hover {
background: var(--wb-primary-soft);
text-decoration: none;
color: var(--wb-primary);
}
.wb-btn-danger {
background: var(--wb-danger);
color: var(--wb-white);
border-color: var(--wb-danger);
}
.wb-btn-danger:hover {
background: var(--wb-danger-dark);
border-color: var(--wb-danger-dark);
text-decoration: none;
color: var(--wb-white);
}
.wb-btn-success {
background: var(--wb-success);
color: var(--wb-white);
border-color: var(--wb-success);
}
.wb-btn-success:hover {
background: var(--wb-success-dark);
border-color: var(--wb-success-dark);
text-decoration: none;
color: var(--wb-white);
}
.wb-btn-sm {
font-size: 0.8rem;
padding: 0.35em 0.8em;
border-radius: var(--wb-r-sm);
gap: var(--wb-s1);
}
.wb-btn-lg {
font-size: 1rem;
padding: 0.65em 1.4em;
border-radius: var(--wb-r-lg);
}
.wb-btn-icon {
padding: 0.5em;
aspect-ratio: 1 / 1;
}
.wb-btn-icon.wb-btn-sm { padding: 0.35em; }
.wb-btn-icon.wb-btn-lg { padding: 0.65em; }
.wb-btn-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wb-s2);
}
.wb-btn-group-join {
display: flex;
align-items: center;
}
.wb-btn-group-join .wb-btn {
border-radius: 0;
}
.wb-btn-group-join .wb-btn:first-child {
border-radius: var(--wb-r-md) 0 0 var(--wb-r-md);
}
.wb-btn-group-join .wb-btn:last-child {
border-radius: 0 var(--wb-r-md) var(--wb-r-md) 0;
}
.wb-btn-group-join .wb-btn + .wb-btn {
margin-left: -1px;
}
.wb-btn:has(> .wb-btn-dot),
.wb-btn:has(> .wb-btn-badge) {
position: relative;
}
.wb-btn-dot {
position: absolute;
top: 0.25rem;
right: 0.25rem;
width: 8px;
height: 8px;
border-radius: var(--wb-r-full);
background: var(--wb-danger);
border: 2px solid var(--wb-surface);
pointer-events: none;
}
.wb-btn-dot--accent {
background: var(--wb-primary);
}
.wb-btn-badge {
position: absolute;
top: -0.25rem;
right: -0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding-inline: 0.25rem;
border-radius: var(--wb-r-full);
background: var(--wb-danger);
color: #fff;
border: 2px solid var(--wb-surface);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
@keyframes wb-btn-busy-spin {
to {
transform: rotate(360deg);
}
}
.wb-btn.is-busy {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: progress;
pointer-events: none;
opacity: 0.85;
}
.wb-btn.is-busy::before {
content: "";
flex: 0 0 auto;
inline-size: 0.85em;
block-size: 0.85em;
margin-inline-end: 0.5em;
border: 2px solid currentColor;
border-block-start-color: transparent;
border-radius: 50%;
animation: wb-btn-busy-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.wb-btn.is-busy::before {
    animation-duration: 1.6s;
  }
}
.wb-badge {
display: inline-flex;
align-items: center;
gap: var(--wb-s1);
padding: 0.25em 0.65em;
border-radius: var(--wb-r-full);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
background: var(--wb-surface-2);
color: var(--wb-muted);
border: 1px solid var(--wb-border);
}
.wb-badge-primary {
background: var(--wb-primary-soft);
color: var(--wb-primary);
border-color: transparent;
}
.wb-badge-success {
background: var(--wb-success-soft);
color: var(--wb-success);
border-color: transparent;
}
.wb-badge-warning {
background: var(--wb-warning-soft);
color: var(--wb-warning);
border-color: transparent;
}
.wb-badge-danger {
background: var(--wb-danger-soft);
color: var(--wb-danger);
border-color: transparent;
}
.wb-badge-info {
background: var(--wb-info-soft);
color: var(--wb-info);
border-color: transparent;
}
.wb-badge-dot::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: var(--wb-r-full);
background: currentColor;
flex-shrink: 0;
}
.wb-badge-lg {
font-size: 0.875rem;
padding: 0.35em 0.85em;
}
.wb-card {
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
box-shadow: var(--wb-shadow-sm);
overflow: hidden;
}
.wb-card-header {
padding: var(--wb-s4) var(--wb-s5);
border-bottom: 1px solid var(--wb-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
}
.wb-card-header > * {
min-width: 0;
}
.wb-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--wb-text);
margin: 0;
}
.wb-card-description {
margin: var(--wb-s1) 0 0;
font-size: 0.85rem;
line-height: var(--wb-line-height-base);
color: var(--wb-muted);
}
.wb-card-body {
padding: var(--wb-s5);
}
.wb-card-media {
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--wb-card-media-min-height, 10rem);
}
.wb-card-media img {
display: block;
max-width: 100%;
max-height: var(--wb-card-media-max-height, 10rem);
object-fit: contain;
}
.wb-card-media--start {
justify-content: flex-start;
}
.wb-card-media--center {
justify-content: center;
}
.wb-card-media--end {
justify-content: flex-end;
}
.wb-card-media--stretch img {
width: 100%;
}
.wb-card-media--aspect-auto {
aspect-ratio: auto;
}
.wb-card-media--aspect-square,
.wb-card-media--aspect-wide,
.wb-card-media--aspect-portrait {
min-height: 0;
}
.wb-card-media--aspect-square {
aspect-ratio: 1 / 1;
}
.wb-card-media--aspect-wide {
aspect-ratio: 16 / 9;
}
.wb-card-media--aspect-portrait {
aspect-ratio: 4 / 5;
}
.wb-card-media--aspect-square img,
.wb-card-media--aspect-wide img,
.wb-card-media--aspect-portrait img {
width: 100%;
height: 100%;
max-height: none;
}
.wb-card-footer {
padding: var(--wb-s3) var(--wb-s5);
border-top: 1px solid var(--wb-border);
background: var(--wb-surface-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s2);
flex-wrap: wrap;
}
.wb-card-footer > .wb-cluster:only-child {
flex: 1 1 100%;
}
.wb-detail-list {
display: grid;
gap: 0;
}
.wb-detail-row {
display: grid;
grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
gap: var(--wb-s2) var(--wb-s4);
padding: var(--wb-s3) 0;
border-bottom: 1px solid var(--wb-border);
}
.wb-detail-row:last-child {
border-bottom: none;
}
.wb-detail-label {
font-size: var(--wb-font-size-xs);
font-weight: 600;
line-height: var(--wb-line-height-base);
color: var(--wb-muted);
}
.wb-detail-value {
min-width: 0;
color: var(--wb-text);
overflow-wrap: anywhere;
}
.wb-detail-value-mono {
font-family: var(--wb-font-mono);
font-size: 0.875rem;
}
.wb-danger-zone {
border-color: color-mix(in srgb, var(--wb-danger) 32%, var(--wb-border));
background: color-mix(in srgb, var(--wb-danger-soft) 24%, var(--wb-surface) 76%);
}
.wb-danger-zone .wb-card-header,
.wb-danger-zone .wb-card-footer {
border-color: color-mix(in srgb, var(--wb-danger) 22%, var(--wb-border));
}
.wb-danger-zone .wb-card-title,
.wb-danger-zone-title {
color: var(--wb-danger);
}
.wb-danger-zone-description {
margin: var(--wb-s1) 0 0;
font-size: 0.85rem;
line-height: var(--wb-line-height-base);
color: color-mix(in srgb, var(--wb-danger) 72%, var(--wb-muted));
}
.wb-danger-zone-actions {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-wrap: wrap;
margin-inline-start: auto;
}
.wb-card > .wb-card-body:only-child {
padding: var(--wb-s5);
}
.wb-card-flat {
box-shadow: none;
}
.wb-card-muted {
background: var(--wb-surface-2);
}
.wb-card-highlight {
border-color: var(--wb-primary);
box-shadow: 0 0 0 1px var(--wb-primary), var(--wb-shadow-sm);
}
.wb-card-accent {
border-color: var(--wb-accent-border);
background: var(--wb-accent-softer);
}
.wb-stat {
display: flex;
flex-direction: column;
gap: var(--wb-s2);
padding: var(--wb-s5);
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
box-shadow: var(--wb-shadow-sm);
}
.wb-stat-label {
font-size: 0.75rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
}
.wb-stat-value {
font-size: 1.875rem;
font-weight: 700;
color: var(--wb-text);
line-height: 1;
}
.wb-stat-delta {
font-size: 0.8rem;
font-weight: 500;
}
.wb-stat-delta-up   { color: var(--wb-success); }
.wb-stat-delta-down { color: var(--wb-danger); }
.wb-stat-meta  { font-size: 0.8rem; font-weight: 500; color: var(--wb-muted); }
.wb-stat-up    { color: var(--wb-success); font-size: 0.8rem; font-weight: 500; }
.wb-stat-down  { color: var(--wb-danger);  font-size: 0.8rem; font-weight: 500; }
.wb-stat-bar   { margin-top: var(--wb-s3); }
@media (max-width: 640px) {
.wb-detail-row {
grid-template-columns: 1fr;
}
}
.wb-background-media.wb-background-media {
--wb-background-media-overlay: linear-gradient(
    color-mix(in srgb, var(--wb-surface) 48%, transparent),
    color-mix(in srgb, var(--wb-surface) 48%, transparent)
  );
background-image: var(--wb-background-media-overlay), var(--wb-background-media-image);
background-position: center, var(--wb-background-media-position, center);
background-repeat: no-repeat;
background-size: cover;
}
.wb-background-media--overlay-none {
--wb-background-media-overlay: linear-gradient(transparent, transparent);
}
.wb-background-media--overlay-medium {
--wb-background-media-overlay: linear-gradient(
    color-mix(in srgb, var(--wb-surface) 64%, transparent),
    color-mix(in srgb, var(--wb-surface) 64%, transparent)
  );
}
.wb-background-media--overlay-strong {
--wb-background-media-overlay: linear-gradient(
    color-mix(in srgb, var(--wb-surface) 78%, transparent),
    color-mix(in srgb, var(--wb-surface) 78%, transparent)
  );
}
.wb-alert {
display: block;
padding: var(--wb-s3) var(--wb-s4);
border-radius: var(--wb-r-lg);
border: 1px solid var(--wb-border);
background: var(--wb-surface-2);
color: var(--wb-text);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: var(--wb-s3);
}
.wb-alert:last-child {
margin-bottom: 0;
}
.wb-alert > * {
margin: 0;
}
.wb-alert > * + * {
margin-top: var(--wb-s2);
}
.wb-alert > .wb-alert-title + * {
margin-top: 0;
}
.wb-alert-icon {
display: inline-block;
width: 1.1rem;
height: 1.1rem;
margin: 0 0 var(--wb-s2);
vertical-align: middle;
}
.wb-alert-title {
font-weight: 600;
display: block;
margin: 0 0 var(--wb-s1);
}
.wb-alert-info {
background: var(--wb-info-soft);
border-color: transparent;
color: var(--wb-info-dark);
}
html[data-mode="dark"] .wb-alert-info,
html[data-theme="auto"]:not([data-mode="light"]) .wb-alert-info {
color: var(--wb-info-light);
}
.wb-alert-success {
background: var(--wb-success-soft);
border-color: transparent;
color: var(--wb-success-dark);
}
html[data-mode="dark"] .wb-alert-success,
html[data-theme="auto"]:not([data-mode="light"]) .wb-alert-success {
color: var(--wb-success-light);
}
.wb-alert-warning {
background: var(--wb-warning-soft);
border-color: transparent;
color: var(--wb-warning-dark);
}
html[data-mode="dark"] .wb-alert-warning,
html[data-theme="auto"]:not([data-mode="light"]) .wb-alert-warning {
color: var(--wb-warning-light);
}
.wb-alert-danger {
background: var(--wb-danger-soft);
border-color: transparent;
color: var(--wb-danger-dark);
}
html[data-mode="dark"] .wb-alert-danger,
html[data-theme="auto"]:not([data-mode="light"]) .wb-alert-danger {
color: var(--wb-danger-light);
}
.wb-alert-dismiss {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
}
.wb-alert-close {
flex-shrink: 0;
margin-left: auto;
padding: var(--wb-s1);
border-radius: var(--wb-r-sm);
color: inherit;
opacity: 0.6;
cursor: pointer;
background: none;
border: none;
line-height: 1;
font-size: 1rem;
transition: opacity var(--wb-t);
}
.wb-alert-close:hover { opacity: 1; }
.wb-alert.is-leaving {
transition: opacity 0.2s ease, transform 0.2s ease;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
}
.wb-callout {
padding: var(--wb-s4) var(--wb-s5);
border: 1px solid var(--wb-border);
border-left: 3px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface-2);
color: var(--wb-text);
font-size: var(--wb-font-size-sm);
line-height: var(--wb-line-height-relaxed);
}
.wb-callout > :last-child {
margin-bottom: 0;
}
.wb-callout-title {
display: block;
margin: 0 0 var(--wb-s1);
font-size: var(--wb-font-size-sm);
font-weight: 600;
color: var(--wb-text);
}
.wb-callout-muted {
background: var(--wb-surface-2);
border-color: var(--wb-border);
border-left-color: var(--wb-border);
}
.wb-callout-accent {
background: var(--wb-accent-softer);
border-color: var(--wb-accent-border);
border-left-color: var(--wb-accent);
}
.wb-callout-accent .wb-callout-title {
color: var(--wb-accent-text);
}
.wb-callout-success {
background: var(--wb-success-soft);
border-color: var(--wb-success-light);
border-left-color: var(--wb-success);
}
.wb-callout-success .wb-callout-title {
color: var(--wb-success-dark);
}
.wb-callout-warning {
background: var(--wb-warning-soft);
border-color: var(--wb-warning-light);
border-left-color: var(--wb-warning);
}
.wb-callout-warning .wb-callout-title {
color: var(--wb-warning-dark);
}
.wb-callout-danger {
background: var(--wb-danger-soft);
border-color: var(--wb-danger-light);
border-left-color: var(--wb-danger);
}
.wb-callout-danger .wb-callout-title {
color: var(--wb-danger-dark);
}
.wb-callout-info {
background: var(--wb-info-soft);
border-color: var(--wb-info-light);
border-left-color: var(--wb-info);
}
.wb-callout-info .wb-callout-title {
color: var(--wb-info-dark);
}
.wb-section-heading {
display: flex;
flex-direction: column;
gap: var(--wb-s3);
margin: 0 0 var(--wb-s8);
max-width: 46rem;
}
.wb-section-heading > :last-child {
margin-bottom: 0;
}
.wb-section-heading-center {
align-items: center;
margin-inline: auto;
text-align: center;
}
.wb-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--wb-s2);
margin: 0;
font-size: var(--wb-font-size-xs);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.08em;
color: var(--wb-muted);
}
.wb-eyebrow::before {
content: "";
width: var(--wb-s6);
height: 1px;
background: var(--wb-accent-border);
}
.wb-section-heading-center .wb-eyebrow::after {
content: "";
width: var(--wb-s6);
height: 1px;
background: var(--wb-accent-border);
}
.wb-section-title {
margin: 0;
font-size: clamp(1.85rem, 4vw, 3rem);
line-height: 1.02;
letter-spacing: -0.04em;
color: var(--wb-text);
}
.wb-section-text {
margin: 0;
max-width: 46rem;
font-size: var(--wb-font-size-lg);
line-height: var(--wb-line-height-relaxed);
color: var(--wb-muted);
}
@media (max-width: 720px) {
.wb-section-heading {
margin-bottom: var(--wb-s6);
}
.wb-section-title {
font-size: clamp(1.6rem, 8vw, 2.4rem);
}
.wb-section-text {
font-size: var(--wb-font-size-md);
}
}
.wb-label {
display: flex;
flex-direction: column;
gap: var(--wb-s1);
font-size: 0.875rem;
font-weight: 600;
color: var(--wb-text);
}
.wb-label-hint {
font-weight: 400;
font-size: 0.8rem;
color: var(--wb-muted);
}
.wb-field,
.wb-form-field {
display: grid;
gap: var(--wb-s2);
align-content: start;
}
.wb-field > :not(.wb-field-meta),
.wb-form-field > :not(.wb-field-meta) {
min-width: 0;
}
.wb-field-meta {
display: grid;
gap: var(--wb-s1);
align-content: start;
}
.wb-form-row .wb-field-meta {
min-height: calc(var(--wb-font-size-xs) * var(--wb-line-height-base));
}
.wb-field-hint,
.wb-form-help {
font-size: var(--wb-font-size-xs);
line-height: var(--wb-line-height-base);
color: var(--wb-muted);
}
.wb-field-error,
.wb-form-error {
font-size: var(--wb-font-size-xs);
line-height: var(--wb-line-height-base);
color: var(--wb-danger);
font-weight: 500;
}
.wb-form-error-summary {
display: grid;
gap: var(--wb-s2);
padding: var(--wb-s4);
border: 1px solid color-mix(in srgb, var(--wb-danger) 22%, var(--wb-border));
border-radius: var(--wb-r-md);
background: var(--wb-danger-soft);
color: color-mix(in srgb, var(--wb-danger) 88%, var(--wb-text));
}
.wb-form-error-summary strong {
font-size: 0.9rem;
}
.wb-form-error-summary ul {
margin: 0;
padding-left: 1.25rem;
}
.wb-input,
.wb-select,
.wb-textarea {
width: 100%;
padding: 0.55em 0.85em;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface);
color: var(--wb-text);
font: inherit;
font-size: 0.9rem;
line-height: 1.5;
transition: border-color var(--wb-t), box-shadow var(--wb-t);
outline: none;
}
.wb-input::placeholder,
.wb-textarea::placeholder {
color: var(--wb-muted);
opacity: 1;
}
.wb-input:focus,
.wb-select:focus,
.wb-textarea:focus {
border-color: var(--wb-primary);
box-shadow: 0 0 0 3px var(--wb-primary-soft);
}
.wb-input:disabled,
.wb-select:disabled,
.wb-textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--wb-surface-2);
}
.wb-input-error,
.wb-select-error,
.wb-textarea-error {
border-color: var(--wb-danger);
}
.wb-input-error:focus,
.wb-select-error:focus,
.wb-textarea-error:focus {
border-color: var(--wb-danger);
box-shadow: 0 0 0 3px var(--wb-danger-soft);
}
.wb-file {
width: 100%;
min-width: 0;
padding: 0.25rem;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface);
color: var(--wb-text);
font: inherit;
font-size: 0.9rem;
line-height: 1.5;
outline: none;
transition: border-color var(--wb-t), box-shadow var(--wb-t);
}
.wb-file::file-selector-button {
margin-inline-end: var(--wb-s3);
padding: 0.55em 0.85em;
border: 0;
border-radius: calc(var(--wb-r-md) - 2px);
background: var(--wb-surface-2);
color: var(--wb-text);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color var(--wb-t), color var(--wb-t);
}
.wb-file:hover:not(:disabled)::file-selector-button {
background: var(--wb-primary-soft);
color: var(--wb-primary);
}
.wb-file:focus {
border-color: var(--wb-primary);
box-shadow: 0 0 0 3px var(--wb-primary-soft);
}
.wb-file:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--wb-surface-2);
}
.wb-file:disabled::file-selector-button {
cursor: not-allowed;
}
.wb-file-error {
border-color: var(--wb-danger);
}
.wb-file-error:focus {
border-color: var(--wb-danger);
box-shadow: 0 0 0 3px var(--wb-danger-soft);
}
.wb-color {
width: 3rem;
height: 2.75rem;
padding: 0.25rem;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface);
cursor: pointer;
outline: none;
transition: border-color var(--wb-t), box-shadow var(--wb-t);
}
.wb-color::-webkit-color-swatch-wrapper {
padding: 0;
}
.wb-color::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--wb-r-md) - 3px);
}
.wb-color::-moz-color-swatch {
border: 0;
border-radius: calc(var(--wb-r-md) - 3px);
}
.wb-color:focus {
border-color: var(--wb-primary);
box-shadow: 0 0 0 3px var(--wb-primary-soft);
}
.wb-color:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--wb-surface-2);
}
.wb-color-error {
border-color: var(--wb-danger);
}
.wb-color-error:focus {
border-color: var(--wb-danger);
box-shadow: 0 0 0 3px var(--wb-danger-soft);
}
.wb-range {
width: 100%;
height: 2.75rem;
margin: 0;
padding: 0;
appearance: none;
background: transparent;
cursor: pointer;
outline: none;
}
.wb-range::-webkit-slider-runnable-track {
height: 0.375rem;
border-radius: var(--wb-r-full);
background: var(--wb-border);
}
.wb-range::-moz-range-track {
height: 0.375rem;
border: 0;
border-radius: var(--wb-r-full);
background: var(--wb-border);
}
.wb-range::-webkit-slider-thumb {
width: 1.125rem;
height: 1.125rem;
margin-top: -0.375rem;
appearance: none;
border: 2px solid var(--wb-surface);
border-radius: var(--wb-r-full);
background: var(--wb-primary);
box-shadow: 0 0 0 1px var(--wb-primary);
}
.wb-range::-moz-range-thumb {
width: 1.125rem;
height: 1.125rem;
border: 2px solid var(--wb-surface);
border-radius: var(--wb-r-full);
background: var(--wb-primary);
box-shadow: 0 0 0 1px var(--wb-primary);
}
.wb-range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 1px var(--wb-primary), 0 0 0 4px var(--wb-primary-soft);
}
.wb-range:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 1px var(--wb-primary), 0 0 0 4px var(--wb-primary-soft);
}
.wb-range:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.wb-range-error::-webkit-slider-runnable-track {
background: var(--wb-danger-soft);
}
.wb-range-error::-moz-range-track {
background: var(--wb-danger-soft);
}
.wb-range-error::-webkit-slider-thumb {
background: var(--wb-danger);
box-shadow: 0 0 0 1px var(--wb-danger);
}
.wb-range-error::-moz-range-thumb {
background: var(--wb-danger);
box-shadow: 0 0 0 1px var(--wb-danger);
}
.wb-range-error:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 1px var(--wb-danger), 0 0 0 4px var(--wb-danger-soft);
}
.wb-range-error:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 1px var(--wb-danger), 0 0 0 4px var(--wb-danger-soft);
}
.wb-input-mono {
font-family: var(--wb-font-mono);
font-size: 0.875rem;
letter-spacing: 0.01em;
}
.wb-textarea {
min-height: 120px;
resize: vertical;
}
.wb-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a84' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85em center;
padding-right: 2.2em;
}
.wb-input-sm, .wb-select-sm { font-size: 0.8rem; padding: 0.4em 0.7em; }
.wb-input-lg, .wb-select-lg { font-size: 1rem;   padding: 0.65em 1em; }
.wb-file-sm { font-size: 0.8rem; }
.wb-file-lg { font-size: 1rem; }
.wb-file-sm::file-selector-button { padding: 0.4em 0.7em; }
.wb-file-lg::file-selector-button { padding: 0.65em 1em; }
.wb-color-sm, .wb-range-sm { height: 2.25rem; }
.wb-color-sm { width: 2.5rem; }
.wb-color-lg, .wb-range-lg { height: 3.25rem; }
.wb-color-lg { width: 3.5rem; }
.wb-check,
.wb-radio {
display: flex;
align-items: center;
gap: var(--wb-s2);
cursor: pointer;
font-size: 0.9rem;
color: var(--wb-text);
user-select: none;
}
.wb-check input[type="checkbox"],
.wb-radio input[type="radio"] {
width: 1rem;
height: 1rem;
flex-shrink: 0;
accent-color: var(--wb-primary);
cursor: pointer;
}
.wb-switch {
display: inline-flex;
align-items: center;
gap: var(--wb-s2);
cursor: pointer;
font-size: 0.9rem;
color: var(--wb-text);
user-select: none;
}
.wb-switch-track {
position: relative;
width: 2.4rem;
height: 1.35rem;
background: var(--wb-border);
border-radius: var(--wb-r-full);
transition: background var(--wb-t);
flex-shrink: 0;
}
.wb-switch-track::after {
content: "";
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1.05rem;
height: 1.05rem;
border-radius: var(--wb-r-full);
background: var(--wb-white);
box-shadow: var(--wb-shadow-sm);
transition: transform var(--wb-t);
}
.wb-switch input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.wb-switch input:checked + .wb-switch-track {
background: var(--wb-primary);
}
.wb-switch input:checked + .wb-switch-track::after {
transform: translateX(1.05rem);
}
.wb-switch input:focus-visible + .wb-switch-track {
outline: 2px solid var(--wb-primary);
outline-offset: 2px;
}
.wb-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.wb-input-wrap .wb-input {
padding-left: 2.2em;
}
.wb-input-wrap .wb-input-icon {
position: absolute;
left: 0.75em;
color: var(--wb-muted);
pointer-events: none;
display: flex;
align-items: center;
}
.wb-input-wrap .wb-input-suffix {
position: absolute;
right: 0.75em;
color: var(--wb-muted);
display: flex;
align-items: center;
}
.wb-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wb-s4);
}
.wb-form-grid {
display: grid;
gap: var(--wb-s4);
}
.wb-form-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wb-s4);
}
.wb-form-card .wb-card-body {
display: grid;
gap: var(--wb-s5);
}
.wb-form-section {
display: grid;
gap: var(--wb-s4);
}
.wb-form-section + .wb-form-section {
padding-top: var(--wb-s5);
border-top: 1px solid var(--wb-border);
}
.wb-form-section-header {
display: grid;
gap: var(--wb-s1);
}
.wb-form-section-title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--wb-text);
}
.wb-form-section-description {
margin: 0;
font-size: 0.8rem;
line-height: var(--wb-line-height-base);
color: var(--wb-muted);
}
.wb-form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
flex-wrap: wrap;
}
.wb-form-actions {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-wrap: wrap;
}
.wb-card-footer .wb-action-group,
.wb-settings-section-footer .wb-action-group,
.wb-form-footer .wb-action-group,
.wb-card-footer .wb-form-actions,
.wb-form-footer .wb-form-actions {
margin-inline-start: auto;
}
@media (max-width: 600px) {
.wb-form-row { grid-template-columns: 1fr; }
.wb-form-grid-2 {
grid-template-columns: 1fr;
}
}
.wb-form-group {
display: grid;
gap: var(--wb-s4);
}
.wb-input-group {
display: flex;
align-items: stretch;
}
.wb-input-group .wb-input,
.wb-input-group .wb-select {
flex: 1 1 0%;
min-width: 0;
border-radius: 0;
position: relative;
z-index: 1;
}
.wb-input-group .wb-input-addon {
display: inline-flex;
align-items: center;
padding: 0.55em 0.85em;
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
color: var(--wb-muted);
font-size: 0.9rem;
line-height: 1.5;
white-space: nowrap;
flex-shrink: 0;
}
.wb-input-group .wb-input-addon:first-child {
border-right: none;
border-radius: var(--wb-r-md) 0 0 var(--wb-r-md);
}
.wb-input-group .wb-input-addon:last-child {
border-left: none;
border-radius: 0 var(--wb-r-md) var(--wb-r-md) 0;
}
.wb-input-group .wb-input-addon-btn {
flex-shrink: 0;
border-radius: 0;
margin-left: -1px;
}
.wb-input-group .wb-input-addon-btn:last-child {
border-radius: 0 var(--wb-r-md) var(--wb-r-md) 0;
}
.wb-input-group .wb-input-addon-btn:first-child {
border-radius: var(--wb-r-md) 0 0 var(--wb-r-md);
margin-left: 0;
margin-right: -1px;
}
.wb-input-group .wb-input:not(:first-child):not(:last-child),
.wb-input-group .wb-select:not(:first-child):not(:last-child) {
border-radius: 0;
}
.wb-input-group .wb-input:first-child,
.wb-input-group .wb-select:first-child {
border-radius: var(--wb-r-md) 0 0 var(--wb-r-md);
}
.wb-input-group .wb-input:last-child,
.wb-input-group .wb-select:last-child {
border-radius: 0 var(--wb-r-md) var(--wb-r-md) 0;
}
.wb-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
background: var(--wb-surface);
}
.wb-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.wb-table th,
.wb-table td {
padding: var(--wb-s3) var(--wb-s4);
text-align: left;
border-bottom: 1px solid var(--wb-border);
}
.wb-table th {
vertical-align: middle;
white-space: nowrap;
}
.wb-table td {
vertical-align: top;
white-space: normal;
overflow-wrap: break-word;
}
.wb-table .wb-table-break,
.wb-table-break td {
overflow-wrap: anywhere;
word-break: break-word;
}
.wb-table tbody th {
vertical-align: top;
white-space: normal;
}
.wb-table thead th {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--wb-muted);
background: var(--wb-surface-2);
white-space: nowrap;
}
.wb-table-wrap .wb-table thead th:first-child { border-top-left-radius: 0; }
.wb-table-wrap .wb-table thead th:last-child  { border-top-right-radius: 0; }
.wb-table-wrap > .wb-toolbar {
background: transparent;
border-radius: 0;
border-bottom: 1px solid var(--wb-border);
margin-bottom: 0;
}
.wb-table-wrap > .wb-toolbar + .wb-table thead th {
background: var(--wb-surface);
}
.wb-table tbody tr:last-child td {
border-bottom: none;
}
.wb-table-hover tbody tr:hover td {
background: var(--wb-surface-2);
}
.wb-table-striped tbody tr:nth-child(even) td {
background: var(--wb-surface-2);
}
.wb-table-sm th,
.wb-table-sm td {
padding: var(--wb-s2) var(--wb-s3);
}
.wb-table th.wb-table-key {
width: 1%;
white-space: nowrap;
}
.wb-table th[data-wb-sort] {
cursor: pointer;
user-select: none;
}
.wb-table th[data-wb-sort]:hover {
color: var(--wb-text);
}
.wb-table[data-wb-table-sort] thead th[data-wb-sort] {
padding: 0;
}
.wb-table-sort {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--wb-s2);
width: 100%;
min-height: 24px;
padding: var(--wb-s3) var(--wb-s4);
border: 0;
border-radius: var(--wb-r-sm);
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-align: inherit;
text-decoration: none;
cursor: pointer;
}
.wb-table-sm .wb-table-sort {
padding: var(--wb-s2) var(--wb-s3);
}
.wb-table-sort:hover,
.wb-table th[aria-sort] > .wb-table-sort {
color: var(--wb-text);
}
.wb-table-sort:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: -3px;
}
.wb-table-sort:disabled,
.wb-table-sort[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
.wb-table-sort-icon {
flex: 0 0 var(--wb-icon-size, 1rem);
}
@media (forced-colors: active) {
.wb-table-sort .wb-table-sort-icon {
forced-color-adjust: none;
background-color: ButtonText;
}
}
.wb-filter-row {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-wrap: wrap;
padding: var(--wb-s3) var(--wb-s4);
border-bottom: 1px solid var(--wb-border);
background: var(--wb-surface-2);
}
.wb-filter-row .wb-input,
.wb-filter-row .wb-select {
max-width: 220px;
}
.wb-table-actions {
width: 1%;
white-space: nowrap;
text-align: left;
}
.wb-table-actions .wb-action-group {
justify-content: flex-start;
flex-wrap: nowrap;
}
.wb-chart {
--wb-chart-height: 18rem;
--wb-chart-color-1: var(--wb-accent);
--wb-chart-color-2: #b45309;
--wb-chart-color-3: #7c3aed;
--wb-chart-color-4: #047857;
--wb-chart-color-5: #be185d;
--wb-chart-color-6: #0369a1;
--wb-chart-color-7: #9f1239;
--wb-chart-color-8: #52525b;
min-inline-size: 0;
}
[data-mode="dark"] .wb-chart {
--wb-chart-color-2: #fbbf24;
--wb-chart-color-3: #c4b5fd;
--wb-chart-color-4: #6ee7b7;
--wb-chart-color-5: #f9a8d4;
--wb-chart-color-6: #7dd3fc;
--wb-chart-color-7: #fda4af;
--wb-chart-color-8: #d4d4d8;
}
@media (prefers-color-scheme: dark) {
html[data-mode="auto"] .wb-chart {
--wb-chart-color-2: #fbbf24;
--wb-chart-color-3: #c4b5fd;
--wb-chart-color-4: #6ee7b7;
--wb-chart-color-5: #f9a8d4;
--wb-chart-color-6: #7dd3fc;
--wb-chart-color-7: #fda4af;
--wb-chart-color-8: #d4d4d8;
}
}
.wb-chart-viewport { block-size: var(--wb-chart-height); min-inline-size: 0; }
.wb-chart-viewport:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
.wb-chart-svg { direction: ltr; display: block; inline-size: 100%; block-size: 100%; overflow: hidden; }
.wb-chart-label { fill: var(--wb-muted); font: 12px var(--wb-font); }
.wb-chart-axis { stroke: var(--wb-muted); stroke-width: 1; }
.wb-chart-grid { stroke: var(--wb-border); stroke-width: 1; }
.wb-chart-series-1 { color: var(--wb-chart-color-1); }
.wb-chart-series-2 { color: var(--wb-chart-color-2); }
.wb-chart-series-3 { color: var(--wb-chart-color-3); }
.wb-chart-series-4 { color: var(--wb-chart-color-4); }
.wb-chart-series-5 { color: var(--wb-chart-color-5); }
.wb-chart-series-6 { color: var(--wb-chart-color-6); }
.wb-chart-series-7 { color: var(--wb-chart-color-7); }
.wb-chart-series-8 { color: var(--wb-chart-color-8); }
.wb-chart-line { fill: none; stroke: currentColor; stroke-width: 2; }
.wb-chart-series-2 .wb-chart-line { stroke-dasharray: 8 3; }
.wb-chart-series-3 .wb-chart-line { stroke-dasharray: 2 3; }
.wb-chart-series-4 .wb-chart-line { stroke-dasharray: 8 3 2 3; }
.wb-chart-series-5 .wb-chart-line { stroke-dasharray: 12 4; }
.wb-chart-series-6 .wb-chart-line { stroke-dasharray: 4 4; }
.wb-chart-series-7 .wb-chart-line { stroke-dasharray: 12 3 3 3; }
.wb-chart-series-8 .wb-chart-line { stroke-dasharray: 1 3; }
.wb-chart-mark { fill: currentColor; }
.wb-chart-mark.is-active { stroke: var(--wb-text); stroke-width: 3; paint-order: stroke fill; }
.wb-chart-readout { min-block-size: 1.5em; overflow-wrap: anywhere; font-size: var(--wb-font-size-sm); }
.wb-chart-legend { display: flex; flex-wrap: wrap; gap: var(--wb-s2) var(--wb-s4); padding: 0; margin-block: var(--wb-s2); list-style: none; }
.wb-chart-legend > li { display: inline-flex; align-items: center; gap: var(--wb-s2); font-size: var(--wb-font-size-sm); min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
.wb-chart-swatch { inline-size: 1.5rem; block-size: .5rem; flex-shrink: 0; }
.wb-chart.is-ready > .wb-chart-fallback { display: none; }
.wb-chart [hidden] { display: none !important; }
meter.wb-meter {
-webkit-appearance: none;
appearance: none;
display: block;
inline-size: 100%;
min-inline-size: 0;
block-size: .625rem;
padding: 0;
border: 0;
border-radius: var(--wb-r-full);
background: var(--wb-surface-2);
color: var(--wb-accent);
}
meter.wb-meter::-webkit-meter-inner-element { display: block; block-size: 100%; }
meter.wb-meter::-webkit-meter-bar {
block-size: 100%;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-full);
background: var(--wb-surface-2);
box-shadow: none;
}
meter.wb-meter::-webkit-meter-optimum-value,
meter.wb-meter::-webkit-meter-suboptimum-value,
meter.wb-meter::-webkit-meter-even-less-good-value {
border-radius: var(--wb-r-full);
background: var(--wb-accent);
}
meter.wb-meter::-moz-meter-bar {
border-radius: var(--wb-r-full);
background: var(--wb-accent);
}
@supports (-moz-appearance: none) {
meter.wb-meter { border: 1px solid var(--wb-border); }
}
@media (forced-colors: active) {
meter.wb-meter { appearance: auto; }
}
.wb-media {
display: grid;
gap: var(--wb-s3);
margin: 0;
}
.wb-media-img {
display: block;
width: 100%;
height: auto;
border-radius: var(--wb-r-lg);
background: var(--wb-surface-2);
}
.wb-media-caption {
margin: 0;
font-size: var(--wb-font-size-sm);
line-height: 1.6;
color: var(--wb-muted);
}
body.wb-overlay-lock {
overflow: hidden;
}
.wb-overlay-root {
position: fixed;
inset: 0;
z-index: var(--wb-z-overlay);
isolation: isolate;
pointer-events: none;
overflow: visible;
}
.wb-overlay-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
}
.wb-overlay-layer > * {
pointer-events: auto;
}
.wb-overlay-layer--toast > * {
z-index: var(--wb-z-toast);
}
.wb-overlay-layer--loading > * {
z-index: var(--wb-z-loading);
}
[data-wb-overlay-runtime="true"][data-wb-overlay-interactive="false"] {
pointer-events: none;
}
.wb-overlay-backdrop {
position: absolute;
inset: 0;
pointer-events: auto;
background: var(--wb-overlay);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: wb-overlay-backdrop-in 0.18s ease;
}
.wb-overlay-backdrop-dark {
background: var(--wb-overlay-dark);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
@keyframes wb-overlay-backdrop-in {
from { opacity: 0; }
to   { opacity: 1; }
}
.wb-modal {
display: none;
position: fixed;
inset: 0;
align-items: center;
justify-content: center;
padding: var(--wb-s4);
}
.wb-modal.is-open {
display: flex;
}
.wb-modal-dialog {
position: relative;
z-index: 1;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-xl);
box-shadow: var(--wb-shadow-xl);
width: 100%;
max-width: 520px;
max-height: calc(100vh - 2 * var(--wb-s4));
display: flex;
flex-direction: column;
overflow: hidden;
animation: wb-modal-in 0.18s ease;
}
@keyframes wb-modal-in {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
.wb-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
padding: var(--wb-s4) var(--wb-s5);
border-bottom: 1px solid var(--wb-border);
flex-shrink: 0;
}
.wb-modal-title {
font-size: 1.05rem;
font-weight: 700;
margin: 0;
}
.wb-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: var(--wb-r-md);
color: var(--wb-muted);
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
transition: background var(--wb-t), color var(--wb-t);
}
.wb-modal-close:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
}
.wb-modal-dialog > .wb-modal-close {
position: absolute;
top: var(--wb-s4);
right: var(--wb-s4);
z-index: 2;
width: 2.25rem;
height: 2.25rem;
background: color-mix(in srgb, var(--wb-surface) 85%, transparent);
}
.wb-modal-body {
padding: var(--wb-s5);
overflow-y: auto;
flex: 1;
}
.wb-modal-dialog > .wb-modal-body:first-child {
padding-top: calc(var(--wb-s10) + var(--wb-s2));
}
.wb-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--wb-s2);
padding: var(--wb-s3) var(--wb-s5);
border-top: 1px solid var(--wb-border);
flex-shrink: 0;
background: var(--wb-surface-2);
}
.wb-modal-sm .wb-modal-dialog { max-width: 380px; }
.wb-modal-lg .wb-modal-dialog { max-width: 720px; }
.wb-modal-xl .wb-modal-dialog { max-width: 960px; }
.wb-modal-xl .wb-modal-body .wb-media {
justify-items: center;
}
.wb-modal-xl .wb-modal-body .wb-media-img {
width: auto;
max-width: 100%;
max-height: min(74vh, 56rem);
object-fit: contain;
border-radius: calc(var(--wb-r-xl) - var(--wb-s1));
}
.wb-modal-xl .wb-modal-body .wb-media-caption {
max-width: min(100%, 56rem);
text-align: center;
}
.wb-confirm .wb-modal-dialog {
max-width: 420px;
text-align: center;
}
.wb-confirm-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--wb-r-full);
margin: 0 auto var(--wb-s4);
font-size: 1.5rem;
}
.wb-confirm-icon-danger {
background: var(--wb-danger-soft);
color: var(--wb-danger);
}
.wb-confirm-icon-warning {
background: var(--wb-warning-soft);
color: var(--wb-warning);
}
.wb-confirm-icon-info {
background: var(--wb-info-soft);
color: var(--wb-info);
}
.wb-confirm-icon-success {
background: var(--wb-success-soft);
color: var(--wb-success);
}
.wb-confirm-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--wb-text);
margin: 0 0 var(--wb-s2);
}
.wb-confirm-message {
font-size: 0.875rem;
color: var(--wb-muted);
line-height: 1.6;
margin: 0;
}
.wb-confirm .wb-modal-footer {
justify-content: center;
gap: var(--wb-s3);
}
@media (max-width: 640px) {
.wb-modal-dialog > .wb-modal-body:first-child {
    padding-top: calc(var(--wb-s8) + var(--wb-s1));
  }

  .wb-modal-footer {
    flex-wrap: wrap;
  }

  .wb-modal-footer > * {
    flex: 1 1 auto;
  }
}
.wb-dropdown {
position: relative;
display: inline-block;
}
.wb-dropdown-menu {
display: none;
min-width: 200px;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
box-shadow: var(--wb-shadow-lg);
padding: var(--wb-s1) 0;
animation: wb-dropdown-in 0.12s ease;
}
html:not(.wb-js) .wb-dropdown-menu {
position: absolute;
}
html.wb-js .wb-dropdown-menu {
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.wb-dropdown-menu.is-open {
display: block;
}
@keyframes wb-dropdown-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0);    }
}
.wb-dropdown-item {
display: flex;
align-items: center;
gap: var(--wb-s2);
padding: var(--wb-s2) var(--wb-s4) var(--wb-s2) calc(var(--wb-s4) + var(--wb-s3));
font-size: 0.9rem;
color: var(--wb-text);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
transition: background var(--wb-t-f);
}
.wb-dropdown-item:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-dropdown-item:focus-visible {
background: var(--wb-primary-soft);
outline: none;
}
.wb-dropdown-item.is-active {
color: var(--wb-accent-text);
background: var(--wb-accent-softer);
font-weight: 600;
}
.wb-dropdown-item.is-active:hover {
background: var(--wb-accent-soft);
}
.wb-dropdown-item-danger {
color: var(--wb-danger);
}
.wb-dropdown-item-danger:hover {
background: var(--wb-danger-soft);
}
.wb-dropdown-divider {
border: none;
border-top: 1px solid var(--wb-border);
margin: var(--wb-s1) 0;
}
.wb-dropdown-label {
padding: var(--wb-s1) var(--wb-s4);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
}
.wb-dropdown-menu[data-wb-overlay-side="top"] {
transform-origin: bottom left;
}
.wb-dropdown-menu--panel {
min-width: 320px;
max-width: 92vw;
max-height: min(70vh, 420px);
overflow-y: auto;
}
.wb-tabs {
display: flex;
flex-direction: column;
}
.wb-tabs-nav,
.wb-tab-list {
display: flex;
align-items: flex-end;
gap: 0;
border-bottom: 2px solid var(--wb-border);
overflow-x: auto;
scrollbar-width: none;
}
.wb-tabs-nav::-webkit-scrollbar,
.wb-tab-list::-webkit-scrollbar {
display: none;
}
.wb-tab,
.wb-tabs-btn,
.wb-tab-item {
display: inline-flex;
align-items: center;
gap: var(--wb-s1);
padding: var(--wb-s2) var(--wb-s4);
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--wb-muted);
font: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: color var(--wb-t), border-color var(--wb-t);
}
.wb-tab:hover,
.wb-tabs-btn:hover,
.wb-tab-item:hover {
color: var(--wb-text);
}
.wb-tab.is-active,
.wb-tabs-btn.is-active,
.wb-tab-item.is-active {
color: var(--wb-primary);
box-shadow: inset 0 -2px 0 var(--wb-primary);
}
.wb-tab:focus-visible,
.wb-tabs-btn:focus-visible,
.wb-tab-item:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: -2px;
}
.wb-tab-panel,
.wb-tabs-panel {
display: none;
padding: var(--wb-s5) 0;
}
.wb-tab-panel.is-active,
.wb-tabs-panel.is-active {
display: block;
}
.wb-tabs-pills .wb-tabs-nav,
.wb-tabs-pills .wb-tab-list {
border-bottom: none;
gap: var(--wb-s1);
padding: var(--wb-s2);
background: var(--wb-surface-2);
border-radius: var(--wb-r-lg);
}
.wb-tabs-pills .wb-tab,
.wb-tabs-pills .wb-tabs-btn,
.wb-tabs-pills .wb-tab-item {
border-bottom: none;
border-radius: var(--wb-r-md);
padding: var(--wb-s2) var(--wb-s3);
margin: 0;
}
.wb-tabs-pills .wb-tab.is-active,
.wb-tabs-pills .wb-tabs-btn.is-active,
.wb-tabs-pills .wb-tab-item.is-active {
background: var(--wb-surface);
color: var(--wb-primary);
box-shadow: var(--wb-shadow-sm);
}
.wb-tabs-pills .wb-tab-panel,
.wb-tabs-pills .wb-tabs-panel {
padding-top: var(--wb-s4);
}
.wb-accordion {
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
overflow: hidden;
}
.wb-accordion-item {
border-bottom: 1px solid var(--wb-border);
}
.wb-accordion-item:last-child {
border-bottom: none;
}
.wb-accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--wb-s4) var(--wb-s5);
background: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--wb-text);
text-align: left;
gap: var(--wb-s3);
transition: background var(--wb-t);
}
.wb-accordion-trigger:hover {
background: var(--wb-surface-2);
}
.wb-accordion-trigger:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: -2px;
}
.wb-accordion-icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
transition: transform var(--wb-t);
color: var(--wb-muted);
}
.wb-accordion-item.is-open .wb-accordion-icon {
transform: rotate(180deg);
}
.wb-accordion-content,
.wb-accordion-body {
display: none;
font-size: 0.9rem;
color: var(--wb-muted);
line-height: 1.7;
}
.wb-accordion-body {
padding: var(--wb-s4) var(--wb-s5) var(--wb-s5);
}
.wb-accordion-item.is-open .wb-accordion-content,
.wb-accordion-item.is-open .wb-accordion-body {
display: block;
}
details.wb-accordion-item > summary.wb-accordion-trigger {
list-style: none;
}
details.wb-accordion-item > summary.wb-accordion-trigger::-webkit-details-marker {
display: none;
}
details.wb-accordion-item > summary.wb-accordion-trigger .wb-accordion-icon {
transform: none;
}
details.wb-accordion-item[open] > summary.wb-accordion-trigger .wb-accordion-icon {
transform: rotate(180deg);
}
details.wb-accordion-item:not([open]) > .wb-accordion-content,
details.wb-accordion-item:not([open]) > .wb-accordion-body {
display: none;
}
details.wb-accordion-item[open] > .wb-accordion-content,
details.wb-accordion-item[open] > .wb-accordion-content > .wb-accordion-body,
details.wb-accordion-item[open] > .wb-accordion-body {
display: block;
}
.wb-accordion-flush {
border: none;
border-radius: 0;
}
.wb-accordion-flush .wb-accordion-item {
border-bottom: 1px solid var(--wb-border);
border-radius: 0;
}
.wb-accordion-flush .wb-accordion-item:last-child {
border-bottom: none;
}
.wb-accordion-trigger::after {
content: "";
flex: 0 0 auto;
width: 0.5rem;
height: 0.5rem;
margin-inline-start: auto;
margin-inline-end: 0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
color: var(--wb-muted);
transform: rotate(45deg);
transition: transform var(--wb-t);
}
.wb-accordion-item.is-open:not(details) > .wb-accordion-trigger::after,
.wb-accordion-trigger[aria-expanded="true"]::after {
transform: rotate(225deg);
}
details.wb-accordion-item > summary.wb-accordion-trigger::after {
transform: rotate(45deg);
}
details.wb-accordion-item[open] > summary.wb-accordion-trigger::after {
transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
.wb-accordion-trigger::after { transition: none; }
}
.wb-pagination {
--wb-pagination-gap: var(--wb-s1);
--wb-pagination-padding: var(--wb-s1);
--wb-pagination-radius: var(--wb-r-lg);
--wb-pagination-border: color-mix(in srgb, var(--wb-border) 82%, transparent);
--wb-pagination-bg: color-mix(in srgb, var(--wb-surface-2) 58%, transparent);
--wb-pagination-link-bg: var(--wb-surface);
--wb-pagination-link-hover-bg: color-mix(in srgb, var(--wb-surface-2) 88%, var(--wb-surface) 12%);
--wb-pagination-link-hover-border: color-mix(in srgb, var(--wb-border) 72%, var(--wb-accent-border) 28%);
--wb-pagination-current-bg: color-mix(in srgb, var(--wb-accent-soft) 76%, var(--wb-surface) 24%);
--wb-pagination-current-border: color-mix(in srgb, var(--wb-accent-border) 82%, var(--wb-border) 18%);
--wb-pagination-current-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-accent-border) 28%, transparent);
--wb-pagination-disabled-bg: color-mix(in srgb, var(--wb-surface-2) 94%, transparent);
display: flex;
align-items: center;
gap: var(--wb-s3);
flex-wrap: wrap;
max-width: 100%;
padding: var(--wb-pagination-padding);
border: 1px solid var(--wb-pagination-border);
border-radius: var(--wb-pagination-radius);
background: var(--wb-pagination-bg);
}
.wb-pagination-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wb-pagination-gap);
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.wb-pagination-item {
display: flex;
align-items: center;
}
.wb-pagination-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wb-s2);
min-width: 2.5rem;
min-height: 2.5rem;
padding: 0 var(--wb-s4);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
color: var(--wb-text);
text-decoration: none;
background: var(--wb-pagination-link-bg);
cursor: pointer;
white-space: nowrap;
box-shadow: 0 1px 0 rgb(255 255 255 / 0.04);
transition: background var(--wb-t), border-color var(--wb-t), color var(--wb-t), box-shadow var(--wb-t), transform var(--wb-t-f);
user-select: none;
}
.wb-pagination-link {
font: inherit;
}
a.wb-pagination-link,
button.wb-pagination-link {
transition: background var(--wb-t), border-color var(--wb-t), color var(--wb-t), box-shadow var(--wb-t);
}
button.wb-pagination-link {
cursor: pointer;
}
.wb-pagination-link .wb-icon {
width: 1rem;
height: 1rem;
}
.wb-pagination-item > a,
.wb-pagination-item > button,
.wb-pagination-item > span {
text-decoration: none;
}
.wb-pagination-item > .wb-pagination-link,
.wb-pagination-item > a,
.wb-pagination-item > button,
.wb-pagination-item > span {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wb-pagination-link:hover {
background: var(--wb-pagination-link-hover-bg);
border-color: var(--wb-pagination-link-hover-border);
box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06),
    0 0 0 1px color-mix(in srgb, var(--wb-border) 38%, transparent);
text-decoration: none;
}
.wb-pagination-link:focus-visible {
outline: none;
border-color: var(--wb-pagination-link-hover-border);
box-shadow:
    0 0 0 2px var(--wb-surface),
    0 0 0 4px rgb(var(--wb-accent-ring-rgb) / 0.34),
    0 1px 0 rgb(255 255 255 / 0.06);
}
.wb-pagination-item.is-active > .wb-pagination-link,
.wb-pagination-link[aria-current="page"] {
background: var(--wb-pagination-current-bg);
border-color: var(--wb-pagination-current-border);
color: var(--wb-accent-text);
box-shadow: var(--wb-pagination-current-shadow);
font-weight: 650;
cursor: default;
}
.wb-pagination-item.is-disabled > .wb-pagination-link,
.wb-pagination-link[aria-disabled="true"] {
background: var(--wb-pagination-disabled-bg);
border-color: var(--wb-border);
color: var(--wb-muted);
box-shadow: none;
opacity: 0.58;
cursor: not-allowed;
pointer-events: none;
}
.wb-pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
min-height: 2.5rem;
padding: 0 var(--wb-s1);
color: var(--wb-muted);
font-size: 0.875rem;
letter-spacing: 0.04em;
line-height: 1;
}
.wb-pagination-item:has(.wb-pagination-ellipsis) {
margin-inline: calc(var(--wb-s1) * -0.25);
}
.wb-pagination-compact .wb-pagination-link,
.wb-pagination-compact .wb-pagination-ellipsis {
min-width: 2rem;
min-height: 2rem;
padding: 0 var(--wb-s2);
font-size: 0.8125rem;
}
.wb-pagination-compact {
--wb-pagination-gap: calc(var(--wb-s1) * 0.75);
--wb-pagination-padding: calc(var(--wb-s1) * 0.75);
}
.wb-pagination-compact .wb-pagination-ellipsis {
min-width: 1.75rem;
min-height: 2rem;
padding: 0;
}
.wb-pagination-info {
font-size: 0.875rem;
color: var(--wb-muted);
margin-left: auto;
padding-inline: var(--wb-s1);
white-space: nowrap;
}
@media (max-width: 560px) {
.wb-pagination {
gap: var(--wb-s2);
align-items: flex-start;
}
.wb-pagination-link,
.wb-pagination-ellipsis {
min-width: 2rem;
min-height: 2rem;
padding: 0 var(--wb-s2);
font-size: 0.8125rem;
}
.wb-pagination-list {
gap: calc(var(--wb-pagination-gap) * 0.9);
}
.wb-pagination-ellipsis {
min-width: 1.6rem;
padding: 0;
}
.wb-pagination-info {
width: 100%;
margin-left: 0;
padding-inline: 0;
white-space: normal;
}
}
.wb-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--wb-r-full);
background: var(--wb-primary-soft);
color: var(--wb-primary);
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
overflow: hidden;
flex-shrink: 0;
user-select: none;
}
.wb-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--wb-r-full);
display: block;
}
.wb-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.72rem; }
.wb-avatar-lg { width: 3.5rem;  height: 3.5rem;  font-size: 1.1rem;  }
.wb-avatar-xl { width: 5rem;    height: 5rem;    font-size: 1.5rem;  }
.wb-avatar-success { background: var(--wb-success-soft); color: var(--wb-success); }
.wb-avatar-warning { background: var(--wb-warning-soft); color: var(--wb-warning); }
.wb-avatar-danger  { background: var(--wb-danger-soft);  color: var(--wb-danger);  }
.wb-avatar-info    { background: var(--wb-info-soft);    color: var(--wb-info);    }
.wb-avatar-muted   { background: var(--wb-surface-3);    color: var(--wb-muted);   }
.wb-avatar-group {
display: flex;
align-items: center;
}
.wb-avatar-group .wb-avatar {
border: 2px solid var(--wb-surface);
margin-left: -0.6rem;
}
.wb-avatar-group .wb-avatar:first-child {
margin-left: 0;
}
.wb-toast-container {
position: fixed;
top: var(--wb-s6);
bottom: auto;
right: var(--wb-s6);
display: flex;
flex-direction: column;
gap: var(--wb-s2);
pointer-events: none;
max-width: 380px;
width: calc(100% - 2 * var(--wb-s6));
}
.wb-toast {
display: flex;
align-items: flex-start;
gap: var(--wb-s3);
padding: var(--wb-s3) var(--wb-s4);
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
box-shadow: var(--wb-shadow-lg);
pointer-events: auto;
font-size: 0.875rem;
line-height: 1.5;
animation: wb-toast-in 0.22s ease;
}
@keyframes wb-toast-in {
from { opacity: 0; transform: translateX(24px); }
to   { opacity: 1; transform: translateX(0);    }
}
.wb-toast.is-leaving {
animation: wb-toast-out 0.18s ease forwards;
}
@keyframes wb-toast-out {
to { opacity: 0; transform: translateX(24px); height: 0; padding: 0; margin: 0; }
}
.wb-toast-icon {
flex-shrink: 0;
width: 1.1rem;
height: 1.1rem;
margin-top: 0.1em;
}
.wb-toast-body {
flex: 1;
}
.wb-toast-title {
font-weight: 600;
display: block;
margin-bottom: 0.15em;
}
.wb-toast-close {
flex-shrink: 0;
padding: var(--wb-s1);
border-radius: var(--wb-r-sm);
background: none;
border: none;
color: var(--wb-muted);
cursor: pointer;
line-height: 1;
font-size: 1rem;
opacity: 0.7;
transition: opacity var(--wb-t);
}
.wb-toast-close:hover { opacity: 1; }
.wb-toast-success { border-left: 3px solid var(--wb-success); }
.wb-toast-warning { border-left: 3px solid var(--wb-warning); }
.wb-toast-danger  { border-left: 3px solid var(--wb-danger);  }
.wb-toast-info    { border-left: 3px solid var(--wb-info);    }
.wb-toast-container-top-right {
top: var(--wb-s6);
bottom: auto;
right: var(--wb-s6);
left: auto;
}
.wb-toast-container-bottom-right {
top: auto;
bottom: var(--wb-s6);
right: var(--wb-s6);
left: auto;
}
.wb-toast-container-top-right .wb-toast {
animation: wb-toast-in-top 0.22s ease;
}
@keyframes wb-toast-in-top {
from { opacity: 0; transform: translateY(-12px); }
to   { opacity: 1; transform: translateY(0);     }
}
.wb-toast-container-top-center {
top: var(--wb-s6);
bottom: auto;
right: auto;
left: 50%;
transform: translateX(-50%);
}
.wb-toast-container-top-center .wb-toast {
animation: wb-toast-in-top 0.22s ease;
}
.wb-toast-container-bottom-center {
top: auto;
bottom: var(--wb-s6);
right: auto;
left: 50%;
transform: translateX(-50%);
}
.wb-toast-container-top-left {
top: var(--wb-s6);
bottom: auto;
right: auto;
left: var(--wb-s6);
}
.wb-toast-container-top-left .wb-toast {
animation: wb-toast-in-left 0.22s ease;
}
@keyframes wb-toast-in-left {
from { opacity: 0; transform: translateX(-24px); }
to   { opacity: 1; transform: translateX(0);     }
}
.wb-toast-container-bottom-left {
top: auto;
bottom: var(--wb-s6);
right: auto;
left: var(--wb-s6);
}
.wb-toast-container-bottom-left .wb-toast {
animation: wb-toast-in-left 0.22s ease;
}
.wb-toast-container-bottom-right .wb-toast,
.wb-toast-container-bottom-center .wb-toast {
animation: wb-toast-in 0.22s ease;
}
@media (prefers-reduced-motion: reduce) {
.wb-toast,
.wb-toast-container-top-right .wb-toast,
.wb-toast-container-top-center .wb-toast,
.wb-toast-container-top-left .wb-toast,
.wb-toast-container-bottom-right .wb-toast,
.wb-toast-container-bottom-center .wb-toast,
.wb-toast-container-bottom-left .wb-toast {
animation-duration: 0.01ms;
}
}
@keyframes wb-shimmer {
0%   { background-position: -400px 0; }
100% { background-position:  400px 0; }
}
.wb-skeleton {
display: inline-block;
width: 100%;
height: 1em;
border-radius: var(--wb-r-sm);
background: linear-gradient(
    90deg,
    var(--wb-surface-2) 25%,
    var(--wb-surface-3) 50%,
    var(--wb-surface-2) 75%
  );
background-size: 800px 100%;
animation: wb-shimmer 1.5s infinite linear;
}
.wb-skeleton-text   { height: 0.9em; border-radius: var(--wb-r-sm); }
.wb-skeleton-title  { height: 1.4em; width: 60%; border-radius: var(--wb-r-sm); }
.wb-skeleton-circle { border-radius: var(--wb-r-full); aspect-ratio: 1 / 1; }
.wb-skeleton-rect   { border-radius: var(--wb-r-lg); }
.wb-skeleton-card {
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
padding: var(--wb-s5);
display: grid;
gap: var(--wb-s3);
}
.wb-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--wb-s16) var(--wb-s8);
gap: var(--wb-s3);
color: var(--wb-muted);
}
.wb-empty-icon {
width: 3.5rem;
height: 3.5rem;
color: var(--wb-border);
margin-bottom: var(--wb-s2);
}
.wb-empty-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--wb-text);
margin: 0;
}
.wb-empty-text {
font-size: 0.9rem;
max-width: 340px;
line-height: 1.6;
margin: 0;
}
.wb-empty-action {
margin-top: var(--wb-s2);
}
.wb-empty-sm {
padding: var(--wb-s8) var(--wb-s4);
}
.wb-empty-sm .wb-empty-icon {
width: 2.5rem;
height: 2.5rem;
}
.wb-nav-group {
display: flex;
flex-direction: column;
}
.wb-nav-group-toggle {
display: flex;
align-items: center;
gap: var(--wb-s3);
padding: 0.45em var(--wb-s3);
border-radius: var(--wb-r-md);
font-size: 0.9rem;
font-weight: 500;
color: var(--wb-muted);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
transition:
    background var(--wb-t),
    color var(--wb-t);
white-space: nowrap;
overflow: hidden;
font: inherit;
}
.wb-nav-group-toggle:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
}
.wb-nav-group-toggle.is-active {
color: var(--wb-primary);
}
.wb-nav-group-icon {
font-size: 1.05rem;
flex-shrink: 0;
width: 1.2em;
text-align: center;
}
.wb-nav-group-label {
flex: 1;
}
.wb-nav-group-arrow {
margin-left: auto;
flex-shrink: 0;
width: 1em;
height: 1em;
opacity: 0.5;
transition: transform var(--wb-t);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235a6a84' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.wb-nav-group.is-open > .wb-nav-group-toggle .wb-nav-group-arrow {
transform: rotate(180deg);
}
.wb-nav-group-items {
display: none;
flex-direction: column;
gap: 2px;
padding-left: calc(var(--wb-s3) + 1.2em + var(--wb-s3));
padding-top: var(--wb-s1);
padding-bottom: var(--wb-s1);
}
.wb-nav-group.is-open > .wb-nav-group-items {
display: flex;
}
.wb-nav-group-item {
display: flex;
align-items: center;
gap: var(--wb-s2);
padding: 0.35em var(--wb-s3);
border-radius: var(--wb-r-md);
font-size: 0.875rem;
font-weight: 400;
color: var(--wb-muted);
text-decoration: none;
transition:
    background var(--wb-t),
    color var(--wb-t);
white-space: nowrap;
overflow: hidden;
}
.wb-nav-group-item:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
text-decoration: none;
}
.wb-nav-group-item.is-active {
color: var(--wb-primary);
font-weight: 600;
}
.wb-nav-group-item .wb-nav-group-count {
margin-left: auto;
font-size: 0.72rem;
font-weight: 600;
background: var(--wb-surface-2);
color: var(--wb-muted);
padding: 0.1em 0.5em;
border-radius: var(--wb-r-full);
flex-shrink: 0;
}
.wb-menu {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--wb-s1) 0;
}
.wb-menu-item {
display: flex;
align-items: center;
gap: var(--wb-s3);
padding: 0.45em var(--wb-s3);
border-radius: var(--wb-r-md);
font-size: 0.9rem;
font-weight: 500;
color: var(--wb-text);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
font: inherit;
transition:
    background var(--wb-t),
    color var(--wb-t);
}
.wb-menu-item:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-menu-item.is-active {
background: var(--wb-primary-soft);
color: var(--wb-primary);
font-weight: 600;
}
.wb-menu-item-danger {
color: var(--wb-danger);
}
.wb-menu-item-danger:hover {
background: var(--wb-danger-soft);
color: var(--wb-danger);
}
.wb-menu-divider {
border: none;
border-top: 1px solid var(--wb-border);
margin: var(--wb-s1) 0;
}
.wb-menu-label {
padding: var(--wb-s1) var(--wb-s3);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
user-select: none;
}
.wb-submenu {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: var(--wb-s4);
border-left: 2px solid var(--wb-border);
margin-left: var(--wb-s2);
margin-top: 2px;
}
.wb-submenu .wb-menu-item {
font-size: 0.85rem;
font-weight: 400;
color: var(--wb-muted);
}
.wb-topbar-actions {
display: flex;
align-items: center;
gap: var(--wb-s2);
}
.wb-topbar-identity {
display: flex;
align-items: center;
gap: var(--wb-s3);
min-width: 0;
}
.wb-topbar-identity-copy {
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
.wb-topbar-product {
font-size: 0.875rem;
font-weight: 700;
color: var(--wb-text);
line-height: 1.2;
}
.wb-topbar-context {
font-size: 0.9rem;
font-weight: 600;
color: var(--wb-text);
line-height: 1.2;
}
.wb-topbar-action {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: var(--wb-r-md);
background: none;
border: none;
cursor: pointer;
color: var(--wb-muted);
font-size: 1rem;
transition:
    background var(--wb-t),
    color var(--wb-t);
}
.wb-topbar-action:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
}
.wb-topbar-action-dot {
position: absolute;
top: 0.25rem;
right: 0.25rem;
width: 8px;
height: 8px;
border-radius: var(--wb-r-full);
background: var(--wb-danger);
border: 2px solid var(--wb-surface);
}
.wb-topbar-user {
display: flex;
align-items: center;
gap: var(--wb-s2);
padding: 0.25em 0.5em 0.25em 0.25em;
border-radius: var(--wb-r-lg);
background: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.875rem;
font-weight: 500;
color: var(--wb-text);
text-decoration: none;
transition: background var(--wb-t);
}
.wb-topbar-user:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-topbar-user-info {
display: flex;
flex-direction: column;
text-align: left;
line-height: 1.3;
}
.wb-topbar-user-name {
font-weight: 600;
font-size: 0.875rem;
color: var(--wb-text);
}
.wb-topbar-user-role {
font-size: 0.75rem;
color: var(--wb-muted);
}
.wb-filter-bar {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-wrap: wrap;
padding: var(--wb-s3) var(--wb-s4);
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
}
.wb-filter-bar-attached {
border-bottom: none;
border-radius: var(--wb-r-lg) var(--wb-r-lg) 0 0;
}
.wb-filter-bar-start {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.wb-filter-bar-end {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-shrink: 0;
}
.wb-search-bar {
position: relative;
display: flex;
align-items: center;
}
.wb-search-bar-input {
width: 100%;
padding: 0.45em 0.85em 0.45em 2.2em;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface);
color: var(--wb-text);
font: inherit;
font-size: 0.875rem;
line-height: 1.5;
transition: border-color var(--wb-t), box-shadow var(--wb-t);
outline: none;
}
.wb-search-bar-input::placeholder {
color: var(--wb-muted);
}
.wb-search-bar-input:focus {
border-color: var(--wb-primary);
box-shadow: 0 0 0 3px var(--wb-primary-soft);
}
.wb-search-bar-icon {
position: absolute;
left: 0.7em;
color: var(--wb-muted);
pointer-events: none;
display: flex;
align-items: center;
font-size: 0.95rem;
}
.wb-search-bar-clear {
position: absolute;
right: 0.5em;
display: flex;
align-items: center;
justify-content: center;
width: 1.4rem;
height: 1.4rem;
border-radius: var(--wb-r-sm);
background: none;
border: none;
color: var(--wb-muted);
cursor: pointer;
font-size: 0.8rem;
opacity: 0.7;
transition: opacity var(--wb-t), background var(--wb-t);
}
.wb-search-bar-clear:hover {
opacity: 1;
background: var(--wb-surface-2);
}
.wb-search-bar-sm .wb-search-bar-input {
font-size: 0.8rem;
padding: 0.35em 0.7em 0.35em 2em;
}
.wb-search-bar-lg .wb-search-bar-input {
font-size: 1rem;
padding: 0.6em 1em 0.6em 2.4em;
}
.wb-search-bar-full {
width: 100%;
}
.wb-filter-chip {
display: inline-flex;
align-items: center;
gap: var(--wb-s1);
padding: 0.3em 0.65em;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-full);
font-size: 0.8rem;
font-weight: 500;
color: var(--wb-text);
background: var(--wb-surface);
cursor: pointer;
user-select: none;
transition:
    background var(--wb-t),
    border-color var(--wb-t),
    color var(--wb-t);
white-space: nowrap;
}
.wb-filter-chip:hover {
background: var(--wb-surface-2);
}
.wb-filter-chip.is-active {
background: var(--wb-primary-soft);
border-color: var(--wb-primary);
color: var(--wb-primary);
}
.wb-filter-chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
border-radius: var(--wb-r-full);
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
font-size: 0.85em;
opacity: 0.6;
transition: opacity var(--wb-t);
}
.wb-filter-chip-remove:hover {
opacity: 1;
}
.wb-filter-select {
padding: 0.4em 2em 0.4em 0.75em;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a84' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.65em center;
color: var(--wb-text);
font: inherit;
font-size: 0.875rem;
cursor: pointer;
appearance: none;
outline: none;
transition: border-color var(--wb-t), box-shadow var(--wb-t);
}
.wb-filter-select:focus {
border-color: var(--wb-primary);
box-shadow: 0 0 0 3px var(--wb-primary-soft);
}
.wb-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25em;
height: 1.25em;
padding: 0 0.3em;
border-radius: var(--wb-r-full);
background: var(--wb-primary);
color: var(--wb-accent-on);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
}
.wb-filter-results {
font-size: 0.8rem;
color: var(--wb-muted);
white-space: nowrap;
}
@media (max-width: 600px) {
.wb-filter-bar {
flex-direction: column;
align-items: stretch;
}
.wb-filter-bar-start,
.wb-filter-bar-end {
width: 100%;
}
.wb-search-bar-full {
width: 100%;
}
}
.wb-filter-bar--fields {
display: block;
container-type: inline-size;
}
.wb-filter-bar-fields {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--wb-s5) var(--wb-s3);
min-width: 0;
}
.wb-filter-bar-fields > .wb-field {
flex: 1 1 10rem;
display: grid;
grid-template-rows: 1fr auto;
row-gap: var(--wb-s1);
min-inline-size: min(100%, 10rem);
align-content: normal;
}
.wb-filter-bar-fields > .wb-field > .wb-label {
align-self: end;
overflow-wrap: anywhere;
}
.wb-filter-bar-fields > .wb-field > :is(.wb-input, .wb-select, .wb-filter-select) {
width: 100%;
min-width: 0;
}
.wb-filter-bar-fields > .wb-field > :is(.wb-input, .wb-select, .wb-filter-select),
.wb-filter-bar-actions > .wb-action-group > .wb-btn {
block-size: 2.75rem;
min-block-size: 2.75rem;
}
.wb-filter-bar-fields > .wb-filter-bar-search {
flex-basis: 100%;
}
.wb-filter-bar-actions {
flex: 0 1 auto;
align-self: flex-end;
margin-inline-start: auto;
max-inline-size: 100%;
min-inline-size: 0;
}
.wb-filter-bar-actions > .wb-action-group {
inline-size: max-content;
max-inline-size: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
@container (min-width: 70rem) {
.wb-filter-bar-fields > .wb-filter-bar-search {
flex: 2 1 18rem;
}
}
.wb-action-group {
display: flex;
align-items: center;
gap: var(--wb-s1);
flex-wrap: wrap;
}
.wb-action-group form {
display: inline-flex;
margin: 0;
}
.wb-action-btn,
.wb-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--wb-r-md);
background: none;
border: 1px solid transparent;
cursor: pointer;
color: var(--wb-muted);
font-size: 0.9rem;
text-decoration: none;
transition:
    background var(--wb-t),
    border-color var(--wb-t),
    color var(--wb-t);
flex-shrink: 0;
}
.wb-action-btn:hover,
.wb-action-icon:hover {
background: var(--wb-surface-2);
border-color: var(--wb-border);
color: var(--wb-text);
text-decoration: none;
}
.wb-action-btn:focus-visible,
.wb-action-icon:focus-visible {
outline: 2px solid var(--wb-primary);
outline-offset: 2px;
}
.wb-action-btn-view:hover {
background: var(--wb-info-soft);
border-color: transparent;
color: var(--wb-info);
}
.wb-action-btn-edit:hover {
background: var(--wb-primary-soft);
border-color: transparent;
color: var(--wb-primary);
}
.wb-action-btn-delete:hover {
background: var(--wb-danger-soft);
border-color: transparent;
color: var(--wb-danger);
}
.wb-action-link {
display: inline-flex;
align-items: center;
gap: var(--wb-s1);
font-size: 0.8rem;
font-weight: 500;
color: var(--wb-primary);
text-decoration: none;
padding: 0.2em 0.4em;
border-radius: var(--wb-r-sm);
transition:
    background var(--wb-t),
    color var(--wb-t);
}
.wb-action-link:hover {
background: var(--wb-primary-soft);
text-decoration: none;
}
.wb-action-link-danger {
color: var(--wb-danger);
}
.wb-action-link-danger:hover {
background: var(--wb-danger-soft);
}
.wb-action-more {
position: relative;
display: inline-block;
}
.wb-action-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--wb-r-md);
background: none;
border: 1px solid transparent;
cursor: pointer;
color: var(--wb-muted);
font-size: 1.1rem;
letter-spacing: 0.05em;
transition:
    background var(--wb-t),
    border-color var(--wb-t),
    color var(--wb-t);
}
.wb-action-more-btn:hover {
background: var(--wb-surface-2);
border-color: var(--wb-border);
color: var(--wb-text);
}
.wb-action-more .wb-dropdown-menu {
min-width: 160px;
right: 0;
left: auto;
}
.wb-status-pill {
display: inline-flex;
align-items: center;
gap: var(--wb-s1);
padding: 0.22em 0.65em;
border-radius: var(--wb-r-full);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.wb-status-pill::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: var(--wb-r-full);
background: currentColor;
flex-shrink: 0;
}
.wb-status-active {
background: var(--wb-success-soft);
color: var(--wb-success);
}
.wb-status-inactive {
background: var(--wb-surface-2);
color: var(--wb-muted);
}
.wb-status-pending {
background: var(--wb-warning-soft);
color: var(--wb-warning);
}
.wb-status-error {
background: var(--wb-danger-soft);
color: var(--wb-danger);
}
.wb-status-info {
background: var(--wb-info-soft);
color: var(--wb-info);
}
.wb-table-check-cell {
width: 2.5rem;
padding: 0 var(--wb-s3);
}
.wb-spinner {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: 2px solid var(--wb-border);
border-top-color: var(--wb-primary);
border-radius: var(--wb-r-full);
animation: wb-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes wb-spin {
to { transform: rotate(360deg); }
}
.wb-spinner-sm {
width: 1rem;
height: 1rem;
border-width: 1.5px;
}
.wb-spinner-lg {
width: 2.25rem;
height: 2.25rem;
border-width: 3px;
}
.wb-spinner-xl {
width: 3rem;
height: 3rem;
border-width: 3.5px;
}
.wb-spinner-white {
border-color: var(--wb-overlay-white);
border-top-color: var(--wb-white);
}
.wb-spinner-muted {
border-color: var(--wb-surface-3);
border-top-color: var(--wb-muted);
}
.wb-spinner-pulse {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.wb-spinner-pulse > span {
width: 0.55rem;
height: 0.55rem;
border-radius: var(--wb-r-full);
background: var(--wb-primary);
animation: wb-spinner-pulse 0.9s ease-in-out infinite;
}
.wb-spinner-pulse > span:nth-child(2) {
animation-delay: 0.12s;
}
.wb-spinner-pulse > span:nth-child(3) {
animation-delay: 0.24s;
}
.wb-spinner-pulse-sm > span {
width: 0.42rem;
height: 0.42rem;
}
.wb-spinner-pulse-lg > span {
width: 0.68rem;
height: 0.68rem;
}
.wb-spinner-pulse-muted > span {
background: var(--wb-muted);
}
.wb-spinner-pulse-white > span {
background: var(--wb-white);
}
@keyframes wb-spinner-pulse {
0%, 80%, 100% {
opacity: 0.35;
transform: scale(0.72);
}
40% {
opacity: 1;
transform: scale(1);
}
}
.wb-loading-inline {
display: flex;
align-items: center;
gap: var(--wb-s3);
font-size: 0.875rem;
color: var(--wb-muted);
}
.wb-loading-overlay {
position: relative;
}
.wb-loading-overlay::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--wb-surface) 75%, transparent);
border-radius: inherit;
z-index: 1;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.wb-loading-overlay .wb-loading-spinner-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.wb-loading-screen {
position: fixed;
inset: 0;
z-index: var(--wb-z-loading);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wb-s4);
background: color-mix(in srgb, var(--wb-surface) 90%, transparent);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.wb-loading-screen-text {
font-size: 0.9rem;
color: var(--wb-muted);
font-weight: 500;
}
.wb-loading-screen:not(.is-visible) {
display: none;
}
.wb-progress-bar {
width: 100%;
height: 6px;
background: var(--wb-surface-2);
border-radius: var(--wb-r-full);
overflow: hidden;
}
.wb-progress-bar-fill {
height: 100%;
background: var(--wb-primary);
border-radius: var(--wb-r-full);
transition: width 0.3s ease;
}
.wb-progress-bar-indeterminate .wb-progress-bar-fill {
width: 40%;
animation: wb-progress-slide 1.4s ease infinite;
}
@keyframes wb-progress-slide {
0%   { transform: translateX(-100%); }
100% { transform: translateX(300%); }
}
.wb-progress-bar-thin { height: 3px; }
.wb-progress-bar-thick { height: 10px; }
.wb-progress-bar-success .wb-progress-bar-fill { background: var(--wb-success); }
.wb-progress-bar-danger  .wb-progress-bar-fill { background: var(--wb-danger); }
.wb-progress-bar-warning .wb-progress-bar-fill { background: var(--wb-warning); }
progress.wb-progress-bar {
--wb-progress-fill: var(--wb-primary);
-webkit-appearance: none;
appearance: none;
display: block;
min-width: 0;
padding: 0;
border: 0;
color: var(--wb-progress-fill);
}
progress.wb-progress-bar::-webkit-progress-bar {
background: var(--wb-surface-2);
border-radius: var(--wb-r-full);
}
progress.wb-progress-bar::-webkit-progress-value {
background: var(--wb-progress-fill);
border-radius: var(--wb-r-full);
}
progress.wb-progress-bar::-moz-progress-bar {
background: var(--wb-progress-fill);
border-radius: var(--wb-r-full);
}
progress.wb-progress-bar-success { --wb-progress-fill: var(--wb-success); }
progress.wb-progress-bar-danger  { --wb-progress-fill: var(--wb-danger); }
progress.wb-progress-bar-warning { --wb-progress-fill: var(--wb-warning); }
progress.wb-progress-bar:indeterminate {
background-image: linear-gradient(var(--wb-progress-fill), var(--wb-progress-fill));
background-size: 40% 100%;
background-repeat: no-repeat;
animation: wb-progress-native-slide 1.4s ease infinite;
}
progress.wb-progress-bar:indeterminate::-webkit-progress-bar {
background: transparent;
}
progress.wb-progress-bar:indeterminate::-moz-progress-bar {
background: transparent;
}
@keyframes wb-progress-native-slide {
from { background-position: -66.667% 0; }
to   { background-position: 166.667% 0; }
}
@media (prefers-reduced-motion: reduce) {
progress.wb-progress-bar:indeterminate {
    animation: none;
    background-position: center;
  }
}
@media (forced-colors: active) {
progress.wb-progress-bar,
progress.wb-progress-bar:indeterminate {
    -webkit-appearance: auto;
    appearance: auto;
    background: revert;
    color: revert;
    animation: none;
  }

  progress.wb-progress-bar::-webkit-progress-bar { background: revert; }
  progress.wb-progress-bar::-webkit-progress-value { background: revert; }
  progress.wb-progress-bar::-moz-progress-bar { background: revert; }
}
.wb-loading-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--wb-primary);
z-index: var(--wb-z-loading);
animation: wb-loading-bar-in 0.2s ease;
transform-origin: left center;
}
.wb-loading-bar.is-done {
animation: wb-loading-bar-done 0.3s ease forwards;
}
@keyframes wb-loading-bar-in {
from { transform: scaleX(0); }
}
@keyframes wb-loading-bar-done {
to { opacity: 0; transform: scaleX(1); }
}
.wb-popover {
position: relative;
display: inline-block;
}
.wb-popover-panel {
display: none;
min-width: 240px;
max-width: 320px;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
box-shadow: var(--wb-shadow-lg);
padding: var(--wb-s4);
animation: wb-popover-in 0.14s ease;
}
html:not(.wb-js) .wb-popover-panel {
position: absolute;
}
html.wb-js .wb-popover-panel {
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.wb-popover-panel.is-open {
display: block;
}
@keyframes wb-popover-in {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0);    }
}
.wb-popover-panel[data-wb-overlay-side="top"] {
animation-name: wb-popover-in-top;
}
@keyframes wb-popover-in-top {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0);   }
}
.wb-popover-panel[data-wb-overlay-side="right"] {
animation-name: wb-popover-in-right;
}
@keyframes wb-popover-in-right {
from { opacity: 0; transform: translateX(-6px); }
to   { opacity: 1; transform: translateX(0);    }
}
.wb-popover-panel[data-wb-overlay-side="left"] {
animation-name: wb-popover-in-left;
}
@keyframes wb-popover-in-left {
from { opacity: 0; transform: translateX(6px); }
to   { opacity: 1; transform: translateX(0);   }
}
.wb-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s2);
padding-bottom: var(--wb-s3);
margin-bottom: var(--wb-s3);
border-bottom: 1px solid var(--wb-border);
}
.wb-popover-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--wb-text);
margin: 0;
}
.wb-popover-close {
display: flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: var(--wb-r-sm);
background: none;
border: none;
color: var(--wb-muted);
cursor: pointer;
font-size: 0.9rem;
transition: background var(--wb-t), color var(--wb-t);
}
.wb-popover-close:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
}
.wb-popover-body {
font-size: 0.875rem;
color: var(--wb-text);
line-height: 1.6;
}
.wb-popover-footer {
display: flex;
align-items: center;
gap: var(--wb-s2);
padding-top: var(--wb-s3);
margin-top: var(--wb-s3);
border-top: 1px solid var(--wb-border);
}
.wb-popover-arrow {
position: absolute;
top: -6px;
left: 1.25rem;
width: 12px;
height: 6px;
overflow: visible;
pointer-events: none;
}
.wb-popover-arrow::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
transform: rotate(45deg) translate(-2px, 2px);
border-bottom-right-radius: 2px;
}
.wb-popover-panel-end .wb-popover-arrow {
left: auto;
right: 1.25rem;
}
.wb-popover-panel[data-wb-overlay-side="top"] .wb-popover-arrow {
top: auto;
bottom: -6px;
}
.wb-popover-panel[data-wb-overlay-side="top"] .wb-popover-arrow::before {
transform: rotate(45deg) translate(-2px, -2px);
}
.wb-popover-panel[data-wb-overlay-side="right"] .wb-popover-arrow,
.wb-popover-panel[data-wb-overlay-side="left"] .wb-popover-arrow {
top: 1rem;
left: auto;
right: auto;
width: 6px;
height: 12px;
}
.wb-popover-panel[data-wb-overlay-side="right"] .wb-popover-arrow {
left: -6px;
}
.wb-popover-panel[data-wb-overlay-side="left"] .wb-popover-arrow {
right: -6px;
}
.wb-popover-panel[data-wb-overlay-side="right"] .wb-popover-arrow::before,
.wb-popover-panel[data-wb-overlay-side="left"] .wb-popover-arrow::before {
width: 12px;
height: 12px;
top: 0;
left: 0;
}
.wb-popover-panel[data-wb-overlay-side="right"] .wb-popover-arrow::before {
transform: rotate(45deg) translate(2px, 2px);
}
.wb-popover-panel[data-wb-overlay-side="left"] .wb-popover-arrow::before {
transform: rotate(45deg) translate(-6px, 2px);
}
.wb-drawer {
position: fixed;
background: var(--wb-surface);
display: flex;
flex-direction: column;
box-shadow: var(--wb-shadow-xl);
visibility: hidden;
transition: transform 0.25s ease, visibility 0s linear 0.25s;
overflow: hidden;
}
.wb-drawer.is-open {
visibility: visible;
transition: transform 0.25s ease;
}
.wb-drawer,
.wb-drawer-right {
top: 0;
right: 0;
bottom: 0;
width: min(420px, 90vw);
transform: translateX(100%);
border-left: 1px solid var(--wb-border);
}
.wb-drawer.is-open,
.wb-drawer-right.is-open {
transform: translateX(0);
}
.wb-drawer-left {
top: 0;
left: 0;
right: auto;
bottom: 0;
width: min(420px, 90vw);
transform: translateX(-100%);
border-right: 1px solid var(--wb-border);
border-left: none;
}
.wb-drawer-left.is-open {
transform: translateX(0);
}
.wb-drawer-bottom {
bottom: 0;
top: auto;
left: 0;
right: 0;
width: auto;
height: min(480px, 85vh);
transform: translateY(100%);
border-top: 1px solid var(--wb-border);
border-bottom: none;
border-radius: var(--wb-r-xl) var(--wb-r-xl) 0 0;
}
.wb-drawer-bottom.is-open {
transform: translateY(0);
}
.wb-drawer-top {
top: 0;
bottom: auto;
left: 0;
right: 0;
width: auto;
height: min(360px, 85vh);
transform: translateY(-100%);
border-bottom: 1px solid var(--wb-border);
border-top: none;
border-radius: 0 0 var(--wb-r-xl) var(--wb-r-xl);
}
.wb-drawer-top.is-open {
transform: translateY(0);
}
.wb-drawer-sm { width: min(320px, 90vw); }
.wb-drawer-lg { width: min(560px, 90vw); }
.wb-drawer-xl { width: min(720px, 90vw); }
.wb-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
padding: var(--wb-s4) var(--wb-s5);
border-bottom: 1px solid var(--wb-border);
flex-shrink: 0;
}
.wb-drawer-title {
font-size: 1.05rem;
font-weight: 700;
margin: 0;
color: var(--wb-text);
}
.wb-drawer-close {
display: flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: var(--wb-r-md);
color: var(--wb-muted);
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
transition: background var(--wb-t), color var(--wb-t);
}
.wb-drawer-close:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
}
.wb-drawer-body {
flex: 1;
overflow-y: auto;
padding: var(--wb-s5);
}
.wb-drawer-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--wb-s2);
padding: var(--wb-s3) var(--wb-s5);
border-top: 1px solid var(--wb-border);
flex-shrink: 0;
background: var(--wb-surface-2);
}
.wb-drawer-handle {
display: flex;
justify-content: center;
padding: var(--wb-s3) 0 0;
flex-shrink: 0;
}
.wb-drawer-handle::before {
content: "";
display: block;
width: 2.5rem;
height: 4px;
border-radius: var(--wb-r-full);
background: var(--wb-border);
}
.wb-cmd-backdrop {
display: none;
position: fixed;
inset: 0;
align-items: flex-start;
justify-content: center;
padding-top: clamp(3rem, 12vh, 8rem);
padding-inline: var(--wb-s4);
}
.wb-cmd-backdrop.is-open {
display: flex;
}
.wb-cmd-dialog {
width: 100%;
max-width: 580px;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-xl);
box-shadow: var(--wb-shadow-xl);
overflow: hidden;
animation: wb-cmd-in 0.18s ease;
display: flex;
flex-direction: column;
max-height: min(560px, 70vh);
}
@keyframes wb-cmd-in {
from { opacity: 0; transform: scale(0.97) translateY(-8px); }
to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.wb-cmd-search {
display: flex;
align-items: center;
gap: var(--wb-s3);
padding: var(--wb-s3) var(--wb-s4);
border-bottom: 1px solid var(--wb-border);
flex-shrink: 0;
}
.wb-cmd-search-icon {
color: var(--wb-muted);
font-size: 1.1rem;
flex-shrink: 0;
display: flex;
align-items: center;
}
.wb-cmd-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: 1rem;
color: var(--wb-text);
line-height: 1.5;
}
.wb-cmd-input::placeholder {
color: var(--wb-muted);
}
.wb-cmd-shortcut-hint {
font-size: 0.72rem;
color: var(--wb-muted);
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--wb-s1);
}
.wb-cmd-results {
flex: 1;
overflow-y: auto;
padding: var(--wb-s1) 0;
}
.wb-cmd-group {
padding: var(--wb-s1) var(--wb-s2);
}
.wb-cmd-group + .wb-cmd-group {
border-top: 1px solid var(--wb-border);
margin-top: var(--wb-s1);
padding-top: var(--wb-s2);
}
.wb-cmd-group-label {
padding: var(--wb-s1) var(--wb-s2);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
user-select: none;
}
.wb-cmd-item {
display: flex;
align-items: center;
gap: var(--wb-s3);
padding: var(--wb-s2) var(--wb-s3);
border-radius: var(--wb-r-md);
font-size: 0.9rem;
color: var(--wb-text);
text-decoration: none;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
font: inherit;
transition: background var(--wb-t-f);
}
.wb-cmd-item:hover,
.wb-cmd-item.is-selected {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-cmd-item.is-selected {
background: var(--wb-primary-soft);
color: var(--wb-primary);
}
.wb-cmd-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--wb-r-md);
background: var(--wb-surface-2);
color: var(--wb-muted);
font-size: 0.95rem;
flex-shrink: 0;
transition: background var(--wb-t-f), color var(--wb-t-f);
}
.wb-cmd-item.is-selected .wb-cmd-item-icon {
background: var(--wb-primary-soft);
color: var(--wb-primary);
}
.wb-cmd-item-text {
flex: 1;
min-width: 0;
}
.wb-cmd-item-title {
display: block;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-cmd-item-sub {
display: block;
font-size: 0.78rem;
color: var(--wb-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-cmd-item-kbd {
font-size: 0.7rem;
color: var(--wb-muted);
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-sm);
padding: 0.1em 0.4em;
white-space: nowrap;
flex-shrink: 0;
}
.wb-cmd-match {
color: var(--wb-primary);
font-weight: 600;
}
.wb-cmd-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--wb-s8) var(--wb-s4);
gap: var(--wb-s2);
color: var(--wb-muted);
font-size: 0.875rem;
}
.wb-cmd-footer {
display: flex;
align-items: center;
gap: var(--wb-s4);
padding: var(--wb-s2) var(--wb-s4);
border-top: 1px solid var(--wb-border);
background: var(--wb-surface-2);
flex-shrink: 0;
}
.wb-cmd-footer-hint {
display: flex;
align-items: center;
gap: var(--wb-s1);
font-size: 0.72rem;
color: var(--wb-muted);
}
.wb-cmd-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.2em;
height: 1.2em;
padding: 0 0.25em;
font-size: 0.7rem;
color: var(--wb-muted);
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: 3px;
font-family: var(--wb-font-mono);
}
.wb-divider {
border: none;
border-top: 1px solid var(--wb-border);
margin: var(--wb-s4) 0;
}
.wb-divider-label {
display: flex;
align-items: center;
gap: var(--wb-s3);
margin: var(--wb-s4) 0;
color: var(--wb-muted);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
}
.wb-divider-label::before,
.wb-divider-label::after {
content: "";
flex: 1;
border-top: 1px solid var(--wb-border);
}
.wb-divider-label-start::after { display: none; }
.wb-divider-label-start::before { flex: 0 0 1rem; }
.wb-divider-v {
display: inline-block;
width: 1px;
background: var(--wb-border);
align-self: stretch;
margin-inline: var(--wb-s2);
flex-shrink: 0;
}
.wb-divider-sm { margin: var(--wb-s2) 0; }
.wb-divider-lg { margin: var(--wb-s8) 0; }
.wb-divider-dashed {
border-top-style: dashed;
}
.wb-divider-dotted {
border-top-style: dotted;
}
.wb-list {
display: flex;
flex-direction: column;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
overflow: hidden;
}
.wb-list-item {
display: flex;
align-items: center;
gap: var(--wb-s3);
padding: var(--wb-s3) var(--wb-s4);
border-bottom: 1px solid var(--wb-border);
font-size: 0.9rem;
color: var(--wb-text);
background: var(--wb-surface);
text-decoration: none;
transition: background var(--wb-t-f);
min-width: 0;
}
.wb-list-item:last-child {
border-bottom: none;
}
.wb-list-item-action {
cursor: pointer;
}
.wb-list-item-action:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-list-item-action.is-active {
background: var(--wb-primary-soft);
color: var(--wb-primary);
}
.wb-list-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--wb-r-md);
background: var(--wb-surface-2);
color: var(--wb-muted);
font-size: 0.95rem;
flex-shrink: 0;
}
.wb-list-item-text {
flex: 1;
min-width: 0;
}
.wb-list-item-title {
display: block;
font-weight: 500;
color: var(--wb-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-list-item-sub {
display: block;
font-size: 0.78rem;
color: var(--wb-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0.1em;
}
.wb-list-item-end {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-shrink: 0;
margin-left: auto;
color: var(--wb-muted);
font-size: 0.85rem;
}
.wb-list-flush {
border: none;
border-radius: 0;
}
.wb-list-flush .wb-list-item {
padding-inline: 0;
}
.wb-list-inset {
border: none;
}
.wb-list-sm .wb-list-item {
padding: var(--wb-s2) var(--wb-s3);
font-size: 0.85rem;
}
.wb-list-header {
padding: var(--wb-s2) var(--wb-s4);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
background: var(--wb-surface-2);
border-bottom: 1px solid var(--wb-border);
user-select: none;
}
.wb-list-numbered {
counter-reset: wb-list;
}
.wb-list-numbered .wb-list-item::before {
counter-increment: wb-list;
content: counter(wb-list);
display: flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
height: 1.6rem;
border-radius: var(--wb-r-full);
background: var(--wb-surface-2);
color: var(--wb-muted);
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
.wb-list-item--unread {
background: color-mix(in srgb, var(--wb-primary) 7%, var(--wb-surface));
}
.wb-list-item--unread .wb-list-item-title {
font-weight: 600;
}
.wb-link-list {
display: grid;
gap: 1px;
background: var(--wb-border);
border: 1px solid var(--wb-border);
}
.wb-link-list-item {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: var(--wb-s5);
align-items: start;
padding: var(--wb-s5);
background: var(--wb-surface);
color: inherit;
text-decoration: none;
transition: background var(--wb-t), color var(--wb-t);
}
.wb-link-list-item:hover {
background: var(--wb-surface-2);
text-decoration: none;
}
.wb-link-list-main {
min-width: 0;
}
.wb-link-list-title {
display: block;
margin: 0 0 var(--wb-s1);
font-size: var(--wb-font-size-md);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--wb-text);
}
.wb-link-list-meta {
display: block;
font-size: var(--wb-font-size-sm);
color: var(--wb-muted);
}
.wb-link-list-desc {
font-size: var(--wb-font-size-sm);
line-height: var(--wb-line-height-relaxed);
color: var(--wb-muted);
}
.wb-link-list-desc code,
.wb-link-list-meta code {
font-family: var(--wb-font-mono);
font-size: 0.82em;
color: var(--wb-accent-text);
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
padding: 0.08em 0.4em;
border-radius: var(--wb-r-sm);
}
@media (max-width: 960px) {
.wb-link-list-item {
grid-template-columns: 1fr;
}
}
.wb-link-list-item--media {
grid-template-columns: auto minmax(0, 220px) minmax(0, 1fr);
}
.wb-link-list-thumb {
display: block;
width: 4rem;
height: 4rem;
object-fit: cover;
border-radius: var(--wb-r-md);
border: 1px solid var(--wb-border);
}
.wb-link-list-icon {
line-height: 1;
color: var(--wb-muted);
}
@media (max-width: 960px) {
.wb-link-list-item--media {
grid-template-columns: auto minmax(0, 1fr);
}
.wb-link-list-item--media .wb-link-list-desc {
grid-column: 1 / -1;
}
}
.wb-link-list--stacked .wb-link-list-item {
grid-template-columns: minmax(0, 1fr);
gap: var(--wb-s1) var(--wb-s4);
align-items: center;
}
.wb-link-list--stacked .wb-link-list-item--media {
grid-template-columns: auto minmax(0, 1fr);
}
.wb-link-list--stacked .wb-link-list-item--media > .wb-link-list-main,
.wb-link-list--stacked .wb-link-list-item--media > .wb-link-list-desc {
grid-column: 2;
}
.wb-link-list--stacked .wb-link-list-item--media:has(.wb-link-list-desc) > .wb-link-list-thumb,
.wb-link-list--stacked .wb-link-list-item--media:has(.wb-link-list-desc) > .wb-link-list-icon {
grid-row: 1 / span 2;
}
.wb-link-list--cards {
gap: var(--wb-s3);
background: transparent;
border: 0;
}
.wb-link-list--cards .wb-link-list-item {
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
box-shadow: var(--wb-shadow-sm);
}
.wb-link-list--cards .wb-link-list-title {
font-size: 1.05rem;
font-weight: 900;
line-height: 1.1;
}
.wb-link-list--thumb-wide .wb-link-list-thumb {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.wb-link-list--thumb-wide .wb-link-list-item--media:has(> .wb-link-list-thumb) {
grid-template-columns: clamp(5rem, 20%, 10rem) minmax(0, 220px) minmax(0, 1fr);
}
.wb-link-list--stacked.wb-link-list--thumb-wide .wb-link-list-item--media:has(> .wb-link-list-thumb) {
grid-template-columns: clamp(5rem, 20%, 10rem) minmax(0, 1fr);
}
@media (max-width: 960px) {
.wb-link-list--thumb-wide .wb-link-list-item--media:has(> .wb-link-list-thumb) {
    grid-template-columns: clamp(4.5rem, 28%, 8rem) minmax(0, 1fr);
  }
}
.wb-rich-text {
color: var(--wb-text);
font-size: var(--wb-font-size-md);
}
.wb-rich-text > :where(p, ul, ol, blockquote) {
margin-block: 0;
}
.wb-rich-text > :where(p, ul, ol, blockquote) + :where(p, ul, ol, blockquote) {
margin-block-start: var(--wb-s4);
}
.wb-rich-text-compact > :where(p, ul, ol, blockquote) + :where(p, ul, ol, blockquote) {
margin-block-start: var(--wb-s3);
}
.wb-rich-text-loose > :where(p, ul, ol, blockquote) + :where(p, ul, ol, blockquote) {
margin-block-start: var(--wb-s5);
}
.wb-rich-text :where(p, li, blockquote) {
line-height: var(--wb-line-height-relaxed);
}
.wb-rich-text a {
color: var(--wb-accent);
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.wb-rich-text a:hover {
color: var(--wb-accent-hover);
}
.wb-rich-text a:focus-visible {
outline: 2px solid var(--wb-accent);
outline-offset: 2px;
border-radius: var(--wb-r-sm);
}
.wb-rich-text strong {
color: var(--wb-text);
}
.wb-rich-text em {
color: var(--wb-text);
}
.wb-rich-text code {
font-family: var(--wb-font-mono);
font-size: 0.92em;
color: var(--wb-text);
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-sm);
padding: 0.1em 0.35em;
}
.wb-rich-text :where(ul, ol) {
margin-block: 0;
padding-inline-start: 1.35em;
list-style: revert;
}
.wb-rich-text li + li {
margin-block-start: var(--wb-s1);
}
.wb-rich-text li > :where(ul, ol) {
margin-block-start: var(--wb-s1);
}
.wb-rich-text blockquote {
margin-inline: 0;
padding-block: var(--wb-s2);
padding-inline-start: var(--wb-s4);
padding-inline-end: var(--wb-s4);
border-inline-start: 3px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface-2);
color: var(--wb-muted);
}
.wb-marker-list,
.wb-marker-list :where(ul, ol) {
list-style: revert;
margin-block: 0;
padding-inline-start: 1.35em;
}
.wb-marker-list :where(li + li, li > ul, li > ol) {
margin-block-start: var(--wb-s1);
}
.wb-marker-list li {
line-height: var(--wb-line-height-relaxed);
}
.wb-inline-list {
display: flex;
flex-wrap: wrap;
gap: var(--wb-s2);
margin: 0;
padding: 0;
list-style: none;
}
.wb-inline-list-item {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0 var(--wb-s3);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-full);
background: var(--wb-surface-2);
color: var(--wb-muted);
font-size: var(--wb-font-size-sm);
line-height: 1.2;
}
.wb-promo {
display: grid;
grid-template-columns: minmax(0, 1.4fr) auto;
gap: var(--wb-s6);
align-items: end;
padding: var(--wb-s8);
border: 1px solid var(--wb-accent-border);
border-radius: var(--wb-r-xl);
background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--wb-accent-softer) 88%, var(--wb-surface) 12%),
      var(--wb-surface));
box-shadow: var(--wb-shadow-sm);
}
.wb-promo-copy {
display: flex;
flex-direction: column;
gap: var(--wb-s3);
}
.wb-promo-title {
margin: 0;
font-size: clamp(1.75rem, 3.5vw, 2.6rem);
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--wb-text);
}
.wb-promo-text {
margin: 0;
max-width: 42rem;
color: var(--wb-muted);
line-height: var(--wb-line-height-relaxed);
}
.wb-promo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--wb-s3);
justify-content: flex-end;
}
@media (max-width: 900px) {
.wb-promo {
grid-template-columns: 1fr;
}
.wb-promo-actions {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.wb-promo {
padding: var(--wb-s6);
}
}
.wb-promo--split {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
align-items: center;
}
.wb-promo--split .wb-promo-actions {
justify-content: flex-start;
}
.wb-promo-media {
margin: 0;
min-width: 0;
}
.wb-promo-media img {
display: block;
width: 100%;
height: auto;
max-height: 26rem;
object-fit: cover;
border-radius: var(--wb-r-lg);
}
@media (max-width: 900px) {
.wb-promo--split {
grid-template-columns: 1fr;
}
}
[data-wb-tooltip] {
cursor: help;
}
.wb-tooltip {
display: none;
position: fixed;
background: var(--wb-text);
color: var(--wb-surface);
font-size: var(--wb-font-size-xs);
font-weight: 500;
line-height: 1.4;
border-radius: var(--wb-r-md);
box-shadow: var(--wb-shadow-md);
pointer-events: none;
animation: wb-tooltip-in 0.12s ease;
}
.wb-tooltip.is-open {
display: block;
}
.wb-tooltip-body {
padding: 0.35em 0.65em;
white-space: nowrap;
}
.wb-tooltip-wrap .wb-tooltip-body {
white-space: normal;
max-width: 220px;
text-align: center;
}
.wb-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
@keyframes wb-tooltip-in {
from { opacity: 0; transform: translateY(2px); }
to   { opacity: 1; transform: translateY(0); }
}
.wb-tooltip[data-wb-overlay-side="top"] .wb-tooltip-arrow {
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--wb-text);
}
.wb-tooltip[data-wb-overlay-side="bottom"] .wb-tooltip-arrow {
top: -5px;
left: 50%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--wb-text);
}
.wb-tooltip[data-wb-overlay-side="left"] .wb-tooltip-arrow {
top: 50%;
right: -5px;
transform: translateY(-50%);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid var(--wb-text);
}
.wb-tooltip[data-wb-overlay-side="right"] .wb-tooltip-arrow {
top: 50%;
left: -5px;
transform: translateY(-50%);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid var(--wb-text);
}
.wb-toolbar {
display: flex;
align-items: center;
gap: var(--wb-s3);
margin-bottom: var(--wb-s4);
flex-wrap: wrap;
position: relative;
}
.wb-toolbar-start {
display: flex;
align-items: center;
gap: var(--wb-s3);
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.wb-toolbar-end {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-shrink: 0;
flex-wrap: wrap;
}
.wb-toolbar-title {
font-size: 1rem;
font-weight: 700;
color: var(--wb-text);
margin: 0;
white-space: nowrap;
}
.wb-toolbar-subtitle {
font-size: 0.8rem;
color: var(--wb-muted);
margin: 0;
}
.wb-toolbar-divider {
width: 1px;
height: 1.25rem;
background: var(--wb-border);
flex-shrink: 0;
margin: 0 var(--wb-s1);
}
.wb-toolbar-bulk {
display: none;
align-items: center;
gap: var(--wb-s2);
position: absolute;
inset: 0;
background: var(--wb-accent-softer);
border: 1px solid var(--wb-accent-border);
border-radius: var(--wb-r-md);
padding: 0 var(--wb-s3);
z-index: 1;
flex-wrap: wrap;
}
.wb-toolbar-bulk.is-active {
display: flex;
}
.wb-toolbar-bulk-count {
font-size: 0.875rem;
font-weight: 600;
color: var(--wb-accent-text);
margin-right: var(--wb-s1);
}
.wb-toolbar-bulk-clear {
margin-left: auto;
background: none;
border: none;
font-size: 0.8rem;
color: var(--wb-muted);
cursor: pointer;
padding: var(--wb-s1) var(--wb-s2);
border-radius: var(--wb-r-sm);
font-family: inherit;
transition: color var(--wb-t), background var(--wb-t);
}
.wb-toolbar-bulk-clear:hover {
color: var(--wb-text);
background: var(--wb-surface-2);
}
.wb-toolbar-sm {
gap: var(--wb-s2);
margin-bottom: var(--wb-s3);
}
.wb-toolbar-sm .wb-toolbar-title {
font-size: 0.875rem;
}
.wb-toolbar-inset {
padding: var(--wb-s3) var(--wb-s4);
background: var(--wb-surface-2);
border-bottom: 1px solid var(--wb-border);
margin-bottom: 0;
border-radius: var(--wb-r-lg) var(--wb-r-lg) 0 0;
}
@media (max-width: 640px) {
.wb-toolbar {
align-items: flex-start;
}
.wb-toolbar-end {
width: 100%;
}
}
.wb-radio-group {
display: flex;
flex-wrap: wrap;
gap: var(--wb-s3);
}
.wb-radio-group--stack {
flex-direction: column;
}
.wb-radio-card {
position: relative;
display: flex;
cursor: pointer;
user-select: none;
}
.wb-radio-card input[type="radio"],
.wb-radio-card input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.wb-radio-card-body {
display: flex;
flex-direction: column;
gap: var(--wb-s1);
padding: var(--wb-s3) var(--wb-s4);
border: 2px solid var(--wb-border);
border-radius: var(--wb-r-md);
background: var(--wb-surface);
color: var(--wb-text);
font-size: 0.9rem;
transition:
    border-color var(--wb-t),
    background var(--wb-t),
    box-shadow var(--wb-t);
min-width: 7rem;
}
.wb-radio-card:hover .wb-radio-card-body {
border-color: var(--wb-accent-border);
background: var(--wb-accent-softer);
}
.wb-radio-card input:checked + .wb-radio-card-body {
border-color: var(--wb-accent);
background: var(--wb-accent-soft);
color: var(--wb-accent-text);
box-shadow: 0 0 0 3px var(--wb-accent-ring-rgb, 37 99 235) / 0.15;
}
.wb-radio-card input:focus-visible + .wb-radio-card-body {
outline: 2px solid var(--wb-accent);
outline-offset: 2px;
}
.wb-radio-card input:disabled + .wb-radio-card-body {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.wb-btn-check-group {
display: inline-flex;
align-items: center;
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
overflow: hidden;
background: var(--wb-surface-2);
}
.wb-btn-check {
position: relative;
display: flex;
cursor: pointer;
user-select: none;
}
.wb-btn-check input[type="radio"],
.wb-btn-check input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.wb-btn-check span {
display: inline-flex;
align-items: center;
gap: var(--wb-s1);
padding: 0.4em 0.9em;
font-size: 0.875rem;
font-weight: 500;
color: var(--wb-muted);
transition: background var(--wb-t), color var(--wb-t);
}
.wb-btn-check:hover span {
color: var(--wb-text);
background: var(--wb-surface);
}
.wb-btn-check input:checked + span {
background: var(--wb-accent);
color: var(--wb-accent-on);
}
.wb-btn-check input:focus-visible + span {
outline: 2px solid var(--wb-accent);
outline-offset: -2px;
}
.wb-btn-check input:disabled + span {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.wb-rating {
--wb-rating-color: #f59e0b;
--wb-rating-empty: var(--wb-border);
--wb-rating-size: 1.5rem;
display: flex;
flex-direction: column;
gap: var(--wb-s2);
}
.wb-rating-stars {
--wb-rating-color: #f59e0b;
--wb-rating-empty: var(--wb-border);
--wb-rating-size: 1.5rem;
--wb-rating-value: 0%;
position: relative;
display: inline-block;
font-size: var(--wb-rating-size);
line-height: 1;
white-space: nowrap;
}
.wb-rating-stars::before,
.wb-rating-stars::after {
content: "★★★★★";
}
.wb-rating-stars::before {
color: var(--wb-rating-empty);
}
.wb-rating-stars::after {
position: absolute;
inset: 0;
width: var(--wb-rating-value);
overflow: hidden;
color: var(--wb-rating-color);
}
.wb-rating-input {
display: inline-flex;
gap: var(--wb-s1);
align-items: center;
}
.wb-rating-input button {
appearance: none;
background: none;
border: 0;
margin: 0;
padding: 0 2px;
cursor: pointer;
font-size: var(--wb-rating-size, 1.5rem);
line-height: 1;
color: var(--wb-rating-empty, var(--wb-border));
transition: color 0.08s ease, transform 0.08s ease;
}
.wb-rating-input button:hover,
.wb-rating-input button:has(~ button:hover) {
color: var(--wb-rating-color, #f59e0b);
}
.wb-rating-input button:hover {
transform: scale(1.08);
}
.wb-rating-input button:focus-visible {
outline: 2px solid var(--wb-rating-color, #f59e0b);
outline-offset: 2px;
border-radius: 3px;
}
.wb-rating-input button[aria-pressed="true"],
.wb-rating-input button:has(~ button[aria-pressed="true"]) {
color: var(--wb-rating-color, #f59e0b);
}
.wb-collapse {
overflow: hidden;
max-height: 0;
transition: max-height 0.28s ease, opacity 0.22s ease;
opacity: 0;
}
.wb-collapse.is-open {
max-height: 2000px; /* large enough for any content */
opacity: 1;
}
.wb-collapse-body {
padding-top: var(--wb-s3);
}
.wb-collapse-panel {
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
overflow: hidden;
}
.wb-collapse-panel .wb-collapse-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s2);
width: 100%;
padding: var(--wb-s3) var(--wb-s4);
background: var(--wb-surface);
border: none;
font: inherit;
font-size: 0.9rem;
font-weight: 500;
color: var(--wb-text);
cursor: pointer;
text-align: left;
transition: background var(--wb-t);
}
.wb-collapse-panel .wb-collapse-trigger:hover {
background: var(--wb-surface-2);
}
.wb-collapse-panel .wb-collapse-trigger:focus-visible {
outline: 2px solid var(--wb-accent);
outline-offset: -2px;
}
.wb-collapse-panel .wb-collapse-icon {
display: inline-flex;
flex-shrink: 0;
transition: transform var(--wb-t);
}
.wb-collapse-panel.is-open .wb-collapse-icon {
transform: rotate(180deg);
}
.wb-collapse-panel .wb-collapse {
border-top: 0;
max-height: 0;
opacity: 0;
transition: max-height 0.28s ease, opacity 0.22s ease;
}
.wb-collapse-panel.is-open .wb-collapse {
max-height: 2000px;
opacity: 1;
border-top: 1px solid var(--wb-border);
}
.wb-collapse-panel .wb-collapse-body {
padding: var(--wb-s4);
padding-top: var(--wb-s4);
}
details.wb-collapse-panel > summary.wb-collapse-trigger {
list-style: none;
}
details.wb-collapse-panel > summary.wb-collapse-trigger::-webkit-details-marker {
display: none;
}
details.wb-collapse-panel > summary.wb-collapse-trigger .wb-collapse-icon {
transform: none;
}
details.wb-collapse-panel[open] > summary.wb-collapse-trigger .wb-collapse-icon {
transform: rotate(180deg);
}
details.wb-collapse-panel:not([open]) > .wb-collapse,
details.wb-collapse-panel:not([open]) > .wb-collapse-body {
display: none;
}
details.wb-collapse-panel[open] > .wb-collapse,
details.wb-collapse-panel[open] > .wb-collapse-body {
display: block;
max-height: none;
opacity: 1;
border-top: 1px solid var(--wb-border);
transition: none;
}
.wb-collapse-panel > .wb-collapse-trigger::after {
content: "";
flex: 0 0 auto;
width: 0.5rem;
height: 0.5rem;
margin-inline-start: auto;
margin-inline-end: 0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
color: var(--wb-muted);
transform: rotate(45deg);
transition: transform var(--wb-t);
}
.wb-collapse-panel.is-open:not(details) > .wb-collapse-trigger::after {
transform: rotate(225deg);
}
details.wb-collapse-panel > summary.wb-collapse-trigger::after {
transform: rotate(45deg);
}
details.wb-collapse-panel[open] > summary.wb-collapse-trigger::after {
transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
.wb-collapse-panel > .wb-collapse-trigger::after { transition: none; }
}
.wb-page-intro {
padding-block: var(--wb-s20) var(--wb-s16);
}
.wb-page-intro-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.95fr);
gap: var(--wb-s10);
align-items: start;
}
.wb-page-intro-copy {
display: flex;
flex-direction: column;
gap: var(--wb-s4);
}
.wb-page-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--wb-s2);
margin: 0 0 var(--wb-s4);
font-size: var(--wb-font-size-xs);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.08em;
color: var(--wb-muted);
}
.wb-page-eyebrow::before {
content: "";
width: var(--wb-s6);
height: 1px;
background: var(--wb-accent-border);
}
.wb-page-intro-title {
margin: 0;
max-width: 12ch;
font-size: clamp(2.75rem, 6vw, 5rem);
line-height: 0.96;
letter-spacing: -0.04em;
color: var(--wb-text);
}
.wb-page-intro-title em {
font-style: normal;
color: var(--wb-accent-text);
}
.wb-page-lead {
max-width: 43rem;
margin: 0;
font-size: var(--wb-font-size-lg);
line-height: var(--wb-line-height-relaxed);
color: var(--wb-muted);
}
.wb-page-intro-aside {
padding: var(--wb-s6);
border: 1px solid var(--wb-border);
background: var(--wb-surface);
}
.wb-page-intro-aside h2 {
margin: 0 0 var(--wb-s3);
font-size: var(--wb-font-size-md);
letter-spacing: -0.02em;
}
.wb-page-intro-aside p {
margin: 0;
color: var(--wb-muted);
line-height: var(--wb-line-height-relaxed);
}
@media (max-width: 960px) {
.wb-page-intro-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.wb-page-intro {
padding-block: var(--wb-s16) var(--wb-s12);
}
.wb-page-intro-title {
max-width: none;
font-size: clamp(2.3rem, 12vw, 3.6rem);
}
}
.wb-breadcrumb {
--wb-breadcrumb-gap-y: var(--wb-s1);
--wb-breadcrumb-separator-gap: var(--wb-s2);
--wb-breadcrumb-separator: "/";
--wb-breadcrumb-separator-color: color-mix(in srgb, var(--wb-muted) 70%, transparent);
--wb-breadcrumb-link-color: color-mix(in srgb, var(--wb-muted) 92%, var(--wb-text) 8%);
--wb-breadcrumb-link-hover: var(--wb-text);
--wb-breadcrumb-current-color: var(--wb-text);
--wb-breadcrumb-font-size: 0.875rem;
--wb-breadcrumb-line-height: 1.45;
display: block;
min-width: 0;
max-width: 100%;
font-size: var(--wb-breadcrumb-font-size);
line-height: var(--wb-breadcrumb-line-height);
}
.wb-breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wb-breadcrumb-gap-y) 0;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.wb-breadcrumb-item {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 100%;
}
.wb-breadcrumb-item + .wb-breadcrumb-item::before {
content: var(--wb-breadcrumb-separator);
margin-inline: var(--wb-breadcrumb-separator-gap);
color: var(--wb-breadcrumb-separator-color);
flex-shrink: 0;
}
.wb-breadcrumb-link,
.wb-breadcrumb-current {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
line-height: inherit;
}
.wb-breadcrumb-link {
color: var(--wb-breadcrumb-link-color);
text-decoration: none;
overflow-wrap: anywhere;
word-break: break-word;
transition: color var(--wb-t), text-decoration-color var(--wb-t), box-shadow var(--wb-t);
}
.wb-breadcrumb-link:hover {
color: var(--wb-breadcrumb-link-hover);
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 0.16em;
}
.wb-breadcrumb-link:focus-visible {
outline: none;
color: var(--wb-breadcrumb-link-hover);
border-radius: var(--wb-r-sm);
box-shadow:
    0 0 0 2px var(--wb-surface),
    0 0 0 4px rgb(var(--wb-accent-ring-rgb) / 0.34);
}
.wb-breadcrumb-current,
.wb-breadcrumb-current[aria-current="page"] {
color: var(--wb-breadcrumb-current-color);
font-weight: 600;
text-decoration: none;
}
.wb-breadcrumb-separator {
display: inline-flex;
align-items: center;
margin-inline: var(--wb-breadcrumb-separator-gap);
color: var(--wb-breadcrumb-separator-color);
flex-shrink: 0;
}
.wb-breadcrumb-compact {
--wb-breadcrumb-gap-y: 0;
--wb-breadcrumb-separator-gap: var(--wb-s1);
--wb-breadcrumb-font-size: var(--wb-font-size-xs);
--wb-breadcrumb-line-height: 1.35;
}
.wb-auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--wb-s6);
background: var(--wb-bg);
}
.wb-auth-card {
width: 100%;
max-width: 420px;
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-xl);
box-shadow: var(--wb-shadow-sm);
overflow: hidden;
}
.wb-auth-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--wb-s2);
padding: var(--wb-s7) var(--wb-s6) var(--wb-s4);
text-align: center;
}
.wb-auth-header > * {
margin: 0;
}
.wb-auth-header img,
.wb-auth-header svg {
display: block;
flex: 0 0 auto;
height: 40px;
width: auto;
}
.wb-auth-brand {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--wb-s3);
max-width: 100%;
color: inherit;
line-height: 1;
text-align: center;
}
.wb-auth-brand-mark {
display: block;
flex: 0 0 auto;
inline-size: auto;
block-size: 2.5rem;
max-inline-size: 100%;
object-fit: contain;
}
.wb-auth-brand-mark-sm {
block-size: 2rem;
}
.wb-auth-brand-mark-lg {
block-size: 3rem;
}
.wb-auth-brand-mark-inverse,
.wb-auth-brand-mark-on-accent,
.wb-auth-brand-mark-dark {
display: block;
}
.wb-auth-header .wb-icon-wrap {
width: 3.25rem;
height: 3.25rem;
margin-bottom: var(--wb-s1);
background: color-mix(in srgb, var(--wb-accent-soft) 42%, var(--wb-surface));
color: var(--wb-accent-text);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-accent-border) 72%, transparent);
}
.wb-auth-header-title {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--wb-s3);
max-width: 100%;
font-size: 1.3rem;
font-weight: 700;
color: var(--wb-text);
line-height: 1.25;
text-align: center;
margin: 0;
}
.wb-auth-header-title img,
.wb-auth-header-title svg {
display: block;
flex: 0 0 auto;
height: 1.8em;
width: auto;
max-width: 100%;
object-fit: contain;
}
.wb-auth-header-subtitle {
font-size: 0.875rem;
color: var(--wb-muted);
margin: 0;
max-width: 32ch;
line-height: 1.55;
}
.wb-auth-body {
padding: var(--wb-s2) var(--wb-s6) var(--wb-s6);
}
.wb-auth-footer {
padding: var(--wb-s4) var(--wb-s6) var(--wb-s5);
border-top: 1px solid var(--wb-border);
background: color-mix(in srgb, var(--wb-surface-2) 42%, var(--wb-surface));
text-align: center;
font-size: 0.875rem;
color: var(--wb-muted);
line-height: 1.55;
}
.wb-auth-footer > * {
margin: 0;
}
.wb-auth-divider {
display: flex;
align-items: center;
gap: var(--wb-s3);
margin-block: var(--wb-s4);
font-size: 0.8rem;
color: var(--wb-muted);
}
.wb-auth-divider::before,
.wb-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--wb-border);
}
.wb-auth-split {
padding: 0;
align-items: stretch;
min-height: 100vh;
}
.wb-auth-panel {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wb-s4);
padding: var(--wb-s12);
background: var(--wb-primary);
color: #fff;
text-align: center;
}
.wb-auth-panel .wb-auth-brand,
.wb-auth-panel .wb-auth-brand-mark {
color: inherit;
}
.wb-auth-panel-title {
font-size: 2rem;
font-weight: 800;
margin: 0;
line-height: 1.2;
}
.wb-auth-panel-text {
font-size: 1rem;
opacity: 0.85;
max-width: 360px;
margin: 0;
}
.wb-auth-form-area {
flex: 0 0 480px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--wb-s8);
background: var(--wb-bg);
}
.wb-auth-form-area .wb-auth-card {
max-width: 440px;
}
@media (max-width: 768px) {
.wb-auth-split {
flex-direction: column;
}
.wb-auth-panel {
padding: var(--wb-s8) var(--wb-s6);
min-height: 220px;
}
.wb-auth-form-area {
flex: 1;
padding: var(--wb-s6) var(--wb-s4);
}
.wb-auth-shell:not(.wb-auth-split) {
    align-items: flex-start;
    padding-top: var(--wb-s8);
  }
}
.wb-dashboard-shell {
display: flex;
height: 100vh;       /* fixed viewport height — enables internal scroll */
overflow: hidden;    /* children handle their own scroll */
background: var(--wb-bg);
}
.wb-dashboard-body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0; /* prevent flex overflow */
overflow: hidden;
height: 100%;        /* fill shell height */
}
.wb-dashboard-main {
flex: 1;
overflow-y: auto;
padding: var(--wb-s6);
}
.wb-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wb-s4);
margin-bottom: var(--wb-s6);
flex-wrap: wrap;
}
.wb-page-header-main {
display: flex;
flex-direction: column;
gap: var(--wb-s2);
min-width: 0;
flex: 1;
}
.wb-page-breadcrumb,
.wb-page-breadcrumbs {
margin: 0;
min-width: 0;
}
.wb-page-header .wb-page-header-title,
.wb-page-header .wb-page-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--wb-text);
margin: 0;
line-height: 1.3;
}
.wb-page-header .wb-page-subtitle,
.wb-page-header .wb-page-description {
font-size: 0.9rem;
color: var(--wb-muted);
margin: 0;
}
.wb-page-actions {
display: flex;
align-items: center;
gap: var(--wb-s2);
flex-shrink: 0;
flex-wrap: wrap;
}
.wb-stat-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--wb-s4);
margin-bottom: var(--wb-s6);
}
@media (max-width: 768px) {
.wb-dashboard-main {
padding: var(--wb-s4);
}
.wb-page-header {
flex-direction: column;
align-items: stretch;
}
.wb-page-actions {
flex-wrap: wrap;
}
}
.wb-shell       { display: flex; height: 100vh; overflow: hidden; background: var(--wb-bg); }
.wb-shell-main  { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; height: 100%; }
.wb-shell-body  { flex: 1; overflow-y: auto; padding: var(--wb-s6); }
.wb-settings-shell {
display: flex;
align-items: flex-start;
gap: var(--wb-s8);
max-width: 960px;
margin: 0 auto;
padding: var(--wb-s8) var(--wb-s6);
min-height: calc(100vh - 64px);
}
.wb-settings-nav {
flex: 0 0 220px;
position: sticky;
top: var(--wb-s6);
}
.wb-settings-body {
flex: 1;
min-width: 0;
}
.wb-settings-shell.wb-docs-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
align-items: start;
gap: var(--wb-s8);
max-width: none;
margin: 0;
padding: var(--wb-s6) clamp(var(--wb-s4), 2.6vw, var(--wb-s8)) var(--wb-s10);
min-height: auto;
}
.wb-settings-shell.wb-docs-layout .wb-settings-body {
grid-column: 1;
grid-row: 1;
}
.wb-settings-shell.wb-docs-layout .wb-settings-nav,
.wb-settings-nav.wb-docs-rail {
grid-column: 2;
grid-row: 1;
width: 100%;
max-width: 18rem;
position: sticky;
top: var(--wb-s4);
align-self: start;
max-height: calc(100vh - (var(--wb-navbar-h, 56px) + var(--wb-s8)));
overflow: auto;
}
.wb-settings-header {
margin-bottom: var(--wb-s6);
padding-bottom: var(--wb-s5);
border-bottom: 1px solid var(--wb-border);
}
.wb-settings-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--wb-text);
margin: 0 0 var(--wb-s1);
line-height: 1.3;
}
.wb-settings-desc {
font-size: 0.875rem;
color: var(--wb-muted);
margin: 0;
}
.wb-settings-section {
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
overflow: hidden;
margin-bottom: var(--wb-s5);
}
.wb-settings-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wb-s4);
padding: var(--wb-s4) var(--wb-s5);
border-bottom: 1px solid var(--wb-border);
}
.wb-settings-section-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--wb-text);
margin: 0 0 var(--wb-s1);
}
.wb-settings-section-desc {
font-size: 0.8rem;
color: var(--wb-muted);
margin: 0;
}
.wb-settings-section-body {
padding: var(--wb-s5);
}
.wb-settings-section-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--wb-s2);
padding: var(--wb-s3) var(--wb-s5);
border-top: 1px solid var(--wb-border);
background: var(--wb-surface-2);
flex-wrap: wrap;
}
.wb-settings-section-footer .wb-action-group,
.wb-settings-section-footer .wb-form-actions {
margin-inline-start: auto;
}
.wb-settings-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wb-s6);
padding: var(--wb-s4) 0;
border-bottom: 1px solid var(--wb-border);
}
.wb-settings-row:last-child {
border-bottom: none;
}
.wb-settings-row-label {
flex: 1;
}
.wb-settings-row-label strong {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--wb-text);
margin-bottom: 2px;
}
.wb-settings-row-label span {
font-size: 0.8rem;
color: var(--wb-muted);
}
.wb-settings-row-control {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--wb-s2);
}
.wb-settings-danger {
border-color: var(--wb-danger);
}
.wb-settings-danger .wb-settings-section-header {
border-bottom-color: var(--wb-danger);
}
.wb-settings-danger .wb-settings-section-title {
color: var(--wb-danger);
}
@media (max-width: 768px) {
.wb-settings-shell {
flex-direction: column;
padding: var(--wb-s4);
gap: var(--wb-s4);
}
.wb-settings-nav {
flex: none;
width: 100%;
position: static;
}
.wb-settings-row {
flex-direction: column;
gap: var(--wb-s2);
}
.wb-settings-row-control {
width: 100%;
}
}
@media (max-width: 1180px) {
.wb-settings-shell.wb-docs-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--wb-s6);
}
.wb-settings-shell.wb-docs-layout .wb-settings-body {
grid-column: 1;
grid-row: 1;
}
.wb-settings-shell.wb-docs-layout .wb-settings-nav,
.wb-settings-nav.wb-docs-rail {
grid-column: 1;
grid-row: 2;
max-width: none;
position: static;
max-height: none;
}
}
.wb-section-nav {
display: flex;
flex-direction: column;
gap: var(--wb-s3);
padding: var(--wb-s3);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-lg);
background: var(--wb-surface);
}
.wb-section-nav-title {
font-size: 0.7rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
padding: 0 var(--wb-s2);
}
.wb-section-nav-list {
display: flex;
flex-direction: column;
gap: var(--wb-s1);
margin: 0;
padding: 0;
list-style: none;
}
.wb-section-nav-item {
margin: 0;
padding: 0;
}
.wb-section-nav-link {
display: flex;
align-items: center;
gap: var(--wb-s2);
padding: var(--wb-s2) var(--wb-s3);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
color: var(--wb-muted);
text-decoration: none;
border-radius: var(--wb-r-md);
transition: background var(--wb-t), color var(--wb-t);
outline: none;
}
.wb-section-nav-link:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
}
.wb-section-nav-link:focus-visible {
background: var(--wb-surface-2);
color: var(--wb-text);
box-shadow: 0 0 0 4px rgb(var(--wb-accent-ring-rgb) / 0.18);
}
.wb-section-nav-link.is-active,
.wb-section-nav-link[aria-current="page"] {
background: var(--wb-accent-softer);
color: var(--wb-accent-text);
font-weight: 600;
}
.wb-section-nav-link > .wb-icon {
flex-shrink: 0;
opacity: 0.72;
}
.wb-section-nav-link.is-active > .wb-icon,
.wb-section-nav-link[aria-current="page"] > .wb-icon {
opacity: 1;
}
@media (max-width: 768px) {
.wb-section-nav {
padding: var(--wb-s2);
}
}
.wb-theme-switcher,
.wb-language-switcher,
.wb-auth-entry,
.wb-user-menu {
display: inline-flex;
align-items: center;
}
.wb-theme-switcher-trigger {
width: auto;
padding-inline: var(--wb-s2);
gap: var(--wb-s1);
}
.wb-theme-switcher-icon,
.wb-theme-switcher-chevron {
flex: 0 0 auto;
}
.wb-theme-switcher-chevron {
color: var(--wb-muted);
}
.wb-auth-entry {
gap: var(--wb-s1);
min-height: 2.2rem;
padding: 0 var(--wb-s3);
border-radius: var(--wb-r-md);
color: var(--wb-muted);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition:
    background var(--wb-t),
    color var(--wb-t);
}
.wb-auth-entry:hover {
background: var(--wb-surface-2);
color: var(--wb-text);
text-decoration: none;
}
.wb-auth-entry-icon,
.wb-auth-entry-label {
flex: 0 0 auto;
}
.wb-auth-entry--icon {
width: 2.2rem;
padding-inline: 0;
justify-content: center;
}
.wb-auth-entry--icon .wb-auth-entry-label,
.wb-auth-entry--label .wb-auth-entry-icon {
display: none;
}
.wb-language-switcher-trigger {
width: auto;
padding-inline: var(--wb-s2);
gap: var(--wb-s1);
}
.wb-language-switcher-code {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
white-space: nowrap;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.wb-language-switcher-icon,
.wb-language-switcher-chevron {
flex: 0 0 auto;
}
.wb-language-switcher--icon .wb-language-switcher-code,
.wb-language-switcher--icon .wb-language-switcher-chevron,
.wb-language-switcher--code .wb-language-switcher-icon {
display: none;
}
.wb-language-switcher--icon .wb-language-switcher-trigger {
padding-inline: 0.5em;
}
.wb-language-switcher-item-code {
min-width: 2rem;
color: var(--wb-muted);
font-size: 0.75rem;
font-weight: 700;
}
.wb-language-switcher .wb-dropdown-item.is-active .wb-language-switcher-item-code {
color: currentColor;
}
.wb-user-menu-trigger {
gap: var(--wb-s2);
max-width: min(18rem, 45vw);
padding: 0.25em 0.5em 0.25em 0.25em;
}
.wb-user-menu-copy {
display: flex;
flex-direction: column;
min-width: 0;
text-align: left;
line-height: 1.3;
}
.wb-user-menu-name,
.wb-user-menu-context {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wb-user-menu-name {
color: var(--wb-text);
font-size: 0.875rem;
font-weight: 600;
}
.wb-user-menu-context {
color: var(--wb-muted);
font-size: 0.75rem;
}
.wb-user-menu-chevron {
flex: 0 0 auto;
color: var(--wb-muted);
}
.wb-user-menu--compact .wb-user-menu-context,
.wb-user-menu--avatar .wb-user-menu-copy,
.wb-user-menu--avatar .wb-user-menu-chevron {
display: none;
}
.wb-user-menu--avatar .wb-user-menu-trigger {
padding: 0.25em;
}
.wb-user-menu-form {
margin: 0;
}
@media (max-width: 640px) {
.wb-user-menu--responsive .wb-user-menu-copy,
.wb-user-menu--responsive .wb-user-menu-chevron {
display: none;
}
.wb-user-menu--responsive .wb-user-menu-trigger {
padding: 0.25em;
}
}
.wb-gallery {
--wb-gallery-columns: 3;
--wb-gallery-gap: var(--wb-s4);
--wb-gallery-aspect: 4 / 3;
display: grid;
gap: var(--wb-s4);
}
.wb-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: var(--wb-gallery-gap);
}
.wb-gallery--cols-2 { --wb-gallery-columns: 2; }
.wb-gallery--cols-3 { --wb-gallery-columns: 3; }
.wb-gallery--cols-4 { --wb-gallery-columns: 4; }
.wb-gallery--cols-5 { --wb-gallery-columns: 5; }
.wb-gallery--cols-2 .wb-gallery-grid,
.wb-gallery--cols-3 .wb-gallery-grid,
.wb-gallery--cols-4 .wb-gallery-grid,
.wb-gallery--cols-5 .wb-gallery-grid {
grid-template-columns: repeat(var(--wb-gallery-columns), minmax(0, 1fr));
}
.wb-gallery--gap-none { --wb-gallery-gap: 0; }
.wb-gallery--gap-sm { --wb-gallery-gap: var(--wb-s2); }
.wb-gallery--gap-md { --wb-gallery-gap: var(--wb-s4); }
.wb-gallery--gap-lg { --wb-gallery-gap: var(--wb-s6); }
.wb-gallery-item {
display: grid;
gap: var(--wb-s2);
margin: 0;
}
.wb-gallery-trigger {
display: block;
position: relative;
border-radius: var(--wb-r-lg);
overflow: hidden;
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
box-shadow: var(--wb-shadow-sm);
color: inherit;
text-decoration: none;
transition:
    transform var(--wb-t-f),
    box-shadow var(--wb-t),
    border-color var(--wb-t);
}
.wb-gallery-trigger:hover {
transform: translateY(-1px);
box-shadow: var(--wb-shadow-md);
text-decoration: none;
}
.wb-gallery-trigger:focus-visible {
outline: 2px solid var(--wb-accent);
outline-offset: 3px;
}
.wb-gallery-media {
display: block;
width: 100%;
aspect-ratio: var(--wb-gallery-aspect);
object-fit: cover;
background: var(--wb-surface-2);
}
.wb-gallery--aspect-square { --wb-gallery-aspect: 1 / 1; }
.wb-gallery--aspect-4-3 { --wb-gallery-aspect: 4 / 3; }
.wb-gallery--aspect-16-9 { --wb-gallery-aspect: 16 / 9; }
.wb-gallery--aspect-portrait { --wb-gallery-aspect: 3 / 4; }
.wb-gallery--aspect-auto .wb-gallery-media {
aspect-ratio: auto;
height: auto;
}
.wb-gallery-caption {
margin: 0;
color: var(--wb-text);
font-size: var(--wb-font-size-sm);
line-height: 1.5;
}
.wb-gallery-meta {
color: var(--wb-muted);
font-size: var(--wb-font-size-xs);
line-height: 1.5;
}
.wb-gallery--captions-overlay .wb-gallery-trigger,
.wb-gallery--captions-hover .wb-gallery-trigger {
display: block;
}
.wb-gallery--captions-overlay .wb-gallery-trigger .wb-gallery-caption,
.wb-gallery--captions-hover .wb-gallery-trigger .wb-gallery-caption {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 1;
margin: 0;
padding: var(--wb-s4) var(--wb-s3) var(--wb-s3);
color: #fff;
background: linear-gradient(
    0deg,
    rgba(8, 16, 22, .78),
    rgba(8, 16, 22, .32) 56%,
    rgba(8, 16, 22, 0)
  );
}
.wb-gallery--captions-overlay .wb-gallery-trigger .wb-gallery-meta,
.wb-gallery--captions-hover .wb-gallery-trigger .wb-gallery-meta {
display: block;
margin-block-start: var(--wb-s1);
color: rgba(255, 255, 255, .82);
}
.wb-gallery--overlay-solid .wb-gallery-trigger .wb-gallery-caption {
background: rgba(8, 16, 22, .82);
}
.wb-gallery--overlay-none .wb-gallery-trigger .wb-gallery-caption {
background: none;
text-shadow: 0 1px 2px rgba(8, 16, 22, .9);
}
.wb-gallery--captions-hover .wb-gallery-trigger .wb-gallery-caption {
opacity: 0;
transform: translateY(0.5rem);
transition:
    opacity var(--wb-t),
    transform var(--wb-t);
}
.wb-gallery--captions-hover .wb-gallery-trigger:hover .wb-gallery-caption,
.wb-gallery--captions-hover .wb-gallery-trigger:focus-visible .wb-gallery-caption,
.wb-gallery--captions-hover .wb-gallery-item:focus-within .wb-gallery-caption {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.wb-gallery--captions-hover .wb-gallery-trigger .wb-gallery-caption {
transition: none;
}
}
.wb-gallery--masonry .wb-gallery-grid {
display: block;
column-count: var(--wb-gallery-columns);
column-gap: var(--wb-gallery-gap);
}
.wb-gallery--masonry .wb-gallery-item {
break-inside: avoid;
margin-block-end: var(--wb-gallery-gap);
}
.wb-gallery--masonry .wb-gallery-media {
aspect-ratio: auto;
height: auto;
}
.wb-gallery--collage .wb-gallery-grid {
grid-auto-flow: dense;
}
.wb-gallery--collage .wb-gallery-item:nth-child(5n + 1) {
grid-column: span min(2, var(--wb-gallery-columns));
grid-row: span 2;
}
.wb-gallery--collage .wb-gallery-item:nth-child(5n + 1) .wb-gallery-media {
height: 100%;
aspect-ratio: auto;
}
.wb-gallery-viewer {
display: grid;
gap: var(--wb-s4);
}
.wb-gallery-viewer-title {
margin: 0;
text-align: center;
font-size: var(--wb-font-size-lg);
font-weight: 700;
line-height: 1.3;
}
.wb-gallery-viewer-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
}
.wb-gallery-viewer-counter {
color: var(--wb-muted);
font-size: var(--wb-font-size-sm);
line-height: 1.4;
}
.wb-gallery-viewer-media {
display: grid;
gap: var(--wb-s3);
justify-items: center;
margin: 0;
}
.wb-gallery-viewer-image {
display: block;
width: auto;
max-width: 100%;
max-height: min(74vh, 56rem);
object-fit: contain;
border-radius: calc(var(--wb-r-xl) - var(--wb-s1));
background: var(--wb-surface-2);
}
.wb-gallery-viewer-caption {
max-width: min(100%, 56rem);
margin: 0;
color: var(--wb-text);
text-align: center;
font-size: var(--wb-font-size-sm);
line-height: 1.6;
}
.wb-gallery-viewer-meta {
max-width: min(100%, 56rem);
margin: 0 auto;
text-align: center;
}
.wb-gallery-viewer-prev,
.wb-gallery-viewer-next,
.wb-gallery-viewer-close {
flex-shrink: 0;
}
@media (max-width: 991px) {
.wb-gallery--cols-3 .wb-gallery-grid,
.wb-gallery--cols-4 .wb-gallery-grid,
.wb-gallery--cols-5 .wb-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wb-gallery--masonry .wb-gallery-grid {
column-count: min(2, var(--wb-gallery-columns));
}
.wb-gallery--collage .wb-gallery-item:nth-child(5n + 1) {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
.wb-gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.wb-gallery--cols-2 .wb-gallery-grid,
.wb-gallery--cols-3 .wb-gallery-grid,
.wb-gallery--cols-4 .wb-gallery-grid,
.wb-gallery--cols-5 .wb-gallery-grid {
grid-template-columns: 1fr;
}
.wb-gallery--masonry .wb-gallery-grid {
column-count: 1;
}
.wb-gallery--collage .wb-gallery-item:nth-child(5n + 1) {
    grid-column: auto;
    grid-row: auto;
  }

  .wb-gallery-viewer-toolbar {
    flex-wrap: wrap;
  }
}
.wb-slider {
--wb-slider-min-height: 28rem;
--wb-slider-content-width: min(88%, 42rem);
--wb-slider-content-x: 50%;
--wb-slider-content-y: 50%;
--wb-slider-content-translate-x: -50%;
--wb-slider-content-translate-y: -50%;
--wb-slider-overlay:
    linear-gradient(90deg, rgba(8, 16, 22, .62), rgba(8, 16, 22, .24) 54%, rgba(8, 16, 22, .08)),
    linear-gradient(0deg, rgba(8, 16, 22, .34), rgba(8, 16, 22, .04));
--wb-slider-transition-duration: 520ms;
--wb-slider-transition-easing: cubic-bezier(.2, .8, .2, 1);
position: relative;
display: block;
min-block-size: var(--wb-slider-min-height);
overflow: hidden;
border-radius: var(--wb-r-lg);
background: var(--wb-surface-2);
color: #fff;
isolation: isolate;
}
.wb-slider-height-sm {
--wb-slider-min-height: 18rem;
}
.wb-slider-height-auto {
--wb-slider-min-height: 0;
min-block-size: 0;
}
.wb-slider-height-md {
--wb-slider-min-height: 28rem;
}
.wb-slider-height-lg {
--wb-slider-min-height: 38rem;
}
.wb-slider-height-xl {
--wb-slider-min-height: 48rem;
}
.wb-slider-height-viewport {
--wb-slider-min-height: 100vh;
}
.wb-slider-fill,
.wb-slider-height-fill {
min-block-size: 100%;
block-size: 100%;
}
.wb-slider-ratio-square {
aspect-ratio: 1;
}
.wb-slider-ratio-video {
aspect-ratio: 16 / 9;
}
.wb-slider-ratio-standard {
aspect-ratio: 4 / 3;
}
.wb-slider-ratio-wide {
aspect-ratio: 21 / 9;
}
.wb-slider-viewport {
position: absolute;
inset: 0;
overflow: hidden;
}
.wb-slider-track {
display: flex;
block-size: 100%;
transition: transform var(--wb-slider-transition-duration) var(--wb-slider-transition-easing);
will-change: transform;
}
.wb-slide {
position: relative;
flex: 0 0 100%;
min-inline-size: 100%;
block-size: 100%;
overflow: hidden;
color: inherit;
}
.wb-slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--wb-slider-overlay);
pointer-events: none;
}
.wb-slider-overlay-none {
--wb-slider-overlay: transparent;
}
.wb-slider-overlay-soft {
--wb-slider-overlay:
    linear-gradient(90deg, rgba(8, 16, 22, .42), rgba(8, 16, 22, .12) 56%, rgba(8, 16, 22, .02)),
    linear-gradient(0deg, rgba(8, 16, 22, .22), rgba(8, 16, 22, .02));
}
.wb-slider-overlay-medium {
--wb-slider-overlay:
    linear-gradient(90deg, rgba(8, 16, 22, .58), rgba(8, 16, 22, .24) 57%, rgba(8, 16, 22, .08)),
    linear-gradient(0deg, rgba(8, 16, 22, .36), rgba(8, 16, 22, .05));
}
.wb-slider-overlay-strong {
--wb-slider-overlay:
    linear-gradient(90deg, rgba(8, 16, 22, .76), rgba(8, 16, 22, .36) 58%, rgba(8, 16, 22, .16)),
    linear-gradient(0deg, rgba(8, 16, 22, .5), rgba(8, 16, 22, .08));
}
.wb-slide-media {
position: absolute;
inset: 0;
z-index: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
background: var(--wb-surface-2);
}
.wb-slide-media-contain {
object-fit: contain;
}
.wb-slide-content {
position: absolute;
left: var(--wb-slider-content-x);
top: var(--wb-slider-content-y);
z-index: 2;
display: grid;
gap: var(--wb-s4);
inline-size: var(--wb-slider-content-width);
transform: translate(var(--wb-slider-content-translate-x), var(--wb-slider-content-translate-y));
}
.wb-slider .wb-slide-content :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, small, strong, em) {
color: inherit;
}
.wb-slider-content-start {
--wb-slider-content-x: clamp(var(--wb-s5), 8vw, var(--wb-s14));
--wb-slider-content-y: 50%;
--wb-slider-content-translate-x: 0;
--wb-slider-content-translate-y: -50%;
}
.wb-slider-content-center {
--wb-slider-content-x: 50%;
--wb-slider-content-y: 50%;
--wb-slider-content-translate-x: -50%;
--wb-slider-content-translate-y: -50%;
}
.wb-slider-content-end {
--wb-slider-content-x: calc(100% - clamp(var(--wb-s5), 8vw, var(--wb-s14)));
--wb-slider-content-y: 50%;
--wb-slider-content-translate-x: -100%;
--wb-slider-content-translate-y: -50%;
}
.wb-slider-content-top-start {
--wb-slider-content-x: clamp(var(--wb-s5), 8vw, var(--wb-s14));
--wb-slider-content-y: clamp(var(--wb-s5), 8vw, var(--wb-s14));
--wb-slider-content-translate-x: 0;
--wb-slider-content-translate-y: 0;
}
.wb-slider-content-top-center {
--wb-slider-content-x: 50%;
--wb-slider-content-y: clamp(var(--wb-s5), 8vw, var(--wb-s14));
--wb-slider-content-translate-x: -50%;
--wb-slider-content-translate-y: 0;
}
.wb-slider-content-top-end {
--wb-slider-content-x: calc(100% - clamp(var(--wb-s5), 8vw, var(--wb-s14)));
--wb-slider-content-y: clamp(var(--wb-s5), 8vw, var(--wb-s14));
--wb-slider-content-translate-x: -100%;
--wb-slider-content-translate-y: 0;
}
.wb-slider-content-bottom-start {
--wb-slider-content-x: clamp(var(--wb-s5), 8vw, var(--wb-s14));
--wb-slider-content-y: calc(100% - clamp(var(--wb-s8), 12vw, var(--wb-s16)));
--wb-slider-content-translate-x: 0;
--wb-slider-content-translate-y: -100%;
}
.wb-slider-content-bottom {
--wb-slider-content-x: 50%;
--wb-slider-content-y: calc(100% - clamp(var(--wb-s8), 12vw, var(--wb-s16)));
--wb-slider-content-translate-x: -50%;
--wb-slider-content-translate-y: -100%;
}
.wb-slider-content-bottom-center {
--wb-slider-content-x: 50%;
--wb-slider-content-y: calc(100% - clamp(var(--wb-s8), 12vw, var(--wb-s16)));
--wb-slider-content-translate-x: -50%;
--wb-slider-content-translate-y: -100%;
}
.wb-slider-content-bottom-end {
--wb-slider-content-x: calc(100% - clamp(var(--wb-s5), 8vw, var(--wb-s14)));
--wb-slider-content-y: calc(100% - clamp(var(--wb-s8), 12vw, var(--wb-s16)));
--wb-slider-content-translate-x: -100%;
--wb-slider-content-translate-y: -100%;
}
.wb-slider-content-sm {
--wb-slider-content-width: min(88%, 32rem);
}
.wb-slider-content-md {
--wb-slider-content-width: min(88%, 42rem);
}
.wb-slider-content-lg {
--wb-slider-content-width: min(88%, 56rem);
}
.wb-slider-content-full {
--wb-slider-content-width: min(92%, 72rem);
}
.wb-slider-text-light {
color: #fff;
}
.wb-slider-text-dark {
color: var(--wb-text);
}
.wb-slider-text-dark .wb-slide::after {
background:
    linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42) 54%, rgba(255, 255, 255, .12)),
    linear-gradient(0deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08));
}
.wb-slider-controls {
position: absolute;
inset-inline: var(--wb-s4);
inset-block-end: var(--wb-s4);
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s3);
pointer-events: none;
}
.wb-slider-controls button {
pointer-events: auto;
}
.wb-slider-arrow {
border-color: rgba(255, 255, 255, .2);
background: rgba(8, 16, 22, .42);
color: #fff;
backdrop-filter: blur(10px);
}
.wb-slider-arrow:hover {
border-color: rgba(255, 255, 255, .34);
background: rgba(8, 16, 22, .58);
color: #fff;
}
.wb-slider-dots {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wb-s2);
padding: var(--wb-s2) var(--wb-s3);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
background: rgba(8, 16, 22, .42);
backdrop-filter: blur(10px);
pointer-events: auto;
}
.wb-slider-dot {
display: block;
inline-size: .6rem;
block-size: .6rem;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .45);
cursor: pointer;
transition:
    inline-size var(--wb-t-f),
    background-color var(--wb-t-f);
}
.wb-slider-dot:hover,
.wb-slider-dot.is-active {
background: #fff;
}
.wb-slider-dot.is-active {
inline-size: 1.75rem;
}
.wb-slider[data-wb-slider-single="true"] .wb-slider-controls {
display: none;
}
@media (max-width: 720px) {
.wb-slider {
--wb-slider-min-height: 24rem;
}
.wb-slider-height-viewport {
--wb-slider-min-height: 100svh;
}
.wb-slide-content {
--wb-slider-content-width: min(90%, 34rem);
}
.wb-slider-controls {
inset-inline: var(--wb-s3);
inset-block-end: var(--wb-s3);
}
}
@media (prefers-reduced-motion: reduce) {
.wb-slider-track,
.wb-slider-dot {
transition: none;
}
}
.wb-cookie-consent-banner,
.wb-cookie-consent-floating {
position: fixed;
inset-inline: var(--wb-s4);
bottom: var(--wb-s4);
z-index: calc(var(--wb-z-modal) - 1);
pointer-events: none;
}
.wb-cookie-consent-floating {
inset-inline-start: auto;
inset-inline-end: var(--wb-s4);
width: min(calc(100vw - (var(--wb-s4) * 2)), 28rem);
}
.wb-cookie-consent-card {
pointer-events: auto;
margin: 0;
border-radius: var(--wb-r-xl);
box-shadow: var(--wb-shadow-lg);
background: color-mix(in srgb, var(--wb-surface) 92%, transparent);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.wb-cookie-consent-banner > .wb-cookie-consent-card {
width: min(100%, 72rem);
margin-inline: auto;
}
[data-wb-cookie-consent-preview].wb-cookie-consent-banner,
[data-wb-cookie-consent-preview].wb-cookie-consent-floating {
position: static;
inset-inline: auto;
inset-inline-start: auto;
inset-inline-end: auto;
bottom: auto;
width: auto;
z-index: auto;
pointer-events: auto;
}
[data-wb-cookie-consent-preview] > .wb-cookie-consent-card {
width: 100%;
}
.wb-cookie-consent [data-wb-cookie-required="true"] + .wb-switch-track,
.wb-cookie-consent input[disabled] + .wb-switch-track {
opacity: 0.9;
}
@media (max-width: 768px) {
.wb-cookie-consent-banner,
.wb-cookie-consent-floating {
inset-inline: var(--wb-s3);
bottom: var(--wb-s3);
width: auto;
}
}
.wb-content-shell {
max-width: 780px;
margin: 0 auto;
padding: var(--wb-s10) var(--wb-s6);
}
.wb-content-shell-narrow {
max-width: 620px;
}
.wb-content-shell-wide {
max-width: 1040px;
}
.wb-content-shell.wb-docs-main {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.wb-content-shell.wb-docs-main .wb-content-header {
display: grid;
gap: var(--wb-s3);
width: min(100%, 74rem);
max-width: 74rem;
margin-bottom: var(--wb-s7);
}
.wb-content-shell.wb-docs-main .wb-content-body {
width: 100%;
min-width: 0;
}
.wb-docs-breadcrumb {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.wb-docs-breadcrumb .wb-breadcrumb-list {
flex-wrap: nowrap;
white-space: nowrap;
}
.wb-docs-flow {
display: grid;
gap: var(--wb-s8);
}
.wb-docs-section {
display: grid;
gap: var(--wb-s4);
min-width: 0;
}
.wb-docs-section > * {
min-width: 0;
}
.wb-docs-section:is(.wb-docs-prose, .wb-prose) {
width: min(100%, 72ch);
}
.wb-docs-section.wb-docs-wide,
.wb-docs-section.wb-docs-split {
width: 100%;
}
.wb-docs-section.wb-docs-wide > :is(h2, h3, p, ul, ol, blockquote),
.wb-docs-section.wb-docs-split > :is(h2, h3, p, ul, ol, blockquote) {
width: min(100%, 72ch);
}
.wb-docs-prose,
.wb-prose {
width: min(100%, 72ch);
}
.wb-docs-prose p,
.wb-prose p {
max-width: 70ch;
}
.wb-docs-wide,
.wb-docs-split {
width: 100%;
}
.wb-docs-split :is(.wb-grid-2, .wb-row) {
align-items: start;
}
.wb-docs-topbar > :not(.wb-navbar-spacer) {
min-width: 0;
}
.wb-docs-topbar .wb-cluster {
flex-shrink: 0;
}
.wb-content-header {
margin-bottom: var(--wb-s8);
padding-bottom: var(--wb-s6);
border-bottom: 1px solid var(--wb-border);
}
.wb-content-breadcrumb {
margin-bottom: var(--wb-s4);
}
.wb-content-title {
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--wb-text);
line-height: 1.2;
margin: 0 0 var(--wb-s3);
}
.wb-content-subtitle {
font-size: 1.05rem;
color: var(--wb-muted);
margin: 0 0 var(--wb-s4);
line-height: 1.6;
}
.wb-content-meta {
display: flex;
align-items: center;
gap: var(--wb-s3);
flex-wrap: wrap;
font-size: 0.8rem;
color: var(--wb-muted);
}
.wb-content-meta-divider {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--wb-muted);
opacity: 0.4;
}
.wb-content-body {
font-size: 0.975rem;
line-height: 1.75;
color: var(--wb-text);
}
.wb-content-body h2 {
font-size: 1.3rem;
font-weight: 700;
margin: var(--wb-s8) 0 var(--wb-s3);
color: var(--wb-text);
}
.wb-content-body h3 {
font-size: 1.05rem;
font-weight: 600;
margin: var(--wb-s6) 0 var(--wb-s2);
color: var(--wb-text);
}
.wb-content-body p {
margin: 0 0 var(--wb-s4);
}
.wb-content-body ul,
.wb-content-body ol {
padding-left: var(--wb-s6);
margin: 0 0 var(--wb-s4);
}
.wb-content-body li {
margin-bottom: var(--wb-s1);
}
.wb-content-body a:not([class*="wb-"]) {
color: var(--wb-accent-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.wb-content-body a:not([class*="wb-"]):hover {
color: var(--wb-accent-hover);
}
.wb-content-body code {
font-family: var(--wb-font-mono);
font-size: 0.85em;
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-sm);
padding: 0.1em 0.4em;
color: var(--wb-accent-text);
}
.wb-content-body pre {
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-r-md);
padding: var(--wb-s4);
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.65;
margin: 0 0 var(--wb-s4);
}
.wb-content-body pre code {
background: none;
border: none;
padding: 0;
font-size: inherit;
color: inherit;
}
.wb-content-body blockquote {
border-left: 3px solid var(--wb-accent-border);
margin: var(--wb-s4) 0;
padding: var(--wb-s2) var(--wb-s4);
color: var(--wb-muted);
font-style: italic;
}
.wb-content-body hr {
border: none;
border-top: 1px solid var(--wb-border);
margin: var(--wb-s8) 0;
}
.wb-content-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wb-s4);
margin-top: var(--wb-s10);
padding-top: var(--wb-s6);
border-top: 1px solid var(--wb-border);
flex-wrap: wrap;
}
.wb-content-prev,
.wb-content-next {
display: flex;
flex-direction: column;
gap: var(--wb-s1);
text-decoration: none;
color: var(--wb-text);
max-width: 240px;
}
.wb-content-next {
text-align: right;
margin-left: auto;
}
.wb-content-prev-label,
.wb-content-next-label {
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.06em;
color: var(--wb-muted);
}
.wb-content-prev-title,
.wb-content-next-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--wb-accent-text);
}
.wb-content-prev:hover .wb-content-prev-title,
.wb-content-next:hover .wb-content-next-title {
color: var(--wb-accent-hover);
}
@media (max-width: 640px) {
.wb-content-shell {
padding: var(--wb-s6) var(--wb-s4);
}
.wb-content-shell.wb-docs-main .wb-content-header {
width: 100%;
max-width: none;
margin-bottom: var(--wb-s6);
}
.wb-docs-flow {
gap: var(--wb-s6);
}
.wb-content-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--wb-s3);
}
.wb-content-prev,
.wb-content-next {
width: 100%;
}
.wb-content-next {
text-align: left;
margin-left: 0;
}
}
.wb-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--wb-s8);
padding-block: var(--wb-s18) var(--wb-s12);
}
.wb-hero-content {
display: flex;
flex-direction: column;
gap: var(--wb-s4);
max-width: 52rem;
}
.wb-hero-title {
margin: 0;
font-size: clamp(3rem, 8vw, 5.75rem);
line-height: 0.94;
letter-spacing: -0.055em;
color: var(--wb-text);
}
.wb-hero-text {
margin: 0;
max-width: 44rem;
font-size: var(--wb-font-size-lg);
line-height: var(--wb-line-height-relaxed);
color: var(--wb-muted);
}
.wb-hero-note {
margin: 0;
color: var(--wb-accent-text);
font-size: var(--wb-font-size-sm);
font-weight: 600;
}
.wb-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--wb-s3);
margin-top: var(--wb-s2);
}
.wb-content-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wb-s8);
}
.wb-content-columns p,
.wb-content-stack p {
margin: 0;
color: var(--wb-muted);
line-height: 1.75;
}
.wb-content-stack {
display: flex;
flex-direction: column;
gap: var(--wb-s4);
max-width: 52rem;
}
.wb-footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
gap: var(--wb-s8);
align-items: start;
}
.wb-footer-brand,
.wb-footer-nav,
.wb-footer-meta {
display: flex;
flex-direction: column;
gap: var(--wb-s2);
}
.wb-footer-item {
margin: 0;
}
.wb-footer-logo {
margin: 0;
font-size: var(--wb-font-size-lg);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--wb-text);
}
.wb-footer-text,
.wb-footer-copy {
margin: 0;
color: var(--wb-muted);
}
.wb-footer-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wb-s2) var(--wb-s5);
list-style: none;
margin: 0;
padding: 0;
}
.wb-footer-link {
color: var(--wb-muted);
text-decoration: none;
}
.wb-footer-link:hover {
color: var(--wb-text);
text-decoration: none;
}
@media (max-width: 960px) {
.wb-content-columns,
.wb-footer-grid {
grid-template-columns: 1fr;
}
.wb-footer-list {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 720px) {
.wb-hero {
padding-block: var(--wb-s14) var(--wb-s10);
}
.wb-hero-title {
font-size: clamp(2.4rem, 12vw, 4rem);
}
.wb-hero-text {
font-size: var(--wb-font-size-md);
}
.wb-footer-list {
grid-template-columns: 1fr;
}
}
.wb-icon {
display: inline-block;
width:  var(--wb-icon-size, 1.125rem);
height: var(--wb-icon-size, 1.125rem);
flex-shrink: 0;
vertical-align: middle;
color: currentColor;
}
i.wb-icon {
-webkit-mask-repeat:   no-repeat;
mask-repeat:           no-repeat;
-webkit-mask-size:     100% 100%;
mask-size:             100% 100%;
-webkit-mask-position: center;
mask-position:         center;
background-color:      currentColor;
}
:where(i.wb-icon) {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E %3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E %3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.wb-icon-xs  { --wb-icon-size: 0.875rem; }
.wb-icon-sm  { --wb-icon-size: 1rem; }
.wb-icon-lg  { --wb-icon-size: 1.5rem; }
.wb-icon-xl  { --wb-icon-size: 2rem; }
.wb-icon-2xl { --wb-icon-size: 2.5rem; }
.wb-icon-thin   { --wb-icon-stroke: 1; }
.wb-icon-medium { --wb-icon-stroke: 2; }   /* default */
.wb-icon-bold   { --wb-icon-stroke: 2.5; }
.wb-icon-muted   { opacity: 0.55; }
.wb-icon-accent  { color: var(--wb-accent);   background-color: var(--wb-accent); }
.wb-icon-success { color: var(--wb-success);  background-color: var(--wb-success); }
.wb-icon-warning { color: var(--wb-warning);  background-color: var(--wb-warning); }
.wb-icon-danger  { color: var(--wb-danger);   background-color: var(--wb-danger); }
.wb-icon-info    { color: var(--wb-info);      background-color: var(--wb-info); }
.wb-icon-on      { color: var(--wb-accent-on); background-color: var(--wb-accent-on); }
.wb-icon-tone-soft {
color: var(--wb-icon-tone-soft, var(--wb-muted));
background-color: var(--wb-icon-tone-soft, var(--wb-muted));
}
.wb-icon-tone-brand {
color: var(--wb-icon-tone-brand, var(--wb-accent));
background-color: var(--wb-icon-tone-brand, var(--wb-accent));
}
.wb-icon-tone-accent {
color: var(--wb-icon-tone-accent, var(--wb-accent));
background-color: var(--wb-icon-tone-accent, var(--wb-accent));
}
.wb-icon-tone-highlight {
color: var(--wb-icon-tone-highlight, var(--wb-warning));
background-color: var(--wb-icon-tone-highlight, var(--wb-warning));
}
.wb-icon-tone-bold {
color: var(--wb-icon-tone-bold, var(--wb-text));
background-color: var(--wb-icon-tone-bold, var(--wb-text));
}
.wb-icon-tone-quiet {
color: var(--wb-icon-tone-quiet, var(--wb-muted));
background-color: var(--wb-icon-tone-quiet, var(--wb-muted));
opacity: 0.72;
}
.wb-icon-btn {
display: inline-flex;
align-items: center;
gap: var(--wb-s2);
}
.wb-icon-card {
display: flex;
align-items: center;
gap: var(--wb-s3);
}
.wb-icon-solo {
display: flex;
align-items: center;
justify-content: center;
}
.wb-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width:  2.25rem;
height: 2.25rem;
border-radius: var(--wb-r-md);
background: var(--wb-accent-soft);
color: var(--wb-accent-text);
flex-shrink: 0;
}
.wb-icon-wrap-sm {
width:  1.75rem;
height: 1.75rem;
border-radius: var(--wb-r-sm);
}
.wb-icon-wrap-lg {
width:  3rem;
height: 3rem;
border-radius: var(--wb-r-lg);
}
.wb-icon-wrap-circle {
border-radius: var(--wb-r-full);
}
.wb-icon-wrap-success { background: var(--wb-success-soft); color: var(--wb-success); }
.wb-icon-wrap-warning { background: var(--wb-warning-soft); color: var(--wb-warning); }
.wb-icon-wrap-danger  { background: var(--wb-danger-soft);  color: var(--wb-danger); }
.wb-icon-wrap-info    { background: var(--wb-info-soft);    color: var(--wb-info); }
.wb-icon-wrap-muted   { background: var(--wb-surface-2);    color: var(--wb-muted); }