/* ============================================================
   carousel-shared.css
   Unified stylesheet for ALL pages:
     • DataScience/Index  (filter carousel)
     • Home/Workspaces    (workspace browser)
     • Home/Workspace     (report browser)
     • Bollinger/Stock pages
   ============================================================ */

/* ─── TOKENS ─────────────────────────────────────────────────── */

:root {
    --cyan:      #00d4ff;
    --green:     #00ff88;
    --red:       #ff4444;
    --muted:     rgba(160, 196, 228, 0.45);
    --text:      #dde4f0;
    --bg:        #050a15;
    --bg-panel:  #090c18;
    --border:    rgba(0, 212, 255, 0.10);
    --border-hi: rgba(0, 212, 255, 0.28);
    --font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ─── RESET / BODY ───────────────────────────────────────────── */

body {
    background: radial-gradient(ellipse at center top,
        #1a3a5c 0%, #0d1f2f 50%, #050a15 100%) !important;
    overflow: hidden !important;
    height: 100vh !important;
}

/* ─── NAVBAR ─────────────────────────────────────────────────── */

header nav.navbar {
    background:      rgba(5, 10, 21, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom:   1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow:      0 2px 20px rgba(0, 0, 0, 0.5) !important;
    margin-bottom:   0 !important;
}

header nav .navbar-brand,
header nav .nav-link {
    color: rgba(160, 196, 228, 0.85) !important;
}

header nav .navbar-brand:hover,
header nav .nav-link:hover {
    color: #00d4ff !important;
}

/* ─── DROPDOWN ───────────────────────────────────────────────── */

.dropdown-menu {
    background-color: rgba(5, 10, 21, 0.95) !important;
    border:           1px solid rgba(0, 212, 255, 0.15) !important;
    backdrop-filter:  blur(12px);
    box-shadow:       0 8px 32px rgba(0, 0, 0, 0.5) !important;
    z-index:          1050 !important;
}

.dropdown-item {
    color:          rgba(160, 196, 228, 0.85) !important;
    font-size:      13px;
    letter-spacing: 0.04em;
}

.dropdown-item:hover {
    background-color: rgba(0, 212, 255, 0.08) !important;
    color:            #00d4ff !important;
}

.dropdown-divider {
    border-color: rgba(0, 212, 255, 0.1) !important;
}

.navbar .dropdown-toggle-split {
    color:        rgba(160, 196, 228, 0.85) !important;
    padding-left: 2px !important;
}

/* ─── BOOTSTRAP CONTAINER OVERRIDE ──────────────────────────── */

.container:has(.page-container),
.container:has(.page-container) > main {
    max-width: 100% !important;
    width:     100% !important;
    padding:   0 !important;
    margin:    0 !important;
}

/* ─── PAGE CONTAINER ─────────────────────────────────────────── */

.page-container {
    width:           100%;
    height:          calc(100vh - 57px);
    position:        relative;
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: flex-start;
    padding-top:     8vh;
    box-sizing:      border-box;
    background:      radial-gradient(ellipse at center top,
                         #1a3a5c 0%, #0d1f2f 50%, #050a15 100%);
    transition:      filter 0.5s ease-in-out;
}

/* ─── BG GRID ────────────────────────────────────────────────── */

.bg-grid {
    position:         absolute;
    width:            150%;
    height:           150%;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.02) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.02) 2px, transparent 2px);
    background-size:  60px 60px;
    animation:        gridFloat 30s linear infinite;
    transform:        rotate(-15deg);
    pointer-events:   none;
}

@keyframes gridFloat {
    0%   { transform: translate(-60px, -60px) rotate(-15deg); }
    100% { transform: translate(0, 0) rotate(-15deg); }
}

/* ─── DECORATIVE ORBS ────────────────────────────────────────── */

.orb {
    position:       absolute;
    border-radius:  50%;
    pointer-events: none;
    animation:      orbFloat 8s ease-in-out infinite;
}

.orb-1 {
    width:  300px; height: 300px;
    background:      radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
    top: -100px; right: -80px;
}

.orb-2 {
    width:  200px; height: 200px;
    background:      radial-gradient(circle, rgba(74, 158, 255, 0.05) 0%, transparent 70%);
    bottom: -60px; left: -50px;
    animation-delay: -4s;
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-20px); }
}

