/* Beyondless service visuals — combined scoped styles for 5 curated-service cards.
   Every selector (not just :root) is scoped to its .bl-sv-{name} wrapper class
   so no widget-internal class name (e.g. a mock nav button) can collide with the
   real site's own classes. See assets/service-visuals.js (English pages) or
   assets/service-visuals.es.js (Spanish pages) for the matching behavior + shared
   IntersectionObserver start/stop harness -- CSS has no user-facing text so one
   file serves both languages. */

/* ===== visual: calling ===== */
.bl-sv-calling {
    
    --bl-bg: #08090A;
    --bl-bg-secondary: #0D0F10;

    
    --bl-cyan: #00AFCF;
    --bl-cyan-bright: #22D3EE;
    --bl-cyan-hover: #17C5DF;
    --bl-cyan-dark: #07889E;
    --bl-cyan-tint: rgba(0, 175, 207, 0.12);

    
    --bl-white: #FFFFFF;
    --bl-secondary: #F7F7F8;
    --bl-elevated: #FAFAFA;
    --bl-border: #E7E9E9;
    --bl-border-strong: #D8DADD;
    --bl-ink: #161719;
    --bl-ink-secondary: #62666D;
    --bl-ink-muted: #92969D;

    
    --bl-success: #32D583;
    --bl-warning: #FDB022;
    --bl-error: #F87066;

    
    --r-md: 12px;   
    --r-xl: 20px;   
    --r-pill: 999px;

    
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.22);

    
    --ease-bl: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-ui: 220ms;      
    --dur-entrance: 560ms;

    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
.call-demo-card.bl-sv-calling {
    width: min(540px, 100%);
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float); 
    padding: 24px; 
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: card-enter var(--dur-entrance) var(--ease-bl) forwards;
  }
@keyframes card-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
.bl-sv-calling .chrome-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
.bl-sv-calling .traffic-lights { display: flex; gap: 6px; flex-shrink: 0; }
.bl-sv-calling .dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.bl-sv-calling .dot-error { background: var(--bl-error); }
.bl-sv-calling .dot-warning { background: var(--bl-warning); }
.bl-sv-calling .dot-success { background: var(--bl-success); }
.bl-sv-calling .chrome-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;      
    line-height: 18px;
    font-weight: 500;
    color: var(--bl-ink-secondary);
  }
.bl-sv-calling .chrome-title svg { color: var(--bl-ink-muted); flex-shrink: 0; }
.bl-sv-calling .chrome-badge {
    margin-left: auto;
    font-size: 12px;       
    line-height: 16px;
    font-weight: 500;
    color: var(--bl-cyan-dark);
    background: var(--bl-cyan-tint);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
.bl-sv-calling .call-panel {
    background: var(--bl-secondary);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-md);
    padding: 20px;
    margin-bottom: 16px; 
  }
.bl-sv-calling .caller-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
.bl-sv-calling .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
  }
.bl-sv-calling .avatar.small { width: 24px; height: 24px; font-size: 10px; }
.bl-sv-calling .avatar-human { background: #EDEEF0; color: var(--bl-ink-secondary); }
.bl-sv-calling .avatar-ai { background: var(--bl-cyan-tint); color: var(--bl-cyan-dark); }
.bl-sv-calling .avatar-ai svg { width: 13px; height: 13px; }
.bl-sv-calling .avatar.small svg { width: 11px; height: 11px; }
.bl-sv-calling .caller-meta { display: flex; flex-direction: column; gap: 2px; }
.bl-sv-calling .caller-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--bl-ink); }
.bl-sv-calling .caller-sub { font-size: 12px; line-height: 16px; color: var(--bl-ink-muted); }
.bl-sv-calling .call-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
.bl-sv-calling .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bl-cyan);
    animation: pulse 1.6s var(--ease-bl) infinite;
  }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 175, 207, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(0, 175, 207, 0); }
  }
.bl-sv-calling .live-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--bl-cyan-dark);
  }
.bl-sv-calling .call-timer {
    font-size: 12px;
    color: var(--bl-ink-muted);
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
  }
.bl-sv-calling .waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 26px;
  }
.bl-sv-calling .waveform span {
    flex: 1;
    height: 26px;
    background: var(--bl-ink-muted);
    opacity: 0.5;
    border-radius: 2px;
    transform-origin: center;
    animation-name: bar;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
@keyframes bar {
    0%, 100% { transform: scaleY(var(--min-scale, 0.22)); }
    50% { transform: scaleY(var(--max-scale, 0.85)); }
  }
.bl-sv-calling .transcript-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px; 
    transition: opacity var(--dur-ui) var(--ease-bl);
  }
@media (max-width: 480px) {
.bl-sv-calling .transcript-grid { grid-template-columns: 1fr; }
}
.bl-sv-calling .transcript-box {
    background: var(--bl-elevated);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-md);
    padding: 16px;
    min-height: 112px;
  }
.bl-sv-calling .agent-box { border-top: 2px solid var(--bl-cyan); }
.bl-sv-calling .transcript-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
.bl-sv-calling .transcript-name {
    font-size: 12px; 
    font-weight: 500;
    color: var(--bl-ink-secondary);
  }
