/* Player */

 .player-container {
   max-width: 690px;
   height: 400px;
   padding: 24px;
   background-image: url('/imgs/audio-player-bg.jpg');
   background-size: cover;
   background-position: center;
   border-radius: 24px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
 }

 /* Glassmorphism Audio Player Bar Capsule */
 .audio-player-bar {
   width: 100%;
   height: 72px;
   background: rgba(12, 12, 12, 0.75);
   backdrop-filter: blur(28px) saturate(180%);
   -webkit-backdrop-filter: blur(28px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   display: flex;
   align-items: center;
   padding: 0 16px 0 12px;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   user-select: none;
 }

 /* Left: Track Info Section */
 .track-info {
   display: flex;
   align-items: center;
   min-width: 190px;
   column-gap: 12px;
 }

 .album-art-wrapper {
   position: relative;
   width: 48px;
   height: 48px;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }

 /* Colorful gradient resembling album art in mockup */
 .album-art {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #ee9ca7 100%);
   position: relative;
 }

 /* Create the grainy overlay on the album art */
 .album-art::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('/imgs/audio-player-bg.jpg');
   background-size: cover;
   background-position: center;
   opacity: 0.55;
   mix-blend-mode: color-burn;
 }

 .metadata {
   margin-left: 12px;
   display: flex;
   flex-direction: column;
   margin-top: 8px;
 }

 .track-title {
   color: #ffffff;
   font-size: 14px;
   font-weight: 600;
   line-height: 22px;
   margin: 0;
 }

 .track-artist {
   color: rgba(255, 255, 255, 0.8);
   font-size: 12px;
   font-weight: 400;
   margin-top: 2px;
   line-height: 12px;
 }

 /* Play/Pause Button */
 .play-pause-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #ffffff;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 12px;
   flex-shrink: 0;
   transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

 .play-pause-btn:hover {
   transform: scale(1.06);
   background-color: #f3f3f7;
 }

 .play-pause-btn:active {
   transform: scale(0.96);
 }

 .play-pause-icon {
   width: 16px;
   height: 16px;
   color: #16161a;
   transition: transform 0.15s ease;
 }

 /* Center: Interactive Waveform & Duration Wrapper */
 .waveform-wrapper {
   display: flex;
   align-items: center;
   flex-grow: 1;
   height: 100%;
 }

 /* Group container holding the bars and time closely together */
 .waveform-time-group {
   display: flex;
   align-items: center;
   gap: 12px;
   /* Exactly 12px gap between waveform bars and duration text */
   padding: 0 12px;
   /* 12px space on the left side next to play/pause */
   height: 100%;
 }

 .waveform-container {
   display: flex;
   align-items: center;
   gap: 2px;
   /* 2px gap between individual bars */
   height: 100%;
   cursor: pointer;
 }

 .track-duration {
   font-size: 11px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.6);
   /* Small secondary color text */
   letter-spacing: 0.5px;
   flex-shrink: 0;
 }



 .waveform-bar {
   width: 2px;
   background-color: rgba(255, 255, 255, 0.25);
   border-radius: 9999px;
   transition:
     transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
     background-color 0.2s ease,
     height 0.25s cubic-bezier(0.25, 1, 0.5, 1),
     box-shadow 0.2s ease;
   transform-origin: center;
 }

 /* Active bars have white background */
 .waveform-bar.active {
   background-color: #ffffff;
 }

 /* Hovering an individual waveform line makes it grow taller and glow */
 .waveform-bar:hover {
   transform: scaleY(1.4);
   background-color: #ffffff !important;
 }


 /* Right Section Container */
 .controls-right {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
 }

 /* Volume Layout Wrapper (maintains spacing in the document bar flow) */
 .volume-container-wrapper {
   position: relative;
   width: 38px;
   height: 38px;
   flex-shrink: 0;
 }

 /* Volume Capsule (absolute positioned inside the wrapper to expand over waveform) */
 .volume-control-capsule {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 20;
   /* High z-index to overlay waveform */
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   border-radius: 9999px;
   padding: 6px;
   height: 38px;
   box-sizing: border-box;
   width: 38px;
   /* Standby width (matches wrapper) */
   overflow: hidden;
   transition:
     width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
     background-color 0.25s ease,
     border-color 0.25s ease,
     padding 0.35s cubic-bezier(0.25, 1, 0.5, 1),
     box-shadow 0.35s ease;
 }

 /* Hovering volume wrapper triggers absolute capsule width expansion to the left */
 .volume-container-wrapper:hover .volume-control-capsule {
   width: 140px;
   /* Expanded width */
   background: rgba(32, 32, 32, 1);
   padding-right: 4px;
   /* Drop shadow over waveform */
 }

 /* Volume Slider Wrapper - controls opacity and width scaling */
 .volume-slider-wrapper {
   width: 0;
   opacity: 0;
   overflow: hidden;
   transition:
     width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
     opacity 0.25s ease;
   display: flex;
   align-items: center;
   height: 100%;
 }

 .volume-container-wrapper:hover .volume-slider-wrapper {
   width: 82px;
   opacity: 1;
   margin: 0 8px;
 }


 /* Custom Range Input (No Knob) */
 .volume-slider {
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   width: 82px;
   height: 26px;
   /* Larger hover target container */
   cursor: pointer;
   outline: none;
   display: flex;
   align-items: center;
 }

 /* Webkit Track Styling */
 .volume-slider::-webkit-slider-runnable-track {
   width: 100%;
   height: 4px;
   /* Normal height */
   border-radius: 9999px;
   /* Use linear-gradient with custom CSS variable updated in JS */
   background: linear-gradient(to right,
       #ffffff var(--vol-percent, 75%),
       rgba(255, 255, 255, 0.25) var(--vol-percent, 75%));
   transition: height 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* Hovering the slider makes it vertically bigger */
 .volume-slider:hover::-webkit-slider-runnable-track {
   height: 8px;
 }

 /* Hide Thumb for Webkit */
 .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 0;
   height: 0;
   background: transparent;
   border: none;
 }

 /* Firefox Track Styling */
 .volume-slider::-moz-range-track {
   width: 100%;
   height: 4px;
   border-radius: 9999px;
   background: linear-gradient(to right,
       #ffffff var(--vol-percent, 75%),
       rgba(255, 255, 255, 0.25) var(--vol-percent, 75%));
   transition: height 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .volume-slider:hover::-moz-range-track {
   height: 8px;
 }

 /* Hide Thumb for Firefox */
 .volume-slider::-moz-range-thumb {
   width: 0;
   height: 0;
   background: transparent;
   border: none;
 }

 /* Volume Button (Icon) */
 .volume-toggle-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   width: 32px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   opacity: 0.95;
   transition: opacity 0.2s ease, transform 0.15s ease;
   flex-shrink: 0;
 }

 .volume-toggle-btn:hover {
   opacity: 1;
   transform: scale(1.05);
 }

 .volume-toggle-btn:active {
   transform: scale(0.95);
 }

 .volume-icon-svg {
   width: 20px;
   height: 20px;
 }

 /* Volume Wave States managed by JS classes */
 .volume-icon-svg .mute-cross {
   display: none;
 }

 /* 0% volume */
 .volume-icon-svg.muted .mute-cross {
   display: block;
 }

 .volume-icon-svg.muted .volume-wave {
   display: none !important;
 }

 /* 1% - 49% volume */
 .volume-icon-svg.low-volume .wave-2 {
   display: none;
 }

 .volume-icon-svg.low-volume .wave-1 {
   display: block;
 }

 .volume-icon-svg.low-volume .mute-cross {
   display: none;
 }

 /* 50% - 100% volume */
 .volume-icon-svg.high-volume .wave-1,
 .volume-icon-svg.high-volume .wave-2 {
   display: block;
 }

 .volume-icon-svg.high-volume .mute-cross {
   display: none;
 }

 /* Options Button (...) */
 .options-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.8);
   transition: color 0.2s ease, transform 0.15s ease;
 }

 .options-btn:hover {
   color: #ffffff;
   transform: scale(1.08);
 }

 .options-icon {
   width: 20px;
   height: 20px;
 }

 /* Responsive Media Queries for Mobile Screens */
 @media (max-width: 600px) {
   .player-container {
     height: 360px;
     padding: 16px;
   }

   .audio-player-bar {
     display: grid;
     grid-template-columns: auto 1fr auto;
     /* 3 columns for Play, Waveform, Volume */
     height: auto;
     padding: 18px;
     border-radius: 20px;
     row-gap: 16px;
     column-gap: 8px;
     /* Tighter spacing for mobile */
     position: relative;
   }

   .track-info {
     grid-column: 1 / -1;
     /* Spans across all columns */
     width: calc(100% - 36px);
     /* Leave room for absolute options button */
   }

   .album-art-wrapper {
     display: none;
     /* Hide album art on smaller screens */
   }

   .metadata {
     margin-left: 0;
     /* Align text to the left margin of the bar */
   }

   .waveform-wrapper {
     grid-column: 2;
     /* Waveform wrapper sits in the middle */
     padding: 0 4px;
     height: 36px;
     width: 100%;
   }

   .play-pause-btn {
     grid-column: 1;
     /* Play/Pause button on the left */
     margin-left: 0;
   }

   .controls-right {
     grid-column: 3;
     /* Volume controls on the right */
     justify-self: end;
     display: flex;
     align-items: center;
     gap: 12px;
   }

   .options-btn {
     position: absolute;
     top: 18px;
     right: 25px;
   }

   .track-duration {
     display: none;
   }

 }




 /* Sidebar */

 :root {
   /* Colors matching screenshot */
   --bg-page: #08090b;
   --bg-app: #191919;
   --bg-sidebar: #161616;
   --border-sidebar: rgba(255, 255, 255, 0.05);

   --text-idle: #767a82;
   --text-hover: #e4e4e7;
   --text-active: #fbfbfb;

   --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

   --indicator-gradient: linear-gradient(90deg, rgba(40, 40, 40, 1) 0%, rgba(30, 30, 30, 1) 100%);
   --indicator-border: rgba(255, 255, 255, 0.08);
   --accent-color: #3b82f6;
 }

 .player-container,
 .player-container *,
 .dashboard-container,
 .dashboard-container * {
   box-sizing: border-box;
   margin: 0;

 }

 .metadata {
   row-gap: 4px;
 }


 .player-container,
 .dashboard-container,
 .empty-container {
   border-radius: 24px;
   box-shadow:
     0 2px 1px rgba(0, 0, 0, 0.08),
     0 4px 2px rgba(0, 0, 0, 0.08),
     0 8px 4px rgba(0, 0, 0, 0.08),
     0 16px 8px rgba(0, 0, 0, 0.08),
     0 32px 16px rgba(0, 0, 0, 0.08);
   border: 1px solid rgb(34 34 34);
 }

 .empty-container {
   color: var(--text-idle);
   background-color: var(--bg-app);
   max-width: 690px;
   height: 400px;
   display: flex;
   overflow: hidden;
   position: relative;
   container-type: inline-size;
   align-items: center;
   justify-content: center;
 }


 /* Container div max-width 680px and responsive */
 .dashboard-container {
   max-width: 690px;
   height: 400px;
   background-color: var(--bg-app);
   display: flex;
   overflow: hidden;
   position: relative;
   container-type: inline-size;
 }

 /* --- SIDEBAR STYLE --- */
 .sidebar {
   width: 220px;
   background-color: var(--bg-sidebar);
   border-right: 1px solid var(--border-sidebar);
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   z-index: 10;
   transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
   flex-shrink: 0;
 }

 .sidebar.collapsed {
   width: 68px;
 }

 /* Sidebar Header */
 .sidebar-header {
   height: 72px;
   padding: 0 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .sidebar.collapsed .sidebar-header {
   justify-content: center;
   padding: 0;
   height: 72px;
 }

 .sidebar.collapsed .toggle-btn {
   display: none;
 }

 .sidebar.collapsed .logo-group {
   cursor: e-resize;
 }

 .sidebar.collapsed .logo-group:hover {
   transform: scale(1.08);
 }

 /* Tooltips */
 [data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute;
   left: calc(100% + 8px);
   top: 50%;
   transform: translateY(-50%) scale(0.9);
   background-color: #131313;
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: #ffffff;
   padding: 0px 8px;
   font-size: 12px;
   font-weight: 500;
   border-radius: 8px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 999;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 }

 [data-tooltip]::before {
   content: '';
   position: absolute;
   left: calc(100% + 4px);
   top: 50%;
   transform: translateY(-50%);
   border-width: 4px 4px 4px 0;
   border-style: solid;
   border-color: transparent #17181c transparent transparent;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 999;
 }

 /* Hover States for Tooltips */
 .toggle-btn:hover::after,
 .toggle-btn:hover::before {
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }

 .sidebar.collapsed .logo-group:hover::after,
 .sidebar.collapsed .logo-group:hover::before {
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }

 /* Prevent tooltip from showing when sidebar is expanded */
 .sidebar:not(.collapsed) .logo-group::after,
 .sidebar:not(.collapsed) .logo-group::before {
   display: none !important;
 }

 /* Brand Logo */
 .logo-group {
   display: flex;
   align-items: center;
   gap: 10px;
   user-select: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
   position: relative;
 }

 .logo-svg {
   width: 24px;
   height: 24px;
   color: #ffffff;
   flex-shrink: 0;
 }

 .logo-name {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.5px;
   color: #ffffff;
   white-space: nowrap;
   transition: opacity 0.15s ease, width 0.15s ease;
 }

 .sidebar.collapsed .logo-name {
   opacity: 0;
   width: 0;
   pointer-events: none;
 }

 /* Toggle Button */
 .toggle-btn {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: none;
   border: none;
   color: var(--text-idle);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: w-resize;
   transition: all 0.2s ease;
   flex-shrink: 0;
   outline: none;
   position: relative;
   /* ensure tooltip is relative to it */
 }

 .toggle-btn:hover {
   color: var(--text-hover);
   background-color: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.15);
 }

 .toggle-icon {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   stroke-width: 2px;
   transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .sidebar.collapsed .toggle-icon {
   transform: rotate(180deg);
 }

 /* Sidebar Menu */
 .sidebar-menu {
   padding: 16px 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: relative;
   flex-grow: 1;
 }

 /* Sliding background indicator */
 .active-indicator {
   position: absolute;
   top: 0;
   left: 12px;
   right: 12px;
   border-radius: 12px;
   background: var(--indicator-gradient);

   pointer-events: none;
   z-index: 1;
   opacity: 0;
   /* hidden initially until placed */
   transition:
     transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
     height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
     opacity 0.15s ease;
 }


 /* Menu Items */
 .menu-item {
   display: flex;
   align-items: center;
   width: calc(100% - 24px);
   height: 44px;
   margin: 0 12px;
   padding: 0 12px;
   background: transparent;
   border: none;
   border-radius: 12px;
   color: var(--text-idle);
   font-family: var(--font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   position: relative;
   z-index: 2;
   box-sizing: border-box;
   text-align: left;
   transition: color 0.2s ease;
   outline: none;
   -webkit-tap-highlight-color: transparent;
 }

 .menu-item svg {
   width: 20px;
   height: 20px;
   stroke: var(--text-idle);
   stroke-width: 1.8px;
   transition: stroke 0.2s ease;
   flex-shrink: 0;
 }

 .menu-item .label {
   margin-left: 12px;
   opacity: 1;
   transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
   white-space: nowrap;
   font-size: 14px;
   font-weight: 500;
 }

 .menu-item .badge {
   margin-left: auto;
   line-height: 22px;
   font-size: 11px;
   height: 22px;
   font-weight: 500;
   color: var(--text-idle);
   background-color: rgba(255, 255, 255, 0.05);
   padding: 0px 8px;
   border-radius: 6px;
   transition: opacity 0.15s ease, transform 0.15s ease;
 }

 /* Muted colors & hover states */
 .menu-item:hover {
   color: var(--text-hover);
 }

 .menu-item:hover svg {
   stroke: var(--text-hover);
 }

 .menu-item:hover .badge {
   color: var(--text-hover);
   background-color: rgba(255, 255, 255, 0.08);
 }

 /* Selected state colors */
 .menu-item.active {
   color: var(--text-active);
 }

 .menu-item.active svg {
   stroke: var(--text-active);
 }

 .menu-item.active .badge {
   color: var(--text-active);
   background-color: rgba(255, 255, 255, 0.12);
 }

 /* Collapsed menu item layout overrides */
 .sidebar.collapsed .menu-item {
   width: 44px;
   height: 44px;
   margin: 0 auto;
   padding: 0;
   justify-content: center;
 }

 .sidebar.collapsed .menu-item .label {
   opacity: 0;
   width: 0;
   margin: 0;
   pointer-events: none;
   position: absolute;
 }

 .sidebar.collapsed .menu-item .badge {
   opacity: 0;
   transform: scale(0.6);
   pointer-events: none;
   position: absolute;
 }

 /* --- DASHBOARD CONTENT STYLE --- */
 .main-content {
   flex-grow: 1;
   padding: 24px;
   position: relative;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
 }

 /* Tab content transitions */
 .tab-content {
   position: absolute;
   top: 24px;
   left: 24px;
   right: 24px;
   bottom: 24px;
   opacity: 0;
   pointer-events: none;
   transition:
     opacity 0.80s cubic-bezier(0.2, 0.8, 0.2, 1),
     transform 0.80s cubic-bezier(0.2, 0.8, 0.2, 1);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 16px;
 }

 .tab-content.active {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
 }

 .dashboard-container h2 {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 4px;
   letter-spacing: -0.2px;
 }

 .subtitle {
   font-size: 13px;
   color: var(--text-idle);
   margin-bottom: 8px;
 }

 /* Cards */
 .card-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   padding-bottom: 24px;
 }

 .card {
   background-color: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.04);
   border-radius: 12px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .card-title {
   font-size: 12px;
   color: var(--text-idle);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .card-val {
   font-size: 20px;
   font-weight: 600;
 }

 .card-change {
   font-size: 11px;
   color: #10b981;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 /* Accounts Tab content list */
 .acc-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .acc-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.04);
   padding: 12px 16px;
   border-radius: 10px;
 }

 .acc-name {
   font-size: 14px;
   font-weight: 500;
 }

 .acc-value {
   font-size: 12px;
 }

 .acc-details {
   font-size: 12px;
   color: var(--text-idle);
 }

 .acc-balance {
   font-size: 15px;
   font-weight: 600;
   text-align: right;
 }

 .acc-badge {
   height: 20px;
   font-size: 10px;
   line-height: 20px;
   background-color: rgba(16, 185, 129, 0.1);
   color: #10b981;
   padding: 0px 8px;
   border-radius: 4px;
   display: inline-block;
   margin-top: 4px;
 }

 /* Holdings Tab items */
 .holding-item {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 6px;
 }

 .holding-info {
   display: flex;
   justify-content: space-between;
 }

 .holding-name {
   font-size: 14px;
 }

 .holding-val {
   font-weight: 600;
   font-size: 14px;
 }

 .progress-bar {
   height: 6px;
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
   overflow: hidden;
   position: relative;
 }

 .progress-fill {
   height: 100%;
   border-radius: 3px;
   width: 0;
   transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .progress-fill.stocks {
   background: linear-gradient(90deg, #6366f1, #3b82f6);
 }

 .progress-fill.crypto {
   background: linear-gradient(90deg, #a855f7, #6366f1);
 }

 .progress-fill.cash {
   background: linear-gradient(90deg, #10b981, #34d399);
 }

 /* Trigger width transition when Holdings tab is active */
 .tab-content.active .progress-fill.stocks {
   width: 62%;
 }

 .tab-content.active .progress-fill.crypto {
   width: 23%;
 }

 .tab-content.active .progress-fill.cash {
   width: 15%;
 }

 /* Net Worth Chart Graphic */
 .chart-container {
   background-color: rgba(255, 255, 255, 0.01);
   border: 1px solid rgba(255, 255, 255, 0.03);
   border-radius: 12px;
   padding: 16px;
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .net-worth-chart {
   width: 100%;
   max-height: 180px;
   overflow: visible;
 }

 .chart-line {
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .tab-content.active .chart-line {
   stroke-dashoffset: 0;
 }

 @keyframes pulse {
   0% {
     r: 5px;
     opacity: 1;
   }

   100% {
     r: 15px;
     opacity: 0;
   }
 }

 .pulse {
   animation: pulse 2s infinite ease-out;
   transform-origin: center;
 }

 /* Container query for responsiveness */
 @container (max-width: 540px) {
   .sidebar {
     width: 68px !important;
   }

   .logo-name {
     display: none !important;
   }

   .toggle-btn {
     display: none !important;
   }

   .sidebar-header {
     justify-content: center !important;
     padding: 0 !important;
     height: 72px !important;
   }

   .menu-item {
     width: 44px !important;
     height: 44px !important;
     margin: 0 auto !important;
     padding: 0 !important;
     justify-content: center !important;
   }

   .menu-item .label,
   .menu-item .badge {
     display: none !important;
   }

   /* Hide tooltips on mobile container */
   [data-tooltip]::after,
   [data-tooltip]::before {
     display: none !important;
   }

   .acc-item {
     flex-wrap: wrap;
   }

   .acc-balance {
     text-align: left;
   }

 }

 @container (max-width: 540px) {

   .card-grid {
     grid-template-columns: repeat(1, 1fr);
   }





 }

 /* --- COLOR PICKER DESIGN SYSTEM --- */
 .sandbox-color-picker-container {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #191919;
   border-radius: 24px;
   height: 400px;
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
   transition: background-color 0.35s cubic-bezier(0.25, 1, 0.5, 1);
   box-shadow:
     0 2px 1px rgba(0, 0, 0, 0.08),
     0 4px 2px rgba(0, 0, 0, 0.08),
     0 8px 4px rgba(0, 0, 0, 0.08),
     0 16px 8px rgba(0, 0, 0, 0.08),
     0 32px 16px rgba(0, 0, 0, 0.08);
   border: 1px solid rgb(34 34 34);
 }

 .sandbox-color-picker-controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: rgba(20, 20, 20, 0.85);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 10px 10px 10px 16px;
   border-radius: 99px;
   height: 64px;
   width: 100%;
   box-sizing: border-box;
   z-index: 10;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }

 .sandbox-slider-wrapper {
   flex-grow: 1;
   display: flex;
   align-items: center;
   margin-right: 16px;
 }

 .sandbox-color-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 38px;
   border-radius: 9999px;
   outline: none;
   cursor: pointer;
   margin: 0;
   padding: 0;
   background: linear-gradient(to right, #b2ebf2, #00e5ff);
   /* Fallback */
   transition: background 0.1s ease;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 /* Chrome/Safari thumb */
 .sandbox-color-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 2px solid #fbfbfb;
   background: transparent;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .sandbox-color-slider::-webkit-slider-thumb:hover {
   transform: scale(1.15);
 }

 /* Firefox thumb */
 .sandbox-color-slider::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 2px solid #fbfbfb;
   background: transparent;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .sandbox-color-slider::-moz-range-thumb:hover {
   transform: scale(1.15);
 }

 .sandbox-wheel-wrapper {
   position: relative;
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   cursor: pointer;
 }

 .sandbox-native-color {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
   z-index: 5;
 }

 .sandbox-wheel-btn {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
   border: 2px solid rgba(255, 255, 255, 0.3);
   box-sizing: border-box;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease;
   border: 1px solid #111111;
 }

 .sandbox-wheel-wrapper:hover .sandbox-wheel-btn {
   transform: scale(1.1);

 }

 /* Copy Button Styling */
 .sandbox-copy-btn {
   position: absolute;
   bottom: 20px;
   right: 20px;
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 0px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   padding: 8px 14px;
   color: #fbfbfb;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 120px;
   font-family: var(--font-sans);
   font-size: 14px !important;
   font-weight: 500;
   transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);

   outline: none;
   z-index: 10;
 }

 .sandbox-copy-btn span {
   font-size: 14px !important;
 }

 .sandbox-copy-btn:hover {
   background-color: rgba(0, 0, 0, 0.4);
   transform: scale(1.02);
 }

 .sandbox-copy-btn:active {
   transform: scale(0.95);
 }

 .sandbox-copy-btn svg {
   stroke: #fbfbfb;
   transition: stroke 0.2s ease;
 }

 .sandbox-copy-btn:hover svg {
   stroke: #fbfbfb;
 }