/* ─── CAROUSEL CONTAINER ─────────────────────────────────────── */

.carousel-container {
    position:    relative;
    width:       400px;
    height:      400px;
    max-width:   88vw;
    max-height:  88vw;
    margin:      8px auto 0;
    flex-shrink: 0;
}

/* ─── RINGS ──────────────────────────────────────────────────── */

.carousel-ring {
    position:      absolute;
    width:         100%;
    height:        100%;
    border:        3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(0, 212, 255, 0.3),
        inset 0 0 50px rgba(74, 158, 255, 0.2);
}

.carousel-ring-inner {
    position:      absolute;
    width:         60%;
    height:        60%;
    top:           20%;
    left:          20%;
    border:        1px solid rgba(0, 212, 255, 0.08);
    border-radius: 50%;
    box-shadow:    inset 0 0 30px rgba(0, 212, 255, 0.05);
}

/* ─── ORBIT DECORATIVE DOTS ──────────────────────────────────── */

.orbit-container {
    position:  absolute;
    width:     100%;
    height:    100%;
    animation: orbitContainerSpin 15s linear infinite;
}

.orbit-container-2 { animation: orbitContainerSpin 22s linear infinite reverse; }

@keyframes orbitContainerSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.orbit-dot {
    position:      absolute;
    width:         6px;
    height:        6px;
    background:    white;
    border-radius: 50%;
    box-shadow:    0 0 10px rgba(255, 255, 255, 0.8);
}

/* ─── ORBITAL WRAPPER ────────────────────────────────────────── */

.orbital-wrapper {
    position:   absolute;
    width:      100%;
    height:     100%;
    animation:  orbitRotate 30s linear infinite;
    transition: none;
}

.orbital-wrapper.dragging {
    animation-play-state: paused !important;
    cursor: grabbing !important;
}

.orbital-wrapper.visibility-paused,
.orbital-wrapper.visibility-paused .carousel-segment,
.orbital-wrapper.visibility-paused .segment-inner,
.orbital-wrapper.visibility-paused .satellite-icon,
.orbital-wrapper.visibility-paused [class*="-orbiter"] {
    animation-play-state: paused !important;
}

@keyframes orbitRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── CAROUSEL SEGMENTS ──────────────────────────────────────── */

.carousel-segment {
    position:        absolute;
    width:           80px;
    height:          80px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border:          1px solid rgba(255, 255, 255, 0.1);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        visible;
    cursor:          grab;
    user-select:     none;
    -webkit-user-select: none;
    opacity:         0;
    transform:       translate(-50%, -50%) scale(0);
    transition:
        transform    0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        opacity      0.4s ease-out,
        top          0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        left         0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        border-color 0.3s,
        box-shadow   0.3s,
        background   0.3s;
    z-index:         2;
    text-decoration: none;
    color:           inherit;
}

.carousel-segment.hidden {
    opacity:        0;
    transform:      translate(-50%, -50%) scale(0) !important;
    pointer-events: none;
}

.carousel-segment:active  { cursor: grabbing; }

.carousel-segment:hover {
    background:   rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow:   0 0 20px rgba(0, 212, 255, 0.4);
}

.carousel-segment.no-link { cursor: grab; }

.carousel-segment.dragging {
    cursor:       grabbing !important;
    background:   rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow:   0 0 30px rgba(0, 212, 255, 0.6) !important;
}

/* ─── SEGMENT INNER ──────────────────────────────────────────── */

.segment-inner {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    animation:       counterRotate 30s linear infinite;
    position:        relative;
}

.orbital-wrapper.dragging .segment-inner,
.orbital-wrapper.dragging .satellite-icon {
    animation-play-state: paused !important;
}

@keyframes counterRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* ─── SEGMENT TITLE / TOOLTIP ────────────────────────────────── */