.bl-sv-calling .transcript-text {
    margin: 0;
    font-size: 14px;   
    line-height: 20px;
    color: var(--bl-ink);
  }
.bl-sv-calling .cursor {
    display: inline-block;
    width: 2px;
    height: 13px;
    background: var(--bl-ink-muted);
    margin-left: 2px;
    vertical-align: -2px;
    opacity: 0;
  }
.bl-sv-calling .cursor.is-active { opacity: 1; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bl-sv-calling .typing-indicator { display: none; gap: 3px; align-items: center; height: 20px; }
.bl-sv-calling .typing-indicator.active { display: inline-flex; }
.bl-sv-calling .typing-indicator i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bl-cyan);
    animation: bounce 1s ease-in-out infinite;
  }
.bl-sv-calling .typing-indicator i:nth-child(2) { animation-delay: 0.15s; }
.bl-sv-calling .typing-indicator i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
  }
@media (prefers-reduced-motion: reduce) {
.bl-sv-calling *, .bl-sv-calling *::before, .bl-sv-calling *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
}

/* ===== visual: websites ===== */
.bl-sv-websites {
    
    --bl-bg: #08090A;
    --bl-bg-secondary: #0D0F10;

    
    --bl-cyan: #00AFCF;
    --bl-cyan-bright: #22D3EE;
    --bl-cyan-hover: #17C5DF;
    --bl-cyan-dark: #07889E;
    --bl-cyan-tint: rgba(0, 175, 207, 0.12);

    
    --bl-white: #FFFFFF;
    --bl-secondary: #F7F7F8;
    --bl-elevated: #FAFAFA;
    --bl-border: #E7E9E9;
    --bl-border-strong: #D8DADD;
    --bl-ink: #161719;
    --bl-ink-secondary: #62666D;
    --bl-ink-muted: #92969D;

    
    --bl-success: #32D583;
    --bl-warning: #FDB022;
    --bl-error: #F87066;

    
    --r-sm: 8px;    
    --r-md: 12px;   
    --r-xl: 20px;   
    --r-pill: 999px;

    
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.22);

    
    --ease-bl: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-ui: 220ms;      
    --dur-entrance: 560ms;

    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
.stage.bl-sv-websites {
    display: flex;
    justify-content: center;
    padding: 64px 24px;
  }
.bl-sv-websites .bw-scale {
    transform: scale(var(--bw-scale, 1));
    transform-origin: top center;
  }
.bl-sv-websites .browser-window {
    container-type: inline-size;
    container-name: bw;
    width: 640px;
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float); 
    padding: 24px; 
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation:
      card-enter var(--dur-entrance) var(--ease-bl) forwards,
      reflow-width 13s var(--ease-bl) 560ms infinite;
  }
.bl-sv-websites .browser-window.is-paused { animation-play-state: paused; }
@keyframes card-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
@keyframes reflow-width {
    0%, 20%   { width: 640px; }
    32%, 48%  { width: 460px; }
    60%, 80%  { width: 320px; }
    92%, 100% { width: 640px; }
  }
.bl-sv-websites .chrome-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
.bl-sv-websites .traffic-lights { display: flex; gap: 6px; flex-shrink: 0; }
.bl-sv-websites .dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.bl-sv-websites .dot-error { background: var(--bl-error); }
.bl-sv-websites .dot-warning { background: var(--bl-warning); }
.bl-sv-websites .dot-success { background: var(--bl-success); }
.bl-sv-websites .mode-readout {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;      
    line-height: 16px;
    font-weight: 500;
    color: var(--bl-ink-secondary);
    min-width: 0;
  }
.bl-sv-websites .mode-readout svg { color: var(--bl-ink-muted); flex-shrink: 0; }
.bl-sv-websites .mode-readout .mode-icon { display: none; }
.bl-sv-websites .mode-readout .mode-px {
    color: var(--bl-ink-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
  }
.bl-sv-websites .mode-readout .mode-name { white-space: nowrap; }
.bl-sv-websites .chrome-badge {
    margin-left: auto;
    font-size: 12px;       
    line-height: 16px;
    font-weight: 500;
    color: var(--bl-cyan-dark);
    background: var(--bl-cyan-tint);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    flex-shrink: 0;
  }
.bl-sv-websites .address-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bl-secondary);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-pill);
    padding: 7px 12px;
    margin-bottom: 16px; 
  }
.bl-sv-websites .address-bar svg { color: var(--bl-ink-muted); flex-shrink: 0; }
.bl-sv-websites .address-bar .url {
    font-size: 12px;
    color: var(--bl-ink-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
.bl-sv-websites .address-bar .refresh { margin-left: auto; flex-shrink: 0; }
.bl-sv-websites .page-canvas {
    background: var(--bl-elevated);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-md);
    padding: 16px;
    overflow: hidden;
  }
.bl-sv-websites .site-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
  }
.bl-sv-websites .nav-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bl-ink);
    flex-shrink: 0;
  }
