/* ============================================================
BIDSALE DESIGN SYSTEM v1.0
Prefix: bdsl_
Theme: Dark-first auction platform · White-label ready
============================================================ */
/* ── GOOGLE FONTS ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ══════════════════════════════════════════════════════════
1. DESIGN TOKENS — CSS VARIABLES
══════════════════════════════════════════════════════════ */
:root {
/* ── Brand Colors ───── */
--bdsl-brand-50: #e6fff5;
--bdsl-brand-100: #b3ffe0;
--bdsl-brand-200: #66ffbf;
--bdsl-brand-300: #00f090;
--bdsl-brand-400: #00d47d; /* ← primary accent */
--bdsl-brand-500: #00b368;
--bdsl-brand-600: #008f52;
--bdsl-brand-700: #006b3d;
--bdsl-brand-800: #004828;
--bdsl-brand-900: #002414;
/* ── Neutral (Dark Base) ─ */
--bdsl-neutral-0: #ffffff;
--bdsl-neutral-50: #f0f4f8;
--bdsl-neutral-100: #d9e3ec;
--bdsl-neutral-200: #b0c2d3;
--bdsl-neutral-300: #7a9ab5;
--bdsl-neutral-400: #4d7291;
--bdsl-neutral-500: #2e506d;
--bdsl-neutral-600: #1e3a52;
--bdsl-neutral-700: #142840;
--bdsl-neutral-800: #0d1e31;
--bdsl-neutral-850: #091828;
--bdsl-neutral-900: #060f1a;
--bdsl-neutral-950: #030a12;
/* ── Semantic Colors ─── */
--bdsl-success-light: #b3ffe0;
--bdsl-success: #00d47d;
--bdsl-success-dark: #006b3d;
--bdsl-warning-light: #fff3cd;
--bdsl-warning: #ffc107;
--bdsl-warning-dark: #a07700;
--bdsl-danger-light: #ffe0e0;
--bdsl-danger: #ff4d4d;
--bdsl-danger-dark: #a00000;
--bdsl-info-light: #d0eaff;
--bdsl-info: #3b9eff;
--bdsl-info-dark: #0055b3;
--bdsl-purple-light: #ead6ff;
--bdsl-purple: #a855f7;
--bdsl-purple-dark: #6b21a8;
--bdsl-orange-light: #ffe8d0;
--bdsl-orange: #ff7a30;
--bdsl-orange-dark: #a03a00;
--bdsl-gold-light: #fff0b3;
--bdsl-gold: #f0c040;
--bdsl-gold-dark: #856800;
/* ── Typography ──────── */
--bdsl-font-display: 'Cormorant Garamond', Georgia, serif;
--bdsl-font-body: 'Outfit', system-ui, sans-serif;
--bdsl-font-mono: 'JetBrains Mono', monospace;
--bdsl-text-xs: 0.625rem; /* 10px */
--bdsl-text-sm: 0.75rem; /* 12px */
--bdsl-text-base: 0.875rem; /* 14px */
--bdsl-text-md: 1rem; /* 16px */
--bdsl-text-lg: 1.125rem; /* 18px */
--bdsl-text-xl: 1.25rem; /* 20px */
--bdsl-text-2xl: 1.5rem; /* 24px */
--bdsl-text-3xl: 1.875rem; /* 30px */
--bdsl-text-4xl: 2.25rem; /* 36px */
--bdsl-text-5xl: 3rem; /* 48px */
--bdsl-text-6xl: 3.75rem; /* 60px */
--bdsl-text-7xl: 4.5rem; /* 72px */
--bdsl-lh-tight: 1.1;
--bdsl-lh-snug: 1.3;
--bdsl-lh-normal: 1.5;
--bdsl-lh-relaxed:1.7;
--bdsl-fw-light: 300;
--bdsl-fw-regular: 400;
--bdsl-fw-medium: 500;
--bdsl-fw-semibold:600;
--bdsl-fw-bold: 700;
--bdsl-fw-extrabold:800;
/* ── Spacing ─────────── */
--bdsl-space-1: 0.25rem;
--bdsl-space-2: 0.5rem;
--bdsl-space-3: 0.75rem;
--bdsl-space-4: 1rem;
--bdsl-space-5: 1.25rem;
--bdsl-space-6: 1.5rem;
--bdsl-space-8: 2rem;
--bdsl-space-10: 2.5rem;
--bdsl-space-12: 3rem;
--bdsl-space-16: 4rem;
--bdsl-space-20: 5rem;
--bdsl-space-24: 6rem;
--bdsl-space-32: 8rem;
/* ── Border Radius ───── */
--bdsl-radius-none: 0;
--bdsl-radius-sm: 0.25rem;
--bdsl-radius-md: 0.5rem;
--bdsl-radius-lg: 0.75rem;
--bdsl-radius-xl: 1rem;
--bdsl-radius-2xl: 1.5rem;
--bdsl-radius-3xl: 2rem;
--bdsl-radius-pill: 9999px;
--bdsl-radius-circle: 50%;
/* ── Shadows ─────────── */
--bdsl-shadow-xs: 0 1px 2px rgba(0,0,0,.35);
--bdsl-shadow-sm: 0 2px 8px rgba(0,0,0,.40);
--bdsl-shadow-md: 0 4px 20px rgba(0,0,0,.50);
--bdsl-shadow-lg: 0 8px 40px rgba(0,0,0,.60);
--bdsl-shadow-xl: 0 16px 60px rgba(0,0,0,.70);
--bdsl-shadow-glow: 0 0 24px rgba(0,212,125,.35);
--bdsl-shadow-glow-lg: 0 0 48px rgba(0,212,125,.45);
--bdsl-shadow-inner: inset 0 2px 8px rgba(0,0,0,.40);
/* ── Easing ──────────── */
--bdsl-ease-out: cubic-bezier(.16,1,.3,1);
--bdsl-ease-in: cubic-bezier(.4,0,1,1);
--bdsl-ease-inout: cubic-bezier(.4,0,.2,1);
--bdsl-ease-spring: cubic-bezier(.34,1.56,.64,1);
--bdsl-ease-bounce: cubic-bezier(.68,-.55,.27,1.55);
/* ── Z-Index ─────────── */
--bdsl-z-base: 0;
--bdsl-z-raised: 10;
--bdsl-z-dropdown: 100;
--bdsl-z-sticky: 200;
--bdsl-z-fixed: 300;
--bdsl-z-overlay: 400;
--bdsl-z-modal: 500;
--bdsl-z-toast: 600;
--bdsl-z-tooltip: 700;
/* ── Theme Surface (Dark) ─ */
--bdsl-bg-app: var(--bdsl-neutral-900);
--bdsl-bg-surface: var(--bdsl-neutral-850);
--bdsl-bg-card: var(--bdsl-neutral-800);
--bdsl-bg-input: var(--bdsl-neutral-700);
--bdsl-bg-hover: rgba(0,212,125,.08);
--bdsl-bg-active: rgba(0,212,125,.15);
--bdsl-border: rgba(255,255,255,.08);
--bdsl-border-strong: rgba(255,255,255,.16);
--bdsl-border-brand: rgba(0,212,125,.40);
--bdsl-text-primary: #ffffff;
--bdsl-text-secondary: var(--bdsl-neutral-200);
--bdsl-text-muted: var(--bdsl-neutral-400);
--bdsl-text-disabled: var(--bdsl-neutral-500);
--bdsl-text-brand: var(--bdsl-brand-400);
/* ── Transitions ───── */
--bdsl-transition-fast: 150ms var(--bdsl-ease-out);
--bdsl-transition-base: 250ms var(--bdsl-ease-out);
--bdsl-transition-slow: 400ms var(--bdsl-ease-out);
--bdsl-transition-spring: 500ms var(--bdsl-ease-spring);
}
/* ── LIGHT THEME ─────────────────────────────────────────── */
[data-bdsl-theme="light"] {
--bdsl-bg-app: #f0f4f8;
--bdsl-bg-surface: #ffffff;
--bdsl-bg-card: #ffffff;
--bdsl-bg-input: #f0f4f8;
--bdsl-bg-hover: rgba(0,180,100,.07);
--bdsl-bg-active: rgba(0,180,100,.14);
--bdsl-border: rgba(0,0,0,.1);
--bdsl-border-strong: rgba(0,0,0,.18);
--bdsl-border-brand: rgba(0,180,100,.4);
--bdsl-text-primary: var(--bdsl-neutral-900);
--bdsl-text-secondary: var(--bdsl-neutral-700);
--bdsl-text-muted: var(--bdsl-neutral-500);
--bdsl-text-disabled: var(--bdsl-neutral-300);
--bdsl-text-brand: var(--bdsl-brand-600);
--bdsl-shadow-xs: 0 1px 2px rgba(0,0,0,.10);
--bdsl-shadow-sm: 0 2px 8px rgba(0,0,0,.12);
--bdsl-shadow-md: 0 4px 20px rgba(0,0,0,.14);
--bdsl-shadow-lg: 0 8px 40px rgba(0,0,0,.18);
--bdsl-shadow-xl: 0 16px 60px rgba(0,0,0,.22);
--bdsl-shadow-glow: 0 0 24px rgba(0,180,100,.25);
}
/* ══════════════════════════════════════════════════════════
2. RESET & BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--bdsl-font-body);
font-size: var(--bdsl-text-base);
line-height: 1.65;
color: var(--bdsl-text-primary);
background-color: var(--bdsl-bg-app);
transition: background-color var(--bdsl-transition-base), color var(--bdsl-transition-base);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--bdsl-text-brand); text-decoration: none; transition: color var(--bdsl-transition-fast); }
a:hover { color: var(--bdsl-brand-300); }
button, input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }
hr { border: none; border-top: 1px solid var(--bdsl-border); }
/* ══════════════════════════════════════════════════════════
3. TYPOGRAPHY
══════════════════════════════════════════════════════════ */
.bdsl_display-1 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-7xl); font-weight: var(--bdsl-fw-semibold); line-height: 1.0; letter-spacing: -0.01em; }
.bdsl_display-2 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-6xl); font-weight: var(--bdsl-fw-semibold); line-height: 1.05; letter-spacing: -0.008em; }
.bdsl_h1 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-5xl); font-weight: var(--bdsl-fw-semibold); line-height: 1.1; letter-spacing: -0.005em; }
.bdsl_h2 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-4xl); font-weight: var(--bdsl-fw-semibold); line-height: 1.15; letter-spacing: 0; }
.bdsl_h3 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-3xl); font-weight: var(--bdsl-fw-medium); line-height: 1.2; letter-spacing: 0; }
.bdsl_h4 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-2xl); font-weight: var(--bdsl-fw-medium); line-height: 1.25; letter-spacing: 0.01em; }
.bdsl_h5 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-xl); font-weight: var(--bdsl-fw-medium); line-height: 1.3; letter-spacing: 0.01em; }
.bdsl_h6 { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-lg); font-weight: var(--bdsl-fw-medium); line-height: 1.35; letter-spacing: 0.01em; }
.bdsl_lead { font-size: var(--bdsl-text-lg); font-weight: 300; line-height: 1.8; color: var(--bdsl-text-secondary); letter-spacing: 0.015em; }
.bdsl_caption { font-size: var(--bdsl-text-sm); color: var(--bdsl-text-muted); line-height: 1.6; letter-spacing: 0.01em; }
.bdsl_overline { font-size: var(--bdsl-text-xs); font-weight: var(--bdsl-fw-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bdsl-text-muted); }
.bdsl_section-label { font-size: var(--bdsl-text-sm); font-weight: var(--bdsl-fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bdsl-text-brand); display: inline-flex; align-items: center; gap: var(--bdsl-space-2); }
.bdsl_section-label::before { content:''; display:inline-block; width:24px; height:2px; background:var(--bdsl-brand-400); border-radius:2px; }
.bdsl_code { font-family: var(--bdsl-font-mono); font-size: 0.9em; background: var(--bdsl-bg-input); color: var(--bdsl-brand-300); padding: 0.15em 0.45em; border-radius: var(--bdsl-radius-sm); border: 1px solid var(--bdsl-border); }
.bdsl_mark { background: rgba(0,212,125,.2); color: var(--bdsl-brand-300); padding: 0.1em 0.35em; border-radius: var(--bdsl-radius-sm); font-weight: var(--bdsl-fw-medium); }
.bdsl_gradient-text { background: linear-gradient(135deg, var(--bdsl-brand-300), var(--bdsl-brand-400) 40%, #3b9eff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bdsl_text-primary { color: var(--bdsl-text-primary) !important; }
.bdsl_text-secondary { color: var(--bdsl-text-secondary) !important; }
.bdsl_text-muted { color: var(--bdsl-text-muted) !important; }
.bdsl_text-brand { color: var(--bdsl-text-brand) !important; }
.bdsl_text-success { color: var(--bdsl-success) !important; }
.bdsl_text-danger { color: var(--bdsl-danger) !important; }
.bdsl_text-warning { color: var(--bdsl-warning) !important; }
.bdsl_text-info { color: var(--bdsl-info) !important; }
/* ══════════════════════════════════════════════════════════
4. LAYOUT
══════════════════════════════════════════════════════════ */
.bdsl_page { display: flex; flex-direction: column; min-height: 100vh; }
.bdsl_page-body { display: flex; flex: 1; }
.bdsl_container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--bdsl-space-6); }
.bdsl_container-sm { max-width: 768px; }
.bdsl_container-lg { max-width: 1440px; }
.bdsl_container-fluid { max-width: 100%; }
.bdsl_section { padding-block: var(--bdsl-space-20); }
.bdsl_section-sm { padding-block: var(--bdsl-space-12); }
.bdsl_section-lg { padding-block: var(--bdsl-space-32); }
/* Grid */
.bdsl_grid { display: grid; gap: var(--bdsl-space-6); }
.bdsl_grid-1 { grid-template-columns: 1fr; }
.bdsl_grid-2 { grid-template-columns: repeat(2, 1fr); }
.bdsl_grid-3 { grid-template-columns: repeat(3, 1fr); }
.bdsl_grid-4 { grid-template-columns: repeat(4, 1fr); }
.bdsl_grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bdsl_grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width:1024px) { .bdsl_grid-4 { grid-template-columns: repeat(2,1fr); } .bdsl_grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px) { .bdsl_grid-4,.bdsl_grid-3,.bdsl_grid-2 { grid-template-columns: 1fr; } }
/* Flex utilities */
.bdsl_flex { display: flex; }
.bdsl_flex-col { flex-direction: column; }
.bdsl_flex-wrap { flex-wrap: wrap; }
.bdsl_items-center { align-items: center; }
.bdsl_items-start { align-items: flex-start; }
.bdsl_items-end { align-items: flex-end; }
.bdsl_justify-center { justify-content: center; }
.bdsl_justify-between { justify-content: space-between; }
.bdsl_justify-end { justify-content: flex-end; }
.bdsl_gap-1 { gap: var(--bdsl-space-1); }
.bdsl_gap-2 { gap: var(--bdsl-space-2); }
.bdsl_gap-3 { gap: var(--bdsl-space-3); }
.bdsl_gap-4 { gap: var(--bdsl-space-4); }
.bdsl_gap-6 { gap: var(--bdsl-space-6); }
.bdsl_gap-8 { gap: var(--bdsl-space-8); }
/* ══════════════════════════════════════════════════════════
5. NAVBAR
══════════════════════════════════════════════════════════ */
.bdsl_navbar {
position: fixed; top: 0; left: 0; right: 0;
z-index: var(--bdsl-z-fixed);
height: 64px;
background: rgba(6,15,26,.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--bdsl-border);
display: flex; align-items: center;
transition: background var(--bdsl-transition-base), box-shadow var(--bdsl-transition-base);
}
.bdsl_navbar.scrolled { background: rgba(6,15,26,.97); box-shadow: var(--bdsl-shadow-lg); }
.bdsl_navbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bdsl_navbar-brand { display: flex; align-items: center; gap: var(--bdsl-space-3); text-decoration: none; }
.bdsl_navbar-logo { height: 32px; width: auto; }
.bdsl_navbar-brand-text { font-family: var(--bdsl-font-display); font-size: var(--bdsl-text-xl); font-weight: var(--bdsl-fw-extrabold); color: var(--bdsl-text-primary); overflow: hidden; position: relative; }
/* Shimmer on brand text */
.bdsl_navbar-brand-text::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(0,212,125,.6) 50%, transparent 100%);
transform: translateX(-100%);
animation: bdsl_shimmer 3s ease-in-out infinite;
}
.bdsl_navbar-nav { display: flex; align-items: center; gap: var(--bdsl-space-1); }
.bdsl_nav-link { font-size: var(--bdsl-text-sm); font-weight: var(--bdsl-fw-medium); color: var(--bdsl-text-secondary); padding: var(--bdsl-space-2) var(--bdsl-space-3); border-radius: var(--bdsl-radius-md); transition: color var(--bdsl-transition-fast), background var(--bdsl-transition-fast); position: relative; text-decoration: none; }
.bdsl_nav-link:hover { color: var(--bdsl-text-primary); background: var(--bdsl-bg-hover); }
.bdsl_nav-link.active { color: var(--bdsl-text-brand); }
.bdsl_nav-link.active::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:16px; height:2px; background:var(--bdsl-brand-400); border-radius:2px; }
.bdsl_navbar-actions { display: flex; align-items: center; gap: var(--bdsl-space-3); }
.bdsl_navbar-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:var(--bdsl-space-2); }
.bdsl_navbar-toggle span { width:24px; height:2px; background:var(--bdsl-text-primary); border-radius:2px; transition:transform var(--bdsl-transition-base), opacity var(--bdsl-transition-base); }
@media (max-width:768px) {
.bdsl_navbar-toggle { display:flex; }
.bdsl_navbar-nav { display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--bdsl-bg-surface); flex-direction:column; padding:var(--bdsl-space-6); gap:var(--bdsl-space-2); overflow-y:auto; }
.bdsl_navbar-nav.open { display:flex; }
.bdsl_nav-link { padding: var(--bdsl-space-3) var(--bdsl-space-4); font-size:var(--bdsl-text-md); }
}
/* ══════════════════════════════════════════════════════════
6. SIDEBAR
══════════════════════════════════════════════════════════ */
.bdsl_sidebar {
width: 260px; min-width: 260px;
background: var(--bdsl-bg-surface);
border-right: 1px solid var(--bdsl-border);
padding: var(--bdsl-space-6) var(--bdsl-space-4);
display: flex; flex-direction: column; gap: var(--bdsl-space-2);
height: 100%; overflow-y: auto;
transition: transform var(--bdsl-transition-base);
position: sticky; top: 64px; height: calc(100vh - 64px);
}
.bdsl_sidebar-section-title { font-size: var(--bdsl-text-xs); font-weight: var(--bdsl-fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--bdsl-text-muted); padding: var(--bdsl-space-3) var(--bdsl-space-3) var(--bdsl-space-2); }
.bdsl_sidebar-item { display: flex; align-items: center; gap: var(--bdsl-space-3); padding: var(--bdsl-space-2) var(--bdsl-space-3); border-radius: var(--bdsl-radius-md); font-size: var(--bdsl-text-sm); font-weight: var(--bdsl-fw-medium); color: var(--bdsl-text-secondary); cursor: pointer; transition: all var(--bdsl-transition-fast); text-decoration: none; border: none; background: none; width: 100%; text-align: left; }
.bdsl_sidebar-item:hover { color: var(--bdsl-text-primary); background: var(--bdsl-bg-hover); }
.bdsl_sidebar-item.active { color: var(--bdsl-text-brand); background: var(--bdsl-bg-active); }
.bdsl_sidebar-item-icon { width: 18px; height: 18px; opacity: .7; flex-shrink: 0; }
.bdsl_sidebar-item.active .bdsl_sidebar-item-icon { opacity: 1; }
.bdsl_sidebar-badge { margin-left: auto; }
@media (max-width:1024px) { .bdsl_sidebar { display:none; } .bdsl_sidebar.open { display:flex; position:fixed; top:64px; left:0; bottom:0; z-index:var(--bdsl-z-fixed); } }
/* ══════════════════════════════════════════════════════════
7. BUTTONS
══════════════════════════════════════════════════════════ */
.bdsl_btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--bdsl-space-2);
font-family: var(--bdsl-font-body); font-weight: var(--bdsl-fw-semibold); font-size: var(--bdsl-text-sm);
padding: 0.625rem 1.25rem; border-radius: var(--bdsl-radius-md);
border: 1px solid transparent; cursor: pointer; white-space: nowrap;
transition: all var(--bdsl-transition-fast); position: relative; overflow: hidden;
text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
line-height: 1;
}
.bdsl_btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background var(--bdsl-transition-fast); }
.bdsl_btn:hover::after { background:rgba(255,255,255,.05); }
.bdsl_btn:active { transform: scale(.97); }
.bdsl_btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.bdsl_btn:focus-visible { outline: 2px solid var(--bdsl-brand-400); outline-offset: 2px; }
/* Solid variants */
.bdsl_btn-primary { background:var(--bdsl-brand-400); color:#000; border-color:var(--bdsl-brand-400); box-shadow:0 0 0 0 rgba(0,212,125,0); }
.bdsl_btn-primary:hover { background:var(--bdsl-brand-300); box-shadow:var(--bdsl-shadow-glow); }
.bdsl_btn-secondary { background:var(--bdsl-neutral-700); color:var(--bdsl-text-primary); border-color:var(--bdsl-neutral-600); }
.bdsl_btn-secondary:hover { background:var(--bdsl-neutral-600); }
.bdsl_btn-success { background:var(--bdsl-success); color:#000; border-color:var(--bdsl-success); }
.bdsl_btn-success:hover { background:#00f090; box-shadow:0 0 20px rgba(0,212,125,.4); }
.bdsl_btn-danger { background:var(--bdsl-danger); color:#fff; border-color:var(--bdsl-danger); }
.bdsl_btn-danger:hover { background:#ff6b6b; box-shadow:0 0 20px rgba(255,77,77,.4); }
.bdsl_btn-warning { background:var(--bdsl-warning); color:#000; border-color:var(--bdsl-warning); }
.bdsl_btn-info { background:var(--bdsl-info); color:#000; border-color:var(--bdsl-info); }
.bdsl_btn-info:hover { box-shadow:0 0 20px rgba(59,158,255,.4); }
.bdsl_btn-purple { background:var(--bdsl-purple); color:#fff; border-color:var(--bdsl-purple); }
.bdsl_btn-purple:hover { box-shadow:0 0 20px rgba(168,85,247,.4); }
.bdsl_btn-dark { background:var(--bdsl-neutral-900); color:#fff; border-color:var(--bdsl-neutral-700); }
/* Outline variants */
.bdsl_btn-outline-primary { background:transparent; color:var(--bdsl-brand-400); border-color:var(--bdsl-brand-400); }
.bdsl_btn-outline-primary:hover { background:var(--bdsl-bg-active); }
.bdsl_btn-outline-secondary { background:transparent; color:var(--bdsl-text-secondary); border-color:var(--bdsl-border-strong); }
.bdsl_btn-outline-secondary:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); }
.bdsl_btn-outline-danger { background:transparent; color:var(--bdsl-danger); border-color:var(--bdsl-danger); }
.bdsl_btn-outline-danger:hover { background:rgba(255,77,77,.1); }
.bdsl_btn-outline-info { background:transparent; color:var(--bdsl-info); border-color:var(--bdsl-info); }
.bdsl_btn-outline-info:hover { background:rgba(59,158,255,.1); }
/* Ghost & Link */
.bdsl_btn-ghost { background:transparent; color:var(--bdsl-text-secondary); border-color:transparent; }
.bdsl_btn-ghost:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); }
.bdsl_btn-link { background:transparent; color:var(--bdsl-text-brand); border-color:transparent; padding-inline:0; text-decoration:underline; text-underline-offset:3px; }
.bdsl_btn-link:hover { color:var(--bdsl-brand-300); }
/* Sizes */
.bdsl_btn-xs { font-size:var(--bdsl-text-xs); padding:.35rem .7rem; border-radius:var(--bdsl-radius-sm); gap:var(--bdsl-space-1); }
.bdsl_btn-sm { font-size:var(--bdsl-text-xs); padding:.5rem 1rem; }
.bdsl_btn-lg { font-size:var(--bdsl-text-md); padding:.875rem 1.75rem; }
.bdsl_btn-xl { font-size:var(--bdsl-text-lg); padding:1.1rem 2.25rem; border-radius:var(--bdsl-radius-lg); }
/* Modifiers */
.bdsl_btn-pill { border-radius:var(--bdsl-radius-pill); }
.bdsl_btn-block { width:100%; }
.bdsl_btn-icon { padding:.625rem; aspect-ratio:1; }
.bdsl_btn-icon.bdsl_btn-sm { padding:.5rem; }
.bdsl_btn-icon.bdsl_btn-lg { padding:.875rem; }
/* Loading state */
.bdsl_btn-loading { pointer-events:none; }
.bdsl_btn-loading .bdsl_btn-text { opacity:0; }
.bdsl_btn-loading::before { content:''; position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:currentColor; border-radius:50%; animation:bdsl_spin .6s linear infinite; }
/* Button group */
.bdsl_btn-group { display:inline-flex; }
.bdsl_btn-group .bdsl_btn { border-radius:0; border-right-width:0; }
.bdsl_btn-group .bdsl_btn:first-child { border-radius:var(--bdsl-radius-md) 0 0 var(--bdsl-radius-md); }
.bdsl_btn-group .bdsl_btn:last-child { border-radius:0 var(--bdsl-radius-md) var(--bdsl-radius-md) 0; border-right-width:1px; }
/* Glow on hover */
.bdsl_btn-glow:hover { box-shadow: 0 0 30px rgba(0,212,125,.5), 0 0 60px rgba(0,212,125,.2); }
/* ══════════════════════════════════════════════════════════
8. BADGES
══════════════════════════════════════════════════════════ */
.bdsl_badge {
display: inline-flex; align-items: center; gap: var(--bdsl-space-1);
font-size: var(--bdsl-text-xs); font-weight: var(--bdsl-fw-semibold); letter-spacing: .04em;
padding: .25em .65em; border-radius: var(--bdsl-radius-pill);
line-height: 1; white-space: nowrap; vertical-align: middle;
}
/* Solid */
.bdsl_badge-primary { background:var(--bdsl-brand-400); color:#000; }
.bdsl_badge-secondary { background:var(--bdsl-neutral-600); color:var(--bdsl-text-primary); }
.bdsl_badge-success { background:var(--bdsl-success); color:#000; }
.bdsl_badge-danger { background:var(--bdsl-danger); color:#fff; }
.bdsl_badge-warning { background:var(--bdsl-warning); color:#000; }
.bdsl_badge-info { background:var(--bdsl-info); color:#000; }
.bdsl_badge-purple { background:var(--bdsl-purple); color:#fff; }
.bdsl_badge-dark { background:var(--bdsl-neutral-800); color:var(--bdsl-text-primary); border:1px solid var(--bdsl-border); }
/* Soft */
.bdsl_badge-soft-primary { background:rgba(0,212,125,.15); color:var(--bdsl-brand-300); }
.bdsl_badge-soft-danger { background:rgba(255,77,77,.15); color:#ff8080; }
.bdsl_badge-soft-warning { background:rgba(255,193,7,.15); color:#ffd54f; }
.bdsl_badge-soft-info { background:rgba(59,158,255,.15); color:#7fc0ff; }
.bdsl_badge-soft-purple { background:rgba(168,85,247,.15); color:#c084fc; }
.bdsl_badge-soft-success { background:rgba(0,212,125,.15); color:var(--bdsl-brand-300); }
.bdsl_badge-soft-secondary { background:rgba(255,255,255,.08); color:var(--bdsl-text-secondary); }
/* Outline */
.bdsl_badge-outline-primary { background:transparent; color:var(--bdsl-brand-400); border:1px solid var(--bdsl-brand-400); }
.bdsl_badge-outline-danger { background:transparent; color:var(--bdsl-danger); border:1px solid var(--bdsl-danger); }
.bdsl_badge-outline-warning { background:transparent; color:var(--bdsl-warning); border:1px solid var(--bdsl-warning); }
.bdsl_badge-outline-info { background:transparent; color:var(--bdsl-info); border:1px solid var(--bdsl-info); }
.bdsl_badge-outline-secondary { background:transparent; color:var(--bdsl-text-secondary); border:1px solid var(--bdsl-border-strong); }
/* Dot */
.bdsl_badge-dot::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* Chip with dismiss */
.bdsl_chip { display:inline-flex; align-items:center; gap:var(--bdsl-space-1); padding:.3rem .75rem; background:var(--bdsl-bg-card); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-pill); font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-medium); color:var(--bdsl-text-secondary); transition:all var(--bdsl-transition-fast); }
.bdsl_chip:hover { border-color:var(--bdsl-border-brand); color:var(--bdsl-text-primary); }
.bdsl_chip-dismiss { display:flex; align-items:center; cursor:pointer; opacity:.6; transition:opacity var(--bdsl-transition-fast); padding:1px; border-radius:50%; margin-left:2px; }
.bdsl_chip-dismiss:hover { opacity:1; background:rgba(255,255,255,.1); }
/* Role badges */
.bdsl_badge-role-admin { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; }
.bdsl_badge-role-seller { background:linear-gradient(135deg,var(--bdsl-brand-400),var(--bdsl-brand-500)); color:#000; }
.bdsl_badge-role-buyer { background:linear-gradient(135deg,var(--bdsl-info),#0066cc); color:#fff; }
.bdsl_badge-role-vip { background:linear-gradient(135deg,var(--bdsl-gold),#c89000); color:#000; }
.bdsl_badge-role-partner { background:linear-gradient(135deg,var(--bdsl-orange),#cc5500); color:#fff; }
/* ══════════════════════════════════════════════════════════
9. CARDS
══════════════════════════════════════════════════════════ */
.bdsl_card {
background: var(--bdsl-bg-card);
border: 1px solid var(--bdsl-border);
border-radius: var(--bdsl-radius-xl);
overflow: hidden;
transition: border-color var(--bdsl-transition-base), box-shadow var(--bdsl-transition-base), transform var(--bdsl-transition-base);
}
.bdsl_card:hover { border-color: var(--bdsl-border-strong); box-shadow: var(--bdsl-shadow-lg); }
.bdsl_card-body { padding: var(--bdsl-space-6); }
.bdsl_card-header { padding: var(--bdsl-space-4) var(--bdsl-space-6); border-bottom: 1px solid var(--bdsl-border); display:flex; align-items:center; justify-content:space-between; }
.bdsl_card-footer { padding: var(--bdsl-space-4) var(--bdsl-space-6); border-top: 1px solid var(--bdsl-border); }
.bdsl_card-img { width: 100%; height: 200px; object-fit: cover; display:block; }
/* Generic interactive */
.bdsl_card-interactive { cursor:pointer; }
.bdsl_card-interactive:hover { transform:translateY(-4px); box-shadow:var(--bdsl-shadow-xl); border-color:var(--bdsl-border-brand); }
/* Glassmorphism */
.bdsl_card-glass { background:rgba(255,255,255,.04); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-color:rgba(255,255,255,.1); }
/* Role Cards with 3D hover */
.bdsl_role-card {
padding: var(--bdsl-space-8) var(--bdsl-space-6);
border-radius: var(--bdsl-radius-2xl);
border: 1px solid var(--bdsl-border);
position: relative; overflow: hidden;
transform-style: preserve-3d;
transition: transform var(--bdsl-transition-base), box-shadow var(--bdsl-transition-base);
cursor: pointer;
}
.bdsl_role-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity var(--bdsl-transition-base); }
.bdsl_role-card:hover { transform: perspective(800px) rotateY(-5deg) rotateX(3deg) translateY(-8px); }
.bdsl_role-card-green { background:linear-gradient(135deg,rgba(0,212,125,.12),rgba(0,212,125,.04)); }
.bdsl_role-card-green::before { background:radial-gradient(ellipse at 50% 0%,rgba(0,212,125,.2),transparent 70%); }
.bdsl_role-card-green:hover { box-shadow: 0 20px 60px rgba(0,212,125,.25), 0 0 0 1px rgba(0,212,125,.3); }
.bdsl_role-card-blue { background:linear-gradient(135deg,rgba(59,158,255,.12),rgba(59,158,255,.04)); }
.bdsl_role-card-blue:hover { box-shadow: 0 20px 60px rgba(59,158,255,.25), 0 0 0 1px rgba(59,158,255,.3); }
.bdsl_role-card-purple { background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(168,85,247,.04)); }
.bdsl_role-card-purple:hover { box-shadow: 0 20px 60px rgba(168,85,247,.25), 0 0 0 1px rgba(168,85,247,.3); }
.bdsl_role-card-gold { background:linear-gradient(135deg,rgba(240,192,64,.12),rgba(240,192,64,.04)); }
.bdsl_role-card-gold:hover { box-shadow: 0 20px 60px rgba(240,192,64,.25), 0 0 0 1px rgba(240,192,64,.3); }
.bdsl_role-card-orange { background:linear-gradient(135deg,rgba(255,122,48,.12),rgba(255,122,48,.04)); }
.bdsl_role-card-orange:hover { box-shadow: 0 20px 60px rgba(255,122,48,.25), 0 0 0 1px rgba(255,122,48,.3); }
.bdsl_role-card-icon { width:56px; height:56px; border-radius:var(--bdsl-radius-xl); display:flex; align-items:center; justify-content:center; font-size:1.75rem; margin-bottom:var(--bdsl-space-5); }
.bdsl_role-card-title { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-xl); font-weight:var(--bdsl-fw-bold); margin-bottom:var(--bdsl-space-2); }
.bdsl_role-card-desc { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); line-height:var(--bdsl-lh-relaxed); }
/* KPI / Stat card */
.bdsl_stat-card {
padding: var(--bdsl-space-6);
background: var(--bdsl-bg-card);
border: 1px solid var(--bdsl-border);
border-radius: var(--bdsl-radius-xl);
position: relative; overflow: hidden;
transition: all var(--bdsl-transition-base);
}
.bdsl_stat-card:hover { border-color:var(--bdsl-border-strong); transform:translateY(-2px); }
.bdsl_stat-card-accent { position:absolute; top:0; left:0; width:4px; height:100%; border-radius:4px 0 0 4px; }
.bdsl_stat-card-label { font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-semibold); letter-spacing:.1em; text-transform:uppercase; color:var(--bdsl-text-muted); margin-bottom:var(--bdsl-space-2); }
.bdsl_stat-card-value { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-4xl); font-weight:var(--bdsl-fw-extrabold); line-height:1; margin-bottom:var(--bdsl-space-2); }
.bdsl_stat-card-trend { display:inline-flex; align-items:center; gap:var(--bdsl-space-1); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-semibold); }
.bdsl_trend-up { color:var(--bdsl-success); }
.bdsl_trend-down { color:var(--bdsl-danger); }
/* Collapsible card */
.bdsl_collapse-card { border-radius:var(--bdsl-radius-xl); border:1px solid var(--bdsl-border); overflow:hidden; }
.bdsl_collapse-header { display:flex; align-items:center; justify-content:space-between; padding:var(--bdsl-space-4) var(--bdsl-space-6); cursor:pointer; background:var(--bdsl-bg-card); transition:background var(--bdsl-transition-fast); font-weight:var(--bdsl-fw-semibold); user-select:none; }
.bdsl_collapse-header:hover { background:var(--bdsl-bg-hover); }
.bdsl_collapse-chevron { transition:transform var(--bdsl-transition-base); display:inline-block; }
.bdsl_collapse-card.open .bdsl_collapse-chevron { transform:rotate(180deg); }
.bdsl_collapse-body { overflow:hidden; max-height:0; transition:max-height .4s var(--bdsl-ease-out); }
.bdsl_collapse-card.open .bdsl_collapse-body { max-height:9999px; }
.bdsl_collapse-body-inner { padding:var(--bdsl-space-4) var(--bdsl-space-6) var(--bdsl-space-6); background:var(--bdsl-bg-card); border-top:1px solid var(--bdsl-border); }
/* Pricing card */
.bdsl_pricing-card { padding:var(--bdsl-space-8); border-radius:var(--bdsl-radius-2xl); border:1px solid var(--bdsl-border); background:var(--bdsl-bg-card); position:relative; }
.bdsl_pricing-card.featured { border-color:var(--bdsl-brand-400); box-shadow:var(--bdsl-shadow-glow); }
.bdsl_pricing-card-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }
.bdsl_pricing-price { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-5xl); font-weight:var(--bdsl-fw-extrabold); line-height:1; }
.bdsl_pricing-period { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); }
/* ══════════════════════════════════════════════════════════
10. FORMS
══════════════════════════════════════════════════════════ */
.bdsl_form-group { display:flex; flex-direction:column; gap:var(--bdsl-space-2); }
.bdsl_form-label { font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-medium); color:var(--bdsl-text-secondary); }
.bdsl_form-hint { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); }
.bdsl_form-error { font-size:var(--bdsl-text-xs); color:var(--bdsl-danger); }
.bdsl_input, .bdsl_textarea, .bdsl_select {
width:100%; padding: .625rem var(--bdsl-space-4);
background: var(--bdsl-bg-input); color: var(--bdsl-text-primary);
border: 1px solid var(--bdsl-border); border-radius: var(--bdsl-radius-md);
font-size: var(--bdsl-text-sm); font-family: var(--bdsl-font-body);
line-height: var(--bdsl-lh-normal);
transition: border-color var(--bdsl-transition-fast), box-shadow var(--bdsl-transition-fast), background var(--bdsl-transition-fast);
outline: none;
}
.bdsl_input::placeholder, .bdsl_textarea::placeholder { color:var(--bdsl-text-disabled); }
.bdsl_input:hover, .bdsl_textarea:hover, .bdsl_select:hover { border-color:var(--bdsl-border-strong); }
.bdsl_input:focus, .bdsl_textarea:focus, .bdsl_select:focus { border-color:var(--bdsl-brand-400); box-shadow:0 0 0 3px rgba(0,212,125,.15); background:var(--bdsl-bg-card); }
.bdsl_input.error, .bdsl_textarea.error, .bdsl_select.error { border-color:var(--bdsl-danger); }
.bdsl_input.error:focus { box-shadow:0 0 0 3px rgba(255,77,77,.15); }
.bdsl_input-sm { padding:.4rem .75rem; font-size:var(--bdsl-text-xs); }
.bdsl_input-lg { padding:.875rem var(--bdsl-space-5); font-size:var(--bdsl-text-md); }
.bdsl_textarea { resize:vertical; min-height:100px; }
.bdsl_select { cursor:pointer; appearance:none; 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 fill='%237a9ab5' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
/* Input group */
.bdsl_input-group { display:flex; }
.bdsl_input-group .bdsl_input { border-radius:0; border-right:none; flex:1; }
.bdsl_input-group .bdsl_input:first-child { border-radius:var(--bdsl-radius-md) 0 0 var(--bdsl-radius-md); }
.bdsl_input-group .bdsl_input:last-child { border-radius:0 var(--bdsl-radius-md) var(--bdsl-radius-md) 0; border-right:1px solid var(--bdsl-border); }
.bdsl_input-addon { display:flex; align-items:center; padding:0 var(--bdsl-space-4); background:var(--bdsl-bg-surface); border:1px solid var(--bdsl-border); font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); white-space:nowrap; }
.bdsl_input-addon:first-child { border-right:none; border-radius:var(--bdsl-radius-md) 0 0 var(--bdsl-radius-md); }
.bdsl_input-addon:last-child { border-left:none; border-radius:0 var(--bdsl-radius-md) var(--bdsl-radius-md) 0; }
.bdsl_input-prefix { position:relative; }
.bdsl_input-prefix .bdsl_input { padding-left:2.5rem; }
.bdsl_input-prefix-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--bdsl-text-muted); pointer-events:none; width:16px; height:16px; }
/* File drop */
.bdsl_file-drop {
border:2px dashed var(--bdsl-border); border-radius:var(--bdsl-radius-xl);
padding:var(--bdsl-space-12) var(--bdsl-space-8); text-align:center;
transition:all var(--bdsl-transition-base); cursor:pointer; background:transparent;
}
.bdsl_file-drop:hover, .bdsl_file-drop.dragover { border-color:var(--bdsl-brand-400); background:var(--bdsl-bg-active); }
.bdsl_file-drop-icon { font-size:3rem; margin-bottom:var(--bdsl-space-4); display:block; }
.bdsl_file-drop-text { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); }
.bdsl_file-drop-text strong { color:var(--bdsl-text-brand); }
/* Range */
.bdsl_range { -webkit-appearance:none; width:100%; height:6px; background:var(--bdsl-bg-input); border-radius:var(--bdsl-radius-pill); outline:none; }
.bdsl_range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--bdsl-brand-400); cursor:pointer; box-shadow:0 0 8px rgba(0,212,125,.4); transition:transform var(--bdsl-transition-fast); }
.bdsl_range::-webkit-slider-thumb:hover { transform:scale(1.2); }
/* Rating stars */
.bdsl_rating { display:inline-flex; gap:2px; }
.bdsl_rating-star { font-size:1.2rem; color:var(--bdsl-neutral-600); cursor:pointer; transition:color var(--bdsl-transition-fast), transform var(--bdsl-transition-fast); }
.bdsl_rating-star.filled { color:var(--bdsl-gold); }
.bdsl_rating-star:hover { transform:scale(1.2); color:var(--bdsl-gold); }
/* ══════════════════════════════════════════════════════════
11. CONTROLS — Radio, Checkbox, Toggle
══════════════════════════════════════════════════════════ */
.bdsl_radio-wrap, .bdsl_checkbox-wrap { display:inline-flex; align-items:center; gap:var(--bdsl-space-3); cursor:pointer; font-size:var(--bdsl-text-sm); color:var(--bdsl-text-secondary); }
.bdsl_radio-wrap input, .bdsl_checkbox-wrap input { display:none; }
.bdsl_radio-indicator, .bdsl_checkbox-indicator { width:18px; height:18px; flex-shrink:0; border:2px solid var(--bdsl-border-strong); background:var(--bdsl-bg-input); transition:all var(--bdsl-transition-fast); position:relative; }
.bdsl_radio-indicator { border-radius:50%; }
.bdsl_checkbox-indicator { border-radius:var(--bdsl-radius-sm); }
.bdsl_radio-wrap:hover .bdsl_radio-indicator,
.bdsl_checkbox-wrap:hover .bdsl_checkbox-indicator { border-color:var(--bdsl-brand-400); }
.bdsl_radio-wrap input:checked ~ .bdsl_radio-indicator { border-color:var(--bdsl-brand-400); background:var(--bdsl-brand-400); box-shadow:0 0 8px rgba(0,212,125,.4); }
.bdsl_radio-wrap input:checked ~ .bdsl_radio-indicator::after { content:''; position:absolute; inset:3px; background:#000; border-radius:50%; }
.bdsl_checkbox-wrap input:checked ~ .bdsl_checkbox-indicator { border-color:var(--bdsl-brand-400); background:var(--bdsl-brand-400); }
.bdsl_checkbox-wrap input:checked ~ .bdsl_checkbox-indicator::after { content:''; position:absolute; left:4px; top:1px; width:7px; height:11px; border:2px solid #000; border-left:none; border-top:none; transform:rotate(45deg); }
/* Radio card */
.bdsl_radio-card { display:flex; align-items:flex-start; gap:var(--bdsl-space-4); padding:var(--bdsl-space-4); border:1.5px solid var(--bdsl-border); border-radius:var(--bdsl-radius-lg); cursor:pointer; transition:all var(--bdsl-transition-fast); }
.bdsl_radio-card:hover { border-color:var(--bdsl-border-strong); background:var(--bdsl-bg-hover); }
.bdsl_radio-card.selected { border-color:var(--bdsl-brand-400); background:var(--bdsl-bg-active); box-shadow:0 0 0 1px var(--bdsl-brand-400); }
/* Toggle */
.bdsl_toggle-wrap { display:inline-flex; align-items:center; gap:var(--bdsl-space-3); cursor:pointer; }
.bdsl_toggle-wrap input { display:none; }
.bdsl_toggle { position:relative; display:inline-block; }
.bdsl_toggle-track { display:block; background:var(--bdsl-neutral-600); border-radius:var(--bdsl-radius-pill); transition:background var(--bdsl-transition-fast), box-shadow var(--bdsl-transition-fast); }
.bdsl_toggle-thumb { position:absolute; top:50%; background:#fff; border-radius:50%; transform:translateY(-50%); transition:transform var(--bdsl-transition-spring), background var(--bdsl-transition-fast); box-shadow:var(--bdsl-shadow-sm); }
/* sm */
.bdsl_toggle-sm .bdsl_toggle-track { width:32px; height:18px; }
.bdsl_toggle-sm .bdsl_toggle-thumb { width:14px; height:14px; left:2px; }
/* md (default) */
.bdsl_toggle-md .bdsl_toggle-track { width:44px; height:24px; }
.bdsl_toggle-md .bdsl_toggle-thumb { width:18px; height:18px; left:3px; }
/* lg */
.bdsl_toggle-lg .bdsl_toggle-track { width:56px; height:30px; }
.bdsl_toggle-lg .bdsl_toggle-thumb { width:24px; height:24px; left:3px; }
.bdsl_toggle-wrap input:checked ~ .bdsl_toggle .bdsl_toggle-track { background:var(--bdsl-brand-400); box-shadow:0 0 10px rgba(0,212,125,.4); }
.bdsl_toggle-wrap input:checked ~ .bdsl_toggle.bdsl_toggle-sm .bdsl_toggle-thumb { transform:translateY(-50%) translateX(14px); }
.bdsl_toggle-wrap input:checked ~ .bdsl_toggle.bdsl_toggle-md .bdsl_toggle-thumb { transform:translateY(-50%) translateX(20px); }
.bdsl_toggle-wrap input:checked ~ .bdsl_toggle.bdsl_toggle-lg .bdsl_toggle-thumb { transform:translateY(-50%) translateX(26px); }
/* Danger/Info/Warning toggle colors */
.bdsl_toggle-wrap.toggle-danger input:checked ~ .bdsl_toggle .bdsl_toggle-track { background:var(--bdsl-danger); box-shadow:0 0 10px rgba(255,77,77,.4); }
.bdsl_toggle-wrap.toggle-info input:checked ~ .bdsl_toggle .bdsl_toggle-track { background:var(--bdsl-info); box-shadow:0 0 10px rgba(59,158,255,.4); }
.bdsl_toggle-wrap.toggle-warning input:checked ~ .bdsl_toggle .bdsl_toggle-track { background:var(--bdsl-warning); }
/* Dropdown */
.bdsl_dropdown { position:relative; display:inline-block; }
.bdsl_dropdown-menu { position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:var(--bdsl-bg-surface); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-lg); box-shadow:var(--bdsl-shadow-xl); z-index:var(--bdsl-z-dropdown); overflow:hidden; opacity:0; transform:translateY(-8px) scale(.97); transition:all var(--bdsl-transition-fast); pointer-events:none; }
.bdsl_dropdown.open .bdsl_dropdown-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.bdsl_dropdown-item { display:flex; align-items:center; gap:var(--bdsl-space-3); padding:var(--bdsl-space-2) var(--bdsl-space-4); font-size:var(--bdsl-text-sm); color:var(--bdsl-text-secondary); cursor:pointer; transition:all var(--bdsl-transition-fast); }
.bdsl_dropdown-item:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); }
.bdsl_dropdown-item.danger { color:var(--bdsl-danger); }
.bdsl_dropdown-item.danger:hover { background:rgba(255,77,77,.08); }
.bdsl_dropdown-divider { height:1px; background:var(--bdsl-border); margin:var(--bdsl-space-2) 0; }
.bdsl_dropdown-header { padding:var(--bdsl-space-2) var(--bdsl-space-4); font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-semibold); letter-spacing:.1em; text-transform:uppercase; color:var(--bdsl-text-muted); }
/* Listbox */
.bdsl_listbox { background:var(--bdsl-bg-card); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-lg); overflow:hidden; }
.bdsl_listbox-item { display:flex; align-items:center; justify-content:space-between; padding:var(--bdsl-space-3) var(--bdsl-space-4); font-size:var(--bdsl-text-sm); cursor:pointer; transition:background var(--bdsl-transition-fast); }
.bdsl_listbox-item:hover { background:var(--bdsl-bg-hover); }
.bdsl_listbox-item.selected { background:var(--bdsl-bg-active); color:var(--bdsl-text-brand); }
.bdsl_listbox-item + .bdsl_listbox-item { border-top:1px solid var(--bdsl-border); }
/* ══════════════════════════════════════════════════════════
12. FEEDBACK — Alert
══════════════════════════════════════════════════════════ */
.bdsl_alert { display:flex; align-items:flex-start; gap:var(--bdsl-space-3); padding:var(--bdsl-space-4) var(--bdsl-space-5); border-radius:var(--bdsl-radius-lg); border:1px solid; font-size:var(--bdsl-text-sm); line-height:var(--bdsl-lh-relaxed); }
.bdsl_alert-icon { flex-shrink:0; font-size:1.1rem; margin-top:1px; }
.bdsl_alert-content { flex:1; }
.bdsl_alert-title { font-weight:var(--bdsl-fw-semibold); margin-bottom:var(--bdsl-space-1); }
.bdsl_alert-close { margin-left:auto; background:none; border:none; cursor:pointer; opacity:.6; transition:opacity var(--bdsl-transition-fast); color:inherit; font-size:1rem; flex-shrink:0; padding:0; }
.bdsl_alert-close:hover { opacity:1; }
.bdsl_alert-success { background:rgba(0,212,125,.1); border-color:rgba(0,212,125,.3); color:var(--bdsl-success); }
.bdsl_alert-danger { background:rgba(255,77,77,.1); border-color:rgba(255,77,77,.3); color:#ff8080; }
.bdsl_alert-warning { background:rgba(255,193,7,.1); border-color:rgba(255,193,7,.3); color:#ffd54f; }
.bdsl_alert-info { background:rgba(59,158,255,.1); border-color:rgba(59,158,255,.3); color:#7fc0ff; }
.bdsl_alert-neutral { background:var(--bdsl-bg-card); border-color:var(--bdsl-border); color:var(--bdsl-text-secondary); }
/* ══════════════════════════════════════════════════════════
13. MODAL
══════════════════════════════════════════════════════════ */
.bdsl_modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px); z-index:var(--bdsl-z-overlay); display:flex; align-items:center; justify-content:center; padding:var(--bdsl-space-4); opacity:0; transition:opacity var(--bdsl-transition-base); pointer-events:none; }
.bdsl_modal-backdrop.open { opacity:1; pointer-events:auto; }
.bdsl_modal { background:var(--bdsl-bg-card); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-2xl); box-shadow:var(--bdsl-shadow-xl); width:100%; max-height:90vh; overflow-y:auto; transform:translateY(24px) scale(.97); transition:transform var(--bdsl-transition-spring), opacity var(--bdsl-transition-base); opacity:0; }
.bdsl_modal-backdrop.open .bdsl_modal { transform:none; opacity:1; }
.bdsl_modal-sm { max-width:400px; }
.bdsl_modal-md { max-width:560px; }
.bdsl_modal-lg { max-width:720px; }
.bdsl_modal-xl { max-width:960px; }
.bdsl_modal-hero { max-width:100%; height:100vh; border-radius:0; margin:0; }
.bdsl_modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--bdsl-space-5) var(--bdsl-space-6); border-bottom:1px solid var(--bdsl-border); }
.bdsl_modal-title { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-xl); font-weight:var(--bdsl-fw-bold); }
.bdsl_modal-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--bdsl-radius-md); background:none; border:none; color:var(--bdsl-text-muted); cursor:pointer; transition:all var(--bdsl-transition-fast); font-size:1.25rem; }
.bdsl_modal-close:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); }
.bdsl_modal-body { padding:var(--bdsl-space-6); }
.bdsl_modal-footer { padding:var(--bdsl-space-4) var(--bdsl-space-6); border-top:1px solid var(--bdsl-border); display:flex; align-items:center; justify-content:flex-end; gap:var(--bdsl-space-3); }
/* Offcanvas */
.bdsl_offcanvas { position:fixed; top:0; right:0; bottom:0; width:360px; background:var(--bdsl-bg-surface); border-left:1px solid var(--bdsl-border); z-index:var(--bdsl-z-modal); box-shadow:var(--bdsl-shadow-xl); transform:translateX(100%); transition:transform var(--bdsl-transition-base); display:flex; flex-direction:column; }
.bdsl_offcanvas.open { transform:none; }
.bdsl_offcanvas-header { display:flex; align-items:center; justify-content:space-between; padding:var(--bdsl-space-5) var(--bdsl-space-6); border-bottom:1px solid var(--bdsl-border); flex-shrink:0; }
.bdsl_offcanvas-body { flex:1; overflow-y:auto; padding:var(--bdsl-space-6); }
@media (max-width:480px) { .bdsl_offcanvas { width:100%; } }
/* ══════════════════════════════════════════════════════════
14. TOAST
══════════════════════════════════════════════════════════ */
.bdsl_toast-container { position:fixed; z-index:var(--bdsl-z-toast); display:flex; flex-direction:column; gap:var(--bdsl-space-3); pointer-events:none; }
.bdsl_toast-top-right { top:var(--bdsl-space-5); right:var(--bdsl-space-5); align-items:flex-end; }
.bdsl_toast-top-left { top:var(--bdsl-space-5); left:var(--bdsl-space-5); align-items:flex-start; }
.bdsl_toast-top-center { top:var(--bdsl-space-5); left:50%; transform:translateX(-50%); align-items:center; }
.bdsl_toast-bottom-right { bottom:var(--bdsl-space-5); right:var(--bdsl-space-5); align-items:flex-end; }
.bdsl_toast-bottom-left { bottom:var(--bdsl-space-5); left:var(--bdsl-space-5); align-items:flex-start; }
.bdsl_toast { display:flex; align-items:center; gap:var(--bdsl-space-3); padding:var(--bdsl-space-3) var(--bdsl-space-5); background:var(--bdsl-bg-surface); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-lg); box-shadow:var(--bdsl-shadow-xl); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-medium); pointer-events:auto; max-width:360px; animation:bdsl_toast-in .35s var(--bdsl-ease-spring) forwards; }
.bdsl_toast-success { border-color:rgba(0,212,125,.3); }
.bdsl_toast-danger { border-color:rgba(255,77,77,.3); }
.bdsl_toast-warning { border-color:rgba(255,193,7,.3); }
.bdsl_toast-info { border-color:rgba(59,158,255,.3); }
.bdsl_toast-icon { font-size:1.1rem; flex-shrink:0; }
.bdsl_toast-dismiss { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--bdsl-text-muted); font-size:1rem; transition:color var(--bdsl-transition-fast); padding:0; }
.bdsl_toast-dismiss:hover { color:var(--bdsl-text-primary); }
@keyframes bdsl_toast-in { from { opacity:0; transform:translateX(20px) scale(.95); } to { opacity:1; transform:none; } }
/* ══════════════════════════════════════════════════════════
15. TABLES
══════════════════════════════════════════════════════════ */
.bdsl_table-wrap { overflow-x:auto; border-radius:var(--bdsl-radius-xl); border:1px solid var(--bdsl-border); }
.bdsl_table { width:100%; border-collapse:collapse; font-size:var(--bdsl-text-sm); }
.bdsl_table th { padding:var(--bdsl-space-3) var(--bdsl-space-4); text-align:left; font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--bdsl-text-muted); background:var(--bdsl-bg-surface); border-bottom:1px solid var(--bdsl-border); white-space:nowrap; }
.bdsl_table td { padding:var(--bdsl-space-3) var(--bdsl-space-4); border-bottom:1px solid var(--bdsl-border); color:var(--bdsl-text-secondary); transition:background var(--bdsl-transition-fast); }
.bdsl_table tr:last-child td { border-bottom:none; }
.bdsl_table-hover tr:hover td { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); }
.bdsl_table-striped tr:nth-child(even) td { background:rgba(255,255,255,.025); }
.bdsl_table-sm th, .bdsl_table-sm td { padding:var(--bdsl-space-2) var(--bdsl-space-3); }
.bdsl_table th.sortable { cursor:pointer; user-select:none; }
.bdsl_table th.sortable:hover { color:var(--bdsl-text-primary); }
.bdsl_table th.sort-asc::after { content:' ↑'; color:var(--bdsl-brand-400); }
.bdsl_table th.sort-desc::after { content:' ↓'; color:var(--bdsl-brand-400); }
/* ══════════════════════════════════════════════════════════
16. TABS & PILLS
══════════════════════════════════════════════════════════ */
.bdsl_tabs { display:flex; border-bottom:2px solid var(--bdsl-border); gap:0; }
.bdsl_tab { padding:var(--bdsl-space-3) var(--bdsl-space-5); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-medium); color:var(--bdsl-text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--bdsl-transition-fast); white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }
.bdsl_tab:hover { color:var(--bdsl-text-primary); }
.bdsl_tab.active { color:var(--bdsl-text-brand); border-bottom-color:var(--bdsl-brand-400); }
.bdsl_tab-content { display:none; }
.bdsl_tab-content.active { display:block; }
.bdsl_pills { display:flex; gap:var(--bdsl-space-2); flex-wrap:wrap; }
.bdsl_pill { padding:var(--bdsl-space-2) var(--bdsl-space-4); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-medium); border-radius:var(--bdsl-radius-pill); background:var(--bdsl-bg-input); color:var(--bdsl-text-muted); cursor:pointer; transition:all var(--bdsl-transition-fast); border:none; font-family:inherit; }
.bdsl_pill:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); }
.bdsl_pill.active { background:var(--bdsl-brand-400); color:#000; font-weight:var(--bdsl-fw-semibold); }
/* ══════════════════════════════════════════════════════════
17. ACCORDION
══════════════════════════════════════════════════════════ */
.bdsl_accordion { border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-xl); overflow:hidden; }
.bdsl_accordion-item { border-bottom:1px solid var(--bdsl-border); }
.bdsl_accordion-item:last-child { border-bottom:none; }
.bdsl_accordion-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:var(--bdsl-space-4) var(--bdsl-space-5); background:var(--bdsl-bg-card); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-semibold); color:var(--bdsl-text-primary); cursor:pointer; border:none; text-align:left; font-family:inherit; transition:background var(--bdsl-transition-fast); }
.bdsl_accordion-trigger:hover { background:var(--bdsl-bg-hover); }
.bdsl_accordion-icon { transition:transform var(--bdsl-transition-base); color:var(--bdsl-text-muted); }
.bdsl_accordion-item.open .bdsl_accordion-icon { transform:rotate(180deg); }
.bdsl_accordion-panel { overflow:hidden; max-height:0; transition:max-height .35s var(--bdsl-ease-out); }
.bdsl_accordion-item.open .bdsl_accordion-panel { max-height:500px; }
.bdsl_accordion-panel-inner { padding:var(--bdsl-space-4) var(--bdsl-space-5) var(--bdsl-space-5); font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); line-height:var(--bdsl-lh-relaxed); background:var(--bdsl-bg-card); border-top:1px solid var(--bdsl-border); }
/* ══════════════════════════════════════════════════════════
18. PROGRESS
══════════════════════════════════════════════════════════ */
.bdsl_progress-wrap { display:flex; flex-direction:column; gap:var(--bdsl-space-2); }
.bdsl_progress-label { display:flex; justify-content:space-between; font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); }
.bdsl_progress { width:100%; background:var(--bdsl-bg-input); border-radius:var(--bdsl-radius-pill); overflow:hidden; }
.bdsl_progress-xs { height:4px; }
.bdsl_progress-sm { height:6px; }
.bdsl_progress-md { height:8px; }
.bdsl_progress-lg { height:12px; }
.bdsl_progress-xl { height:16px; }
.bdsl_progress-2xl { height:24px; }
.bdsl_progress-bar { height:100%; border-radius:var(--bdsl-radius-pill); background:linear-gradient(90deg,var(--bdsl-brand-500),var(--bdsl-brand-400)); transition:width .6s var(--bdsl-ease-out); position:relative; }
.bdsl_progress-bar.success { background:var(--bdsl-success); }
.bdsl_progress-bar.danger { background:var(--bdsl-danger); }
.bdsl_progress-bar.warning { background:var(--bdsl-warning); }
.bdsl_progress-bar.info { background:var(--bdsl-info); }
.bdsl_progress-bar.striped { background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.15) 4px,transparent 4px,transparent 8px); background-size:28px 100%; }
.bdsl_progress-bar.animated.striped { animation:bdsl_stripes 1s linear infinite; }
@keyframes bdsl_stripes { to { background-position:28px 0; } }
/* Circular progress */
.bdsl_circular-progress { display:inline-flex; align-items:center; justify-content:center; position:relative; }
.bdsl_circular-progress svg { transform:rotate(-90deg); }
.bdsl_circular-track { fill:none; stroke:var(--bdsl-bg-input); }
.bdsl_circular-bar { fill:none; stroke:var(--bdsl-brand-400); stroke-linecap:round; transition:stroke-dashoffset .6s var(--bdsl-ease-out); }
.bdsl_circular-label { position:absolute; font-family:var(--bdsl-font-display); font-weight:var(--bdsl-fw-bold); text-align:center; }
/* Spinners */
.bdsl_spinner { display:inline-block; border-radius:50%; animation:bdsl_spin .7s linear infinite; flex-shrink:0; }
.bdsl_spinner-ring { border:3px solid var(--bdsl-bg-input); border-top-color:var(--bdsl-brand-400); }
.bdsl_spinner-dots { border:none; position:relative; width:32px; height:32px; animation:none; }
.bdsl_spinner-dots::before,.bdsl_spinner-dots::after { content:''; position:absolute; width:8px; height:8px; background:var(--bdsl-brand-400); border-radius:50%; top:50%; margin-top:-4px; animation:bdsl_dots 1.4s ease-in-out infinite; }
.bdsl_spinner-dots::before { left:2px; animation-delay:0s; }
.bdsl_spinner-dots::after { right:2px; animation-delay:.7s; }
.bdsl_spinner-pulse { background:var(--bdsl-brand-400); border:none; animation:bdsl_pulse-scale 1s ease-in-out infinite; }
.bdsl_spinner-sm { width:18px; height:18px; }
.bdsl_spinner-md { width:28px; height:28px; }
.bdsl_spinner-lg { width:40px; height:40px; border-width:4px; }
@keyframes bdsl_spin { to { transform:rotate(360deg); } }
@keyframes bdsl_dots { 0%,80%,100% { transform:scale(0); } 40% { transform:scale(1); } }
@keyframes bdsl_pulse-scale { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.6); opacity:.5; } }
/* Skeleton */
.bdsl_skeleton { background:var(--bdsl-bg-input); border-radius:var(--bdsl-radius-md); position:relative; overflow:hidden; }
.bdsl_skeleton::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%); transform:translateX(-100%); animation:bdsl_shimmer 1.8s ease-in-out infinite; }
.bdsl_skeleton-text { height:12px; margin-bottom:var(--bdsl-space-2); border-radius:var(--bdsl-radius-pill); }
.bdsl_skeleton-title { height:20px; width:60%; margin-bottom:var(--bdsl-space-3); }
.bdsl_skeleton-avatar { border-radius:var(--bdsl-radius-circle); }
.bdsl_skeleton-img { width:100%; }
@keyframes bdsl_shimmer { to { transform:translateX(100%); } }
/* ══════════════════════════════════════════════════════════
19. AVATARS
══════════════════════════════════════════════════════════ */
.bdsl_avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--bdsl-radius-circle); overflow:hidden; flex-shrink:0; font-family:var(--bdsl-font-display); font-weight:var(--bdsl-fw-bold); position:relative; background:var(--bdsl-bg-input); color:var(--bdsl-text-primary); }
.bdsl_avatar img { width:100%; height:100%; object-fit:cover; }
.bdsl_avatar-xs { width:24px; height:24px; font-size:.6rem; }
.bdsl_avatar-sm { width:32px; height:32px; font-size:.75rem; }
.bdsl_avatar-md { width:40px; height:40px; font-size:.875rem; }
.bdsl_avatar-lg { width:56px; height:56px; font-size:1.1rem; }
.bdsl_avatar-xl { width:72px; height:72px; font-size:1.5rem; }
.bdsl_avatar-2xl { width:96px; height:96px; font-size:2rem; }
.bdsl_avatar-green { background:linear-gradient(135deg,var(--bdsl-brand-500),var(--bdsl-brand-400)); color:#000; }
.bdsl_avatar-blue { background:linear-gradient(135deg,var(--bdsl-info-dark),var(--bdsl-info)); color:#fff; }
.bdsl_avatar-purple { background:linear-gradient(135deg,var(--bdsl-purple-dark),var(--bdsl-purple)); color:#fff; }
.bdsl_avatar-gold { background:linear-gradient(135deg,#a07700,var(--bdsl-gold)); color:#000; }
.bdsl_avatar-status { position:relative; }
.bdsl_avatar-status::after { content:''; position:absolute; bottom:2px; right:2px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bdsl-bg-app); }
.bdsl_avatar-online::after { background:var(--bdsl-success); box-shadow:0 0 6px var(--bdsl-success); }
.bdsl_avatar-offline::after { background:var(--bdsl-neutral-500); }
.bdsl_avatar-busy::after { background:var(--bdsl-danger); }
.bdsl_avatar-away::after { background:var(--bdsl-warning); }
/* Avatar group */
.bdsl_avatar-group { display:flex; }
.bdsl_avatar-group .bdsl_avatar { border:2px solid var(--bdsl-bg-app); margin-left:-10px; }
.bdsl_avatar-group .bdsl_avatar:first-child { margin-left:0; }
/* ══════════════════════════════════════════════════════════
20. TIMELINE
══════════════════════════════════════════════════════════ */
.bdsl_timeline { display:flex; flex-direction:column; gap:0; }
.bdsl_timeline-item { display:flex; gap:var(--bdsl-space-4); position:relative; padding-bottom:var(--bdsl-space-6); }
.bdsl_timeline-item:last-child { padding-bottom:0; }
.bdsl_timeline-line { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.bdsl_timeline-dot { width:12px; height:12px; border-radius:50%; background:var(--bdsl-brand-400); flex-shrink:0; box-shadow:0 0 8px rgba(0,212,125,.5); z-index:1; }
.bdsl_timeline-connector { flex:1; width:2px; background:var(--bdsl-border); margin-top:4px; }
.bdsl_timeline-item:last-child .bdsl_timeline-connector { display:none; }
.bdsl_timeline-body { flex:1; padding-top:0; }
.bdsl_timeline-title { font-weight:var(--bdsl-fw-semibold); font-size:var(--bdsl-text-sm); margin-bottom:var(--bdsl-space-1); }
.bdsl_timeline-text { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); }
.bdsl_timeline-time { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); white-space:nowrap; }
/* ══════════════════════════════════════════════════════════
21. STEPPER
══════════════════════════════════════════════════════════ */
.bdsl_stepper { display:flex; align-items:flex-start; gap:0; }
.bdsl_step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.bdsl_step-indicator { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-bold); border:2px solid var(--bdsl-border); background:var(--bdsl-bg-card); color:var(--bdsl-text-muted); transition:all var(--bdsl-transition-base); z-index:1; }
.bdsl_step.active .bdsl_step-indicator { border-color:var(--bdsl-brand-400); background:var(--bdsl-brand-400); color:#000; box-shadow:var(--bdsl-shadow-glow); }
.bdsl_step.done .bdsl_step-indicator { border-color:var(--bdsl-brand-400); background:var(--bdsl-brand-400); color:#000; }
.bdsl_step-label { font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-medium); color:var(--bdsl-text-muted); margin-top:var(--bdsl-space-2); text-align:center; }
.bdsl_step.active .bdsl_step-label { color:var(--bdsl-text-primary); }
.bdsl_step-connector { position:absolute; top:20px; left:calc(50% + 20px); right:calc(-50% + 20px); height:2px; background:var(--bdsl-border); }
.bdsl_step.done .bdsl_step-connector { background:var(--bdsl-brand-400); }
@media (max-width:480px) { .bdsl_stepper { flex-direction:column; gap:var(--bdsl-space-3); } .bdsl_step { flex-direction:row; align-items:center; gap:var(--bdsl-space-3); } .bdsl_step-connector { display:none; } }
/* ══════════════════════════════════════════════════════════
22. BREADCRUMB
══════════════════════════════════════════════════════════ */
.bdsl_breadcrumb { display:flex; align-items:center; gap:var(--bdsl-space-2); flex-wrap:wrap; }
.bdsl_breadcrumb-item { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); }
.bdsl_breadcrumb-item a { color:var(--bdsl-text-muted); text-decoration:none; transition:color var(--bdsl-transition-fast); }
.bdsl_breadcrumb-item a:hover { color:var(--bdsl-text-primary); }
.bdsl_breadcrumb-item.active { color:var(--bdsl-text-secondary); }
.bdsl_breadcrumb-sep { color:var(--bdsl-neutral-600); font-size:.75rem; }
/* ══════════════════════════════════════════════════════════
23. PAGINATION
══════════════════════════════════════════════════════════ */
.bdsl_pagination { display:flex; align-items:center; gap:var(--bdsl-space-1); flex-wrap:wrap; }
.bdsl_page-item { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--bdsl-radius-md); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-medium); cursor:pointer; transition:all var(--bdsl-transition-fast); color:var(--bdsl-text-muted); border:1px solid transparent; background:none; font-family:inherit; }
.bdsl_page-item:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); border-color:var(--bdsl-border); }
.bdsl_page-item.active { background:var(--bdsl-brand-400); color:#000; font-weight:var(--bdsl-fw-bold); }
.bdsl_page-item:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
/* ══════════════════════════════════════════════════════════
24. DIVIDERS
══════════════════════════════════════════════════════════ */
.bdsl_divider { display:flex; align-items:center; gap:var(--bdsl-space-4); color:var(--bdsl-text-muted); font-size:var(--bdsl-text-sm); margin:var(--bdsl-space-4) 0; }
.bdsl_divider::before, .bdsl_divider::after { content:''; flex:1; height:1px; background:var(--bdsl-border); }
.bdsl_divider-vertical { width:1px; height:100%; background:var(--bdsl-border); margin-inline:var(--bdsl-space-4); }
/* ══════════════════════════════════════════════════════════
25. TOOLTIP
══════════════════════════════════════════════════════════ */
.bdsl_tooltip-wrap { position:relative; display:inline-flex; }
.bdsl_tooltip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bdsl-neutral-800); color:var(--bdsl-text-primary); font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-medium); padding:var(--bdsl-space-2) var(--bdsl-space-3); border-radius:var(--bdsl-radius-md); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity var(--bdsl-transition-fast), transform var(--bdsl-transition-fast); z-index:var(--bdsl-z-tooltip); border:1px solid var(--bdsl-border); }
.bdsl_tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--bdsl-neutral-800); }
.bdsl_tooltip-wrap:hover .bdsl_tooltip { opacity:1; transform:translateX(-50%) translateY(-2px); }
.bdsl_tooltip-right { bottom:auto; left:calc(100% + 8px); top:50%; transform:translateY(-50%); }
.bdsl_tooltip-right::after { top:50%; left:auto; right:100%; transform:translateY(-50%); border-top-color:transparent; border-right-color:var(--bdsl-neutral-800); }
/* ══════════════════════════════════════════════════════════
26. EMPTY STATE
══════════════════════════════════════════════════════════ */
.bdsl_empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--bdsl-space-20) var(--bdsl-space-8); gap:var(--bdsl-space-4); }
.bdsl_empty-icon { font-size:4rem; opacity:.3; }
.bdsl_empty-title { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-xl); font-weight:var(--bdsl-fw-bold); }
.bdsl_empty-text { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); max-width:320px; line-height:var(--bdsl-lh-relaxed); }
/* ══════════════════════════════════════════════════════════
27. VIDEO PLAYER
══════════════════════════════════════════════════════════ */
.bdsl_video-wrap { position:relative; border-radius:var(--bdsl-radius-xl); overflow:hidden; background:#000; aspect-ratio:16/9; }
.bdsl_video-wrap video { width:100%; height:100%; object-fit:cover; }
.bdsl_video-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); transition:opacity var(--bdsl-transition-base); cursor:pointer; }
.bdsl_video-overlay:hover { background:rgba(0,0,0,.3); }
.bdsl_video-play-btn { width:64px; height:64px; border-radius:50%; background:rgba(0,212,125,.9); display:flex; align-items:center; justify-content:center; transition:transform var(--bdsl-transition-spring), box-shadow var(--bdsl-transition-base); }
.bdsl_video-play-btn:hover { transform:scale(1.1); box-shadow:var(--bdsl-shadow-glow-lg); }
.bdsl_video-play-btn svg { margin-left:3px; }
.bdsl_video-controls { position:absolute; bottom:0; left:0; right:0; padding:var(--bdsl-space-4); background:linear-gradient(transparent,rgba(0,0,0,.85)); display:flex; align-items:center; gap:var(--bdsl-space-3); opacity:0; transition:opacity var(--bdsl-transition-base); }
.bdsl_video-wrap:hover .bdsl_video-controls { opacity:1; }
.bdsl_video-progress { flex:1; height:4px; background:rgba(255,255,255,.2); border-radius:var(--bdsl-radius-pill); cursor:pointer; }
.bdsl_video-progress-bar { height:100%; background:var(--bdsl-brand-400); border-radius:var(--bdsl-radius-pill); }
.bdsl_video-time { font-size:var(--bdsl-text-xs); color:rgba(255,255,255,.8); font-family:var(--bdsl-font-mono); }
/* ══════════════════════════════════════════════════════════
28. CAROUSEL
══════════════════════════════════════════════════════════ */
.bdsl_carousel { position:relative; overflow:hidden; border-radius:var(--bdsl-radius-xl); }
.bdsl_carousel-track { display:flex; transition:transform .5s var(--bdsl-ease-out); }
.bdsl_carousel-slide { min-width:100%; }
.bdsl_carousel-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:var(--bdsl-z-raised); display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.15); color:#fff; cursor:pointer; transition:all var(--bdsl-transition-fast); backdrop-filter:blur(8px); font-size:1.1rem; }
.bdsl_carousel-nav:hover { background:var(--bdsl-brand-400); color:#000; }
.bdsl_carousel-prev { left:var(--bdsl-space-4); }
.bdsl_carousel-next { right:var(--bdsl-space-4); }
.bdsl_carousel-dots { position:absolute; bottom:var(--bdsl-space-4); left:50%; transform:translateX(-50%); display:flex; gap:var(--bdsl-space-2); }
.bdsl_carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all var(--bdsl-transition-fast); border:none; }
.bdsl_carousel-dot.active { background:var(--bdsl-brand-400); width:24px; border-radius:var(--bdsl-radius-pill); }
/* Info/Feature carousel */
.bdsl_info-carousel { overflow:hidden; }
.bdsl_info-carousel-inner { display:flex; gap:var(--bdsl-space-6); transition:transform .5s var(--bdsl-ease-out); }
.bdsl_info-carousel-item { min-width:calc(33.333% - var(--bdsl-space-4)); }
@media (max-width:768px) { .bdsl_info-carousel-item { min-width:calc(100% - var(--bdsl-space-4)); } }
/* ══════════════════════════════════════════════════════════
29. OVERLAY INJECTIONS (HTML/GIF)
══════════════════════════════════════════════════════════ */
.bdsl_overlay-injection { position:fixed; inset:0; z-index:var(--bdsl-z-overlay); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.bdsl_overlay-injection.active { pointer-events:auto; }
.bdsl_overlay-bg { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); opacity:0; transition:opacity var(--bdsl-transition-base); }
.bdsl_overlay-injection.active .bdsl_overlay-bg { opacity:1; }
.bdsl_overlay-content { position:relative; z-index:1; transform:scale(.9) translateY(20px); opacity:0; transition:transform var(--bdsl-transition-spring), opacity var(--bdsl-transition-base); max-width:90vw; max-height:90vh; }
.bdsl_overlay-injection.active .bdsl_overlay-content { transform:none; opacity:1; }
/* GIF overlay variant */
.bdsl_overlay-gif .bdsl_overlay-content { border-radius:var(--bdsl-radius-2xl); overflow:hidden; box-shadow:var(--bdsl-shadow-xl); }
.bdsl_overlay-gif img { max-width:100%; max-height:80vh; display:block; }
/* Confetti-like animation trigger */
.bdsl_overlay-inject-animation { animation:bdsl_inject-pop .5s var(--bdsl-ease-spring) forwards; }
@keyframes bdsl_inject-pop { from { transform:scale(0) rotate(-10deg); opacity:0; } to { transform:scale(1) rotate(0deg); opacity:1; } }
/* ══════════════════════════════════════════════════════════
30. COMMENT FEED
══════════════════════════════════════════════════════════ */
.bdsl_feed { display:flex; flex-direction:column; gap:var(--bdsl-space-4); }
.bdsl_comment { display:flex; gap:var(--bdsl-space-3); }
.bdsl_comment-content { flex:1; background:var(--bdsl-bg-card); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-lg); padding:var(--bdsl-space-4); }
.bdsl_comment-meta { display:flex; align-items:center; gap:var(--bdsl-space-2); margin-bottom:var(--bdsl-space-2); flex-wrap:wrap; }
.bdsl_comment-author { font-weight:var(--bdsl-fw-semibold); font-size:var(--bdsl-text-sm); }
.bdsl_comment-time { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); }
.bdsl_comment-text { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-secondary); line-height:var(--bdsl-lh-relaxed); }
.bdsl_comment-actions { display:flex; gap:var(--bdsl-space-4); margin-top:var(--bdsl-space-3); }
.bdsl_comment-action { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); cursor:pointer; display:flex; align-items:center; gap:var(--bdsl-space-1); transition:color var(--bdsl-transition-fast); background:none; border:none; font-family:inherit; }
.bdsl_comment-action:hover { color:var(--bdsl-text-primary); }
.bdsl_comment-reply { margin-left:calc(40px + var(--bdsl-space-3)); }
/* ══════════════════════════════════════════════════════════
31. CHAT INTERFACE
══════════════════════════════════════════════════════════ */
.bdsl_chat { display:flex; flex-direction:column; height:100%; background:var(--bdsl-bg-surface); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-xl); overflow:hidden; }
.bdsl_chat-header { display:flex; align-items:center; gap:var(--bdsl-space-3); padding:var(--bdsl-space-4) var(--bdsl-space-5); border-bottom:1px solid var(--bdsl-border); flex-shrink:0; }
.bdsl_chat-messages { flex:1; overflow-y:auto; padding:var(--bdsl-space-4); display:flex; flex-direction:column; gap:var(--bdsl-space-3); scrollbar-width:thin; scrollbar-color:var(--bdsl-neutral-700) transparent; }
.bdsl_chat-messages::-webkit-scrollbar { width:4px; }
.bdsl_chat-messages::-webkit-scrollbar-track { background:transparent; }
.bdsl_chat-messages::-webkit-scrollbar-thumb { background:var(--bdsl-neutral-700); border-radius:2px; }
.bdsl_chat-msg { display:flex; gap:var(--bdsl-space-3); max-width:80%; }
.bdsl_chat-msg-in { align-self:flex-start; }
.bdsl_chat-msg-out { align-self:flex-end; flex-direction:row-reverse; }
.bdsl_chat-bubble { padding:var(--bdsl-space-3) var(--bdsl-space-4); border-radius:var(--bdsl-radius-lg); font-size:var(--bdsl-text-sm); line-height:var(--bdsl-lh-relaxed); max-width:100%; word-break:break-word; }
.bdsl_chat-msg-in .bdsl_chat-bubble { background:var(--bdsl-bg-card); border:1px solid var(--bdsl-border); border-top-left-radius:var(--bdsl-radius-sm); color:var(--bdsl-text-secondary); }
.bdsl_chat-msg-out .bdsl_chat-bubble { background:var(--bdsl-brand-400); color:#000; border-top-right-radius:var(--bdsl-radius-sm); font-weight:var(--bdsl-fw-medium); }
.bdsl_chat-time { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); align-self:flex-end; white-space:nowrap; }
.bdsl_chat-footer { padding:var(--bdsl-space-3) var(--bdsl-space-4); border-top:1px solid var(--bdsl-border); display:flex; gap:var(--bdsl-space-3); align-items:flex-end; flex-shrink:0; }
.bdsl_chat-input-wrap { flex:1; position:relative; }
.bdsl_chat-input { width:100%; background:var(--bdsl-bg-input); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-xl); padding:var(--bdsl-space-3) var(--bdsl-space-4); color:var(--bdsl-text-primary); font-size:var(--bdsl-text-sm); font-family:inherit; resize:none; min-height:44px; max-height:120px; line-height:var(--bdsl-lh-relaxed); outline:none; transition:border-color var(--bdsl-transition-fast); }
.bdsl_chat-input:focus { border-color:var(--bdsl-brand-400); }
.bdsl_chat-typing { display:flex; align-items:center; gap:var(--bdsl-space-2); padding:0 var(--bdsl-space-5) var(--bdsl-space-2); font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); }
.bdsl_typing-dots { display:flex; gap:3px; }
.bdsl_typing-dot { width:5px; height:5px; background:var(--bdsl-text-muted); border-radius:50%; animation:bdsl_typing 1.4s ease-in-out infinite; }
.bdsl_typing-dot:nth-child(2) { animation-delay:.2s; }
.bdsl_typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes bdsl_typing { 0%,80%,100% { transform:scale(.7); opacity:.5; } 40% { transform:scale(1); opacity:1; } }
/* ══════════════════════════════════════════════════════════
32. NOTIFICATIONS INTERFACE
══════════════════════════════════════════════════════════ */
.bdsl_notif-panel { background:var(--bdsl-bg-surface); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-xl); overflow:hidden; }
.bdsl_notif-header { display:flex; align-items:center; justify-content:space-between; padding:var(--bdsl-space-4) var(--bdsl-space-5); border-bottom:1px solid var(--bdsl-border); }
.bdsl_notif-list { max-height:480px; overflow-y:auto; }
.bdsl_notif-item { display:flex; gap:var(--bdsl-space-3); padding:var(--bdsl-space-4) var(--bdsl-space-5); border-bottom:1px solid var(--bdsl-border); cursor:pointer; transition:background var(--bdsl-transition-fast); position:relative; }
.bdsl_notif-item:last-child { border-bottom:none; }
.bdsl_notif-item:hover { background:var(--bdsl-bg-hover); }
.bdsl_notif-item.unread { background:var(--bdsl-bg-active); }
.bdsl_notif-item.unread::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--bdsl-brand-400); border-radius:0 2px 2px 0; }
.bdsl_notif-icon { width:40px; height:40px; border-radius:var(--bdsl-radius-lg); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.bdsl_notif-body { flex:1; min-width:0; }
.bdsl_notif-title { font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-semibold); margin-bottom:var(--bdsl-space-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdsl_notif-desc { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); line-height:var(--bdsl-lh-relaxed); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bdsl_notif-time { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); white-space:nowrap; }
/* ══════════════════════════════════════════════════════════
33. BACKGROUND PATTERNS
══════════════════════════════════════════════════════════ */
.bdsl_bg-dots { background-image:radial-gradient(var(--bdsl-neutral-700) 1px, transparent 1px); background-size:24px 24px; }
.bdsl_bg-grid { background-image:linear-gradient(var(--bdsl-border) 1px,transparent 1px), linear-gradient(90deg,var(--bdsl-border) 1px,transparent 1px); background-size:32px 32px; }
.bdsl_bg-noise { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); }
.bdsl_bg-gradient-radial { background:radial-gradient(ellipse at 50% 0%, rgba(0,212,125,.15) 0%, transparent 60%); }
.bdsl_bg-gradient-hero { background:linear-gradient(135deg,rgba(0,212,125,.08) 0%,rgba(59,158,255,.06) 50%,rgba(168,85,247,.06) 100%); }
.bdsl_bg-circuit { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='rgba(0,212,125,0.07)' stroke-width='1'/%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(0,212,125,0.12)'/%3E%3C/svg%3E"); background-size:40px; }
.bdsl_bg-hexagon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 1L27 8v14L14 29 1 22V8z' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E"); background-size:28px 49px; }
/* ══════════════════════════════════════════════════════════
34. FOOTER
══════════════════════════════════════════════════════════ */
.bdsl_footer { background:var(--bdsl-bg-surface); border-top:1px solid var(--bdsl-border); padding:var(--bdsl-space-16) 0 var(--bdsl-space-8); }
.bdsl_footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:var(--bdsl-space-8); margin-bottom:var(--bdsl-space-12); }
.bdsl_footer-brand { display:flex; flex-direction:column; gap:var(--bdsl-space-4); }
.bdsl_footer-tagline { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); line-height:var(--bdsl-lh-relaxed); max-width:280px; }
.bdsl_footer-col-title { font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-semibold); letter-spacing:.1em; text-transform:uppercase; color:var(--bdsl-text-muted); margin-bottom:var(--bdsl-space-4); }
.bdsl_footer-links { display:flex; flex-direction:column; gap:var(--bdsl-space-3); }
.bdsl_footer-link { font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); text-decoration:none; transition:color var(--bdsl-transition-fast); }
.bdsl_footer-link:hover { color:var(--bdsl-text-primary); }
.bdsl_footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:var(--bdsl-space-8); border-top:1px solid var(--bdsl-border); flex-wrap:wrap; gap:var(--bdsl-space-4); }
.bdsl_footer-copy { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); }
.bdsl_footer-social { display:flex; gap:var(--bdsl-space-3); }
.bdsl_social-btn { width:36px; height:36px; border-radius:var(--bdsl-radius-md); background:var(--bdsl-bg-input); border:1px solid var(--bdsl-border); display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; transition:all var(--bdsl-transition-fast); text-decoration:none; color:var(--bdsl-text-muted); }
.bdsl_social-btn:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); border-color:var(--bdsl-border-brand); }
@media (max-width:768px) { .bdsl_footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .bdsl_footer-grid { grid-template-columns:1fr; } }
/* ══════════════════════════════════════════════════════════
35. AUCTION-SPECIFIC COMPONENTS
══════════════════════════════════════════════════════════ */
/* Bid card */
.bdsl_bid-card { background:var(--bdsl-bg-card); border:1px solid var(--bdsl-border); border-radius:var(--bdsl-radius-xl); overflow:hidden; transition:all var(--bdsl-transition-base); }
.bdsl_bid-card:hover { border-color:var(--bdsl-border-brand); box-shadow:var(--bdsl-shadow-glow); transform:translateY(-4px); }
.bdsl_bid-img { width:100%; height:220px; object-fit:cover; display:block; position:relative; overflow:hidden; }
.bdsl_bid-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--bdsl-ease-out); }
.bdsl_bid-card:hover .bdsl_bid-img img { transform:scale(1.06); }
.bdsl_bid-status { position:absolute; top:var(--bdsl-space-3); left:var(--bdsl-space-3); }
.bdsl_bid-wishlist { position:absolute; top:var(--bdsl-space-3); right:var(--bdsl-space-3); width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.6); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px); transition:all var(--bdsl-transition-fast); font-size:1rem; color:var(--bdsl-text-muted); }
.bdsl_bid-wishlist:hover, .bdsl_bid-wishlist.active { color:var(--bdsl-danger); background:rgba(255,77,77,.2); }
.bdsl_bid-body { padding:var(--bdsl-space-5); }
.bdsl_bid-title { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-lg); font-weight:var(--bdsl-fw-semibold); margin-bottom:var(--bdsl-space-3); line-height:var(--bdsl-lh-snug); }
.bdsl_bid-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--bdsl-space-4); }
.bdsl_bid-price-label { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); text-transform:uppercase; letter-spacing:.05em; }
.bdsl_bid-price { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-2xl); font-weight:var(--bdsl-fw-extrabold); color:var(--bdsl-brand-400); }
.bdsl_bid-countdown { display:flex; align-items:center; gap:var(--bdsl-space-1); font-size:var(--bdsl-text-sm); color:var(--bdsl-text-muted); }
.bdsl_bid-countdown.urgent { color:var(--bdsl-danger); animation:bdsl_pulse 1s ease-in-out infinite; }
.bdsl_countdown-unit { display:flex; flex-direction:column; align-items:center; background:var(--bdsl-bg-input); border-radius:var(--bdsl-radius-sm); padding:2px 6px; }
.bdsl_countdown-num { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-xl); font-weight:var(--bdsl-fw-bold); line-height:1; }
.bdsl_countdown-label { font-size:var(--bdsl-text-xs); opacity:.6; text-transform:uppercase; }
.bdsl_countdown-sep { font-weight:bold; color:var(--bdsl-text-muted); align-self:flex-start; margin-top:2px; }
@keyframes bdsl_pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
/* Live badge */
.bdsl_live-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,77,77,.15); color:#ff6b6b; border:1px solid rgba(255,77,77,.3); border-radius:var(--bdsl-radius-pill); padding:3px 10px; font-size:var(--bdsl-text-xs); font-weight:var(--bdsl-fw-bold); letter-spacing:.06em; text-transform:uppercase; }
.bdsl_live-dot { width:6px; height:6px; background:#ff4d4d; border-radius:50%; animation:bdsl_live-blink 1s ease-in-out infinite; }
@keyframes bdsl_live-blink { 0%,100% { opacity:1; box-shadow:0 0 6px #ff4d4d; } 50% { opacity:.4; box-shadow:none; } }
/* ══════════════════════════════════════════════════════════
36. HERO SECTION
══════════════════════════════════════════════════════════ */
.bdsl_hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.bdsl_hero-bg { position:absolute; inset:0; background:var(--bdsl-bg-app); }
.bdsl_hero-bg-pattern { position:absolute; inset:0; }
.bdsl_hero-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(0,212,125,.15) 0%,transparent 70%); top:-200px; right:-100px; animation:bdsl_glow-drift 8s ease-in-out infinite alternate; }
.bdsl_hero-glow-2 { background:radial-gradient(circle,rgba(59,158,255,.1) 0%,transparent 70%); top:auto; bottom:-200px; left:-100px; animation-delay:4s; }
@keyframes bdsl_glow-drift { from { transform:translate(0,0); } to { transform:translate(40px,30px); } }
.bdsl_hero-content { position:relative; z-index:1; }
.bdsl_hero-eyebrow { display:inline-flex; align-items:center; gap:var(--bdsl-space-2); background:rgba(0,212,125,.1); border:1px solid rgba(0,212,125,.25); border-radius:var(--bdsl-radius-pill); padding:var(--bdsl-space-2) var(--bdsl-space-4); font-size:var(--bdsl-text-sm); font-weight:var(--bdsl-fw-medium); color:var(--bdsl-brand-300); margin-bottom:var(--bdsl-space-6); }
.bdsl_hero-title { font-family:var(--bdsl-font-display); font-size:clamp(3rem,7vw,5.5rem); font-weight:var(--bdsl-fw-semibold); line-height:1.05; letter-spacing:0; margin-bottom:var(--bdsl-space-6); }
.bdsl_hero-desc { font-size:var(--bdsl-text-lg); color:var(--bdsl-text-secondary); line-height:var(--bdsl-lh-relaxed); margin-bottom:var(--bdsl-space-10); max-width:560px; }
.bdsl_hero-actions { display:flex; gap:var(--bdsl-space-4); flex-wrap:wrap; }
/* ══════════════════════════════════════════════════════════
37. UTILITIES
══════════════════════════════════════════════════════════ */
/* Spacing */
.bdsl_mt-0 { margin-top:0 !important; }
.bdsl_mt-2 { margin-top:var(--bdsl-space-2) !important; }
.bdsl_mt-4 { margin-top:var(--bdsl-space-4) !important; }
.bdsl_mt-6 { margin-top:var(--bdsl-space-6) !important; }
.bdsl_mt-8 { margin-top:var(--bdsl-space-8) !important; }
.bdsl_mb-2 { margin-bottom:var(--bdsl-space-2) !important; }
.bdsl_mb-4 { margin-bottom:var(--bdsl-space-4) !important; }
.bdsl_mb-6 { margin-bottom:var(--bdsl-space-6) !important; }
.bdsl_mb-8 { margin-bottom:var(--bdsl-space-8) !important; }
.bdsl_p-4 { padding:var(--bdsl-space-4) !important; }
.bdsl_p-6 { padding:var(--bdsl-space-6) !important; }
.bdsl_p-8 { padding:var(--bdsl-space-8) !important; }
/* Radii */
.bdsl_rounded-sm { border-radius:var(--bdsl-radius-sm) !important; }
.bdsl_rounded-md { border-radius:var(--bdsl-radius-md) !important; }
.bdsl_rounded-lg { border-radius:var(--bdsl-radius-lg) !important; }
.bdsl_rounded-xl { border-radius:var(--bdsl-radius-xl) !important; }
.bdsl_rounded-pill { border-radius:var(--bdsl-radius-pill) !important; }
.bdsl_rounded-circle { border-radius:var(--bdsl-radius-circle) !important; }
/* Shadow */
.bdsl_shadow-sm { box-shadow:var(--bdsl-shadow-sm) !important; }
.bdsl_shadow-md { box-shadow:var(--bdsl-shadow-md) !important; }
.bdsl_shadow-lg { box-shadow:var(--bdsl-shadow-lg) !important; }
.bdsl_shadow-glow { box-shadow:var(--bdsl-shadow-glow) !important; }
/* Visibility */
.bdsl_hidden { display:none !important; }
.bdsl_visible { visibility:visible !important; }
.bdsl_invisible { visibility:hidden !important; }
.bdsl_sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:768px) { .bdsl_hidden-mobile { display:none !important; } }
@media (min-width:769px) { .bdsl_hidden-desktop { display:none !important; } }
/* Cursor */
.bdsl_cursor-pointer { cursor:pointer; }
.bdsl_cursor-default { cursor:default; }
.bdsl_cursor-not-allowed { cursor:not-allowed; }
/* BG colors utility */
.bdsl_bg-success-soft { background:rgba(0,212,125,.1); }
.bdsl_bg-danger-soft { background:rgba(255,77,77,.1); }
.bdsl_bg-info-soft { background:rgba(59,158,255,.1); }
.bdsl_bg-warning-soft { background:rgba(255,193,7,.1); }
.bdsl_bg-purple-soft { background:rgba(168,85,247,.1); }
/* Width utilities */
.bdsl_w-full { width:100% !important; }
.bdsl_w-auto { width:auto !important; }
.bdsl_max-w-sm { max-width:480px; }
.bdsl_max-w-md { max-width:640px; }
.bdsl_max-w-lg { max-width:960px; }
/* Text align */
.bdsl_text-center { text-align:center !important; }
.bdsl_text-left { text-align:left !important; }
.bdsl_text-right { text-align:right !important; }
/* Overflow */
.bdsl_overflow-hidden { overflow:hidden !important; }
.bdsl_overflow-auto { overflow:auto !important; }
/* Truncate */
.bdsl_truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Animations utility */
.bdsl_animate-fade-in { animation:bdsl_fade-in .4s var(--bdsl-ease-out) forwards; }
.bdsl_animate-slide-up { animation:bdsl_slide-up .4s var(--bdsl-ease-out) forwards; }
.bdsl_animate-scale-in { animation:bdsl_scale-in .3s var(--bdsl-ease-spring) forwards; }
@keyframes bdsl_fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes bdsl_slide-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes bdsl_scale-in { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
/* Staggered children */
.bdsl_stagger > * { opacity:0; animation:bdsl_slide-up .5s var(--bdsl-ease-out) forwards; }
.bdsl_stagger > *:nth-child(1) { animation-delay:.05s; }
.bdsl_stagger > *:nth-child(2) { animation-delay:.1s; }
.bdsl_stagger > *:nth-child(3) { animation-delay:.15s; }
.bdsl_stagger > *:nth-child(4) { animation-delay:.2s; }
.bdsl_stagger > *:nth-child(5) { animation-delay:.25s; }
.bdsl_stagger > *:nth-child(6) { animation-delay:.3s; }
/* Scrollbar */
.bdsl_scrollbar-thin { scrollbar-width:thin; scrollbar-color:var(--bdsl-neutral-700) transparent; }
.bdsl_scrollbar-thin::-webkit-scrollbar { width:4px; height:4px; }
.bdsl_scrollbar-thin::-webkit-scrollbar-track { background:transparent; }
.bdsl_scrollbar-thin::-webkit-scrollbar-thumb { background:var(--bdsl-neutral-700); border-radius:2px; }
/* Theme toggle button */
.bdsl_theme-toggle { width:36px; height:36px; border-radius:var(--bdsl-radius-md); background:var(--bdsl-bg-input); border:1px solid var(--bdsl-border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--bdsl-transition-fast); font-size:1.1rem; color:var(--bdsl-text-muted); }
.bdsl_theme-toggle:hover { background:var(--bdsl-bg-hover); color:var(--bdsl-text-primary); border-color:var(--bdsl-border-brand); }
/* Spacer */
.bdsl_spacer { flex:1; }
/* Review / rating stars display */
.bdsl_review-stars { display:inline-flex; gap:2px; color:var(--bdsl-gold); font-size:1rem; }
/* Trust badges row */
.bdsl_trust-row { display:flex; align-items:center; gap:var(--bdsl-space-8); flex-wrap:wrap; }
.bdsl_trust-item { display:flex; flex-direction:column; align-items:center; gap:var(--bdsl-space-2); text-align:center; }
.bdsl_trust-number { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-3xl); font-weight:var(--bdsl-fw-extrabold); color:var(--bdsl-text-primary); }
.bdsl_trust-label { font-size:var(--bdsl-text-xs); color:var(--bdsl-text-muted); text-transform:uppercase; letter-spacing:.1em; }
/* Partner / logo strip */
.bdsl_logo-strip { display:flex; align-items:center; gap:var(--bdsl-space-10); flex-wrap:wrap; justify-content:center; opacity:.5; filter:grayscale(1); transition:opacity var(--bdsl-transition-base); }
.bdsl_logo-strip:hover { opacity:.8; filter:grayscale(0); }
.bdsl_logo-strip-item { font-family:var(--bdsl-font-display); font-size:var(--bdsl-text-xl); font-weight:var(--bdsl-fw-extrabold); color:var(--bdsl-text-primary); }
/* Section header pattern */
.bdsl_section-header { text-align:center; margin-bottom:var(--bdsl-space-16); max-width:640px; margin-inline:auto; }
.bdsl_section-header .bdsl_section-label { justify-content:center; margin-bottom:var(--bdsl-space-4); }
/* Notification dot on icon */
.bdsl_notif-dot { position:relative; }
.bdsl_notif-dot::after { content:attr(data-count); position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; border-radius:var(--bdsl-radius-pill); background:var(--bdsl-danger); color:#fff; font-size:.6rem; font-weight:var(--bdsl-fw-bold); display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bdsl-bg-app); }
/* ══════════════════════════════════════════════════════════
38. MAIN LAYOUT OFFSET
══════════════════════════════════════════════════════════ */
.bdsl_shell {
display: block;
}
.bdsl_sidebar {
display: none;
}
.bdsl_main { flex:1; padding-top:64px; }
.bdsl_main-auth {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 96px var(--bdsl-space-6) 104px;
}
.bdsl_main-auth .bdsl_section-sm {
width: 100%;
padding-block: 0;
}
.bdsl_main-enter {
animation: bdsl_main-fade-up .38s var(--bdsl-ease-out);
}
.bdsl_content { flex:1; overflow:hidden; }
@keyframes bdsl_main-fade-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bdsl_shell-sidebar {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
align-items: start;
}
.bdsl_shell-sidebar .bdsl_sidebar {
display: block;
position: sticky;
top: 64px;
min-height: calc(100vh - 64px);
padding: 1rem 0 1.25rem;
border-right: 1px solid rgba(255,255,255,.06);
background:
linear-gradient(180deg, rgba(10,16,24,.98), rgba(8,13,20,.98)),
radial-gradient(circle at top left, rgba(77,184,255,.08), transparent 28%);
}
.bdsl_shell-sidebar .bdsl_main {
min-width: 0;
padding-top: 0;
}
.bdsl_sidebar-inner {
display: flex;
flex-direction: column;
gap: .9rem;
padding: 0 1rem;
}
.bdsl_sidebar-head {
padding: 1rem 1rem 1.1rem;
border-radius: calc(var(--bdsl-radius-xl) + 2px);
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.bdsl_sidebar-kicker {
font-size: var(--bdsl-text-xs);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--bdsl-text-muted);
margin-bottom: .45rem;
}
.bdsl_sidebar-title {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-2xl);
line-height: 1.05;
}
.bdsl_sidebar-user {
margin-top: .45rem;
color: var(--bdsl-text-secondary);
}
.bdsl_sidebar-badge-action {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: .85rem;
padding: .42rem .8rem;
border-radius: 999px;
border: 1px solid rgba(0,212,125,.16);
background: linear-gradient(180deg, rgba(0,212,125,.12), rgba(0,212,125,.05));
color: var(--bdsl-brand-200);
font-size: var(--bdsl-text-xs);
font-weight: var(--bdsl-fw-bold);
letter-spacing: .14em;
text-transform: uppercase;
transition: transform var(--bdsl-transition-base), border-color var(--bdsl-transition-base), background var(--bdsl-transition-base), color var(--bdsl-transition-base);
}
.bdsl_sidebar-badge-action:hover {
transform: translateY(-1px);
border-color: rgba(0,212,125,.32);
background: linear-gradient(180deg, rgba(0,212,125,.18), rgba(77,184,255,.08));
color: var(--bdsl-neutral-0);
}
.bdsl_sidebar-group,
.bdsl_sidebar-list {
display: flex;
flex-direction: column;
gap: .45rem;
}
.bdsl_sidebar-link {
width: 100%;
padding: .82rem .95rem;
border: 1px solid rgba(255,255,255,.06);
border-radius: calc(var(--bdsl-radius-lg) + 2px);
background: rgba(255,255,255,.025);
color: var(--bdsl-text-secondary);
text-align: left;
transition: transform var(--bdsl-transition-base), border-color var(--bdsl-transition-base), background var(--bdsl-transition-base), color var(--bdsl-transition-base);
}
.bdsl_sidebar-link:hover {
transform: translateX(3px);
border-color: rgba(77,184,255,.2);
background: rgba(255,255,255,.045);
color: var(--bdsl-text-primary);
}
.bdsl_sidebar-link.is-primary {
background: linear-gradient(135deg, rgba(0,212,125,.14), rgba(77,184,255,.12));
border-color: rgba(0,212,125,.18);
color: var(--bdsl-text-primary);
}
.bdsl_sidebar-accordion {
border: 1px solid rgba(255,255,255,.06);
border-radius: calc(var(--bdsl-radius-xl) + 2px);
background: rgba(255,255,255,.02);
overflow: hidden;
}
.bdsl_sidebar-accordion[open] {
background: rgba(255,255,255,.03);
}
.bdsl_sidebar-accordion summary {
display: flex;
align-items: center;
list-style: none;
cursor: pointer;
padding: .95rem 1rem;
font-weight: var(--bdsl-fw-semibold);
color: var(--bdsl-text-primary);
position: relative;
}
.bdsl_sidebar-accordion summary::-webkit-details-marker {
display: none;
}
.bdsl_sidebar-accordion summary::after {
content: '+';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--bdsl-text-muted);
}
.bdsl_sidebar-accordion[open] summary::after {
content: '−';
}
.bdsl_sidebar-accordion .bdsl_sidebar-list {
padding: 0 1rem 1rem;
}
@media (max-width: 1100px) {
.bdsl_shell-sidebar {
grid-template-columns: 1fr;
}
.bdsl_shell-sidebar .bdsl_sidebar {
position: static;
min-height: auto;
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.bdsl_sidebar-inner {
max-height: none;
overflow: visible;
}
}
/* Login */
.bdsl_login-shell {
position: relative;
width: 100%;
height: 0;
}
.bdsl_login-orb {
position: absolute;
border-radius: 999px;
filter: blur(8px);
pointer-events: none;
opacity: .7;
}
.bdsl_login-orb-a {
width: 180px;
height: 180px;
top: 28px;
left: -22px;
background: radial-gradient(circle, rgba(0,212,125,.3) 0%, rgba(0,212,125,0) 72%);
}
.bdsl_login-orb-b {
width: 220px;
height: 220px;
top: 120px;
right: -34px;
background: radial-gradient(circle, rgba(255,184,77,.2) 0%, rgba(255,184,77,0) 74%);
}
.bdsl_login-card {
position: relative;
overflow: hidden;
border-radius: calc(var(--bdsl-radius-2xl) + 4px);
border-color: rgba(255,255,255,.14);
box-shadow: 0 30px 80px rgba(0,0,0,.38);
}
.bdsl_login-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--bdsl-brand-400), rgba(255,184,77,.95));
}
.bdsl_login-card .bdsl_card-body {
padding: clamp(1.75rem, 3vw, 2.5rem);
}
.bdsl_login-brand {
position: relative;
z-index: 1;
}
.bdsl_login-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .45rem .9rem;
margin-bottom: 1rem;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: rgba(255,255,255,.05);
color: var(--bdsl-text-brand);
font-size: var(--bdsl-text-xs);
font-weight: var(--bdsl-fw-semibold);
letter-spacing: .14em;
text-transform: uppercase;
}
.bdsl_login-form {
position: relative;
z-index: 1;
}
.bdsl_login-feedback {
position: relative;
z-index: 1;
border-radius: var(--bdsl-radius-lg);
}
.bdsl_login-input-wrap {
position: relative;
}
.bdsl_login-input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 22px;
text-align: center;
color: var(--bdsl-text-muted);
font-size: 1rem;
font-weight: var(--bdsl-fw-semibold);
pointer-events: none;
}
.bdsl_login-input {
min-height: 58px;
padding-left: 3.2rem;
border-radius: var(--bdsl-radius-lg);
background: rgba(8, 13, 19, .72);
}
.bdsl_login-input:focus {
background: rgba(11, 17, 24, .92);
}
.bdsl_login-submit {
min-height: 58px;
margin-top: .5rem;
border-radius: var(--bdsl-radius-lg);
font-weight: var(--bdsl-fw-semibold);
letter-spacing: .02em;
}
@media (max-width: 640px) {
.bdsl_login-orb-a,
.bdsl_login-orb-b {
opacity: .45;
}
}
/* Global app overlay */
.bdsl_app-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--bdsl-space-6);
opacity: 0;
pointer-events: none;
transition: opacity .34s var(--bdsl-ease-out);
}
.bdsl_app-overlay.active {
opacity: 1;
pointer-events: auto;
}
.bdsl_app-overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(12, 16, 22, .76);
backdrop-filter: blur(10px) saturate(110%);
-webkit-backdrop-filter: blur(10px) saturate(110%);
opacity: 0;
transition: opacity .38s var(--bdsl-ease-out);
}
.bdsl_app-overlay.active .bdsl_app-overlay-backdrop {
opacity: 1;
}
.bdsl_app-overlay-dialog {
position: relative;
z-index: 1;
min-width: min(420px, 92vw);
padding: 1.25rem 1.35rem;
border-radius: calc(var(--bdsl-radius-xl) + 2px);
display: flex;
align-items: center;
gap: 1rem;
border-color: rgba(255,255,255,.12);
background: rgba(30, 34, 40, .52);
box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
opacity: 0;
transform: translateY(14px) scale(.972);
transition: transform .42s var(--bdsl-ease-out), opacity .3s var(--bdsl-ease-out);
}
.bdsl_app-overlay.active .bdsl_app-overlay-dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
.bdsl_app-overlay-spinner {
flex-shrink: 0;
}
.bdsl_app-overlay-copy {
display: flex;
flex-direction: column;
gap: .2rem;
}
.bdsl_app-overlay-title {
color: var(--bdsl-text-primary);
font-size: var(--bdsl-text-lg);
font-weight: var(--bdsl-fw-semibold);
}
.bdsl_app-overlay-message {
color: var(--bdsl-text-secondary);
font-size: var(--bdsl-text-sm);
}
@media (max-width: 640px) {
.bdsl_app-overlay-dialog {
min-width: 100%;
gap: .85rem;
}
}
/* App footer */
.bdsl_app-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
padding: .9rem 0 1rem;
background: linear-gradient(180deg, rgba(8, 11, 16, 0), rgba(8, 11, 16, .82) 45%, rgba(8, 11, 16, .94) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.bdsl_app-footer-copy {
color: var(--bdsl-text-muted);
font-size: var(--bdsl-text-sm);
text-align: center;
letter-spacing: .04em;
}
/* ══════════════════════════════════════════════════════════
39. WHITE LABEL SYSTEM
══════════════════════════════════════════════════════════
ARQUITECTURA:
· bidsale.css → Motor base. NUNCA se edita por cliente.
· theme.css → Generado por PHP con tokens del cliente.
Solo sobreescribe variables :root.
USO EN CADA SUBDOMINIO:
VARIABLES EDITABLES POR CLIENTE (via panel):
══════════════════════════════════════════════════════════ */
/* Template de referencia — PHP genera esto dinámicamente:
:root {
── Identidad visual ──────────────────────
--bdsl-brand-400: #00d47d; ← Color primario (picker)
--bdsl-brand-300: #00f090; ← Auto-light (PHP genera)
--bdsl-brand-500: #00b368; ← Auto-dark (PHP genera)
── Fondos (tema claro u oscuro) ──────────
--bdsl-bg-app: #060f1a; ← Fondo principal
--bdsl-bg-surface: #091828; ← Superficies
--bdsl-bg-card: #0d1e31; ← Cards
── Tipografía ────────────────────────────
--bdsl-font-display: 'Cormorant Garamond', serif;
--bdsl-font-body: 'Outfit', sans-serif;
── Forma ─────────────────────────────────
--bdsl-radius-xl: 1rem; ← Slider suave↔cuadrado
--bdsl-radius-2xl: 1.5rem;
--bdsl-radius-pill: 9999px;
── Identidad empresa ─────────────────────
--bdsl-client-name: 'BidSale';
--bdsl-client-logo: url('/assets/logo.svg');
--bdsl-client-slug: 'bidsale';
}
*/
/* ── Clase helper para inyección dinámica de logo ── */
.bdsl_client-logo {
content: var(--bdsl-client-logo, url('/assets/logo-default.svg'));
height: 32px;
width: auto;
display: block;
}
/* ── Clase de marca dinámica en navbar ── */
.bdsl_client-name::after {
content: var(--bdsl-client-name, 'BidSale');
}
/* ── Previsualización live del panel white label ── */
.bdsl_wl-preview {
border: 2px dashed var(--bdsl-border-brand);
border-radius: var(--bdsl-radius-xl);
padding: var(--bdsl-space-6);
position: relative;
transition: all var(--bdsl-transition-base);
}
.bdsl_wl-preview-label {
position: absolute;
top: -10px; left: var(--bdsl-space-4);
background: var(--bdsl-brand-400);
color: #000;
font-size: var(--bdsl-text-xs);
font-weight: var(--bdsl-fw-bold);
letter-spacing: .08em;
padding: 2px 10px;
border-radius: var(--bdsl-radius-pill);
}
/* ── Swatch de color para el panel ── */
.bdsl_color-swatch {
width: 36px; height: 36px;
border-radius: var(--bdsl-radius-md);
border: 2px solid var(--bdsl-border-strong);
cursor: pointer;
transition: transform var(--bdsl-transition-fast), box-shadow var(--bdsl-transition-fast);
flex-shrink: 0;
}
.bdsl_color-swatch:hover { transform: scale(1.1); box-shadow: var(--bdsl-shadow-glow); }
/* ── Font selector pill ── */
.bdsl_font-option {
padding: var(--bdsl-space-2) var(--bdsl-space-4);
border: 1.5px solid var(--bdsl-border);
border-radius: var(--bdsl-radius-pill);
font-size: var(--bdsl-text-sm);
cursor: pointer;
transition: all var(--bdsl-transition-fast);
background: transparent;
color: var(--bdsl-text-secondary);
white-space: nowrap;
}
.bdsl_font-option:hover { border-color: var(--bdsl-border-brand); color: var(--bdsl-text-primary); }
.bdsl_font-option.active { border-color: var(--bdsl-brand-400); background: var(--bdsl-bg-active); color: var(--bdsl-text-brand); }
/* ── Radius slider visual ── */
.bdsl_radius-demo {
width: 48px; height: 48px;
background: var(--bdsl-brand-400);
border-radius: var(--bdsl-radius-xl);
transition: border-radius var(--bdsl-transition-base);
}
/* ══════════════════════════════════════════════════════════
40. FRAMEWORK7 BRIDGE
══════════════════════════════════════════════════════════
Mapeo automático de tokens bdsl_ → variables --f7-*
Se activa solo cuando Framework7 está presente en la app.
La landing web NO usa esto.
══════════════════════════════════════════════════════════ */
.framework7-root,
:root {
/* ── Colores F7 desde tokens BidSale ── */
--f7-theme-color: var(--bdsl-brand-400);
--f7-theme-color-rgb: 0, 212, 125;
--f7-theme-color-shade: var(--bdsl-brand-500);
--f7-theme-color-tint: var(--bdsl-brand-300);
/* ── Tipografía F7 ── */
--f7-font-family: var(--bdsl-font-body);
--f7-font-size: 14px;
--f7-line-height: 1.65;
/* ── Navbar F7 ── */
--f7-navbar-height: 56px;
--f7-navbar-bg-color: var(--bdsl-bg-surface);
--f7-navbar-border-color: var(--bdsl-border);
--f7-navbar-link-color: var(--bdsl-brand-400);
--f7-navbar-text-color: var(--bdsl-text-primary);
--f7-navbar-title-font-family: var(--bdsl-font-display);
--f7-navbar-title-font-size: 18px;
--f7-navbar-title-font-weight: 600;
--f7-navbar-title-text-color: var(--bdsl-text-primary);
--f7-navbar-shadow-image: none;
/* ── Toolbar / Tab bar F7 ── */
--f7-toolbar-height: 56px;
--f7-toolbar-bg-color: var(--bdsl-bg-surface);
--f7-toolbar-border-color: var(--bdsl-border);
--f7-tabbar-icon-color: var(--bdsl-text-muted);
--f7-tabbar-active-icon-color: var(--bdsl-brand-400);
--f7-tabbar-label-color: var(--bdsl-text-muted);
--f7-tabbar-active-label-color: var(--bdsl-brand-400);
--f7-tabbar-link-active-border-color: var(--bdsl-brand-400);
/* ── Page / Background F7 ── */
--f7-page-bg-color: var(--bdsl-bg-app);
--f7-block-title-color: var(--bdsl-text-muted);
--f7-block-strong-bg-color: var(--bdsl-bg-card);
--f7-block-strong-border-color: var(--bdsl-border);
/* ── List / Items F7 ── */
--f7-list-bg-color: var(--bdsl-bg-card);
--f7-list-border-color: var(--bdsl-border);
--f7-list-item-title-text-color: var(--bdsl-text-primary);
--f7-list-item-subtitle-text-color:var(--bdsl-text-secondary);
--f7-list-item-text-text-color: var(--bdsl-text-muted);
--f7-list-chevron-icon-color: var(--bdsl-text-muted);
--f7-list-item-after-text-color: var(--bdsl-text-muted);
/* ── Inputs F7 ── */
--f7-input-bg-color: var(--bdsl-bg-input);
--f7-input-text-color: var(--bdsl-text-primary);
--f7-input-placeholder-color: var(--bdsl-text-disabled);
--f7-input-border-color: var(--bdsl-border);
--f7-input-focused-border-color: var(--bdsl-brand-400);
--f7-input-border-radius: var(--bdsl-radius-md);
--f7-input-font-family: var(--bdsl-font-body);
/* ── Buttons F7 ── */
--f7-button-border-radius: var(--bdsl-radius-md);
--f7-button-font-family: var(--bdsl-font-body);
--f7-button-font-weight: 600;
--f7-button-letter-spacing: 0;
--f7-button-text-color: var(--bdsl-text-primary);
--f7-button-bg-color: var(--bdsl-bg-input);
--f7-button-fill-text-color: #000000;
--f7-button-fill-bg-color: var(--bdsl-brand-400);
/* ── Cards F7 ── */
--f7-card-bg-color: var(--bdsl-bg-card);
--f7-card-border-color: var(--bdsl-border);
--f7-card-border-radius: var(--bdsl-radius-xl);
--f7-card-box-shadow: var(--bdsl-shadow-md);
--f7-card-header-text-color: var(--bdsl-text-primary);
--f7-card-content-text-color: var(--bdsl-text-secondary);
--f7-card-footer-text-color: var(--bdsl-text-muted);
--f7-card-header-border-color: var(--bdsl-border);
--f7-card-footer-border-color: var(--bdsl-border);
/* ── Sheets / Modals F7 ── */
--f7-sheet-bg-color: var(--bdsl-bg-surface);
--f7-popup-bg-color: var(--bdsl-bg-card);
--f7-popup-border-radius: var(--bdsl-radius-2xl);
--f7-dialog-bg-color: var(--bdsl-bg-card);
--f7-dialog-border-radius: var(--bdsl-radius-xl);
--f7-dialog-title-text-color: var(--bdsl-text-primary);
--f7-dialog-text-color: var(--bdsl-text-secondary);
--f7-dialog-button-text-color: var(--bdsl-brand-400);
--f7-dialog-input-border-color: var(--bdsl-border);
--f7-dialog-input-bg-color: var(--bdsl-bg-input);
/* ── Toast / Preloader F7 ── */
--f7-toast-bg-color: var(--bdsl-bg-surface);
--f7-toast-text-color: var(--bdsl-text-primary);
--f7-toast-border-radius: var(--bdsl-radius-lg);
--f7-preloader-color: var(--bdsl-brand-400);
/* ── Searchbar F7 ── */
--f7-searchbar-bg-color: var(--bdsl-bg-surface);
--f7-searchbar-input-bg-color: var(--bdsl-bg-input);
--f7-searchbar-border-color: var(--bdsl-border);
/* ── Toggle F7 ── */
--f7-toggle-inactive-color: var(--bdsl-neutral-600);
--f7-toggle-active-color: var(--bdsl-brand-400);
/* ── Segmented / Tabs F7 ── */
--f7-segmented-raised-divider-color: var(--bdsl-border);
/* ── Badge F7 ── */
--f7-badge-bg-color: var(--bdsl-danger);
--f7-badge-text-color: #ffffff;
--f7-badge-font-size: 10px;
/* ── Safe areas (Capacitor / notch) ── */
--f7-safe-area-top: env(safe-area-inset-top, 0px);
--f7-safe-area-bottom: env(safe-area-inset-bottom, 0px);
--f7-safe-area-left: env(safe-area-inset-left, 0px);
--f7-safe-area-right: env(safe-area-inset-right, 0px);
}
/* ── Dark mode automático cuando el OS lo solicita ── */
@media (prefers-color-scheme: light) {
[data-bdsl-theme="auto"] {
--bdsl-bg-app: #f0f4f8;
--bdsl-bg-surface: #ffffff;
--bdsl-bg-card: #ffffff;
--bdsl-bg-input: #f0f4f8;
--bdsl-border: rgba(0,0,0,.1);
--bdsl-border-strong: rgba(0,0,0,.18);
--bdsl-text-primary: #060f1a;
--bdsl-text-secondary:#142840;
--bdsl-text-muted: #2e506d;
--f7-page-bg-color: #f0f4f8;
--f7-list-bg-color: #ffffff;
--f7-navbar-bg-color: #ffffff;
--f7-toolbar-bg-color:#ffffff;
}
}
/* ══════════════════════════════════════════════════════════
41. CAPACITOR / MOBILE UTILITIES
══════════════════════════════════════════════════════════ */
/* Elimina delay de tap en móvil */
* { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Scroll nativo con inercia */
.bdsl_scroll-native {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overscroll-behavior-y: contain;
}
/* Safe area padding para notch/home indicator */
.bdsl_safe-top { padding-top: env(safe-area-inset-top, 0px); }
.bdsl_safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.bdsl_safe-left { padding-left: env(safe-area-inset-left, 0px); }
.bdsl_safe-right { padding-right: env(safe-area-inset-right, 0px); }
/* Pull to refresh visual */
.bdsl_pull-indicator {
display: flex; align-items: center; justify-content: center;
height: 48px; color: var(--bdsl-text-muted); font-size: var(--bdsl-text-sm);
gap: var(--bdsl-space-2);
}
/* Haptic feedback visual (complementa el plugin de Capacitor) */
@keyframes bdsl_haptic { 0%,100% { transform:scale(1); } 50% { transform:scale(.97); } }
.bdsl_haptic { animation: bdsl_haptic .15s var(--bdsl-ease-out); }
/* Bottom sheet nativo (complementa F7 Sheet) */
.bdsl_bottom-sheet {
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--bdsl-bg-surface);
border-radius: var(--bdsl-radius-2xl) var(--bdsl-radius-2xl) 0 0;
border-top: 1px solid var(--bdsl-border);
padding: var(--bdsl-space-2) var(--bdsl-space-6) var(--bdsl-space-6);
padding-bottom: calc(var(--bdsl-space-6) + env(safe-area-inset-bottom, 0px));
z-index: var(--bdsl-z-modal);
transform: translateY(100%);
transition: transform var(--bdsl-transition-base);
box-shadow: var(--bdsl-shadow-xl);
}
.bdsl_bottom-sheet.open { transform: translateY(0); }
.bdsl_bottom-sheet-handle {
width: 36px; height: 4px;
background: var(--bdsl-border-strong);
border-radius: var(--bdsl-radius-pill);
margin: 0 auto var(--bdsl-space-4);
}
/* App loading splash */
.bdsl_app-loader {
position: fixed; inset: 0;
background: var(--bdsl-bg-app);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--bdsl-space-6);
z-index: 9999;
transition: opacity .4s var(--bdsl-ease-out);
}
.bdsl_app-loader.hidden { opacity: 0; pointer-events: none; }
/* Dashboard Circulo */
.bdsl_dashboard-circle {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bdsl_dashboard-circle-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(0, 212, 125, .18), transparent 34%),
radial-gradient(circle at 82% 12%, rgba(77, 184, 255, .18), transparent 28%),
linear-gradient(145deg, rgba(18, 26, 38, .96), rgba(12, 19, 29, .92));
}
.bdsl_dashboard-circle-orb {
position: absolute;
border-radius: 999px;
pointer-events: none;
opacity: .72;
}
.bdsl_dashboard-circle-orb-a {
width: 220px;
height: 220px;
top: -88px;
right: 16%;
background: radial-gradient(circle, rgba(0, 212, 125, .26), rgba(0, 212, 125, 0));
}
.bdsl_dashboard-circle-orb-b {
width: 260px;
height: 260px;
bottom: -130px;
right: -24px;
background: radial-gradient(circle, rgba(77, 184, 255, .2), rgba(77, 184, 255, 0));
}
.bdsl_dashboard-circle-copy {
max-width: 52rem;
font-size: var(--bdsl-text-lg);
}
.bdsl_dashboard-circle-panel {
position: relative;
padding: 1.1rem 1.15rem;
border-radius: calc(var(--bdsl-radius-xl) + 2px);
border: 1px solid rgba(255, 255, 255, .08);
background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
display: flex;
align-items: center;
gap: 1rem;
}
.bdsl_dashboard-circle-avatar {
width: 72px;
height: 72px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bdsl-font-display);
font-size: 1.65rem;
font-weight: var(--bdsl-fw-semibold);
color: #08131c;
background: linear-gradient(145deg, #00d47d, #57f0b0);
box-shadow: 0 16px 40px rgba(0, 212, 125, .18);
}
.bdsl_dashboard-circle-panel-copy {
display: flex;
flex-direction: column;
gap: .15rem;
}
.bdsl_dashboard-circle-panel-label {
font-size: var(--bdsl-text-xs);
text-transform: uppercase;
letter-spacing: .12em;
color: var(--bdsl-text-muted);
}
.bdsl_dashboard-circle-panel-name {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-2xl);
line-height: 1.1;
}
.bdsl_dashboard-circle-panel-role {
color: var(--bdsl-text-secondary);
}
.bdsl_dashboard-circle-stat-title {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-3xl);
font-weight: var(--bdsl-fw-semibold);
line-height: 1.05;
margin-bottom: .65rem;
}
.bdsl_dashboard-circle-card,
.bdsl_dashboard-circle-side {
background: linear-gradient(180deg, rgba(17, 28, 42, .96), rgba(14, 23, 35, .98));
}
.bdsl_dashboard-circle-action {
height: 100%;
padding: 1rem 1.05rem;
border: 1px solid rgba(255,255,255,.07);
border-radius: calc(var(--bdsl-radius-lg) + 2px);
background: rgba(255,255,255,.03);
transition: transform var(--bdsl-transition-base), border-color var(--bdsl-transition-base), background var(--bdsl-transition-base);
}
.bdsl_dashboard-circle-action:hover {
transform: translateY(-2px);
border-color: rgba(0,212,125,.22);
background: rgba(255,255,255,.045);
}
.bdsl_dashboard-circle-action-index {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3rem;
padding: .25rem .55rem;
margin-bottom: .85rem;
border-radius: 999px;
font-size: var(--bdsl-text-xs);
letter-spacing: .14em;
font-weight: var(--bdsl-fw-semibold);
color: var(--bdsl-brand-300);
background: rgba(0, 212, 125, .08);
border: 1px solid rgba(0, 212, 125, .12);
}
.bdsl_dashboard-circle-note {
padding: 1rem 1.05rem;
border-radius: calc(var(--bdsl-radius-lg) + 2px);
background:
linear-gradient(180deg, rgba(0, 212, 125, .08), rgba(77, 184, 255, .05)),
rgba(255,255,255,.02);
border: 1px solid rgba(77, 184, 255, .12);
}
.bdsl_dashboard-circle-note-kicker {
font-size: var(--bdsl-text-xs);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--bdsl-brand-300);
margin-bottom: .45rem;
}
.bdsl_dashboard-circle-note-title {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-2xl);
margin-bottom: .5rem;
}
@media (max-width: 768px) {
.bdsl_dashboard-circle-copy {
font-size: var(--bdsl-text-base);
}
.bdsl_dashboard-circle-panel {
padding: .95rem;
}
.bdsl_dashboard-circle-avatar {
width: 60px;
height: 60px;
border-radius: 18px;
font-size: 1.35rem;
}
.bdsl_dashboard-circle-stat-title {
font-size: var(--bdsl-text-2xl);
}
}
/* Dashboard Ejecutivo */
.bdsl_exec-dashboard {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bdsl_exec-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 10% 10%, rgba(0, 212, 125, .16), transparent 28%),
radial-gradient(circle at 88% 16%, rgba(77, 184, 255, .16), transparent 26%),
radial-gradient(circle at 60% 120%, rgba(255, 184, 77, .14), transparent 30%),
linear-gradient(145deg, rgba(15, 24, 37, .98), rgba(8, 15, 24, .96));
}
.bdsl_exec-hero-orb {
position: absolute;
border-radius: 999px;
pointer-events: none;
filter: blur(8px);
}
.bdsl_exec-hero-orb-a {
width: 260px;
height: 260px;
top: -90px;
right: 10%;
background: radial-gradient(circle, rgba(0, 212, 125, .28), rgba(0, 212, 125, 0));
}
.bdsl_exec-hero-orb-b {
width: 300px;
height: 300px;
bottom: -160px;
left: -40px;
background: radial-gradient(circle, rgba(77, 184, 255, .22), rgba(77, 184, 255, 0));
}
.bdsl_exec-hero-copy {
max-width: 54rem;
font-size: var(--bdsl-text-lg);
}
.bdsl_exec-command {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
padding: 1.15rem;
border-radius: calc(var(--bdsl-radius-xl) + 2px);
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.bdsl_exec-command-avatar {
width: 74px;
height: 74px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bdsl-font-display);
font-size: 1.7rem;
color: #07121a;
background: linear-gradient(145deg, #ffd166, #ffb84d);
box-shadow: 0 18px 36px rgba(255, 184, 77, .2);
}
.bdsl_exec-command-copy {
display: flex;
flex-direction: column;
gap: .12rem;
}
.bdsl_exec-command-label {
font-size: var(--bdsl-text-xs);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--bdsl-text-muted);
}
.bdsl_exec-command-name {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-2xl);
line-height: 1.05;
}
.bdsl_exec-command-role {
color: var(--bdsl-text-secondary);
margin-bottom: .35rem;
}
.bdsl_exec-chart-card,
.bdsl_exec-side-card {
background: linear-gradient(180deg, rgba(16, 26, 40, .98), rgba(10, 17, 27, .98));
}
.bdsl_exec-chart-wrap {
position: relative;
height: 360px;
}
.bdsl_exec-chart-wrap-sm {
height: 320px;
}
.bdsl_exec-focus-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.bdsl_exec-focus-accent {
position: absolute;
inset: 0 auto 0 0;
width: 4px;
opacity: .95;
}
.bdsl_exec-focus-label {
font-size: var(--bdsl-text-xs);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--bdsl-text-muted);
}
.bdsl_exec-empty {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: .55rem;
padding: 1rem 0;
}
.bdsl_exec-empty-title {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-2xl);
line-height: 1.1;
color: var(--bdsl-text-primary);
}
.bdsl_exec-empty-copy {
max-width: 32rem;
color: var(--bdsl-text-secondary);
}
.bdsl_exec-alert {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1rem 1.05rem;
border-radius: calc(var(--bdsl-radius-lg) + 2px);
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.03);
}
.bdsl_exec-alert-value {
min-width: 72px;
min-height: 72px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-3xl);
background: linear-gradient(145deg, rgba(77,184,255,.24), rgba(0,212,125,.16));
color: #f8fbff;
}
.bdsl_exec-alert-title {
font-family: var(--bdsl-font-display);
font-size: var(--bdsl-text-xl);
margin-bottom: .3rem;
}
.bdsl_exec-timeline {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bdsl_exec-timeline-item {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
}
.bdsl_exec-timeline-item:not(:last-child)::after {
content: "";
position: absolute;
left: 8px;
top: 22px;
bottom: -18px;
width: 1px;
background: linear-gradient(180deg, rgba(77,184,255,.22), rgba(255,255,255,.04));
}
.bdsl_exec-timeline-dot {
width: 16px;
height: 16px;
border-radius: 999px;
margin-top: .45rem;
background: linear-gradient(145deg, #00d47d, #4db8ff);
box-shadow: 0 0 0 6px rgba(77,184,255,.08);
}
.bdsl_exec-timeline-body {
padding: .2rem 0 1rem;
}
@media (max-width: 992px) {
.bdsl_exec-command {
grid-template-columns: auto 1fr;
}
.bdsl_exec-chart-wrap,
.bdsl_exec-chart-wrap-sm {
height: 280px;
}
}
@media (max-width: 768px) {
.bdsl_exec-hero-copy {
font-size: var(--bdsl-text-base);
}
.bdsl_exec-command {
grid-template-columns: 1fr;
}
.bdsl_exec-command-avatar {
width: 62px;
height: 62px;
border-radius: 18px;
font-size: 1.4rem;
}
.bdsl_exec-alert {
grid-template-columns: 1fr;
}
.bdsl_exec-alert-value {
min-width: 64px;
min-height: 64px;
font-size: var(--bdsl-text-2xl);
}
}
/* Wizard de preregistro */
.bdsl_circle-wizard-card {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(0, 212, 125, .1), transparent 26%),
linear-gradient(180deg, rgba(17, 28, 42, .98), rgba(12, 21, 33, .98));
}
.bdsl_circle-wizard-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(140deg, rgba(255,255,255,.04), rgba(255,255,255,0) 44%);
}
.bdsl_circle-wizard-stepper {
padding: 1rem 1.1rem 1.2rem;
border-radius: calc(var(--bdsl-radius-xl) + 4px);
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
}
.bdsl_circle-wizard-panel {
position: relative;
padding: 1.2rem;
border-radius: calc(var(--bdsl-radius-xl) + 2px);
border: 1px solid rgba(255,255,255,.06);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.bdsl_circle-wizard-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: .25rem;
}
.bdsl_circle-doc-card {
padding: 1rem 1.05rem;
border-radius: calc(var(--bdsl-radius-lg) + 2px);
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.bdsl_circle-doc-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: .9rem;
}
.bdsl_circle-doc-note {
padding: .95rem 1rem;
border-radius: calc(var(--bdsl-radius-lg) + 2px);
border: 1px solid rgba(77, 184, 255, .12);
background: linear-gradient(180deg, rgba(77, 184, 255, .08), rgba(255,255,255,.02));
}
.bdsl_circle-detail-block {
height: 100%;
padding: 1rem 1.05rem;
border-radius: calc(var(--bdsl-radius-lg) + 2px);
border: 1px solid rgba(255,255,255,.07);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
}
.bdsl_circle-detail-label {
margin-bottom: .55rem;
font-size: var(--bdsl-text-xs);
font-weight: var(--bdsl-fw-semibold);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--bdsl-text-muted);
}
.bdsl_circle-detail-value {
color: var(--bdsl-text-secondary);
line-height: 1.7;
word-break: break-word;
}
.bds_circle-doc-preview-modal {
background:
radial-gradient(circle at top right, rgba(0, 212, 125, .08), transparent 24%),
linear-gradient(180deg, rgba(17, 28, 42, .985), rgba(10, 18, 29, .985));
}
.bds_circle-doc-preview-shell {
min-height: 70vh;
padding: .6rem;
border-radius: calc(var(--bdsl-radius-xl) + 2px);
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.bds_circle-doc-preview-frame {
width: 100%;
min-height: calc(70vh - 1.2rem);
border: 0;
border-radius: calc(var(--bdsl-radius-lg) + 2px);
background: rgba(4, 10, 18, .92);
}
/* Header premium */
.bdsl_navbar {
height: 74px;
background:
radial-gradient(circle at left top, rgba(0, 212, 125, .16), transparent 24%),
linear-gradient(180deg, rgba(5, 12, 21, .92), rgba(7, 15, 25, .88));
border-bottom: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 48px rgba(0,0,0,.24);
overflow: hidden;
}
.bdsl_navbar::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(0,212,125,0), rgba(0,212,125,.6), rgba(77,184,255,.35), rgba(0,212,125,0));
pointer-events: none;
}
.bdsl_navbar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.08) 32%, rgba(0,212,125,.12) 45%, rgba(255,255,255,.04) 58%, transparent 74%);
transform: translateX(-130%);
animation: bdsl_shimmer 4.4s ease-in-out infinite;
pointer-events: none;
}
.bdsl_navbar.scrolled {
background:
radial-gradient(circle at left top, rgba(0, 212, 125, .12), transparent 22%),
linear-gradient(180deg, rgba(4, 10, 18, .97), rgba(6, 13, 22, .95));
}
.bdsl_navbar-inner {
min-height: 74px;
}
.bdsl_navbar-brand {
gap: .95rem;
}
.bdsl_navbar-brand-mark {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .78rem;
border-radius: 999px;
border: 1px solid rgba(0, 212, 125, .14);
background: linear-gradient(180deg, rgba(0, 212, 125, .14), rgba(0, 212, 125, .05));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0, 212, 125, .08);
}
.bdsl_navbar-brand-mark-dot {
width: .6rem;
height: .6rem;
border-radius: 999px;
background: radial-gradient(circle, #8dffd1 0%, #00d47d 58%, #00b368 100%);
box-shadow: 0 0 0 4px rgba(0, 212, 125, .12), 0 0 20px rgba(0, 212, 125, .45);
}
.bdsl_navbar-brand-mark-text {
font-size: var(--bdsl-text-xs);
font-weight: var(--bdsl-fw-bold);
letter-spacing: .18em;
color: var(--bdsl-brand-200);
}
.bdsl_navbar-brand-copy {
display: flex;
flex-direction: column;
gap: .05rem;
}
.bdsl_navbar-brand-kicker {
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(176, 194, 211, .72);
}
.bdsl_navbar-brand-text {
font-size: clamp(1.45rem, 1vw + 1rem, 1.9rem);
line-height: 1;
text-shadow: 0 10px 28px rgba(0,0,0,.28);
position: relative;
overflow: visible;
}
.bdsl_navbar-brand-text::after {
display: none;
}
.bdsl_navbar-status {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.4rem;
padding: .45rem .95rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.09);
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
color: var(--bdsl-text-secondary);
font-size: var(--bdsl-text-sm);
font-weight: var(--bdsl-fw-semibold);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.bdsl_navbar,
.bdsl_navbar-inner {
height: auto;
min-height: 68px;
}
.bdsl_navbar-brand-kicker {
display: none;
}
.bdsl_navbar-brand {
gap: .7rem;
}
.bdsl_navbar-brand-mark {
padding: .45rem .65rem;
}
.bdsl_navbar-brand-text {
font-size: 1.45rem;
}
.bdsl_navbar-status {
padding: .42rem .75rem;
font-size: 12px;
}
.bdsl_circle-wizard-stepper {
padding: .9rem;
}
.bdsl_circle-wizard-panel {
padding: 1rem;
}
.bdsl_circle-wizard-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.bdsl_circle-wizard-actions > .d-flex {
width: 100%;
}
.bdsl_circle-wizard-actions .bdsl_btn {
width: 100%;
}
.bdsl_circle-doc-card-head {
flex-direction: column;
}
.bds_circle-doc-preview-shell,
.bds_circle-doc-preview-frame {
min-height: 60vh;
}
}