.segment-title {
    position:       absolute;
    top:            10px;
    font-size:      11px;
    color:          rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    text-align:     center;
    width:          100%;
    z-index:        2;
    line-height:    1.2;
}

.segment-tooltip {
    position:      absolute;
    bottom:        -28px;
    left:          50%;
    transform:     translateX(-50%);
    background:    rgba(0, 0, 0, 0.8);
    color:         #00d4ff;
    font-size:     9px;
    white-space:   nowrap;
    padding:       3px 8px;
    border-radius: 4px;
    border:        1px solid rgba(0, 212, 255, 0.2);
    opacity:       0;
    pointer-events: none;
    transition:    opacity 0.2s;
    z-index:       20;
}

.carousel-segment:hover .segment-tooltip { opacity: 1; }

.workspace-icon {
    width:       28px;
    height:      28px;
    margin-top:  18px;
    flex-shrink: 0;
}

/* ─── VIZ CLIPPER ────────────────────────────────────────────── */

.viz-clipper {
    width:         100%;
    height:        100%;
    border-radius: 50%;
    overflow:      hidden;
    position:      absolute;
    top:           0;
    left:          0;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

/* ─── CENTER CORE ────────────────────────────────────────────── */

.center-core {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    width:           180px;
    height:          180px;
    background:      radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent 70%);
    border-radius:   50%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    animation:       corePulse 3s ease-in-out infinite;
    z-index:         10;
}

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%       { transform: translate(-50%, -50%) scale(1.07); }
}

.core-pbi-icon {
    width:         36px;
    height:        36px;
    margin-bottom: 6px;
    filter:        drop-shadow(0 0 6px rgba(242, 200, 17, 0.6));
}

.core-title {
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 2px;
    color:          rgba(255, 255, 255, 0.9);
    text-shadow:    0 0 20px rgba(0, 212, 255, 0.5);
    text-transform: uppercase;
}

.core-subtitle {
    font-size:      10px;
    letter-spacing: 1.5px;
    color:          rgba(160, 196, 228, 0.6);
    margin-top:     4px;
}

/* ─── ATOM ANIMATION ─────────────────────────────────────────── */

.atom-viz {
    width:         60px;
    height:        60px;
    position:      relative;
    margin-bottom: 4px;
}

.nucleus {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         12px;
    height:        12px;
    background:    radial-gradient(circle, #00ff88, #00d4ff);
    border-radius: 50%;
    box-shadow:    0 0 15px rgba(0, 255, 136, 0.8);
    animation:     nucleusPulse 2s ease-in-out infinite;
}

@keyframes nucleusPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 15px rgba(0, 255, 136, 0.8); }
    50%       { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 25px rgba(0, 255, 136, 1); }
}

.orbit {
    position:      absolute;
    top:           50%;
    left:          50%;
    border:        1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    transform:     translate(-50%, -50%);
}

.orbit1 { width: 40px; height: 40px; animation: orbit1Rotate 3s linear infinite; }
.orbit2 { width: 55px; height: 55px; animation: orbit2Rotate 4s linear infinite;        transform: translate(-50%, -50%) rotateX(60deg); }
.orbit3 { width: 50px; height: 50px; animation: orbit3Rotate 3.5s linear infinite reverse; transform: translate(-50%, -50%) rotateY(60deg); }

@keyframes orbit1Rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbit2Rotate {
    from { transform: translate(-50%, -50%) rotateX(60deg) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotateX(60deg) rotate(360deg); }
}
@keyframes orbit3Rotate {
    from { transform: translate(-50%, -50%) rotateY(60deg) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotateY(60deg) rotate(360deg); }
}

/* ─── SATELLITE ARMS ─────────────────────────────────────────── */