.bl-sv-websites .nav-brand-mark {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bl-cyan-tint);
    color: var(--bl-cyan-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.bl-sv-websites .nav-brand-mark svg { width: 10px; height: 10px; }
.bl-sv-websites .nav-links {
    display: flex;
    gap: 14px;
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
  }
.bl-sv-websites .nav-links a {
    font-size: 13px; 
    font-weight: 500;
    color: var(--bl-ink-secondary);
    white-space: nowrap;
  }
.bl-sv-websites .nav-cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--bl-white);
    background: var(--bl-cyan);
    border: none;
    border-radius: var(--r-pill);
    padding: 7px 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
.bl-sv-websites .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 28px;
    height: 28px;
    margin-left: auto;
    background: var(--bl-secondary);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-sm);
    padding: 0;
    flex-shrink: 0;
    cursor: default;
  }
.bl-sv-websites .nav-hamburger span {
    display: block;
    width: 12px;
    height: 1.5px;
    margin: 0 auto;
    background: var(--bl-ink-secondary);
    border-radius: 1px;
  }
.bl-sv-websites .hero {
    margin-bottom: 20px;
  }
.bl-sv-websites .hero-eyebrow {
    margin: 0 0 6px;
    font-size: 12px; 
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--bl-cyan-dark);
  }
.bl-sv-websites .hero .hero-title {
    margin: 0 0 8px;
    font-size: 21px;
    line-height: 26px;
    font-weight: 600;
    color: var(--bl-ink);
    letter-spacing: -0.01em;
  }
.bl-sv-websites .hero p {
    margin: 0 0 14px;
    font-size: 14px;  
    line-height: 20px;
    color: var(--bl-ink-secondary);
    max-width: 40ch;
  }
.bl-sv-websites .hero-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--bl-white);
    background: var(--bl-cyan);
    border: none;
    border-radius: var(--r-pill);
    padding: 10px 18px;
  }
.bl-sv-websites .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px; 
  }
.bl-sv-websites .service-card {
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-md);
    padding: 14px;
    min-width: 0;
  }
.bl-sv-websites .service-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bl-cyan-tint);
    color: var(--bl-cyan-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
.bl-sv-websites .service-icon svg { width: 13px; height: 13px; }
.bl-sv-websites .service-card h3 {
    margin: 0 0 3px;
    font-size: 13px; 
    line-height: 18px;
    font-weight: 600;
    color: var(--bl-ink);
  }
.bl-sv-websites .service-card span {
    font-size: 12px; 
    color: var(--bl-ink-muted);
  }
.bl-sv-websites .booking-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-top: 2px solid var(--bl-cyan);
    border-radius: var(--r-md);
    padding: 14px 16px;
  }
.bl-sv-websites .booking-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-sv-websites .booking-copy strong {
    font-size: 13px; 
    font-weight: 600;
    color: var(--bl-ink);
  }
.bl-sv-websites .booking-copy small {
    font-size: 12px; 
    color: var(--bl-ink-muted);
  }
.bl-sv-websites .booking-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--bl-white);
    background: var(--bl-cyan);
    border: none;
    border-radius: var(--r-pill);
    padding: 9px 16px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: width var(--dur-ui) var(--ease-bl);
  }
@container bw (max-width: 500px) {
.bl-sv-websites .services-grid { grid-template-columns: repeat(2, 1fr); }
.bl-sv-websites .nav-links a:nth-child(n+3) { display: none; }
}
@container bw (max-width: 360px) {
.bl-sv-websites .services-grid { grid-template-columns: 1fr; }
.bl-sv-websites .chrome-badge { display: none; }
.bl-sv-websites .nav-links { display: none; }
.bl-sv-websites .nav-cta { display: none; }
.bl-sv-websites .nav-hamburger { display: flex; }
.bl-sv-websites .booking-cta { flex-direction: column; align-items: stretch; }
.bl-sv-websites .booking-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.bl-sv-websites *, .bl-sv-websites *::before, .bl-sv-websites *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
.bl-sv-websites .browser-window { animation-name: card-enter; width: 640px; }
}
.bl-sv-websites { padding: 0 !important; }

/* ===== visual: ecommerce ===== */
.bl-sv-ecommerce {
    
    --bl-bg: #08090A;
    --bl-bg-secondary: #0D0F10;

    
    --bl-cyan: #00AFCF;
    --bl-cyan-bright: #22D3EE;
    --bl-cyan-hover: #17C5DF;
    --bl-cyan-dark: #07889E;
    --bl-cyan-tint: rgba(0, 175, 207, 0.12);

    
    --bl-white: #FFFFFF;
    --bl-secondary: #F7F7F8;
    --bl-elevated: #FAFAFA;
    --bl-border: #E7E9E9;
    --bl-border-strong: #D8DADD;
    --bl-ink: #161719;
    --bl-ink-secondary: #62666D;
    --bl-ink-muted: #92969D;

    
    --bl-success: #32D583;
    --bl-warning: #FDB022;
    --bl-error: #F87066;

    
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.22);

    
    --ease-bl: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bl-mirror: cubic-bezier(0.64, 0, 0.78, 0);
    --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-ui: 220ms;      
    --dur-entrance: 560ms;

    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
.shop-card.bl-sv-ecommerce {
    width: min(540px, 100%);
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float); 
    padding: 24px; 
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: card-enter var(--dur-entrance) var(--ease-bl) forwards;
  }
@keyframes card-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
.bl-sv-ecommerce .chrome-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
.bl-sv-ecommerce .traffic-lights { display: flex; gap: 6px; flex-shrink: 0; }
.bl-sv-ecommerce .dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.bl-sv-ecommerce .dot-error { background: var(--bl-error); }
.bl-sv-ecommerce .dot-warning { background: var(--bl-warning); }
.bl-sv-ecommerce .dot-success { background: var(--bl-success); }
.bl-sv-ecommerce .chrome-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;      
    line-height: 18px;
    font-weight: 500;
    color: var(--bl-ink-secondary);
  }
.bl-sv-ecommerce .chrome-title svg { color: var(--bl-ink-muted); flex-shrink: 0; }
.bl-sv-ecommerce .chrome-badge {
    margin-left: auto;
    font-size: 12px;       
    line-height: 16px;
    font-weight: 500;
    color: var(--bl-cyan-dark);
    background: var(--bl-cyan-tint);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
.bl-sv-ecommerce .shop-panel {
    position: relative;
    overflow: hidden; 
    background: var(--bl-secondary);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-md);
    padding: 20px;
  }
.bl-sv-ecommerce .shop-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }
.bl-sv-ecommerce .shop-meta .label {
    font-size: 12px; 
    font-weight: 500;
    color: var(--bl-ink-muted);
  }
.bl-sv-ecommerce .cart-icon-wrap {
    margin-left: auto;
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-radius: 50%;
    flex-shrink: 0;
  }
.bl-sv-ecommerce .cart-icon-wrap svg { color: var(--bl-ink-secondary); }
.bl-sv-ecommerce .cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: var(--r-pill);
    background: var(--bl-ink);
    color: var(--bl-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: transform 320ms var(--ease-overshoot), opacity 200ms var(--ease-bl);
  }
.bl-sv-ecommerce .cart-badge.is-bumped { opacity: 1; transform: scale(1); }
.bl-sv-ecommerce .cart-badge.is-closing { transition: transform var(--dur-ui) var(--ease-bl-mirror), opacity var(--dur-ui) ease; }
.bl-sv-ecommerce .product-view {
    transition: transform var(--dur-entrance) var(--ease-bl), opacity var(--dur-entrance) var(--ease-bl);
  }
.bl-sv-ecommerce .product-view.is-covered {
    transform: scale(0.97);
    opacity: 0.55;
  }
.bl-sv-ecommerce .product-view.is-covered.is-closing {
    transition: transform 450ms var(--ease-bl-mirror), opacity 450ms var(--ease-bl-mirror);
  }
.bl-sv-ecommerce .gift-card-tile {
    background: linear-gradient(135deg, var(--bl-cyan-tint), var(--bl-elevated) 70%);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-lg);
    padding: 18px;
    margin-bottom: 14px;
  }
.bl-sv-ecommerce .gift-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
  }
.bl-sv-ecommerce .gift-card-top svg { color: var(--bl-cyan-dark); flex-shrink: 0; }
.bl-sv-ecommerce .gift-card-top span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bl-cyan-dark);
  }
.bl-sv-ecommerce .gift-card-brand {
    font-size: 14px;
    font-weight: 600;
    color: var(--bl-ink);
    margin-bottom: 2px;
  }
.bl-sv-ecommerce .gift-card-sub {
    font-size: 12px;
    color: var(--bl-ink-muted);
    margin-bottom: 16px;
  }
.bl-sv-ecommerce .gift-card-amount {
    font-size: 30px;
    font-weight: 700;
    color: var(--bl-ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
.bl-sv-ecommerce .amount-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }
.bl-sv-ecommerce .amount-pill {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    font-size: 13px; 
    font-weight: 600;
    border-radius: var(--r-pill);
    background: var(--bl-white);
    color: var(--bl-ink-secondary);
    border: 1px solid var(--bl-border);
  }
.bl-sv-ecommerce .amount-pill.is-selected {
    background: var(--bl-cyan);
    color: var(--bl-white);
    border-color: var(--bl-cyan);
  }
.bl-sv-ecommerce .add-to-cart-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--bl-white);
    background: var(--bl-ink);
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 0;
    transition: transform 140ms var(--ease-bl);
  }
.bl-sv-ecommerce .add-to-cart-btn.is-pressed { transform: scale(0.97); }
.bl-sv-ecommerce .checkout-sheet {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bl-white);
    border-top: 1px solid var(--bl-border);
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: 16px 20px 20px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--dur-entrance) var(--ease-bl), opacity var(--dur-entrance) var(--ease-bl);
  }
.bl-sv-ecommerce .checkout-sheet.is-open { transform: translateY(0%); opacity: 1; }
.bl-sv-ecommerce .checkout-sheet.is-closing {
    transition: transform 450ms var(--ease-bl-mirror), opacity 450ms var(--ease-bl-mirror);
  }
.bl-sv-ecommerce .sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--bl-border-strong);
    margin: 0 auto 16px;
    flex-shrink: 0;
  }