.connecting-line {
    position:         absolute;
    top:              50%;
    left:             50%;
    width:            200px;
    height:           1px;
    background:       rgba(0, 212, 255, 0.2);
    transform-origin: left center;
    pointer-events:   none;
    z-index:          0;
    transition:       transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.satellite-arm {
    position:       absolute;
    top:            50%;
    left:           50%;
    width:          1px;
    height:         1px;
    pointer-events: none;
    z-index:        1;
    transition:     all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.satellite-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    animation:       counterRotate 30s linear infinite;
}

/* ─── ORBITER BODIES ─────────────────────────────────────────── */

.powerbi-orbiter,
.datascience-orbiter,
.aroundtheworld-orbiter,
.google-orbiter,
.streamlit-orbiter,
.coinbase-orbiter {
    position:        absolute;
    top:             0;
    left:            0;
    width:           30px;
    height:          30px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    backdrop-filter: blur(5px);
    animation-name:              travel-along-line;
    animation-timing-function:   ease-in-out;
    animation-iteration-count:   infinite;
    animation-duration:          var(--travel-duration);
    animation-delay:             var(--travel-delay);
}

.powerbi-orbiter        { background: rgba(255, 240, 100, 0.1); border: 1px solid rgba(255, 200, 0, 0.4); }
.datascience-orbiter    { background: rgba(0, 255, 136, 0.1);   border: 1px solid rgba(0, 255, 136, 0.4); }
.aroundtheworld-orbiter { background: rgba(0, 212, 255, 0.1);   border: 1px solid rgba(0, 212, 255, 0.4); }
.google-orbiter         { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.4); }
.streamlit-orbiter      { background: rgba(255, 75, 75, 0.1);   border: 1px solid rgba(255, 75, 75, 0.4); }
.coinbase-orbiter       { background: rgba(0, 82, 255, 0.1);    border: 1px solid rgba(0, 82, 255, 0.4); }

@keyframes travel-along-line {
    0%, 100% { transform: translate(-50%, -50%) translateX(55px); }
    50%       { transform: translate(-50%, -50%) translateX(180px); }
}

.powerbi-orbiter::after,
.datascience-orbiter::after,
.aroundtheworld-orbiter::after,
.google-orbiter::after,
.streamlit-orbiter::after,
.coinbase-orbiter::after {
    content:                   '';
    position:                  absolute;
    top:                       50%;
    left:                      50%;
    width:                     100%;
    height:                    100%;
    border-radius:             50%;
    opacity:                   0;
    animation-name:            flash-effect;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration:        var(--travel-duration);
    animation-delay:           var(--travel-delay);
}

.powerbi-orbiter::after        { box-shadow: 0 0 12px 4px rgba(255, 200, 0, 0.7); }
.datascience-orbiter::after    { box-shadow: 0 0 12px 4px rgba(0, 255, 136, 0.7); }
.aroundtheworld-orbiter::after { box-shadow: 0 0 12px 4px rgba(0, 212, 255, 0.7); }
.google-orbiter::after         { box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.7); }
.streamlit-orbiter::after      { box-shadow: 0 0 12px 4px rgba(255, 75, 75, 0.7); }
.coinbase-orbiter::after       { box-shadow: 0 0 12px 4px rgba(0, 82, 255, 0.7); }

@keyframes flash-effect {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
    8%, 92%  { opacity: 0;   transform: translate(-50%, -50%) scale(1.5); }
    9%, 91%  {               transform: translate(-50%, -50%) scale(1); }
}

/* ─── FLOW LINES ─────────────────────────────────────────────── */