.bl-sv-ecommerce .sheet-body { position: relative; flex: 1; }
.bl-sv-ecommerce .sheet-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-ui) var(--ease-bl);
    pointer-events: none;
  }
.bl-sv-ecommerce .sheet-face.is-visible { opacity: 1; pointer-events: auto; }
.bl-sv-ecommerce .sheet-face.is-closing { transition: opacity var(--dur-ui) var(--ease-bl-mirror); }
.bl-sv-ecommerce .sheet-checkout-face { gap: 28px; }
.bl-sv-ecommerce .order-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
  }
.bl-sv-ecommerce .order-line .order-desc { font-size: 14px; color: var(--bl-ink-secondary); }
.bl-sv-ecommerce .order-line .order-amount {
    font-size: 16px; 
    font-weight: 700;
    color: var(--bl-ink);
    font-variant-numeric: tabular-nums;
  }
.bl-sv-ecommerce .pay-btn {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--bl-white);
    background: var(--bl-cyan);
    border: none;
    border-radius: var(--r-pill);
    padding: 12px 0;
    transition: transform 140ms var(--ease-bl);
  }
.bl-sv-ecommerce .pay-btn.is-pressed { transform: scale(0.97); }
.bl-sv-ecommerce .pay-btn-label, .bl-sv-ecommerce .pay-btn-loading {
    transition: opacity 150ms var(--ease-bl);
  }
.bl-sv-ecommerce .pay-btn-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
  }
.bl-sv-ecommerce .pay-btn.is-loading .pay-btn-label { opacity: 0; }
.bl-sv-ecommerce .pay-btn.is-loading .pay-btn-loading { opacity: 1; }
.bl-sv-ecommerce .pay-btn-loading i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bl-white);
    animation: bounce 1s ease-in-out infinite;
  }
.bl-sv-ecommerce .pay-btn-loading i:nth-child(2) { animation-delay: 0.15s; }
.bl-sv-ecommerce .pay-btn-loading i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
  }
.bl-sv-ecommerce .check-visual { width: 56px; height: 56px; margin-bottom: 14px; }
.bl-sv-ecommerce .check-circle {
    fill: var(--bl-cyan);
    transform-origin: center;
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--dur-ui) var(--ease-bl), opacity var(--dur-ui) var(--ease-bl);
  }
.bl-sv-ecommerce .sheet-face.is-visible .check-circle { transform: scale(1); opacity: 1; }
.bl-sv-ecommerce .sheet-face.is-closing .check-circle {
    transition: transform var(--dur-ui) var(--ease-bl-mirror), opacity var(--dur-ui) var(--ease-bl-mirror);
  }
.bl-sv-ecommerce .check-mark {
    fill: none;
    stroke: var(--bl-white);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 500ms var(--ease-bl) 90ms;
  }
.bl-sv-ecommerce .sheet-face.is-visible .check-mark { stroke-dashoffset: 0; }
.bl-sv-ecommerce .sheet-face.is-closing .check-mark {
    transition: stroke-dashoffset 350ms var(--ease-bl-mirror);
  }
.bl-sv-ecommerce .confirm-text {
    margin: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: transform var(--dur-ui) var(--ease-bl) 150ms, opacity var(--dur-ui) var(--ease-bl) 150ms;
  }
.bl-sv-ecommerce .sheet-face.is-visible .confirm-text { opacity: 1; transform: translateY(0); }
.bl-sv-ecommerce .sheet-face.is-closing .confirm-text {
    transition: transform 200ms var(--ease-bl-mirror), opacity 200ms var(--ease-bl-mirror);
  }
.bl-sv-ecommerce .confirm-text strong {
    display: block;
    font-size: 14px; 
    font-weight: 600;
    color: var(--bl-ink);
    margin-bottom: 3px;
  }
.bl-sv-ecommerce .confirm-text span {
    font-size: 12px; 
    color: var(--bl-ink-muted);
  }
.bl-sv-ecommerce .tap-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px; 
    border-radius: 50%;
    background: rgba(22, 23, 25, 0.62);
    opacity: 0;
    transform: translate(-40px, 40px) scale(0.7);
    transition: transform var(--dur-ui) var(--ease-move), opacity var(--dur-ui) var(--ease-bl);
    pointer-events: none;
    z-index: 2;
  }
.bl-sv-ecommerce .tap-indicator.is-visible { opacity: 1; }
.bl-sv-ecommerce .tap-ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: rgba(22, 23, 25, 0.28);
    opacity: 0;
    transform: translate(-40px, 40px) scale(1);
    pointer-events: none;
    z-index: 1;
  }
.bl-sv-ecommerce .tap-ripple.is-armed {
    transition: none;
    opacity: 0.6;
    transform: translate(var(--ripple-x, 0), var(--ripple-y, 0)) scale(1);
  }
.bl-sv-ecommerce .tap-ripple.is-rippling {
    transition: transform 380ms var(--ease-move), opacity 380ms var(--ease-move);
    transform: translate(var(--ripple-x, 0), var(--ripple-y, 0)) scale(2.4);
    opacity: 0;
  }
@media (prefers-reduced-motion: reduce) {
.bl-sv-ecommerce *, .bl-sv-ecommerce *::before, .bl-sv-ecommerce *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
.bl-sv-ecommerce .tap-indicator, .bl-sv-ecommerce .tap-ripple { display: none; }
}

/* ===== visual: automation ===== */
.bl-sv-automation {
    
    --bl-bg: #08090A;
    --bl-bg-secondary: #0D0F10;

    
    --bl-cyan: #00AFCF;
    --bl-cyan-bright: #22D3EE;
    --bl-cyan-hover: #17C5DF;
    --bl-cyan-dark: #07889E;
    --bl-cyan-tint: rgba(0, 175, 207, 0.12);

    
    --bl-white: #FFFFFF;
    --bl-secondary: #F7F7F8;
    --bl-elevated: #FAFAFA;
    --bl-border: #E7E9E9;
    --bl-border-strong: #D8DADD;
    --bl-ink: #161719;
    --bl-ink-secondary: #62666D;
    --bl-ink-muted: #92969D;

    
    --bl-success: #32D583;
    --bl-warning: #FDB022;
    --bl-error: #F87066;

    
    --r-sm: 8px;
    --r-md: 12px;
    --r-xl: 20px;
    --r-pill: 999px;

    
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.22);

    
    --ease-bl: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bl-mirror: cubic-bezier(0.64, 0, 0.78, 0); 
    --dur-ui: 220ms;
    --dur-entrance: 560ms;

    
    --n8n-hex: #EA4B71;
    --whatsapp-hex: #25D366;
    --whatsapp-bubble: #D9FDD3;   
    --whatsapp-tick: #53BDEB;     
    --gcal-hex: #4285F4;
    --gcal-tint: #E8F0FE;         

    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
.auto-card.bl-sv-automation {
    width: min(540px, 100%);
    background: var(--bl-white);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float); 
    padding: 24px; 
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: card-enter var(--dur-entrance) var(--ease-bl) forwards;
  }
@keyframes card-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
.bl-sv-automation .chrome-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
.bl-sv-automation .traffic-lights { display: flex; gap: 6px; flex-shrink: 0; }
.bl-sv-automation .dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.bl-sv-automation .dot-error { background: var(--bl-error); }
.bl-sv-automation .dot-warning { background: var(--bl-warning); }
.bl-sv-automation .dot-success { background: var(--bl-success); }
.bl-sv-automation .chrome-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;      
    line-height: 18px;
    font-weight: 500;
    color: var(--bl-ink-secondary);
  }
.bl-sv-automation .chrome-title svg { color: var(--bl-ink-muted); flex-shrink: 0; }
.bl-sv-automation .chrome-badge {
    margin-left: auto;
    font-size: 12px;       
    line-height: 16px;
    font-weight: 500;
    color: var(--bl-cyan-dark);
    background: var(--bl-cyan-tint);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
.bl-sv-automation .chain-panel {
    background: var(--bl-secondary);
    border: 1px solid var(--bl-border);
    border-radius: var(--r-md);
    padding: 18px 20px 20px;
  }
.bl-sv-automation .n8n-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bl-ink-muted);
  }
.bl-sv-automation .n8n-tag svg { flex-shrink: 0; }
.bl-sv-automation .chain { position: relative; }
.bl-sv-automation .chain-line {
    position: absolute;
    left: 17px; 
    width: 2px;
    background: var(--bl-border-strong);
  }
.bl-sv-automation .chain-line-fill {
    position: absolute;
    left: 17px;
    width: 2px;
    background: var(--bl-cyan);
    height: 0px;
    transition: height 500ms var(--ease-bl);
  }
.bl-sv-automation .chain-line-fill.is-retracting { transition: height 250ms var(--ease-bl-mirror); }
.bl-sv-automation .chain-pulse {
    position: absolute;
    left: 17px;
    top: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--bl-cyan-bright);
    box-shadow: 0 0 6px 2px rgba(0, 175, 207, 0.55);
    opacity: 0;
    transform: translateY(0px);
    transition: transform 600ms var(--ease-bl), opacity var(--dur-ui) var(--ease-bl);
  }
.bl-sv-automation .chain-pulse.is-visible { opacity: 1; }
.bl-sv-automation .chain-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 22px;
  }
.bl-sv-automation .chain-node:last-child { padding-bottom: 0; }
.bl-sv-automation .node-icon {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-secondary);
    border: 1px solid var(--bl-border);
    z-index: 1;
    transition: background var(--dur-ui) var(--ease-bl), border-color var(--dur-ui) var(--ease-bl);
  }
.bl-sv-automation .chain-node.is-trigger .node-icon {
    background: var(--bl-ink);
    border-color: var(--bl-ink);
  }
.bl-sv-automation .chain-node.is-trigger .node-icon-idle svg { color: var(--bl-white); }
.bl-sv-automation .node-icon-idle svg { color: var(--bl-ink-muted); }
.bl-sv-automation .node-icon-idle {
    display: flex;
    transition: opacity 150ms var(--ease-bl);
  }
.bl-sv-automation .node-icon-check {
    position: absolute;
    opacity: 0;
    color: var(--bl-cyan-dark);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: opacity 150ms var(--ease-bl), stroke-dashoffset 400ms var(--ease-bl) 90ms;
  }