.flow-line {
    position:       absolute;
    height:         2px;
    background:     linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation:      flowLine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flowLine {
    0%, 100% { opacity: 0; transform: translateX(-50px); }
    50%       { opacity: 1; transform: translateX(50px); }
}

/* ─── BUTTON CONTROLS ────────────────────────────────────────── */

.button-controls {
    position:        relative;
    margin-top:      10px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             8px;
    z-index:         100;
    flex-shrink:     0;
}

.filter-buttons,
.action-buttons {
    display:         flex;
    justify-content: center;
    gap:             8px;
    flex-wrap:       wrap;
}

.filter-btn,
.reset-btn {
    background:      rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border:          1px solid rgba(255, 255, 255, 0.1) !important;
    color:           rgba(160, 196, 228, 0.7) !important;
    padding:         8px 14px !important;
    border-radius:   10px !important;
    font-size:       9px !important;
    letter-spacing:  1px !important;
    cursor:          pointer !important;
    transition:      all 0.3s ease !important;
    font-family:     var(--font-ui) !important;
    outline:         none !important;
    appearance:      none !important;
    -webkit-appearance: none !important;
}

.filter-btn:hover,
.reset-btn:hover {
    background:   rgba(255, 255, 255, 0.1) !important;
    color:        rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.filter-btn.active {
    background:   rgba(0, 212, 255, 0.2) !important;
    color:        #00d4ff !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    box-shadow:   0 0 15px rgba(0, 212, 255, 0.3) !important;
}

.filter-btn:disabled {
    opacity: 0.3 !important;
    cursor:  not-allowed !important;
}

.reset-btn:active { transform: scale(0.95) !important; }

/* ─── BW MODE ────────────────────────────────────────────────── */

.page-container.bw-mode .carousel-segment              { filter: grayscale(100%); }
.page-container.bw-mode .carousel-segment.colorize     { filter: grayscale(0%); }
.page-container.bw-mode .center-core,
.page-container.bw-mode .carousel-ring,
.page-container.bw-mode .orbit-dot,
.page-container.bw-mode .flow-line,
.page-container.bw-mode .bg-grid                       { filter: grayscale(100%); }

/* ─── GRAB INDICATOR ─────────────────────────────────────────── */

.grab-me-segment {
    border:    2px solid rgba(0, 255, 136, 0.3) !important;
    animation: grabGlow 3s ease-in-out infinite !important;
}

@keyframes grabGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.4), 0 0 40px rgba(0, 255, 136, 0.2); }
    50%       { box-shadow: 0 0 30px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 255, 136, 0.4), inset 0 0 20px rgba(0, 255, 136, 0.1); }
}

/* ─── PERFORMANCE HINTS ──────────────────────────────────────── */

.orbital-wrapper,
.segment-inner,
.satellite-icon,
.carousel-segment { will-change: transform; }

/* ─── SIDEBAR COLLAPSE ───────────────────────────────────────── */

.bb-sidebar { transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease; }

.bb-sidebar.collapsed {
    width:    0 !important;
    padding:  0 !important;
    opacity:  0;
    overflow: hidden;
}

.bb-sidebar-toggle {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    left:            240px;
    z-index:         200;
    width:           18px;
    height:          48px;
    background:      var(--bg-panel, #090c18);
    border:          1px solid var(--border, rgba(0,212,255,0.1));
    border-left:     none;
    border-radius:   0 6px 6px 0;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--muted, rgba(160,196,228,0.45));
    font-size:       10px;
    transition:      left 0.3s ease, color 0.2s, background 0.2s;
}