.bl-sv-automation .chain-node.is-lit .node-icon {
    background: var(--bl-cyan-tint);
    border-color: var(--bl-cyan);
  }
.bl-sv-automation .chain-node.is-lit .node-icon-idle { opacity: 0; }
.bl-sv-automation .chain-node.is-lit .node-icon-check { opacity: 1; stroke-dashoffset: 0; }
.bl-sv-automation .chain-node.is-retracting .node-icon-check {
    transition: opacity 150ms var(--ease-bl-mirror), stroke-dashoffset 250ms var(--ease-bl-mirror);
  }
.bl-sv-automation .node-content { flex: 1; min-width: 0; padding-top: 6px; }
.bl-sv-automation .node-label {
    font-size: 13px; 
    font-weight: 600;
    color: var(--bl-ink-muted);
    transition: color var(--dur-ui) var(--ease-bl);
  }
.bl-sv-automation .chain-node.is-lit .node-label { color: var(--bl-ink); }
.bl-sv-automation .node-subtag {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bl-ink-muted);
  }
.bl-sv-automation .node-subtag svg { flex-shrink: 0; opacity: 0.8; }
.bl-sv-automation .node-chip-wrap {
    opacity: 0.42;
    filter: grayscale(1);
    transition: opacity var(--dur-ui) var(--ease-bl), filter var(--dur-ui) var(--ease-bl);
  }
.bl-sv-automation .chain-node.is-lit .node-chip-wrap { opacity: 1; filter: none; }
.bl-sv-automation .chain-node.is-retracting .node-chip-wrap {
    transition: opacity 200ms var(--ease-bl-mirror), filter 200ms var(--ease-bl-mirror);
  }
.bl-sv-automation .gcal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gcal-tint);
    border-left: 4px solid var(--gcal-hex);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 7px 12px 7px 10px;
    font-size: 13px; 
    font-weight: 500;
    color: var(--bl-ink);
  }
.bl-sv-automation .gcal-chip svg { flex-shrink: 0; }
.bl-sv-automation .wa-bubble {
    position: relative;
    display: inline-block;
    max-width: 320px;
    background: var(--whatsapp-bubble);
    border-radius: var(--r-sm) 2px var(--r-sm) var(--r-sm);
    padding: 8px 11px 6px;
    margin-top: 2px;
  }
.bl-sv-automation .wa-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    right: -7px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-left-color: var(--whatsapp-bubble);
    border-top: 0;
    border-right: 0;
  }
.bl-sv-automation .wa-text {
    font-size: 13px; 
    line-height: 18px;
    color: #111B21; 
  }
.bl-sv-automation .wa-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 2px;
  }
.bl-sv-automation .wa-time { font-size: 10px; color: rgba(17, 27, 33, 0.45); }
.bl-sv-automation .wa-ticks { color: var(--whatsapp-tick); flex-shrink: 0; }
@media (max-width: 480px) {
.bl-sv-automation .wa-bubble { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.bl-sv-automation *, .bl-sv-automation *::before, .bl-sv-automation *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
.bl-sv-automation .chain-pulse { display: none; }
}

/* ===== visual: growth ===== */
.bl-sv-growth {
    
    --bl-bg: #08090A;
    --bl-bg-secondary: #0D0F10;

    
    --surf-1: #111315; 
    --surf-2: #151719; 
    --surf-3: #1A1D1F; 
    --border-soft: #24272A; 
    --border-hard: #181E20; 
    --text-primary: #F7F8F8;
    --text-secondary: #A1A7AE;
    --text-muted: #6F767E;

    
    --bl-cyan: #00AFCF;
    --bl-cyan-bright: #22D3EE;
    --bl-cyan-hover: #17C5DF;
    --bl-cyan-dark: #07889E;
    --bl-cyan-tint: rgba(0, 175, 207, 0.12);

    
    --bl-success: #32D583;
    --bl-warning: #FDB022;
    --bl-error: #F87066;

    
    --r-sm: 8px;
    --r-md: 12px;
    --r-xl: 20px;
    --r-pill: 999px;

    
    --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.22);

    
    --ease-bl: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-ui: 220ms;
    --dur-entrance: 560ms;

    font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
.dash-window.bl-sv-growth {
    
    width: min(800px, 100%);
    background: var(--bl-bg-secondary);
    border: 1px solid var(--border-hard);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float); 
    overflow: hidden; 
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: card-enter var(--dur-entrance) var(--ease-bl) forwards;
  }
@keyframes card-enter {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
.bl-sv-growth .dash-chrome {
    display: flex;
    align-items: center;
    padding: 14px 16px;
  }
.bl-sv-growth .traffic-lights { display: flex; gap: 6px; flex-shrink: 0; }
.bl-sv-growth .dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
.bl-sv-growth .dot-error { background: var(--bl-error); }
.bl-sv-growth .dot-warning { background: var(--bl-warning); }
.bl-sv-growth .dot-success { background: var(--bl-success); }
.bl-sv-growth .dash-body {
    display: flex;
    align-items: stretch;
  }
.bl-sv-growth .sidebar {
    width: 188px;
    flex-shrink: 0;
    background: var(--surf-1);
    border-right: 1px solid var(--border-soft);
    padding: 4px 14px 18px;
  }
.dash-window.bl-sv-growth .sidebar .brand-mark {
    display: block;
    height: 22px;
    width: auto;
    margin: 4px 0 18px 2px;
    filter: brightness(0) invert(1); 
  }
.bl-sv-growth .workspace-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    margin-bottom: 16px;
    background: var(--surf-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    cursor: default;
    transition: background var(--dur-ui) var(--ease-bl), border-color var(--dur-ui) var(--ease-bl);
  }
.bl-sv-growth .workspace-switcher:hover {
    background: #202325;
    border-color: #2c3033;
  }
.bl-sv-growth .ws-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bl-cyan-tint);
    color: var(--bl-cyan-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.bl-sv-growth .ws-avatar svg { width: 11px; height: 11px; }
.bl-sv-growth .ws-name {
    font-size: 12px; 
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: left;
  }
.bl-sv-growth .ws-chevron { color: var(--text-muted); flex-shrink: 0; }
.bl-sv-growth .side-nav { display: flex; flex-direction: column; gap: 1px; }
.bl-sv-growth .side-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    font-size: 12px; 
    font-weight: 500;
    color: var(--text-muted);
    transition: background var(--dur-ui) var(--ease-bl), color var(--dur-ui) var(--ease-bl);
  }
.bl-sv-growth .side-nav-item svg { flex-shrink: 0; opacity: 0.85; }
.bl-sv-growth .side-nav-item:hover { background: var(--surf-3); color: var(--text-secondary); }
.bl-sv-growth .side-nav-item.is-active {
    background: var(--surf-3);
    color: var(--text-primary);
  }
@media (max-width: 640px) {
.bl-sv-growth .sidebar { display: none; }
}
.bl-sv-growth .main-panel {
    flex: 1;
    min-width: 0;
    background: var(--surf-2);
    padding: 6px 24px 22px;
  }
.bl-sv-growth .tab-row {
    display: flex;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 20px;
  }
.bl-sv-growth .tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 12px 1px 11px;
    font-size: 13px; 
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color var(--dur-ui) var(--ease-bl);
  }
.bl-sv-growth .tab:hover { color: var(--text-secondary); }
.bl-sv-growth .tab.is-active {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom-color: var(--bl-cyan); 
    padding-top: 11px;
  }
.bl-sv-growth .tab-stat {
    display: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--bl-cyan-bright);
    font-variant-numeric: tabular-nums;
  }
.bl-sv-growth .tab.is-active .tab-stat { display: inline; }
.bl-sv-growth .tab-content { position: relative; }
.bl-sv-growth .tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 300ms var(--ease-bl), transform 300ms var(--ease-bl);
  }
.bl-sv-growth .tab-panel.is-active { display: block; opacity: 1; transform: translateY(0); }
.bl-sv-growth .chart-card {
    background: var(--surf-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 16px 16px 10px;
    margin-bottom: 16px;
  }
.bl-sv-growth .chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bl-sv-growth .chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.bl-sv-growth .chart-stop-a { stop-color: var(--bl-cyan); stop-opacity: 0.26; }
.bl-sv-growth .chart-stop-b { stop-color: var(--bl-cyan); stop-opacity: 0; }
.bl-sv-growth .chart-area { fill: url(#chartFill); stroke: none; }
.bl-sv-growth .chart-line { fill: none; stroke: var(--bl-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bl-sv-growth .chart-endpoint { fill: var(--bl-cyan-bright); }
.bl-sv-growth .chart-endpoint-halo {
    fill: none;
    stroke: var(--bl-cyan);
    stroke-width: 1.5;
    opacity: 0.5;
    animation: pulse 1.8s var(--ease-bl) infinite; 
  }
@keyframes pulse {
    0%, 100% { r: 5; opacity: 0.55; }
    50% { r: 9; opacity: 0; }
  }
.bl-sv-growth .stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
.bl-sv-growth .stat-tile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--surf-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 13px 14px;
    min-width: 0;
  }
.bl-sv-growth .stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.bl-sv-growth .stat-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
.bl-sv-growth .stat-delta {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted); 
  }
.bl-sv-growth .stat-delta.is-good { color: var(--bl-cyan-bright); }
.bl-sv-growth .stat-delta.is-bad { color: var(--bl-error); }
.bl-sv-growth .keyword-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
.bl-sv-growth .keyword-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surf-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 11px 14px;
  }
.bl-sv-growth .keyword-term {
    font-size: 13px; 
    font-weight: 500;
    color: var(--text-secondary);
  }
.bl-sv-growth .keyword-rank {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
.bl-sv-growth .rank-from { color: var(--text-muted); font-weight: 500; }
.bl-sv-growth .rank-arrow { color: var(--text-muted); }
.bl-sv-growth .rank-to { color: var(--bl-cyan-bright); }
@media (max-width: 480px) {
.bl-sv-growth .stat-row { grid-template-columns: 1fr; }
.bl-sv-growth .main-panel { padding: 6px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
.bl-sv-growth *, .bl-sv-growth *::before, .bl-sv-growth *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
}