.bb-sidebar-toggle:hover     { background: rgba(0, 212, 255, 0.08); color: #00d4ff; }
.bb-sidebar-toggle.collapsed { left: 0; }

.bb-sidebar-toggle--right {
    left:          auto !important;
    right:         240px;
    border-left:   1px solid var(--border, rgba(0,212,255,0.1));
    border-right:  none;
    border-radius: 6px 0 0 6px;
}

.bb-sidebar-toggle--right.collapsed { right: 0; left: auto !important; }

/* ─── TABS ───────────────────────────────────────────────────── */

.bb-tabs {
    display:       grid;
    grid-template-columns: repeat(4, 1fr);
    gap:           4px;
    margin-bottom: 14px;
}

.bb-tab-btn {
    background:     var(--bg-card, #0d1120);
    border:         1px solid var(--border, rgba(0,212,255,0.1));
    color:          var(--muted, rgba(160,196,228,0.45));
    font-family:    monospace;
    font-size:      8px;
    font-weight:    700;
    letter-spacing: 0.06em;
    padding:        6px 2px;
    border-radius:  5px;
    cursor:         pointer;
    transition:     all 0.2s;
    text-transform: uppercase;
}

.bb-tab-btn:hover  { border-color: rgba(0,212,255,0.28); color: #dde4f0; }
.bb-tab-btn.active { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.4); color: #00d4ff; box-shadow: 0 0 8px rgba(0,212,255,0.15); }

/* ─── QUICK-ACCESS GRIDS ─────────────────────────────────────── */

.bb-quick-grid {
    display:       grid;
    grid-template-columns: repeat(4, 1fr);
    gap:           5px;
    margin-bottom: 4px;
}

.bb-quick-grid--wide {
    grid-template-columns: repeat(3, 1fr);
    max-height:    380px;
    overflow-y:    auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,212,255,0.2) transparent;
}

.bb-quick-btn {
    background:     var(--bg-card, #0d1120);
    border:         1px solid var(--border, rgba(0,212,255,0.1));
    color:          var(--muted, rgba(160,196,228,0.45));
    font-family:    monospace;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.04em;
    padding:        6px 2px;
    border-radius:  5px;
    cursor:         pointer;
    transition:     all 0.18s;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.bb-quick-btn:hover  { border-color: rgba(0,212,255,0.28); color: #dde4f0; background: rgba(0,212,255,0.06); }
.bb-quick-btn.active { background: rgba(0,212,255,0.15); border-color: rgba(0,212,255,0.5); color: #00d4ff; box-shadow: 0 0 8px rgba(0,212,255,0.2); }
.bb-quick-btn--sm    { font-size: 8px; padding: 5px 2px; }

/* ─── OVERLAY / CONVERGENCE ANIMATIONS ──────────────────────── */

.bb-overlay-btn {
    background:     rgba(0,212,255,0.06);
    border:         1px solid rgba(0,212,255,0.25);
    color:          rgba(160,196,228,0.7);
    font-family:    monospace;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.1em;
    padding:        6px 14px;
    border-radius:  6px;
    cursor:         pointer;
    transition:     all 0.2s;
    white-space:    nowrap;
    flex-shrink:    0;
}

.bb-overlay-btn:hover  { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.5); color: #00d4ff; }
.bb-overlay-btn.active { background: rgba(0,212,255,0.18); border-color: #00d4ff; color: #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.3); }

.bb-split-panels    { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bb-overlay-panel   { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bb-overlay-panel .bb-chart-wrap { flex: 1; min-height: 0; }

@keyframes mergeOut  { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; } }
@keyframes splitOut  { 0% { opacity:1; transform:scaleY(1); }    100% { opacity:0; transform:scaleY(0.85); } }
@keyframes mergeIn   { 0% { opacity:0; transform:scaleY(0.7); }  100% { opacity:1; transform:scaleY(1); } }
@keyframes splitIn   { 0% { opacity:0; transform:scaleY(0.85); } 100% { opacity:1; transform:scaleY(1); } }
@keyframes glowFlash {
    0%   { box-shadow: 0 0 0px rgba(0,212,255,0); }
    40%  { box-shadow: 0 0 40px rgba(0,212,255,0.6), 0 0 80px rgba(0,212,255,0.2); }
    100% { box-shadow: 0 0 0px rgba(0,212,255,0); }
}

.bb-anim-merge-out { animation: mergeOut 0.3s ease forwards; }
.bb-anim-merge-in  { animation: mergeIn  0.3s ease forwards; transform-origin: center center; }
.bb-anim-merge-in .bb-chart-wrap { animation: glowFlash 0.5s ease 0.15s forwards; }
.bb-anim-split-out { animation: splitOut 0.3s ease forwards; }
.bb-anim-split-in  { animation: splitIn  0.3s ease forwards; transform-origin: center center; }

/* ─── MOBILE ─────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    .carousel-container { width: 300px; height: 300px; margin-top: 3vh; }
    .carousel-segment   { width: 65px;  height: 65px; }
    .segment-title      { font-size: 8px; top: 6px; }
    .center-core        { width: 150px;  height: 150px; }

    .button-controls    { margin-top: 16px; gap: 8px; width: 90%; max-width: 320px; }
    .filter-buttons,
    .action-buttons     { gap: 6px; width: 100%; }
    .filter-btn,
    .reset-btn          { font-size: 8px !important; padding: 6px 12px !important; }

    .carousel-segment         { box-shadow: none !important; }
    .carousel-segment:hover   { box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important; }
}