*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#141413;--tw-ring-color:rgba(217,119,87,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#141413;--tw-ring-color:rgba(217,119,87,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e8e5de}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Poppins,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a09c97}input::placeholder,textarea::placeholder{opacity:1;color:#a09c97}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-4{inset:1rem}.inset-y-0{top:0;bottom:0}.-bottom-6{bottom:-1.5rem}.-right-1{right:-.25rem}.-right-10{right:-2.5rem}.-top-1{top:-.25rem}.-top-16{top:-4rem}.-top-9{top:-2.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-2\.5{left:.625rem}.left-3{left:.75rem}.left-4{left:1rem}.left-\[20\%\]{left:20%}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.right-6{right:1.5rem}.right-\[10\%\]{right:10%}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-10{top:2.5rem}.top-14{top:3.5rem}.top-2{top:.5rem}.top-20{top:5rem}.top-3{top:.75rem}.top-4{top:1rem}.top-5{top:1.25rem}.top-8{top:2rem}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.z-\[60\]{z-index:60}.z-\[70\]{z-index:70}.z-\[9999\]{z-index:9999}.z-\[999\]{z-index:999}.col-span-1{grid-column:span 1/span 1}.col-span-12{grid-column:span 12/span 12}.col-span-2{grid-column:span 2/span 2}.col-span-4{grid-column:span 4/span 4}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-full{grid-column:1/-1}.row-span-2{grid-row:span 2/span 2}.m-1{margin:.25rem}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.mx-0{margin-left:0;margin-right:0}.mx-0\.5{margin-left:.125rem;margin-right:.125rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-mb-px{margin-bottom:-1px}.-mt-0\.5{margin-top:-.125rem}.-mt-6{margin-top:-1.5rem}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-12{margin-left:3rem}.ml-2{margin-left:.5rem}.ml-3\.5{margin-left:.875rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.ml-auto{margin-left:auto}.mr-0\.5{margin-right:.125rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-4{-webkit-line-clamp:4}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.table-footer-group{display:table-footer-group}.table-row{display:table-row}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.\!hidden{display:none!important}.hidden{display:none}.size-1\.5{width:.375rem;height:.375rem}.size-10{width:2.5rem;height:2.5rem}.size-2{width:.5rem;height:.5rem}.size-8{width:2rem;height:2rem}.size-9{width:2.25rem;height:2.25rem}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-36{height:9rem}.h-4{height:1rem}.h-40{height:10rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-52{height:13rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-\[300px\]{height:300px}.h-\[420px\]{height:420px}.h-\[50px\]{height:50px}.h-full{height:100%}.max-h-24{max-height:6rem}.max-h-32{max-height:8rem}.max-h-36{max-height:9rem}.max-h-40{max-height:10rem}.max-h-44{max-height:11rem}.max-h-48{max-height:12rem}.max-h-52{max-height:13rem}.max-h-60{max-height:15rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.max-h-\[240px\]{max-height:240px}.max-h-\[280px\]{max-height:280px}.max-h-\[320px\]{max-height:320px}.max-h-\[400px\]{max-height:400px}.max-h-\[50vh\]{max-height:50vh}.max-h-\[520px\]{max-height:520px}.max-h-\[600px\]{max-height:600px}.max-h-\[60vh\]{max-height:60vh}.max-h-\[70vh\]{max-height:70vh}.max-h-\[80vh\]{max-height:80vh}.max-h-\[85vh\]{max-height:85vh}.max-h-\[90vh\]{max-height:90vh}.max-h-\[calc\(100vh-200px\)\]{max-height:calc(100vh - 200px)}.max-h-\[calc\(100vh-280px\)\]{max-height:calc(100vh - 280px)}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-\[200px\]{min-height:200px}.min-h-\[60px\]{min-height:60px}.min-h-\[60vh\]{min-height:60vh}.min-h-\[calc\(100vh-3\.5rem\)\]{min-height:calc(100vh - 3.5rem)}.min-h-screen{min-height:100vh}.w-0\.5{width:.125rem}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-1\/4{width:25%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[140px\]{width:140px}.w-\[160px\]{width:160px}.w-\[1px\]{width:1px}.w-\[230px\]{width:230px}.w-\[80px\]{width:80px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[100px\]{min-width:100px}.min-w-\[120px\]{min-width:120px}.min-w-\[140px\]{min-width:140px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[200px\]{min-width:200px}.min-w-\[220px\]{min-width:220px}.min-w-\[250px\]{min-width:250px}.min-w-\[280px\]{min-width:280px}.min-w-\[32px\]{min-width:32px}.min-w-\[500px\]{min-width:500px}.min-w-\[60px\]{min-width:60px}.min-w-\[7rem\]{min-width:7rem}.min-w-max{min-width:-moz-max-content;min-width:max-content}.max-w-2xl{max-width:42rem}.max-w-32{max-width:8rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[100px\]{max-width:100px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[120px\]{max-width:120px}.max-w-\[140px\]{max-width:140px}.max-w-\[1440px\]{max-width:1440px}.max-w-\[150px\]{max-width:150px}.max-w-\[1600px\]{max-width:1600px}.max-w-\[180px\]{max-width:180px}.max-w-\[1920px\]{max-width:1920px}.max-w-\[200px\]{max-width:200px}.max-w-\[280px\]{max-width:280px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-10{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-10{--tw-translate-y:2.5rem}.translate-y-20{--tw-translate-y:5rem}.-rotate-90,.translate-y-20{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate:-90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .2s ease-out}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-none{resize:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-bloomberg-border>:not([hidden])~:not([hidden]),.divide-border-dark>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(42 41 39/var(--tw-divide-opacity,1))}.divide-border-dark\/50>:not([hidden])~:not([hidden]){border-color:rgba(42,41,39,.5)}.divide-slate-700\/30>:not([hidden])~:not([hidden]){border-color:rgba(42,41,39,.3)}.divide-slate-700\/50>:not([hidden])~:not([hidden]){border-color:rgba(42,41,39,.5)}.divide-white\/5>:not([hidden])~:not([hidden]){border-color:hsla(0,0%,100%,.05)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:2px}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg,.rounded-md{border-radius:4px}.rounded-none{border-radius:0}.rounded-sm{border-radius:2px}.rounded-xl{border-radius:.75rem}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-l-lg{border-top-left-radius:4px;border-bottom-left-radius:4px}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.rounded-r-lg{border-top-right-radius:4px;border-bottom-right-radius:4px}.rounded-t{border-top-left-radius:2px;border-top-right-radius:2px}.rounded-bl{border-bottom-left-radius:2px}.rounded-tl-lg{border-top-left-radius:4px}.rounded-tr-lg{border-top-right-radius:4px}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-l-\[3px\]{border-left-width:3px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#00c853\]{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-\[\#00c853\]\/20{border-color:rgba(0,200,83,.2)}.border-\[\#00c853\]\/30{border-color:rgba(0,200,83,.3)}.border-\[\#2a2927\]{--tw-border-opacity:1;border-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-\[\#2a2927\]\/50{border-color:rgba(42,41,39,.5)}.border-\[\#3a3735\]{--tw-border-opacity:1;border-color:rgb(58 55 53/var(--tw-border-opacity,1))}.border-\[\#c2410c\]{--tw-border-opacity:1;border-color:rgb(194 65 12/var(--tw-border-opacity,1))}.border-\[\#d97757\]{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-\[\#d97757\]\/10{border-color:rgba(217,119,87,.1)}.border-\[\#d97757\]\/20{border-color:rgba(217,119,87,.2)}.border-\[\#d97757\]\/25{border-color:rgba(217,119,87,.25)}.border-\[\#d97757\]\/30{border-color:rgba(217,119,87,.3)}.border-\[\#d97757\]\/40{border-color:rgba(217,119,87,.4)}.border-\[\#d97757\]\/50{border-color:rgba(217,119,87,.5)}.border-\[\#ef4444\]{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-\[\#ef4444\]\/20{border-color:rgba(239,68,68,.2)}.border-\[\#ef4444\]\/30{border-color:rgba(239,68,68,.3)}.border-accent-green{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-accent-red{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-amber-200{border-color:rgba(217,119,87,.2)}.border-amber-400,.border-amber-500{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-amber-500\/10{border-color:rgba(217,119,87,.1)}.border-amber-500\/15{border-color:rgba(217,119,87,.15)}.border-amber-500\/20{border-color:rgba(217,119,87,.2)}.border-amber-500\/25{border-color:rgba(217,119,87,.25)}.border-amber-500\/30{border-color:rgba(217,119,87,.3)}.border-amber-500\/40{border-color:rgba(217,119,87,.4)}.border-amber-500\/50{border-color:rgba(217,119,87,.5)}.border-amber-600{--tw-border-opacity:1;border-color:rgb(185 101 73/var(--tw-border-opacity,1))}.border-bloomberg-border{--tw-border-opacity:1;border-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(106 155 204/var(--tw-border-opacity,1))}.border-blue-500\/20{border-color:rgba(106,155,204,.2)}.border-blue-500\/30{border-color:rgba(106,155,204,.3)}.border-border-dark{--tw-border-opacity:1;border-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-border-dark\/50{border-color:rgba(42,41,39,.5)}.border-cyan-500{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-cyan-500\/20{border-color:rgba(217,119,87,.2)}.border-emerald-400\/30{border-color:rgba(0,200,83,.3)}.border-emerald-500{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-emerald-500\/10{border-color:rgba(0,200,83,.1)}.border-emerald-500\/15{border-color:rgba(0,200,83,.15)}.border-emerald-500\/20{border-color:rgba(0,200,83,.2)}.border-emerald-500\/25{border-color:rgba(0,200,83,.25)}.border-emerald-500\/30{border-color:rgba(0,200,83,.3)}.border-emerald-500\/50{border-color:rgba(0,200,83,.5)}.border-emerald-700{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-gray-100,.border-gray-200{--tw-border-opacity:1;border-color:rgb(232 229 222/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(176 171 165/var(--tw-border-opacity,1))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(160 156 151/var(--tw-border-opacity,1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-gray-700\/30{border-color:rgba(42,41,39,.3)}.border-gray-800{--tw-border-opacity:1;border-color:rgb(26 25 24/var(--tw-border-opacity,1))}.border-green-400{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-green-400\/20{border-color:rgba(0,200,83,.2)}.border-green-400\/30{border-color:rgba(0,200,83,.3)}.border-green-500{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-green-500\/10{border-color:rgba(0,200,83,.1)}.border-green-500\/20{border-color:rgba(0,200,83,.2)}.border-green-500\/25{border-color:rgba(0,200,83,.25)}.border-green-500\/30{border-color:rgba(0,200,83,.3)}.border-green-500\/50{border-color:rgba(0,200,83,.5)}.border-green-600\/30{border-color:rgba(0,200,83,.3)}.border-green-600\/50{border-color:rgba(0,200,83,.5)}.border-indigo-400,.border-indigo-500{--tw-border-opacity:1;border-color:rgb(106 155 204/var(--tw-border-opacity,1))}.border-indigo-500\/20{border-color:rgba(106,155,204,.2)}.border-orange-500{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-orange-500\/20{border-color:rgba(217,119,87,.2)}.border-orange-500\/30{border-color:rgba(217,119,87,.3)}.border-pink-500{--tw-border-opacity:1;border-color:rgb(196 135 94/var(--tw-border-opacity,1))}.border-pink-500\/20{border-color:rgba(196,135,94,.2)}.border-primary{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-primary\/20{border-color:rgba(217,119,87,.2)}.border-primary\/30{border-color:rgba(217,119,87,.3)}.border-purple-200{border-color:hsla(33,35%,57%,.2)}.border-purple-500{--tw-border-opacity:1;border-color:rgb(184 149 106/var(--tw-border-opacity,1))}.border-purple-500\/10{border-color:hsla(33,35%,57%,.1)}.border-purple-500\/20{border-color:hsla(33,35%,57%,.2)}.border-purple-500\/30{border-color:hsla(33,35%,57%,.3)}.border-purple-600{--tw-border-opacity:1;border-color:rgb(160 115 72/var(--tw-border-opacity,1))}.border-red-200{border-color:rgba(239,68,68,.2)}.border-red-400\/30{border-color:rgba(239,68,68,.3)}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-red-500\/10{border-color:rgba(239,68,68,.1)}.border-red-500\/15{border-color:rgba(239,68,68,.15)}.border-red-500\/20{border-color:rgba(239,68,68,.2)}.border-red-500\/30{border-color:rgba(239,68,68,.3)}.border-red-500\/50{border-color:rgba(239,68,68,.5)}.border-red-600\/20{border-color:rgba(239,68,68,.2)}.border-red-600\/30{border-color:rgba(239,68,68,.3)}.border-red-600\/50{border-color:rgba(239,68,68,.5)}.border-red-700{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-red-700\/20{border-color:rgba(239,68,68,.2)}.border-sky-500{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-sky-500\/20{border-color:rgba(217,119,87,.2)}.border-slate-500{--tw-border-opacity:1;border-color:rgb(138 133 128/var(--tw-border-opacity,1))}.border-slate-500\/10{border-color:hsla(30,4%,52%,.1)}.border-slate-500\/30{border-color:hsla(30,4%,52%,.3)}.border-slate-600{--tw-border-opacity:1;border-color:rgb(160 156 151/var(--tw-border-opacity,1))}.border-slate-600\/30{border-color:hsla(33,5%,61%,.3)}.border-slate-600\/40{border-color:hsla(33,5%,61%,.4)}.border-slate-600\/50{border-color:hsla(33,5%,61%,.5)}.border-slate-700{--tw-border-opacity:1;border-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-slate-700\/20{border-color:rgba(42,41,39,.2)}.border-slate-700\/30{border-color:rgba(42,41,39,.3)}.border-slate-700\/40{border-color:rgba(42,41,39,.4)}.border-slate-700\/50{border-color:rgba(42,41,39,.5)}.border-slate-700\/60{border-color:rgba(42,41,39,.6)}.border-slate-800{--tw-border-opacity:1;border-color:rgb(26 25 24/var(--tw-border-opacity,1))}.border-slate-800\/40{border-color:rgba(26,25,24,.4)}.border-slate-800\/50{border-color:rgba(26,25,24,.5)}.border-slate-900\/20{border-color:rgba(20,20,19,.2)}.border-teal-500\/30{border-color:rgba(217,119,87,.3)}.border-violet-500{--tw-border-opacity:1;border-color:rgb(184 149 106/var(--tw-border-opacity,1))}.border-violet-500\/20{border-color:hsla(33,35%,57%,.2)}.border-violet-500\/30{border-color:hsla(33,35%,57%,.3)}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.border-white\/70{border-color:hsla(0,0%,100%,.7)}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(212 165 116/var(--tw-border-opacity,1))}.border-yellow-500\/10{border-color:hsla(31,53%,64%,.1)}.border-yellow-500\/15{border-color:hsla(31,53%,64%,.15)}.border-yellow-500\/20{border-color:hsla(31,53%,64%,.2)}.border-yellow-500\/30{border-color:hsla(31,53%,64%,.3)}.border-yellow-500\/50{border-color:hsla(31,53%,64%,.5)}.border-zinc-700{--tw-border-opacity:1;border-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(26 25 24/var(--tw-border-opacity,1))}.border-zinc-800\/50{border-color:rgba(26,25,24,.5)}.border-b-\[\#2a2927\]{--tw-border-opacity:1;border-bottom-color:rgb(42 41 39/var(--tw-border-opacity,1))}.border-l-\[\#d97757\]{--tw-border-opacity:1;border-left-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-l-emerald-500{--tw-border-opacity:1;border-left-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-l-red-500{--tw-border-opacity:1;border-left-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-r-emerald-500{--tw-border-opacity:1;border-right-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-t-\[\#d97757\]{--tw-border-opacity:1;border-top-color:rgb(217 119 87/var(--tw-border-opacity,1))}.border-t-emerald-400,.border-t-emerald-500{--tw-border-opacity:1;border-top-color:rgb(0 200 83/var(--tw-border-opacity,1))}.border-t-purple-500{--tw-border-opacity:1;border-top-color:rgb(184 149 106/var(--tw-border-opacity,1))}.border-t-slate-900{--tw-border-opacity:1;border-top-color:rgb(20 20 19/var(--tw-border-opacity,1))}.border-t-transparent{border-top-color:transparent}.border-t-white{--tw-border-opacity:1;border-top-color:rgb(255 255 255/var(--tw-border-opacity,1))}.bg-\[\#00c853\]{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-\[\#00c853\]\/10{background-color:rgba(0,200,83,.1)}.bg-\[\#00c853\]\/20{background-color:rgba(0,200,83,.2)}.bg-\[\#00c853\]\/5{background-color:rgba(0,200,83,.05)}.bg-\[\#00c853\]\/55{background-color:rgba(0,200,83,.55)}.bg-\[\#14130f\]{--tw-bg-opacity:1;background-color:rgb(20 19 15/var(--tw-bg-opacity,1))}.bg-\[\#14130f\]\/50{background-color:rgba(20,19,15,.5)}.bg-\[\#141413\]{--tw-bg-opacity:1;background-color:rgb(20 20 19/var(--tw-bg-opacity,1))}.bg-\[\#141413\]\/90{background-color:rgba(20,20,19,.9)}.bg-\[\#1a1918\]{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.bg-\[\#1a1918\]\/50{background-color:rgba(26,25,24,.5)}.bg-\[\#23242f\]{--tw-bg-opacity:1;background-color:rgb(35 36 47/var(--tw-bg-opacity,1))}.bg-\[\#241d17\]{--tw-bg-opacity:1;background-color:rgb(36 29 23/var(--tw-bg-opacity,1))}.bg-\[\#2a2927\]{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.bg-\[\#2a2927\]\/30{background-color:rgba(42,41,39,.3)}.bg-\[\#2a2927\]\/50{background-color:rgba(42,41,39,.5)}.bg-\[\#2d2e3b\]{--tw-bg-opacity:1;background-color:rgb(45 46 59/var(--tw-bg-opacity,1))}.bg-\[\#3a3735\]{--tw-bg-opacity:1;background-color:rgb(58 55 53/var(--tw-bg-opacity,1))}.bg-\[\#6dab6e\]{--tw-bg-opacity:1;background-color:rgb(109 171 110/var(--tw-bg-opacity,1))}.bg-\[\#7a3f28\]\/90{background-color:rgba(122,63,40,.9)}.bg-\[\#8a8580\]\/20{background-color:hsla(30,4%,52%,.2)}.bg-\[\#b8956a\]{--tw-bg-opacity:1;background-color:rgb(184 149 106/var(--tw-bg-opacity,1))}.bg-\[\#c2410c\]\/70{background-color:rgba(194,65,12,.7)}.bg-\[\#c2613f\]{--tw-bg-opacity:1;background-color:rgb(194 97 63/var(--tw-bg-opacity,1))}.bg-\[\#d97757\]{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-\[\#d97757\]\/10{background-color:rgba(217,119,87,.1)}.bg-\[\#d97757\]\/15{background-color:rgba(217,119,87,.15)}.bg-\[\#d97757\]\/20{background-color:rgba(217,119,87,.2)}.bg-\[\#d97757\]\/30{background-color:rgba(217,119,87,.3)}.bg-\[\#d97757\]\/5{background-color:rgba(217,119,87,.05)}.bg-\[\#d97757\]\/50{background-color:rgba(217,119,87,.5)}.bg-\[\#d97757\]\/90{background-color:rgba(217,119,87,.9)}.bg-\[\#e0875f\]{--tw-bg-opacity:1;background-color:rgb(224 135 95/var(--tw-bg-opacity,1))}.bg-\[\#e0875f\]\/30{background-color:rgba(224,135,95,.3)}.bg-\[\#ef4444\]{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-\[\#ef4444\]\/10{background-color:rgba(239,68,68,.1)}.bg-\[\#ef4444\]\/20{background-color:rgba(239,68,68,.2)}.bg-\[\#ef4444\]\/5{background-color:rgba(239,68,68,.05)}.bg-\[\#ef4444\]\/55{background-color:rgba(239,68,68,.55)}.bg-accent-green{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-accent-green\/10{background-color:rgba(0,200,83,.1)}.bg-accent-green\/20{background-color:rgba(0,200,83,.2)}.bg-accent-red{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-accent-red\/10{background-color:rgba(239,68,68,.1)}.bg-accent-red\/20{background-color:rgba(239,68,68,.2)}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-amber-400\/10{background-color:rgba(217,119,87,.1)}.bg-amber-400\/15{background-color:rgba(217,119,87,.15)}.bg-amber-400\/20{background-color:rgba(217,119,87,.2)}.bg-amber-50{background-color:rgba(217,119,87,.1)}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-amber-500\/10{background-color:rgba(217,119,87,.1)}.bg-amber-500\/15{background-color:rgba(217,119,87,.15)}.bg-amber-500\/20{background-color:rgba(217,119,87,.2)}.bg-amber-500\/5{background-color:rgba(217,119,87,.05)}.bg-amber-500\/60{background-color:rgba(217,119,87,.6)}.bg-amber-600{--tw-bg-opacity:1;background-color:rgb(185 101 73/var(--tw-bg-opacity,1))}.bg-amber-900\/20{background-color:rgba(217,119,87,.2)}.bg-background-dark{--tw-bg-opacity:1;background-color:rgb(20 20 19/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/50{background-color:rgba(0,0,0,.5)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-black\/75{background-color:rgba(0,0,0,.75)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-bloomberg-bg{--tw-bg-opacity:1;background-color:rgb(20 20 19/var(--tw-bg-opacity,1))}.bg-bloomberg-surface{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(106 155 204/var(--tw-bg-opacity,1))}.bg-blue-500\/10{background-color:rgba(106,155,204,.1)}.bg-blue-500\/20{background-color:rgba(106,155,204,.2)}.bg-blue-500\/5{background-color:rgba(106,155,204,.05)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(90 138 184/var(--tw-bg-opacity,1))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(74 122 168/var(--tw-bg-opacity,1))}.bg-border-dark{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.bg-card-dark{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.bg-cyan-500{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-cyan-500\/10{background-color:rgba(217,119,87,.1)}.bg-emerald-100{background-color:rgba(0,200,83,.15)}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-emerald-400\/15{background-color:rgba(0,200,83,.15)}.bg-emerald-400\/20{background-color:rgba(0,200,83,.2)}.bg-emerald-50{background-color:rgba(0,200,83,.1)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-emerald-500\/10{background-color:rgba(0,200,83,.1)}.bg-emerald-500\/15{background-color:rgba(0,200,83,.15)}.bg-emerald-500\/20{background-color:rgba(0,200,83,.2)}.bg-emerald-500\/30{background-color:rgba(0,200,83,.3)}.bg-emerald-500\/5{background-color:rgba(0,200,83,.05)}.bg-emerald-500\/60{background-color:rgba(0,200,83,.6)}.bg-emerald-500\/70{background-color:rgba(0,200,83,.7)}.bg-emerald-500\/90{background-color:rgba(0,200,83,.9)}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-emerald-600\/60{background-color:rgba(0,200,83,.6)}.bg-emerald-800\/40{background-color:rgba(0,200,83,.4)}.bg-emerald-900\/90{background-color:rgba(0,200,83,.9)}.bg-gray-100,.bg-gray-200,.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(232 229 222/var(--tw-bg-opacity,1))}.bg-gray-50\/50{background-color:hsla(42,18%,89%,.5)}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(138 133 128/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(26,25,24,.5)}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-green-400\/15{background-color:rgba(0,200,83,.15)}.bg-green-400\/20{background-color:rgba(0,200,83,.2)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(0,200,83,.1)}.bg-green-500\/15{background-color:rgba(0,200,83,.15)}.bg-green-500\/20{background-color:rgba(0,200,83,.2)}.bg-green-500\/5{background-color:rgba(0,200,83,.05)}.bg-green-500\/60{background-color:rgba(0,200,83,.6)}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-green-600\/20{background-color:rgba(0,200,83,.2)}.bg-green-600\/60{background-color:rgba(0,200,83,.6)}.bg-green-700{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.bg-green-900\/20{background-color:rgba(0,200,83,.2)}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(106 155 204/var(--tw-bg-opacity,1))}.bg-indigo-500\/10{background-color:rgba(106,155,204,.1)}.bg-indigo-500\/30{background-color:rgba(106,155,204,.3)}.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-orange-400\/10{background-color:rgba(217,119,87,.1)}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-orange-500\/10{background-color:rgba(217,119,87,.1)}.bg-orange-500\/15{background-color:rgba(217,119,87,.15)}.bg-orange-500\/20{background-color:rgba(217,119,87,.2)}.bg-orange-500\/70{background-color:rgba(217,119,87,.7)}.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(196 135 94/var(--tw-bg-opacity,1))}.bg-pink-500\/10{background-color:rgba(196,135,94,.1)}.bg-pink-500\/20{background-color:rgba(196,135,94,.2)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-primary\/10{background-color:rgba(217,119,87,.1)}.bg-primary\/20{background-color:rgba(217,119,87,.2)}.bg-primary\/5{background-color:rgba(217,119,87,.05)}.bg-primary\/90{background-color:rgba(217,119,87,.9)}.bg-purple-400\/20{background-color:hsla(33,35%,57%,.2)}.bg-purple-50{background-color:hsla(33,35%,57%,.1)}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(184 149 106/var(--tw-bg-opacity,1))}.bg-purple-500\/10{background-color:hsla(33,35%,57%,.1)}.bg-purple-500\/15{background-color:hsla(33,35%,57%,.15)}.bg-purple-500\/20{background-color:hsla(33,35%,57%,.2)}.bg-purple-500\/5{background-color:hsla(33,35%,57%,.05)}.bg-purple-500\/50{background-color:hsla(33,35%,57%,.5)}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(160 115 72/var(--tw-bg-opacity,1))}.bg-red-100{background-color:rgba(239,68,68,.15)}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-400\/10{background-color:rgba(239,68,68,.1)}.bg-red-400\/15{background-color:rgba(239,68,68,.15)}.bg-red-400\/20{background-color:rgba(239,68,68,.2)}.bg-red-50{background-color:rgba(239,68,68,.1)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-500\/15{background-color:rgba(239,68,68,.15)}.bg-red-500\/20{background-color:rgba(239,68,68,.2)}.bg-red-500\/30{background-color:rgba(239,68,68,.3)}.bg-red-500\/5{background-color:rgba(239,68,68,.05)}.bg-red-500\/70{background-color:rgba(239,68,68,.7)}.bg-red-500\/90{background-color:rgba(239,68,68,.9)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-600\/10{background-color:rgba(239,68,68,.1)}.bg-red-600\/60{background-color:rgba(239,68,68,.6)}.bg-red-700\/10{background-color:rgba(239,68,68,.1)}.bg-red-800{background-color:rgba(239,68,68,.3)}.bg-red-800\/40{background-color:rgba(239,68,68,.4)}.bg-red-800\/60{background-color:rgba(239,68,68,.6)}.bg-red-900\/20{background-color:rgba(239,68,68,.2)}.bg-red-900\/30{background-color:rgba(239,68,68,.3)}.bg-red-900\/40{background-color:rgba(239,68,68,.4)}.bg-red-900\/90{background-color:rgba(239,68,68,.9)}.bg-sky-400{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-sky-400\/20{background-color:rgba(217,119,87,.2)}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-sky-500\/10{background-color:rgba(217,119,87,.1)}.bg-sky-500\/15{background-color:rgba(217,119,87,.15)}.bg-sky-500\/20{background-color:rgba(217,119,87,.2)}.bg-sky-600{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(138 133 128/var(--tw-bg-opacity,1))}.bg-slate-500\/10{background-color:hsla(30,4%,52%,.1)}.bg-slate-500\/20{background-color:hsla(30,4%,52%,.2)}.bg-slate-500\/5{background-color:hsla(30,4%,52%,.05)}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(160 156 151/var(--tw-bg-opacity,1))}.bg-slate-600\/50{background-color:hsla(33,5%,61%,.5)}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.bg-slate-700\/30{background-color:rgba(42,41,39,.3)}.bg-slate-700\/50{background-color:rgba(42,41,39,.5)}.bg-slate-700\/60{background-color:rgba(42,41,39,.6)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.bg-slate-800\/20{background-color:rgba(26,25,24,.2)}.bg-slate-800\/30{background-color:rgba(26,25,24,.3)}.bg-slate-800\/40{background-color:rgba(26,25,24,.4)}.bg-slate-800\/50{background-color:rgba(26,25,24,.5)}.bg-slate-800\/60{background-color:rgba(26,25,24,.6)}.bg-slate-800\/70{background-color:rgba(26,25,24,.7)}.bg-slate-800\/80{background-color:rgba(26,25,24,.8)}.bg-slate-800\/95{background-color:rgba(26,25,24,.95)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(20 20 19/var(--tw-bg-opacity,1))}.bg-slate-900\/30{background-color:rgba(20,20,19,.3)}.bg-slate-900\/40{background-color:rgba(20,20,19,.4)}.bg-slate-900\/50{background-color:rgba(20,20,19,.5)}.bg-slate-900\/60{background-color:rgba(20,20,19,.6)}.bg-slate-900\/90{background-color:rgba(20,20,19,.9)}.bg-slate-900\/95{background-color:rgba(20,20,19,.95)}.bg-teal-500\/20{background-color:rgba(217,119,87,.2)}.bg-text-secondary\/10{background-color:hsla(33,5%,61%,.1)}.bg-transparent{background-color:transparent}.bg-violet-500{--tw-bg-opacity:1;background-color:rgb(184 149 106/var(--tw-bg-opacity,1))}.bg-violet-500\/10{background-color:hsla(33,35%,57%,.1)}.bg-violet-500\/15{background-color:hsla(33,35%,57%,.15)}.bg-violet-500\/20{background-color:hsla(33,35%,57%,.2)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-white\/40{background-color:hsla(0,0%,100%,.4)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/\[0\.02\]{background-color:hsla(0,0%,100%,.02)}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(212 165 116/var(--tw-bg-opacity,1))}.bg-yellow-400\/20{background-color:hsla(31,53%,64%,.2)}.bg-yellow-50{background-color:hsla(31,53%,64%,.1)}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(212 165 116/var(--tw-bg-opacity,1))}.bg-yellow-500\/10{background-color:hsla(31,53%,64%,.1)}.bg-yellow-500\/20{background-color:hsla(31,53%,64%,.2)}.bg-yellow-500\/30{background-color:hsla(31,53%,64%,.3)}.bg-yellow-500\/5{background-color:hsla(31,53%,64%,.05)}.bg-yellow-500\/90{background-color:hsla(31,53%,64%,.9)}.bg-yellow-900\/20{background-color:hsla(31,53%,64%,.2)}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.bg-zinc-800\/50{background-color:rgba(26,25,24,.5)}.bg-zinc-900\/30{background-color:rgba(20,20,19,.3)}.bg-opacity-95{--tw-bg-opacity:0.95}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-\[\#00c853\]{--tw-gradient-from:#00c853 var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#141413\]{--tw-gradient-from:#141413 var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,20,19,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#1a1918\]{--tw-gradient-from:#1a1918 var(--tw-gradient-from-position);--tw-gradient-to:rgba(26,25,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#c2410c\]{--tw-gradient-from:#c2410c var(--tw-gradient-from-position);--tw-gradient-to:rgba(194,65,12,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#d97757\]{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#d97757\]\/20{--tw-gradient-from:rgba(217,119,87,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#e0875f\]{--tw-gradient-from:#e0875f var(--tw-gradient-from-position);--tw-gradient-to:rgba(224,135,95,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-\[\#ef4444\]{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-amber-400,.from-amber-500{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-amber-500\/10{--tw-gradient-from:rgba(217,119,87,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-amber-500\/20{--tw-gradient-from:rgba(217,119,87,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from:#6a9bcc var(--tw-gradient-from-position);--tw-gradient-to:rgba(106,155,204,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-600{--tw-gradient-from:#5a8ab8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(90,138,184,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-600\/20{--tw-gradient-from:rgba(90,138,184,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(90,138,184,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-400,.from-emerald-500{--tw-gradient-from:#00c853 var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-500\/10{--tw-gradient-from:rgba(0,200,83,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-500\/20{--tw-gradient-from:rgba(0,200,83,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-500\/30{--tw-gradient-from:rgba(0,200,83,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-emerald-600,.from-green-400,.from-green-500{--tw-gradient-from:#00c853 var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500\/10{--tw-gradient-from:rgba(0,200,83,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500\/20{--tw-gradient-from:rgba(0,200,83,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,200,83,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6a9bcc var(--tw-gradient-from-position);--tw-gradient-to:rgba(106,155,204,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-400,.from-orange-500{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pink-500{--tw-gradient-from:#c4875e var(--tw-gradient-from-position);--tw-gradient-to:rgba(196,135,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-400{--tw-gradient-from:#b8956a var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from:hsla(33,35%,57%,.1) var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from:#b8956a var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500\/10{--tw-gradient-from:hsla(33,35%,57%,.1) var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500\/20{--tw-gradient-from:hsla(33,35%,57%,.2) var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from:#a07348 var(--tw-gradient-from-position);--tw-gradient-to:rgba(160,115,72,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-900,.from-purple-900\/20{--tw-gradient-from:hsla(33,35%,57%,.2) var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-400,.from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500\/10{--tw-gradient-from:rgba(239,68,68,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500\/20{--tw-gradient-from:rgba(239,68,68,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-700,.from-rose-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sky-500{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-400{--tw-gradient-from:#a09c97 var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,5%,61%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-500{--tw-gradient-from:#8a8580 var(--tw-gradient-from-position);--tw-gradient-to:hsla(30,4%,52%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-500\/20{--tw-gradient-from:hsla(30,4%,52%,.2) var(--tw-gradient-from-position);--tw-gradient-to:hsla(30,4%,52%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-600{--tw-gradient-from:#a09c97 var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,5%,61%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-700{--tw-gradient-from:#2a2927 var(--tw-gradient-from-position);--tw-gradient-to:rgba(42,41,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-800{--tw-gradient-from:#1a1918 var(--tw-gradient-from-position);--tw-gradient-to:rgba(26,25,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-800\/80{--tw-gradient-from:rgba(26,25,24,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(26,25,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-800\/95{--tw-gradient-from:rgba(26,25,24,.95) var(--tw-gradient-from-position);--tw-gradient-to:rgba(26,25,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-900{--tw-gradient-from:#141413 var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,20,19,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500{--tw-gradient-from:#d97757 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-violet-500{--tw-gradient-from:#b8956a var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-violet-500\/20{--tw-gradient-from:hsla(33,35%,57%,.2) var(--tw-gradient-from-position);--tw-gradient-to:hsla(33,35%,57%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-yellow-500{--tw-gradient-from:#d4a574 var(--tw-gradient-from-position);--tw-gradient-to:hsla(31,53%,64%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-yellow-500\/20{--tw-gradient-from:hsla(31,53%,64%,.2) var(--tw-gradient-from-position);--tw-gradient-to:hsla(31,53%,64%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-amber-500{--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#d97757 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-amber-500\/20{--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(217,119,87,.2) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-amber-500\/50{--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(217,119,87,.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-slate-600{--tw-gradient-to:hsla(33,5%,61%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#a09c97 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-yellow-500{--tw-gradient-to:hsla(31,53%,64%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#d4a574 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#000\]{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.to-\[\#1a1918\]{--tw-gradient-to:#1a1918 var(--tw-gradient-to-position)}.to-\[\#b8956a\]{--tw-gradient-to:#b8956a var(--tw-gradient-to-position)}.to-\[\#b96549\]{--tw-gradient-to:#b96549 var(--tw-gradient-to-position)}.to-\[\#b96549\]\/20{--tw-gradient-to:rgba(185,101,73,.2) var(--tw-gradient-to-position)}.to-\[\#c2410c\]{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}.to-\[\#c2410c\]\/10{--tw-gradient-to:rgba(194,65,12,.1) var(--tw-gradient-to-position)}.to-\[\#c2410c\]\/20{--tw-gradient-to:rgba(194,65,12,.2) var(--tw-gradient-to-position)}.to-\[\#c2613f\]{--tw-gradient-to:#c2613f var(--tw-gradient-to-position)}.to-\[\#c2613f\]\/20{--tw-gradient-to:rgba(194,97,63,.2) var(--tw-gradient-to-position)}.to-\[\#c4875e\]{--tw-gradient-to:#c4875e var(--tw-gradient-to-position)}.to-\[\#d97757\]{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.to-\[\#d97757\]\/20{--tw-gradient-to:rgba(217,119,87,.2) var(--tw-gradient-to-position)}.to-\[\#e0875f\]{--tw-gradient-to:#e0875f var(--tw-gradient-to-position)}.to-amber-300,.to-amber-400,.to-amber-500{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.to-amber-600{--tw-gradient-to:#b96549 var(--tw-gradient-to-position)}.to-amber-600\/10{--tw-gradient-to:rgba(185,101,73,.1) var(--tw-gradient-to-position)}.to-blue-500{--tw-gradient-to:#6a9bcc var(--tw-gradient-to-position)}.to-blue-600{--tw-gradient-to:#5a8ab8 var(--tw-gradient-to-position)}.to-cyan-400,.to-cyan-500,.to-cyan-600{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.to-emerald-400,.to-emerald-500{--tw-gradient-to:#00c853 var(--tw-gradient-to-position)}.to-emerald-500\/20{--tw-gradient-to:rgba(0,200,83,.2) var(--tw-gradient-to-position)}.to-emerald-600{--tw-gradient-to:#00c853 var(--tw-gradient-to-position)}.to-emerald-600\/10{--tw-gradient-to:rgba(0,200,83,.1) var(--tw-gradient-to-position)}.to-emerald-700,.to-green-400{--tw-gradient-to:#00c853 var(--tw-gradient-to-position)}.to-green-500\/5{--tw-gradient-to:rgba(0,200,83,.05) var(--tw-gradient-to-position)}.to-green-600{--tw-gradient-to:#00c853 var(--tw-gradient-to-position)}.to-green-600\/10{--tw-gradient-to:rgba(0,200,83,.1) var(--tw-gradient-to-position)}.to-green-700{--tw-gradient-to:#00c853 var(--tw-gradient-to-position)}.to-indigo-600{--tw-gradient-to:#5a8ab8 var(--tw-gradient-to-position)}.to-orange-400,.to-orange-500{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.to-orange-500\/5{--tw-gradient-to:rgba(217,119,87,.05) var(--tw-gradient-to-position)}.to-orange-600{--tw-gradient-to:#b96549 var(--tw-gradient-to-position)}.to-orange-600\/10{--tw-gradient-to:rgba(185,101,73,.1) var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#c4875e var(--tw-gradient-to-position)}.to-pink-600,.to-purple-500{--tw-gradient-to:#b8956a var(--tw-gradient-to-position)}.to-purple-500\/10{--tw-gradient-to:hsla(33,35%,57%,.1) var(--tw-gradient-to-position)}.to-purple-500\/20{--tw-gradient-to:hsla(33,35%,57%,.2) var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#a07348 var(--tw-gradient-to-position)}.to-purple-600\/10{--tw-gradient-to:rgba(160,115,72,.1) var(--tw-gradient-to-position)}.to-purple-600\/20{--tw-gradient-to:rgba(160,115,72,.2) var(--tw-gradient-to-position)}.to-purple-700{--tw-gradient-to:#8a6340 var(--tw-gradient-to-position)}.to-purple-900\/20{--tw-gradient-to:hsla(33,35%,57%,.2) var(--tw-gradient-to-position)}.to-red-400,.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.to-red-500\/10{--tw-gradient-to:rgba(239,68,68,.1) var(--tw-gradient-to-position)}.to-red-500\/80{--tw-gradient-to:rgba(239,68,68,.8) var(--tw-gradient-to-position)}.to-red-600{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.to-red-600\/10{--tw-gradient-to:rgba(239,68,68,.1) var(--tw-gradient-to-position)}.to-rose-700{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.to-sky-500\/20{--tw-gradient-to:rgba(217,119,87,.2) var(--tw-gradient-to-position)}.to-sky-600{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.to-slate-400,.to-slate-600{--tw-gradient-to:#a09c97 var(--tw-gradient-to-position)}.to-slate-600\/10{--tw-gradient-to:hsla(33,5%,61%,.1) var(--tw-gradient-to-position)}.to-slate-700{--tw-gradient-to:#2a2927 var(--tw-gradient-to-position)}.to-slate-800{--tw-gradient-to:#1a1918 var(--tw-gradient-to-position)}.to-slate-900{--tw-gradient-to:#141413 var(--tw-gradient-to-position)}.to-slate-900\/80{--tw-gradient-to:rgba(20,20,19,.8) var(--tw-gradient-to-position)}.to-teal-600,.to-teal-700{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-violet-50,.to-violet-500\/10{--tw-gradient-to:hsla(33,35%,57%,.1) var(--tw-gradient-to-position)}.to-violet-500\/5{--tw-gradient-to:hsla(33,35%,57%,.05) var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to:#a07348 var(--tw-gradient-to-position)}.to-violet-600\/10{--tw-gradient-to:rgba(160,115,72,.1) var(--tw-gradient-to-position)}.to-yellow-500{--tw-gradient-to:#d4a574 var(--tw-gradient-to-position)}.to-yellow-600{--tw-gradient-to:#b8956a var(--tw-gradient-to-position)}.to-yellow-600\/10{--tw-gradient-to:hsla(33,35%,57%,.1) var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-16{padding:4rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-2\.5{padding-bottom:.625rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-10{padding-left:2.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pl-7{padding-left:1.75rem}.pl-8{padding-left:2rem}.pl-9{padding-left:2.25rem}.pr-1{padding-right:.25rem}.pr-10{padding-right:2.5rem}.pr-14{padding-right:3.5rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-7{padding-right:1.75rem}.pr-8{padding-right:2rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:JetBrains Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[0\.55rem\]{font-size:.55rem}.text-\[0\.62rem\]{font-size:.62rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.6rem\]{font-size:.6rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[26px\]{font-size:26px}.text-\[40px\]{font-size:40px}.text-\[48px\]{font-size:48px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.italic{font-style:italic}.not-italic{font-style:normal}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[0\.08em\]{letter-spacing:.08em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#00c853\]{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-\[\#00c853\]\/60{color:rgba(0,200,83,.6)}.text-\[\#00c853\]\/70{color:rgba(0,200,83,.7)}.text-\[\#00c853\]\/80{color:rgba(0,200,83,.8)}.text-\[\#4a4845\]{--tw-text-opacity:1;color:rgb(74 72 69/var(--tw-text-opacity,1))}.text-\[\#5a5550\]{--tw-text-opacity:1;color:rgb(90 85 80/var(--tw-text-opacity,1))}.text-\[\#8a8580\]{--tw-text-opacity:1;color:rgb(138 133 128/var(--tw-text-opacity,1))}.text-\[\#8a8580\]\/50{color:hsla(30,4%,52%,.5)}.text-\[\#a09c97\]{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-\[\#a8a29a\]{--tw-text-opacity:1;color:rgb(168 162 154/var(--tw-text-opacity,1))}.text-\[\#c0c1d4\]{--tw-text-opacity:1;color:rgb(192 193 212/var(--tw-text-opacity,1))}.text-\[\#c2410c\]{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-\[\#d97757\]{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-\[\#d97757\]\/60{color:rgba(217,119,87,.6)}.text-\[\#d97757\]\/70{color:rgba(217,119,87,.7)}.text-\[\#e0875f\]{--tw-text-opacity:1;color:rgb(224 135 95/var(--tw-text-opacity,1))}.text-\[\#e6edf3\]{--tw-text-opacity:1;color:rgb(230 237 243/var(--tw-text-opacity,1))}.text-\[\#e8e5de\]{--tw-text-opacity:1;color:rgb(232 229 222/var(--tw-text-opacity,1))}.text-\[\#ef4444\]{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-\[\#ef4444\]\/60{color:rgba(239,68,68,.6)}.text-\[\#ef4444\]\/70{color:rgba(239,68,68,.7)}.text-\[\#ef4444\]\/80{color:rgba(239,68,68,.8)}.text-\[\#f5d0c0\]{--tw-text-opacity:1;color:rgb(245 208 192/var(--tw-text-opacity,1))}.text-accent-green{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-accent-red{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-amber-300,.text-amber-400{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-amber-400\/70{color:rgba(217,119,87,.7)}.text-amber-400\/80{color:rgba(217,119,87,.8)}.text-amber-400\/90{color:rgba(217,119,87,.9)}.text-amber-500{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-amber-500\/60{color:rgba(217,119,87,.6)}.text-amber-500\/70{color:rgba(217,119,87,.7)}.text-amber-900{color:rgba(217,119,87,.2)}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-400,.text-blue-500{--tw-text-opacity:1;color:rgb(106 155 204/var(--tw-text-opacity,1))}.text-cyan-400,.text-cyan-500{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-emerald-200{color:rgba(0,200,83,.2)}.text-emerald-300,.text-emerald-400{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-emerald-400\/60{color:rgba(0,200,83,.6)}.text-emerald-400\/70{color:rgba(0,200,83,.7)}.text-emerald-500{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-emerald-500\/40{color:rgba(0,200,83,.4)}.text-emerald-500\/60{color:rgba(0,200,83,.6)}.text-emerald-600{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(176 171 165/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(138 133 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(42 41 39/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(26 25 24/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(20 20 19/var(--tw-text-opacity,1))}.text-green-300,.text-green-400{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-green-400\/50{color:rgba(0,200,83,.5)}.text-green-400\/70{color:rgba(0,200,83,.7)}.text-green-500{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.text-indigo-300,.text-indigo-400{--tw-text-opacity:1;color:rgb(106 155 204/var(--tw-text-opacity,1))}.text-lime-400{--tw-text-opacity:1;color:rgb(163 230 53/var(--tw-text-opacity,1))}.text-orange-200{color:rgba(217,119,87,.2)}.text-orange-300,.text-orange-400{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-orange-400\/60{color:rgba(217,119,87,.6)}.text-orange-500{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-pink-400{--tw-text-opacity:1;color:rgb(196 135 94/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-purple-300,.text-purple-400{--tw-text-opacity:1;color:rgb(184 149 106/var(--tw-text-opacity,1))}.text-purple-400\/70{color:hsla(33,35%,57%,.7)}.text-purple-500{--tw-text-opacity:1;color:rgb(184 149 106/var(--tw-text-opacity,1))}.text-red-200{color:rgba(239,68,68,.2)}.text-red-300,.text-red-400{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-400\/50{color:rgba(239,68,68,.5)}.text-red-400\/60{color:rgba(239,68,68,.6)}.text-red-400\/70{color:rgba(239,68,68,.7)}.text-red-400\/80{color:rgba(239,68,68,.8)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-500\/60{color:rgba(239,68,68,.6)}.text-red-600,.text-rose-400{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-sky-400,.text-sky-500{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(232 229 222/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(176 171 165/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(138 133 128/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(42 41 39/var(--tw-text-opacity,1))}.text-teal-400{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.text-text-secondary{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-text-secondary\/50{color:hsla(33,5%,61%,.5)}.text-violet-400,.text-violet-500{--tw-text-opacity:1;color:rgb(184 149 106/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/90{color:hsla(0,0%,100%,.9)}.text-yellow-200{color:hsla(31,53%,64%,.2)}.text-yellow-300,.text-yellow-400{--tw-text-opacity:1;color:rgb(212 165 116/var(--tw-text-opacity,1))}.text-yellow-400\/70{color:hsla(31,53%,64%,.7)}.text-yellow-500{--tw-text-opacity:1;color:rgb(212 165 116/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(176 171 165/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(138 133 128/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-purple-400\/30{text-decoration-color:hsla(33,35%,57%,.3)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-\[\#8a8580\]::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(138 133 128/var(--tw-placeholder-opacity,1))}.placeholder-\[\#8a8580\]::placeholder{--tw-placeholder-opacity:1;color:rgb(138 133 128/var(--tw-placeholder-opacity,1))}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(160 156 151/var(--tw-placeholder-opacity,1))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(160 156 151/var(--tw-placeholder-opacity,1))}.placeholder-slate-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(138 133 128/var(--tw-placeholder-opacity,1))}.placeholder-slate-500::placeholder{--tw-placeholder-opacity:1;color:rgb(138 133 128/var(--tw-placeholder-opacity,1))}.placeholder-text-secondary::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(160 156 151/var(--tw-placeholder-opacity,1))}.placeholder-text-secondary::placeholder{--tw-placeholder-opacity:1;color:rgb(160 156 151/var(--tw-placeholder-opacity,1))}.placeholder-text-secondary\/50::-moz-placeholder{color:hsla(33,5%,61%,.5)}.placeholder-text-secondary\/50::placeholder{color:hsla(33,5%,61%,.5)}.accent-primary{accent-color:#d97757}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\[0_0_8px_rgba\(0\2c 200\2c 83\2c 0\.4\)\]{--tw-shadow:0 0 8px rgba(0,200,83,.4);--tw-shadow-colored:0 0 8px var(--tw-shadow-color)}.shadow-\[0_0_8px_rgba\(0\2c 200\2c 83\2c 0\.4\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[\#00c853\]\/20{--tw-shadow-color:rgba(0,200,83,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-\[\#5a2a18\]\/20{--tw-shadow-color:rgba(90,42,24,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-\[\#d97757\]\/20{--tw-shadow-color:rgba(217,119,87,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-\[\#d97757\]\/25{--tw-shadow-color:rgba(217,119,87,.25);--tw-shadow:var(--tw-shadow-colored)}.shadow-\[\#ef4444\]\/20{--tw-shadow-color:rgba(239,68,68,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-amber-500\/20{--tw-shadow-color:rgba(217,119,87,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-black\/20{--tw-shadow-color:rgba(0,0,0,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-black\/50{--tw-shadow-color:rgba(0,0,0,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-cyan-500{--tw-shadow-color:#d97757;--tw-shadow:var(--tw-shadow-colored)}.shadow-green-500\/25{--tw-shadow-color:rgba(0,200,83,.25);--tw-shadow:var(--tw-shadow-colored)}.shadow-primary\/20{--tw-shadow-color:rgba(217,119,87,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-primary\/25{--tw-shadow-color:rgba(217,119,87,.25);--tw-shadow:var(--tw-shadow-colored)}.shadow-purple-500\/10{--tw-shadow-color:hsla(33,35%,57%,.1);--tw-shadow:var(--tw-shadow-colored)}.shadow-red-500\/20{--tw-shadow-color:rgba(239,68,68,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-teal-500\/25{--tw-shadow-color:rgba(217,119,87,.25);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.\!ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-emerald-500\/50{--tw-ring-color:rgba(0,200,83,.5)}.ring-indigo-500{--tw-ring-opacity:1;--tw-ring-color:rgb(106 155 204/var(--tw-ring-opacity,1))}.ring-primary\/50{--tw-ring-color:rgba(217,119,87,.5)}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity,1))}.ring-white\/20{--tw-ring-color:hsla(0,0%,100%,.2)}.blur{--tw-blur:blur(8px)}.blur,.blur-2xl{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-2xl{--tw-blur:blur(40px)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.drop-shadow-sm{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-lg{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[color-scheme\:dark\]{color-scheme:dark}.file\:mr-4::file-selector-button{margin-right:1rem}.file\:cursor-pointer::file-selector-button{cursor:pointer}.file\:rounded::file-selector-button{border-radius:2px}.file\:border-0::file-selector-button{border-width:0}.file\:bg-green-400::file-selector-button{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.file\:px-4::file-selector-button{padding-left:1rem;padding-right:1rem}.file\:py-2::file-selector-button{padding-top:.5rem;padding-bottom:.5rem}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-semibold::file-selector-button{font-weight:600}.file\:text-slate-900::file-selector-button{--tw-text-opacity:1;color:rgb(20 20 19/var(--tw-text-opacity,1))}.placeholder\:text-\[\#4a4845\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(74 72 69/var(--tw-text-opacity,1))}.placeholder\:text-\[\#4a4845\]::placeholder{--tw-text-opacity:1;color:rgb(74 72 69/var(--tw-text-opacity,1))}.placeholder\:text-\[\#8a8580\]\/50::-moz-placeholder{color:hsla(30,4%,52%,.5)}.placeholder\:text-\[\#8a8580\]\/50::placeholder{color:hsla(30,4%,52%,.5)}.placeholder\:text-text-secondary\/50::-moz-placeholder{color:hsla(33,5%,61%,.5)}.placeholder\:text-text-secondary\/50::placeholder{color:hsla(33,5%,61%,.5)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:start-\[2px\]:after{content:var(--tw-content);inset-inline-start:2px}.after\:top-0\.5:after{content:var(--tw-content);top:.125rem}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:h-4:after{content:var(--tw-content);height:1rem}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:w-4:after{content:var(--tw-content);width:1rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:border:after{content:var(--tw-content);border-width:1px}.after\:border-gray-300:after,.after\:border-slate-300:after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(176 171 165/var(--tw-border-opacity,1))}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.after\:shadow-lg:after{content:var(--tw-content);--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.last\:border-0:last-child{border-width:0}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:scale-105:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border:hover{border-width:1px}.hover\:border-\[\#d97757\]:hover{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.hover\:border-\[\#d97757\]\/50:hover{border-color:rgba(217,119,87,.5)}.hover\:border-amber-500\/30:hover{border-color:rgba(217,119,87,.3)}.hover\:border-green-400:hover{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.hover\:border-green-400\/50:hover{border-color:rgba(0,200,83,.5)}.hover\:border-green-500\/30:hover{border-color:rgba(0,200,83,.3)}.hover\:border-green-500\/50:hover{border-color:rgba(0,200,83,.5)}.hover\:border-primary\/50:hover{border-color:rgba(217,119,87,.5)}.hover\:border-purple-500:hover{--tw-border-opacity:1;border-color:rgb(184 149 106/var(--tw-border-opacity,1))}.hover\:border-slate-400:hover{--tw-border-opacity:1;border-color:rgb(160 156 151/var(--tw-border-opacity,1))}.hover\:border-slate-500\/60:hover{border-color:hsla(30,4%,52%,.6)}.hover\:border-slate-600\/50:hover{border-color:hsla(33,5%,61%,.5)}.hover\:border-white\/10:hover{border-color:hsla(0,0%,100%,.1)}.hover\:bg-\[\#111217\]:hover{--tw-bg-opacity:1;background-color:rgb(17 18 23/var(--tw-bg-opacity,1))}.hover\:bg-\[\#1a1918\]:hover{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.hover\:bg-\[\#201a15\]:hover{--tw-bg-opacity:1;background-color:rgb(32 26 21/var(--tw-bg-opacity,1))}.hover\:bg-\[\#252733\]:hover{--tw-bg-opacity:1;background-color:rgb(37 39 51/var(--tw-bg-opacity,1))}.hover\:bg-\[\#2a2927\]:hover{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.hover\:bg-\[\#2a2927\]\/30:hover{background-color:rgba(42,41,39,.3)}.hover\:bg-\[\#2a2927\]\/50:hover{background-color:rgba(42,41,39,.5)}.hover\:bg-\[\#3a322c\]:hover{--tw-bg-opacity:1;background-color:rgb(58 50 44/var(--tw-bg-opacity,1))}.hover\:bg-\[\#3a3735\]:hover{--tw-bg-opacity:1;background-color:rgb(58 55 53/var(--tw-bg-opacity,1))}.hover\:bg-\[\#4a4b5e\]:hover{--tw-bg-opacity:1;background-color:rgb(74 75 94/var(--tw-bg-opacity,1))}.hover\:bg-\[\#d97757\]:hover{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.hover\:bg-\[\#d97757\]\/30:hover{background-color:rgba(217,119,87,.3)}.hover\:bg-\[\#d97757\]\/5:hover{background-color:rgba(217,119,87,.05)}.hover\:bg-\[\#d97757\]\/80:hover{background-color:rgba(217,119,87,.8)}.hover\:bg-\[\#ef4444\]\/20:hover{background-color:rgba(239,68,68,.2)}.hover\:bg-amber-500\/20:hover{background-color:rgba(217,119,87,.2)}.hover\:bg-amber-500\/30:hover{background-color:rgba(217,119,87,.3)}.hover\:bg-amber-700:hover{--tw-bg-opacity:1;background-color:rgb(160 115 72/var(--tw-bg-opacity,1))}.hover\:bg-bloomberg-surface:hover{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.hover\:bg-bloomberg-surface\/50:hover{background-color:rgba(26,25,24,.5)}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(74 122 168/var(--tw-bg-opacity,1))}.hover\:bg-border-dark:hover{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.hover\:bg-emerald-500\/20:hover{background-color:rgba(0,200,83,.2)}.hover\:bg-emerald-500\/25:hover{background-color:rgba(0,200,83,.25)}.hover\:bg-emerald-500\/30:hover{background-color:rgba(0,200,83,.3)}.hover\:bg-emerald-500\/5:hover{background-color:rgba(0,200,83,.05)}.hover\:bg-emerald-600\/80:hover{background-color:rgba(0,200,83,.8)}.hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.hover\:bg-emerald-800\/60:hover{background-color:rgba(0,200,83,.6)}.hover\:bg-gray-100:hover,.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(232 229 222/var(--tw-bg-opacity,1))}.hover\:bg-gray-800\/30:hover{background-color:rgba(26,25,24,.3)}.hover\:bg-green-400:hover{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.hover\:bg-green-500\/20:hover{background-color:rgba(0,200,83,.2)}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.hover\:bg-green-600\/10:hover{background-color:rgba(0,200,83,.1)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.hover\:bg-indigo-500\/10:hover{background-color:rgba(106,155,204,.1)}.hover\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.hover\:bg-primary\/10:hover{background-color:rgba(217,119,87,.1)}.hover\:bg-primary\/20:hover{background-color:rgba(217,119,87,.2)}.hover\:bg-primary\/90:hover{background-color:rgba(217,119,87,.9)}.hover\:bg-purple-500:hover{--tw-bg-opacity:1;background-color:rgb(184 149 106/var(--tw-bg-opacity,1))}.hover\:bg-purple-500\/20:hover{background-color:hsla(33,35%,57%,.2)}.hover\:bg-purple-500\/25:hover{background-color:hsla(33,35%,57%,.25)}.hover\:bg-purple-500\/30:hover{background-color:hsla(33,35%,57%,.3)}.hover\:bg-purple-500\/5:hover{background-color:hsla(33,35%,57%,.05)}.hover\:bg-red-500\/10:hover{background-color:rgba(239,68,68,.1)}.hover\:bg-red-500\/20:hover{background-color:rgba(239,68,68,.2)}.hover\:bg-red-500\/30:hover{background-color:rgba(239,68,68,.3)}.hover\:bg-red-500\/5:hover{background-color:rgba(239,68,68,.05)}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.hover\:bg-red-600\/80:hover{background-color:rgba(239,68,68,.8)}.hover\:bg-red-800\/60:hover{background-color:rgba(239,68,68,.6)}.hover\:bg-sky-500\/25:hover{background-color:rgba(217,119,87,.25)}.hover\:bg-slate-500:hover{--tw-bg-opacity:1;background-color:rgb(138 133 128/var(--tw-bg-opacity,1))}.hover\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(160 156 151/var(--tw-bg-opacity,1))}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.hover\:bg-slate-700\/20:hover{background-color:rgba(42,41,39,.2)}.hover\:bg-slate-700\/30:hover{background-color:rgba(42,41,39,.3)}.hover\:bg-slate-700\/40:hover{background-color:rgba(42,41,39,.4)}.hover\:bg-slate-700\/50:hover{background-color:rgba(42,41,39,.5)}.hover\:bg-slate-700\/60:hover{background-color:rgba(42,41,39,.6)}.hover\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(26 25 24/var(--tw-bg-opacity,1))}.hover\:bg-slate-800\/20:hover{background-color:rgba(26,25,24,.2)}.hover\:bg-slate-800\/30:hover{background-color:rgba(26,25,24,.3)}.hover\:bg-slate-800\/50:hover{background-color:rgba(26,25,24,.5)}.hover\:bg-slate-800\/80:hover{background-color:rgba(26,25,24,.8)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:bg-white\/30:hover{background-color:hsla(0,0%,100%,.3)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:bg-white\/\[0\.02\]:hover{background-color:hsla(0,0%,100%,.02)}.hover\:bg-white\/\[0\.03\]:hover{background-color:hsla(0,0%,100%,.03)}.hover\:bg-white\/\[0\.04\]:hover{background-color:hsla(0,0%,100%,.04)}.hover\:bg-white\/\[0\.06\]:hover{background-color:hsla(0,0%,100%,.06)}.hover\:from-\[\#e08a68\]:hover{--tw-gradient-from:#e08a68 var(--tw-gradient-from-position);--tw-gradient-to:hsla(17,66%,64%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-purple-600:hover{--tw-gradient-from:#a07348 var(--tw-gradient-from-position);--tw-gradient-to:rgba(160,115,72,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-\[\#d97757\]:hover{--tw-gradient-to:#d97757 var(--tw-gradient-to-position)}.hover\:to-violet-700:hover{--tw-gradient-to:#8a6340 var(--tw-gradient-to-position)}.hover\:text-\[\#d97757\]:hover{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.hover\:text-\[\#e0875f\]:hover{--tw-text-opacity:1;color:rgb(224 135 95/var(--tw-text-opacity,1))}.hover\:text-\[\#ef4444\]:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.hover\:text-amber-300:hover{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(106 155 204/var(--tw-text-opacity,1))}.hover\:text-cyan-400:hover{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.hover\:text-emerald-300:hover,.hover\:text-emerald-400:hover{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(232 229 222/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(160 156 151/var(--tw-text-opacity,1))}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.hover\:text-primary\/80:hover{color:rgba(217,119,87,.8)}.hover\:text-purple-300:hover{--tw-text-opacity:1;color:rgb(184 149 106/var(--tw-text-opacity,1))}.hover\:text-red-300:hover,.hover\:text-red-400:hover,.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.hover\:text-sky-300:hover,.hover\:text-sky-400:hover{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.hover\:text-slate-200:hover{--tw-text-opacity:1;color:rgb(232 229 222/var(--tw-text-opacity,1))}.hover\:text-slate-300:hover{--tw-text-opacity:1;color:rgb(176 171 165/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:ring-sky-500\/50:hover{--tw-ring-color:rgba(217,119,87,.5)}.hover\:file\:bg-green-500::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.focus\:border-\[\#d97757\]:focus{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.focus\:border-\[\#d97757\]\/50:focus{border-color:rgba(217,119,87,.5)}.focus\:border-amber-400:focus,.focus\:border-cyan-500:focus{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.focus\:border-emerald-500:focus{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.focus\:border-emerald-500\/40:focus{border-color:rgba(0,200,83,.4)}.focus\:border-green-400:focus,.focus\:border-green-500:focus{--tw-border-opacity:1;border-color:rgb(0 200 83/var(--tw-border-opacity,1))}.focus\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(217 119 87/var(--tw-border-opacity,1))}.focus\:border-primary\/50:focus{border-color:rgba(217,119,87,.5)}.focus\:border-purple-500:focus{--tw-border-opacity:1;border-color:rgb(184 149 106/var(--tw-border-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-1:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-\[\#d97757\]:focus,.focus\:ring-amber-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(217 119 87/var(--tw-ring-opacity,1))}.focus\:ring-emerald-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 200 83/var(--tw-ring-opacity,1))}.focus\:ring-emerald-500\/20:focus{--tw-ring-color:rgba(0,200,83,.2)}.focus\:ring-green-400:focus,.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 200 83/var(--tw-ring-opacity,1))}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(217 119 87/var(--tw-ring-opacity,1))}.focus\:ring-primary\/50:focus{--tw-ring-color:rgba(217,119,87,.5)}.focus\:ring-purple-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(184 149 106/var(--tw-ring-opacity,1))}.focus\:ring-purple-500\/50:focus{--tw-ring-color:hsla(33,35%,57%,.5)}.focus\:ring-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(217 119 87/var(--tw-ring-opacity,1))}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px}.focus\:ring-offset-slate-900:focus{--tw-ring-offset-color:#141413}.disabled\:transform-none:disabled{transform:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-slate-700:disabled{--tw-bg-opacity:1;background-color:rgb(42 41 39/var(--tw-bg-opacity,1))}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-\[\#d97757\]{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-green-400{--tw-text-opacity:1;color:rgb(0 200 83/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(217 119 87/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}.peer:checked~.peer-checked\:bg-amber-500{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:bg-emerald-500,.peer:checked~.peer-checked\:bg-green-500{--tw-bg-opacity:1;background-color:rgb(0 200 83/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:bg-primary{--tw-bg-opacity:1;background-color:rgb(217 119 87/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:after\:translate-x-5:after{--tw-translate-x:1.25rem}.peer:checked~.peer-checked\:after\:translate-x-5:after,.peer:checked~.peer-checked\:after\:translate-x-6:after{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:after\:translate-x-6:after{--tw-translate-x:1.5rem}.peer:checked~.peer-checked\:after\:translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:after\:border-white:after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.peer:focus~.peer-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus~.peer-focus\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus~.peer-focus\:ring-emerald-500\/50{--tw-ring-color:rgba(0,200,83,.5)}@media (min-width:640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:table-cell{display:table-cell}.sm\:hidden{display:none}.sm\:w-48{width:12rem}.sm\:w-64{width:16rem}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\:inset-12{inset:3rem}.md\:inset-8{inset:2rem}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:mx-0{margin-left:0;margin-right:0}.md\:ml-auto{margin-left:auto}.md\:mt-2{margin-top:.5rem}.md\:inline-flex{display:inline-flex}.md\:grid{display:grid}.md\:min-w-0{min-width:0}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:flex-wrap{flex-wrap:wrap}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:1rem}.md\:gap-5{gap:1.25rem}.md\:space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.md\:p-1\.5{padding:.375rem}.md\:p-4{padding:1rem}.md\:p-5{padding:1.25rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-0{padding-left:0;padding-right:0}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-\[15px\]{font-size:15px}.md\:text-\[20px\]{font-size:20px}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1024px){.lg\:inset-12{inset:3rem}.lg\:inset-16{inset:4rem}.lg\:inset-20{inset:5rem}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:block{display:block}.lg\:w-\[220px\]{width:220px}.lg\:min-w-\[250px\]{min-width:250px}.lg\:max-w-\[350px\]{max-width:350px}.lg\:flex-none{flex:none}.lg\:shrink-0{flex-shrink:0}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-2{gap:.5rem}.lg\:border-b-0{border-bottom-width:0}.lg\:border-r{border-right-width:1px}.lg\:p-4{padding:1rem}.lg\:p-5{padding:1.25rem}.lg\:p-6{padding:1.5rem}.lg\:p-8{padding:2rem}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width:1280px){.xl\:col-span-1{grid-column:span 1/span 1}.xl\:col-span-2{grid-column:span 2/span 2}.xl\:col-span-3{grid-column:span 3/span 3}.xl\:w-\[380px\]{width:380px}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:flex-row{flex-direction:row}.xl\:px-8{padding-left:2rem;padding-right:2rem}}.peer:checked~.rtl\:peer-checked\:after\:-translate-x-full:where([dir=rtl],[dir=rtl] *):after{content:var(--tw-content);--tw-translate-x:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}/* ============================================================================
   BLOOMBERG TERMINAL THEME — WealthPilot
   Single source of truth. Replaces bloomberg.css + stitch-theme.css.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ─── ROOT DESIGN TOKENS ─────────────────────────────────────────────────── */

:root {
  /* Backgrounds — warm dark charcoal */
  --bb-bg:            #141413;
  --bb-bg-panel:      #1a1918;
  --bb-bg-row:        #1a1918;
  --bb-bg-hover:      #1a1918;
  --bb-bg-input:      #1a1918;
  --bb-bg-elevated:   #252422;

  /* Borders — neutral gray */
  --bb-border:        #2a2927;
  --bb-border-bright: #3a3735;
  --bb-border-focus:  #d97757;

  /* Text — neutral gray */
  --bb-text:          #e8e5de;
  --bb-text-dim:      #8a8580;
  --bb-text-muted:    #a09c97;

  /* Accents — TERRACOTTA PRIMARY */
  --bb-amber:         #d97757;
  --bb-amber-dim:     rgba(217,119,87,0.5);
  --bb-amber-glow:    rgba(217,119,87,0.12);
  --bb-green:         #00c853;
  --bb-green-dim:     rgba(0,200,83,0.15);
  --bb-red:           #ef4444;
  --bb-red-dim:       rgba(239,68,68,0.15);
  --bb-blue:          #d97757;
  --bb-cyan:          #d97757;

  /* Typography */
  --bb-mono:          'Poppins', sans-serif;
  --bb-sans:          'Poppins', sans-serif;

  /* Radii — sharp, dense */
  --bb-radius:        2px;
  --bb-radius-md:     4px;

  /* Legacy variable aliases — backward compat for old selectors */
  --text-primary:     #e8e5de;
  --text-secondary:   #8a8580;
  --bg-primary:       #141413;
  --bg-secondary:     #1a1918;
  --accent-primary:   #d97757;
  --color-primary:    #d97757;
  --color-primary-dark: rgba(217,119,87,0.5);
  --stitch-primary:   #d97757;
  --stitch-bg-dark:   #141413;
  --stitch-bg-card:   #1a1918;
  --stitch-border:    #2a2927;
  --stitch-text-primary: #e8e5de;
  --stitch-text-secondary: #8a8580;
  --stitch-green:     #00c853;
  --stitch-red:       #ef4444;
  --stitch-radius-sm: 2px;
  --stitch-radius-md: 4px;
  --stitch-radius-lg: 4px;
  --stitch-radius-xl: 4px;

  /* Unified-platform compat */
  --fs-hero:          2rem;
  --fs-page-title:    1.25rem;
  --fs-section:       0.8125rem;
  --fs-body:          0.8rem;
  --fs-kpi-value:     1.375rem;
  --fs-kpi-label:     0.625rem;
  --fs-table-cell:    0.75rem;
  --fs-tiny:          0.5625rem;
  --sp-page-x:        1.25rem;
  --sp-page-y:        1rem;
  --sp-card-pad:      16px;
  --sp-gap:           0.75rem;
}

/* ─── LIGHT THEME OVERRIDES ─────────────────────────────────────────────── */

[data-theme="light"] {
  /* Backgrounds — warm cream/white */
  --bb-bg:            #faf9f5;
  --bb-bg-panel:      #ffffff;
  --bb-bg-row:        #ffffff;
  --bb-bg-hover:      #f5f4f0;
  --bb-bg-input:      #ffffff;
  --bb-bg-elevated:   #f0efeb;

  /* Borders — soft warm gray */
  --bb-border:        #e8e5de;
  --bb-border-bright: #d5d2cb;
  --bb-border-focus:  #d97757;

  /* Text — dark on light */
  --bb-text:          #141413;
  --bb-text-dim:      #6b6966;
  --bb-text-muted:    #8a8580;

  /* Accents — keep terracotta */
  --bb-amber:         #c96a4a;
  --bb-amber-dim:     rgba(201,106,74,0.5);
  --bb-amber-glow:    rgba(201,106,74,0.1);
  --bb-green:         #059669;
  --bb-green-dim:     rgba(5,150,105,0.12);
  --bb-red:           #dc2626;
  --bb-red-dim:       rgba(220,38,38,0.1);
  --bb-blue:          #c4543a;
  --bb-cyan:          #c96a4a;

  /* Legacy aliases */
  --text-primary:     #141413;
  --text-secondary:   #6b6966;
  --bg-primary:       #faf9f5;
  --bg-secondary:     #ffffff;
  --accent-primary:   #c96a4a;
  --color-primary:    #c96a4a;
  --color-primary-dark: rgba(201,106,74,0.5);
  --stitch-primary:   #c96a4a;
  --stitch-bg-dark:   #faf9f5;
  --stitch-bg-card:   #ffffff;
  --stitch-border:    #e8e5de;
  --stitch-text-primary: #141413;
  --stitch-text-secondary: #6b6966;
  --stitch-green:     #059669;
  --stitch-red:       #dc2626;
}

/* ─── GLOBAL BASE ────────────────────────────────────────────────────────── */

html {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-sans);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
}

::selection {
  background: var(--bb-amber);
  color: #141413;
}

/* ─── GLOBAL BB BLACK OVERRIDES ──────────────────────────────────────────
   Kill glassmorphism, force solid backgrounds, sharp radius everywhere.
   These !important rules override inline <style> blocks in 100+ EJS pages
   that still use the old translucent/blur/rounded design language.
   ─────────────────────────────────────────────────────────────────────── */

/* Ensure .hidden always overrides .flex/.block/.grid (belt-and-suspenders) */
.hidden { display: none !important; }

/* Kill ALL backdrop-filter across the platform */
*:not(.live-ticker-wrapper):not(.ix-terminal):not(#mobileMoreMenu):not(#mobileBottomNav) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Force sharp 2px radius on all card/panel/glass elements */
[class*="-card"],
[class*="-glass"],
[class*="-panel"],
[class*="-wrap"],
[class*="-modal"],
[class*="-container"],
[class*="card"],
[class*="glass"],
[class*="panel"],
.modal-content,
.kpi-card,
.stat-card,
.metric-card {
  border-radius: 2px !important;
}

/* Force solid #1a1918 backgrounds on card-like elements (override rgba transparency) */
[class*="-card"]:not([class*="btn"]):not([class*="badge"]):not([class*="tag"]):not([class*="chip"]):not([class*="sub"]):not([style*="background: linear-gradient"]),
[class*="-glass"]:not([class*="btn"]):not([class*="badge"]),
[class*="-panel"]:not([class*="btn"]) {
  background: #1a1918 !important;
  background-image: none !important;
  border-color: #2a2927 !important;
}

/* Force solid hover states */
[class*="-card"]:hover:not([class*="btn"]):not([class*="badge"]),
[class*="-glass"]:hover:not([class*="btn"]),
[class*="-panel"]:hover:not([class*="btn"]) {
  background: #1a1918 !important;
  border-color: #3a3735 !important;
}

/* Override inline rgba(255,255,255,...) backgrounds on buttons/inputs */
input, select, textarea {
  background: #1a1918 !important;
  border-color: #2a2927 !important;
  color: #e8e5de !important;
  border-radius: 2px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #d97757 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Force BB Black on page-level custom variable patterns */
:root {
  /* Override per-page variable namespaces */
  --h-surface: #1a1918;
  --h-surface-hover: #1a1918;
  --h-border: #2a2927;
  --h-border-hover: #3a3735;
  --h-text: #e8e5de;
  --h-text-dim: #8a8580;
  --h-text-muted: #a09c97;
  --h-accent: #d97757;
  --h-green: #00c853;
  --h-red: #ef4444;

  --pf-card: #1a1918;
  --pf-card-hover: #1a1918;
  --pf-border: #2a2927;
  --pf-border-hover: #3a3735;
  --pf-text: #e8e5de;
  --pf-text-dim: #8a8580;
  --pf-text-muted: #a09c97;
  --pf-accent: #d97757;
  --pf-green: #00c853;
  --pf-red: #ef4444;

  --pp-card: #1a1918;
  --pp-card-hover: #1a1918;
  --pp-border: #2a2927;
  --pp-border-hover: #3a3735;
  --pp-text: #e8e5de;
  --pp-text-dim: #8a8580;
  --pp-text-muted: #a09c97;
  --pp-accent: #d97757;
  --pp-green: #00c853;
  --pp-red: #ef4444;

  --db-bg: #141413;
  --db-card: #1a1918;
  --db-card-hover: #1a1918;
  --db-border: #2a2927;
  --db-border-hover: #3a3735;
  --db-text: #e8e5de;
  --db-text-sec: #8a8580;
  --db-text-muted: #a09c97;
  --db-green: #00c853;
  --db-red: #ef4444;
  --db-blue: #6a9bcc;
  --db-cyan: #d97757;
  --db-purple: #b8956a;
  --db-amber: #d97757;
}

/* Scrollbar — thin, green track */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bb-bg); }
::-webkit-scrollbar-thumb { background: #2a2927; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-amber-dim); }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bb-sans);
  color: var(--bb-text);
  font-weight: 500;
}

h1 { font-size: 1.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }
h5, h6 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bb-text-dim); }

a { color: var(--bb-blue); text-decoration: none; }
a:hover { color: var(--bb-amber); }

code, pre, .tabular-nums {
  font-family: var(--bb-mono);
}

/* ─── CARDS — ALL VARIANTS ───────────────────────────────────────────────── */

.card,
.bloomberg-card,
.kpi-card,
.metric-card,
.stat-card,
.tufte-stat-card,
.glass-card,
.perf-glass-card,
.section-card,
.summary-card,
.stitch-card,
.ac-detail-card,
.st-card,
.cf-card,
.ao-card,
.ds-card,
.pf-glass,
.rc-glass,
.ec-glass,
.cal-stat-card,
[class*="-card"] {
  background: var(--bb-bg-panel);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  color: var(--bb-text);
  transition: border-color 0.15s ease;
}

.card:hover,
.bloomberg-card:hover,
.kpi-card:hover,
.metric-card:hover,
.stat-card:hover,
.glass-card:hover,
.perf-glass-card:hover,
[class*="-card"]:hover {
  border-color: var(--bb-border-bright);
}

/* Remove all glassmorphism, shadows, gradients from cards */
.card,
.bloomberg-card,
.glass-card,
.perf-glass-card,
[class*="-card"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  background-image: none;
}

/* KPI / Stat card inner structure */
.kpi-card .kpi-label,
.stat-card .stat-label,
.tufte-stat-card .stat-label,
.metric-card .metric-label,
[class*="-card"] .kpi-label,
[class*="-card"] .stat-label,
[class*="kpi-label"] {
  font-family: var(--bb-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-text-dim);
  font-weight: 500;
}

.kpi-card .kpi-value,
.stat-card .stat-value,
.tufte-stat-card .stat-value,
.metric-card .metric-value,
[class*="-card"] .kpi-value,
[class*="-card"] .stat-value,
[class*="kpi-value"],
[class*="stat-value"],
[class*="metric-value"] {
  font-family: var(--bb-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--bb-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Stat card left-border accent on hover */
.stat-card:hover,
.kpi-card:hover,
.tufte-stat-card:hover {
  border-left: 2px solid var(--bb-amber);
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */

.btn,
.bloomberg-btn,
.stitch-btn-primary,
.stitch-btn-secondary,
button[class*="btn"] {
  font-family: var(--bb-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--bb-radius);
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid var(--bb-border);
  background: var(--bb-bg-panel);
  color: var(--bb-text-dim);
  line-height: 1.4;
}

.btn:hover,
.bloomberg-btn:hover,
button[class*="btn"]:hover {
  background: var(--bb-bg-hover);
  color: var(--bb-text);
  border-color: var(--bb-border-bright);
}

.btn-primary,
.bloomberg-btn-primary,
.stitch-btn-primary {
  background: var(--bb-amber) !important;
  color: #141413 !important;
  border-color: var(--bb-amber) !important;
  font-weight: 600;
}

.btn-primary:hover,
.bloomberg-btn-primary:hover,
.stitch-btn-primary:hover {
  background: var(--bb-amber-dim) !important;
  border-color: var(--bb-amber-dim) !important;
}

.btn-secondary,
.bloomberg-btn-secondary {
  background: transparent;
  color: var(--bb-amber);
  border-color: var(--bb-amber);
}

.btn-secondary:hover,
.bloomberg-btn-secondary:hover {
  background: var(--bb-amber-glow);
  color: var(--bb-amber);
}

.btn-danger,
.bloomberg-btn-danger {
  background: transparent;
  color: var(--bb-red);
  border-color: var(--bb-red);
}

.btn-danger:hover,
.bloomberg-btn-danger:hover {
  background: var(--bb-red-dim);
}

.btn-ghost,
.btn-glass {
  background: transparent;
  border-color: transparent;
  color: var(--bb-text-dim);
}

.btn-ghost:hover,
.btn-glass:hover {
  color: var(--bb-text);
  background: var(--bb-bg-hover);
}

/* Tab buttons */
.tab-btn,
.period-btn,
.timeframe-btn,
.filter-btn,
[class*="tab-btn"] {
  font-family: var(--bb-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  background: transparent;
  color: var(--bb-text-dim);
  border: 1px solid transparent;
  border-radius: var(--bb-radius);
  cursor: pointer;
  transition: all 0.12s ease;
}

.tab-btn:hover,
.period-btn:hover,
.timeframe-btn:hover {
  color: var(--bb-text);
  background: var(--bb-bg-hover);
}

.tab-btn.active,
.period-btn.active,
.timeframe-btn.active,
.filter-btn.active {
  background: #faf9f5;
  color: #141413;
  border-color: #faf9f5;
}

/* Export / expand buttons */
.export-btn,
.expand-btn,
.chart-expand-btn {
  font-family: var(--bb-mono);
  font-size: 10px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--bb-border);
  color: var(--bb-text-dim);
  border-radius: var(--bb-radius);
  cursor: pointer;
}

.export-btn:hover,
.expand-btn:hover,
.chart-expand-btn:hover {
  border-color: var(--bb-amber);
  color: var(--bb-amber);
}

/* ─── TABLES ─────────────────────────────────────────────────────────────── */

table,
.table,
.bloomberg-table,
.glass-table,
.data-table,
.rc-table,
.ca-table,
.clean-table,
.tlo-table,
.td-table,
.holdings-table,
[class*="-table"] {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bb-mono);
  font-size: 12px;
  color: var(--bb-text);
}

thead th,
.table thead th,
[class*="-table"] thead th {
  background: var(--bb-bg);
  color: var(--bb-text-dim);
  font-family: var(--bb-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bb-border);
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody tr {
  border-bottom: 1px solid #2a2927;
  transition: background 0.1s ease;
}

tbody tr:hover {
  background: var(--bb-bg-hover);
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.012);
}

tbody tr:nth-child(even):hover {
  background: var(--bb-bg-hover);
}

tbody td,
.table tbody td,
[class*="-table"] tbody td {
  padding: 7px 12px;
  color: var(--bb-text);
  vertical-align: middle;
  font-family: var(--bb-mono);
  font-size: 12px;
}

/* Number columns — right align */
td.num, td.price, td.value, td.change,
td.text-right, th.text-right,
.text-right {
  text-align: right;
}

td.num, td.price, td.value, td.change {
  font-variant-numeric: tabular-nums;
}

/* Table wrappers */
.glass-table-wrap,
.rc-table-wrap,
[class*="-table-wrap"] {
  background: var(--bb-bg-panel);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
}

/* Sortable columns */
.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  color: var(--bb-amber);
}

/* ─── MODALS ─────────────────────────────────────────────────────────────── */

.modal,
.modal-overlay,
.chart-modal-overlay,
.ae-modal-overlay,
.rp-modal-overlay,
.cal-modal-overlay,
[class*="-modal-overlay"] {
  backdrop-filter: blur(2px);
}

.modal-content,
.chart-modal,
.ae-modal,
.rp-modal,
.cal-modal,
[class*="-modal"]:not([class*="-overlay"]):not([class*="-close"]):not([class*="-header"]):not([class*="-body"]):not([class*="-footer"]):not([class*="-row"]):not([class*="-label"]):not([class*="-value"]):not([class*="-block"]):not([class*="-btn"]):not([class*="-sidebar"]):not([class*="-canvas"]):not([class*="-metric"]):not([class*="-insight"]) {
  background: var(--bb-bg-panel);
  border: 1px solid var(--bb-border-bright);
  border-radius: var(--bb-radius-md);
  color: var(--bb-text);
  box-shadow: 0 4px 24px rgba(20, 20, 19, 0.5);
}

.modal-header,
.chart-modal-header,
.rp-modal-header,
.cal-modal-header,
[class*="-modal-header"] {
  border-bottom: 1px solid var(--bb-border);
  font-family: var(--bb-mono);
  color: var(--bb-text);
}

.modal-close,
.chart-modal-close,
.ae-modal-close,
.rp-modal-close,
[class*="-modal-close"] {
  color: var(--bb-text-dim);
  cursor: pointer;
  transition: color 0.12s;
}

.modal-close:hover,
[class*="-modal-close"]:hover {
  color: var(--bb-amber);
}

/* ─── FORMS & INPUTS ─────────────────────────────────────────────────────── */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="url"],
textarea,
select,
.input,
.stitch-input,
.st-input,
[class*="-input"] {
  font-family: var(--bb-mono);
  font-size: 12px;
  background: var(--bb-bg-input);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  color: var(--bb-text);
  padding: 7px 10px;
  transition: border-color 0.15s ease;
  outline: none;
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
[class*="-input"]:focus {
  border-color: var(--bb-amber);
  box-shadow: 0 0 0 1px var(--bb-amber-glow);
}

input::placeholder,
textarea::placeholder {
  color: var(--bb-text-muted);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777777'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Checkbox / toggle */
.stitch-checkbox,
input[type="checkbox"] {
  accent-color: var(--bb-amber);
}

/* ─── BADGES & TAGS ──────────────────────────────────────────────────────── */

.badge,
.tag,
.megamenu-badge,
.param-badge,
.preset-badge,
.data-badge,
.signal-badge,
.symbol-badge,
.ig-badge,
.tab-badge,
[class*="-badge"],
[class*="-tag"] {
  font-family: var(--bb-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--bb-radius);
  background: rgba(217,119,87,0.1);
  color: var(--bb-amber);
  border: 1px solid rgba(217,119,87,0.2);
  white-space: nowrap;
}

.badge-live,
.data-badge.real {
  background: var(--bb-green-dim);
  color: var(--bb-green);
  border-color: rgba(57, 211, 83, 0.25);
}

.badge-high {
  background: var(--bb-red-dim);
  color: var(--bb-red);
  border-color: rgba(224, 82, 82, 0.25);
}

.badge-moderate {
  background: var(--bb-amber-glow);
  color: var(--bb-amber);
  border-color: rgba(217,119,87,0.25);
}

.badge-low {
  background: var(--bb-green-dim);
  color: var(--bb-green);
  border-color: rgba(57, 211, 83, 0.25);
}

/* ─── POSITIVE / NEGATIVE INDICATORS ─────────────────────────────────────── */

.positive,
.gain,
.text-green,
.text-positive,
.up,
.ec-positive,
.kpi-value.positive,
.value.positive,
.stat-value.positive,
.stat-change.positive,
.improvement-badge.positive {
  color: var(--bb-green) !important;
}

.negative,
.loss,
.text-red,
.text-negative,
.dn,
.ec-negative,
.kpi-value.negative,
.value.negative,
.stat-value.negative,
.stat-change.negative {
  color: var(--bb-red) !important;
}

.accent,
.text-amber {
  color: var(--bb-amber);
}

/* ─── SECTION HEADERS ────────────────────────────────────────────────────── */

.bloomberg-header,
.section-header,
[class*="-section-header"] {
  font-family: var(--bb-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-text-dim);
  border-bottom: 1px solid var(--bb-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

/* ─── PAGE-SPECIFIC PREFIX BASES ─────────────────────────────────────────── */

/* These prefixes are used across many pages — set their bg/border/text base */
.rc-section,
.st-section,
.ac-detail-section,
.ds-section,
.cf-section,
.ao-section,
.pf-section {
  background: var(--bb-bg-panel);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
}

.rc-metric,
.cf-metric,
.ao-kpi,
.ds-kpi,
.pf-kpi-label {
  font-family: var(--bb-mono);
  color: var(--bb-text-dim);
}

/* ─── NAVIGATION (ix- prefix) ────────────────────────────────────────────── */

.ix-nav-item {
  font-family: var(--bb-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bb-text-dim);
  transition: color 0.12s;
}

.ix-nav-item:hover {
  color: var(--bb-text);
}

.ix-nav-item.active {
  color: var(--bb-amber);
}

.ix-mega-link {
  color: var(--bb-text-dim);
  font-size: 12px;
}

.ix-mega-link:hover {
  color: var(--bb-amber);
}

.ix-mega-sec,
.ix-mega-hdr {
  font-family: var(--bb-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-text-dim);
}

/* ─── SKELETON LOADERS ───────────────────────────────────────────────────── */

.skeleton,
[class*="skeleton"] {
  background: linear-gradient(90deg, #181816 25%, #1c1c19 50%, #181816 75%);
  background-size: 200% 100%;
  animation: bb-shimmer 1.5s linear infinite;
  border-radius: var(--bb-radius);
}

@keyframes bb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── TOAST NOTIFICATIONS ────────────────────────────────────────────────── */

.toast {
  background: var(--bb-bg-elevated);
  border: 1px solid var(--bb-border-bright);
  border-radius: var(--bb-radius-md);
  color: var(--bb-text);
  font-family: var(--bb-mono);
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(20, 20, 19, 0.4);
  backdrop-filter: none;
}

.toast-success {
  border-left: 3px solid var(--bb-green);
}

.toast-error {
  border-left: 3px solid var(--bb-red);
}

.toast-warning {
  border-left: 3px solid var(--bb-amber);
}

.toast-info {
  border-left: 3px solid var(--bb-blue);
}

/* ─── CHARTS ─────────────────────────────────────────────────────────────── */

.chart-container,
[class*="chart-container"],
[class*="chart-wrap"] {
  background: var(--bb-bg-panel);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
}

/* ─── SIDEBAR SUPPRESSION (carried from stitch-theme) ────────────────────── */
/* Exception: .db-sidebar is the dashboard's left panel — never suppress it */

#sidebar,
.sidebar:not(.db-sidebar),
.side-nav,
.sidenav,
.left-nav,
.nav-sidebar {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}

/* ─── DASHBOARD 3-COLUMN LAYOUT ──────────────────────────────────────────── */

.db-layout {
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  gap: 0;
  /* height set dynamically by dashboard.ejs inline CSS + JS */
}

.db-sidebar {
  display: flex !important;
  visibility: visible !important;
  width: 200px !important;
  background: var(--bb-bg-panel);
  border-right: 1px solid var(--bb-border);
  padding: 8px;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
}

.db-sidebar .db-sidebar-section {
  margin-bottom: 4px;
}

.db-sidebar .db-sidebar-hdr {
  font-family: var(--bb-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bb-text-dim);
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--bb-border);
  margin-bottom: 2px;
}

.db-sidebar .db-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  font-family: var(--bb-mono);
  font-size: 11px;
  color: var(--bb-text);
  cursor: pointer;
  border-radius: var(--bb-radius);
  transition: background 0.1s;
}

.db-sidebar .db-sidebar-item:hover {
  background: var(--bb-bg-hover);
}

.db-sidebar .db-sidebar-item .db-wl-chg {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.db-right-panel {
  background: var(--bb-bg-panel);
  border-left: 1px solid var(--bb-border);
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-right-panel .db-rpanel-section {
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  margin-bottom: 4px;
  overflow: hidden;
}

.db-right-panel .db-rpanel-hdr {
  font-family: var(--bb-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-amber);
  padding: 6px 8px;
  border-bottom: 1px solid var(--bb-border);
  background: var(--bb-bg);
}

.db-right-panel .db-rpanel-body {
  padding: 6px 8px;
}

.db-main-col {
  padding: 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Stat strip: 5 columns */
.db-stat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--bb-border);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
}

.db-stat-strip .db-stat-cell {
  background: var(--bb-bg-panel);
  padding: 8px 10px;
  text-align: center;
}

.db-stat-strip .db-stat-label {
  font-family: var(--bb-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-text-dim);
  margin-bottom: 2px;
}

.db-stat-strip .db-stat-value {
  font-family: var(--bb-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--bb-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.db-stat-strip .db-stat-sub {
  font-family: var(--bb-mono);
  font-size: 9px;
  margin-top: 1px;
}

/* Status bar */
.db-statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: var(--bb-bg-panel);
  border-top: 1px solid var(--bb-amber);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 16px;
  font-family: var(--bb-mono);
  font-size: 10px;
  color: var(--bb-text-dim);
  z-index: 9999;
}

.db-statusbar .db-sb-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.db-statusbar .db-sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bb-green);
}

.db-statusbar .db-sb-amber {
  color: var(--bb-amber);
}

/* Secondary content below 3-col grid */
.db-secondary {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.db-secondary .db-sec-panel {
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  background: var(--bb-bg-panel);
  overflow: hidden;
}

.db-secondary .db-sec-hdr {
  font-family: var(--bb-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-amber);
  padding: 6px 10px;
  border-bottom: 1px solid var(--bb-border);
  background: var(--bb-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db-secondary .db-sec-body {
  padding: 8px 10px;
}

/* Page header inside main */
.db-page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--bb-amber);
  margin-bottom: 4px;
}

.db-page-hdr h1 {
  font-family: var(--bb-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-amber);
  margin: 0;
}

.db-page-hdr .db-hdr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Responsive: collapse to single column on narrow screens */
@media (max-width: 1100px) {
  .db-layout {
    grid-template-columns: 1fr;
  }
  .db-sidebar,
  .db-right-panel {
    display: none !important;
  }
  .db-secondary {
    grid-template-columns: 1fr;
  }
}

/* ─── UTILITY OVERRIDES ──────────────────────────────────────────────────── */

/* Kill glassmorphism everywhere */
[style*="backdrop-filter"],
.glass,
[class*="glass"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Override old purple/orange accent remnants from Tailwind utility classes */
.bg-primary { background-color: var(--bb-amber) !important; }
.text-primary { color: var(--bb-amber) !important; }
.border-primary { border-color: var(--bb-amber) !important; }

/* Map old Tailwind bg classes to Bloomberg */
.bg-background-dark,
.bg-bloomberg-bg,
.bg-slate-950 { background-color: var(--bb-bg) !important; }

.bg-card-dark,
.bg-bloomberg-surface,
.bg-bloomberg-card { background-color: var(--bb-bg-panel) !important; }

.bg-bloomberg-elevated { background-color: var(--bb-bg-elevated) !important; }

.border-dark,
.border-bloomberg-border { border-color: var(--bb-border) !important; }

.text-accent-green { color: var(--bb-green) !important; }
.text-accent-red { color: var(--bb-red) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── PRINT ──────────────────────────────────────────────────────────────── */

@media print {
  body {
    background: #faf9f5;
    color: #141413;
  }

  .card,
  .bloomberg-card,
  [class*="-card"] {
    border: 1px solid #ccc;
    background: #faf9f5;
    color: #141413;
  }

  thead th {
    background: #f0f0f0;
    color: #3a3735;
    border-bottom: 2px solid #3a3735;
  }

  tbody td {
    color: #141413;
  }

  .positive { color: #166534 !important; }
  .negative { color: #991b1b !important; }
}

/* ─── SCANLINE OVERLAY (DARK MODE ONLY) ─────────────────────────────────
   Was producing visible horizontal stripes on the cream light-mode canvas
   because rgba(20,20,19,0.025) is invisible against #14130f but readable
   on #FAF9F5. Now gated so it only paints in dark mode. */

html[data-theme="dark"] body::after,
html:not([data-theme="light"]) body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(20,20,19,0.025) 2px, rgba(20,20,19,0.025) 4px);
  pointer-events: none;
  z-index: 9998;
}

/* ─── FOCUS VISIBILITY ──────────────────────────────────────────────────── */

:focus-visible {
  outline: 1px solid var(--bb-amber);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ─── BLOOMBERG COMPONENT CLASSES ───────────────────────────────────────── */

.bb-card {
  background: var(--bb-bg-panel);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: 16px;
}
.bb-card:hover { border-color: var(--bb-border-bright); }

.bb-btn {
  font-family: var(--bb-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid var(--bb-border-bright);
  background: transparent;
  color: var(--bb-text-dim);
  cursor: pointer;
  border-radius: var(--bb-radius);
  transition: all 0.1s;
}
.bb-btn:hover { border-color: var(--bb-amber); color: var(--bb-amber); background: var(--bb-amber-glow); }
.bb-btn-primary { background: var(--bb-amber); border-color: var(--bb-amber); color: #141413; font-weight: 600; }
.bb-btn-primary:hover { background: var(--bb-amber-dim); border-color: var(--bb-amber-dim); }

.bb-input {
  background: var(--bb-bg-input);
  border: 1px solid var(--bb-border-bright);
  color: var(--bb-text);
  font-family: var(--bb-mono);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: var(--bb-radius);
  outline: none;
  width: 100%;
}
.bb-input:focus { border-color: var(--bb-amber); }
.bb-input::placeholder { color: var(--bb-text-muted); }

.bb-table { width: 100%; border-collapse: collapse; font-family: var(--bb-mono); font-size: 11px; }
.bb-table thead th {
  background: var(--bb-bg);
  color: var(--bb-text-muted);
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bb-amber);
  text-align: left; white-space: nowrap;
}
.bb-table thead th.num { text-align: right; }
.bb-table tbody tr { border-bottom: 1px solid var(--bb-border); transition: background 0.08s; cursor: pointer; }
.bb-table tbody tr:hover { background: var(--bb-bg-hover); }
.bb-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.012); }
.bb-table tbody tr:nth-child(even):hover { background: var(--bb-bg-hover); }
.bb-table td { padding: 7px 14px; color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-table td.num { text-align: right; }
.bb-table td.sym { color: var(--bb-amber); font-weight: 600; }

.bb-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 10px; font-weight: 500; border-radius: 2px; font-family: var(--bb-mono); }
.bb-badge-up { background: var(--bb-green-dim); color: var(--bb-green); }
.bb-badge-dn { background: var(--bb-red-dim); color: var(--bb-red); }
.bb-badge-amber { background: var(--bb-amber-glow); color: var(--bb-amber); }

.bb-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px; border-bottom: 1px solid var(--bb-border);
  background: var(--bb-bg);
}
.bb-section-title {
  font-size: 9px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--bb-text-dim);
}

.up { color: var(--bb-green) !important; }
.dn { color: var(--bb-red) !important; }
.amber { color: var(--bb-amber) !important; }
.dim { color: var(--bb-text-dim) !important; }
.muted { color: var(--bb-text-muted) !important; }

/* ─── BLOOMBERG LAYOUT CLASSES ──────────────────────────────────────────── */

.bb-layout { display: grid; grid-template-columns: 200px 1fr 240px; min-height: calc(100vh - 86px); }
.bb-sidebar { border-right: 1px solid var(--bb-border); background: var(--bb-bg); overflow-y: auto; }
.bb-main { overflow-y: auto; padding-bottom: 30px; }
.bb-right-panel { border-left: 1px solid var(--bb-border); background: var(--bb-bg); overflow-y: auto; }

@media (max-width: 1200px) { .bb-layout { grid-template-columns: 180px 1fr; } .bb-right-panel { display: none; } }
@media (max-width: 768px) { .bb-layout { grid-template-columns: 1fr; } .bb-sidebar { display: none; } }

/* Stat grid */
.bb-stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--bb-border); }
.bb-stat-card { padding: 14px 18px; border-right: 1px solid var(--bb-border); transition: background 0.1s; animation: bb-fadein 0.3s ease both; }
.bb-stat-card:last-child { border-right: none; }
.bb-stat-card:hover { background: var(--bb-bg-hover); }
.bb-stat-label { font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-text-muted); margin-bottom: 6px; font-family: var(--bb-mono); }
.bb-stat-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; font-family: var(--bb-mono); }
.bb-stat-delta { font-size: 10px; font-variant-numeric: tabular-nums; font-family: var(--bb-mono); }

/* Page header */
.bb-page-header { border-bottom: 1px solid var(--bb-border); padding: 9px 18px; display: flex; align-items: center; justify-content: space-between; background: var(--bb-bg); }
.bb-page-title { font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bb-text-dim); font-family: var(--bb-mono); }

/* Sidebar */
.bb-sidebar-section { border-bottom: 1px solid var(--bb-border); }
.bb-sidebar-label { font-size: 9px; font-weight: 600; letter-spacing: 0.15em; color: var(--bb-text-muted); text-transform: uppercase; padding: 10px 14px 6px; font-family: var(--bb-mono); }
.bb-sidebar-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; cursor: pointer; border-left: 2px solid transparent; transition: all 0.1s; text-decoration: none; color: var(--bb-text-dim); font-size: 11px; font-family: var(--bb-mono); }
.bb-sidebar-item:hover { background: var(--bb-bg-hover); color: var(--bb-text); border-left-color: var(--bb-amber-dim); }
.bb-sidebar-item.active { background: var(--bb-amber-glow); color: var(--bb-amber); border-left-color: var(--bb-amber); }
.bb-sidebar-val { font-size: 10px; font-variant-numeric: tabular-nums; }

/* Chart section */
.bb-chart-section { border-bottom: 1px solid var(--bb-border); }
.bb-chart-wrap { padding: 16px 18px; height: 220px; }
.bb-chart-tabs { display: flex; gap: 0; }
.bb-chart-tab { font-family: var(--bb-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-text-muted); padding: 4px 10px; cursor: pointer; border: 1px solid transparent; background: transparent; transition: all 0.1s; }
.bb-chart-tab:hover { color: var(--bb-text-dim); border-color: var(--bb-border); }
.bb-chart-tab.active { color: var(--bb-amber); border-color: var(--bb-amber); background: var(--bb-amber-glow); }

/* Tabs */
.bb-tabs { display: flex; border-bottom: 1px solid var(--bb-border); background: var(--bb-bg); }
.bb-tab { font-family: var(--bb-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-text-muted); padding: 10px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.1s; background: none; border-top: none; border-left: none; border-right: none; }
.bb-tab:hover { color: var(--bb-text-dim); }
.bb-tab.active { color: var(--bb-amber); border-bottom-color: var(--bb-amber); }

/* Market index strip */
.bb-index-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--bb-border); }
.bb-index-card { padding: 12px 16px; border-right: 1px solid var(--bb-border); transition: background 0.1s; }
.bb-index-card:hover { background: var(--bb-bg-hover); }
.bb-index-name { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bb-text-muted); margin-bottom: 4px; font-family: var(--bb-mono); }
.bb-index-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--bb-mono); margin-bottom: 2px; }
.bb-index-change { font-size: 10px; font-variant-numeric: tabular-nums; font-family: var(--bb-mono); }

/* Metric grid */
.bb-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bb-border); margin-bottom: 0; }
.bb-metric-cell { background: var(--bb-bg-panel); padding: 14px 16px; }
.bb-metric-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bb-text-muted); margin-bottom: 4px; font-family: var(--bb-mono); }
.bb-metric-value { font-size: 18px; font-weight: 600; color: var(--bb-text); font-variant-numeric: tabular-nums; font-family: var(--bb-mono); }
.bb-metric-sub { font-size: 9px; color: var(--bb-text-muted); margin-top: 2px; font-family: var(--bb-mono); }

/* Sector grid */
.bb-sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bb-border); }
.bb-sector-cell { background: var(--bb-bg-panel); padding: 14px; transition: background 0.1s; cursor: pointer; }
.bb-sector-cell:hover { background: var(--bb-bg-hover); }
.bb-sector-name { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bb-text-dim); margin-bottom: 6px; font-family: var(--bb-mono); }
.bb-sector-return { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--bb-mono); }

/* Filter bar */
.bb-filter-bar { padding: 10px 18px; border-bottom: 1px solid var(--bb-border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bb-bg); }
.bb-filter-chip { font-family: var(--bb-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--bb-border-bright); color: var(--bb-text-dim); background: transparent; cursor: pointer; transition: all 0.1s; }
.bb-filter-chip:hover, .bb-filter-chip.active { border-color: var(--bb-amber); color: var(--bb-amber); background: var(--bb-amber-glow); }

/* Heatmap cells */
.bb-heatmap-high { background: rgba(61,214,140,0.35); color: var(--bb-green); }
.bb-heatmap-mid { background: rgba(217,119,87,0.2); color: var(--bb-amber); }
.bb-heatmap-low { background: rgba(224,82,82,0.25); color: var(--bb-red); }

/* Topnav */
.bb-topnav {
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-amber);
  height: 38px;
  display: flex; align-items: center;
  padding: 0 16px;
  position: sticky; top: 0; z-index: 100;
  gap: 0;
}
.bb-skip-link {
  position: absolute; top: -40px; left: 0; padding: 8px 12px;
  background: var(--bb-amber); color: #141413; font-size: 11px;
  font-family: var(--bb-mono); z-index: 9999; text-decoration: none;
}
.bb-skip-link:focus { top: 0; }
.bb-logo {
  font-family: var(--bb-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.2em; color: var(--bb-amber); text-decoration: none;
  margin-right: 28px; text-transform: uppercase; flex-shrink: 0;
}
.bb-nav-links { display: flex; align-items: center; flex: 1; }
.bb-nav-link {
  font-family: var(--bb-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-text-dim);
  text-decoration: none; padding: 0 13px; height: 38px;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.1s; white-space: nowrap;
}
.bb-nav-link:hover { color: var(--bb-text); }
.bb-nav-link.active { color: var(--bb-amber); border-bottom-color: var(--bb-amber); }
.bb-nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.bb-nav-time { font-size: 11px; color: var(--bb-text-dim); font-variant-numeric: tabular-nums; font-family: var(--bb-mono); }
.bb-live-badge { font-size: 9px; font-weight: 700; color: var(--bb-green); letter-spacing: 0.1em; font-family: var(--bb-mono); }

/* Ticker bar */
.bb-ticker { background: #0c0c0a; border-bottom: 1px solid var(--bb-border); height: 26px; display: flex; align-items: center; overflow: hidden; }
.bb-ticker-label { background: var(--bb-amber); color: #141413; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; padding: 0 10px; height: 100%; display: flex; align-items: center; text-transform: uppercase; flex-shrink: 0; font-family: var(--bb-mono); }
.bb-ticker-track { overflow: hidden; flex: 1; }
.bb-ticker-scroll { display: flex; gap: 32px; padding: 0 20px; animation: bb-ticker 50s linear infinite; white-space: nowrap; }
@keyframes bb-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.bb-ticker-item { display: flex; align-items: center; gap: 8px; font-size: 10px; font-variant-numeric: tabular-nums; font-family: var(--bb-mono); }
.bb-ticker-sym { color: var(--bb-amber); font-weight: 600; }
.bb-ticker-price { color: var(--bb-text); }
.bb-ticker-up { color: var(--bb-green); }
.bb-ticker-dn { color: var(--bb-red); }

/* Status bar */
.bb-statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--bb-bg); border-top: 1px solid var(--bb-amber);
  height: 22px; display: flex; align-items: center;
  padding: 0 16px; gap: 24px;
}
.bb-status-item { font-size: 9px; color: var(--bb-text-muted); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--bb-mono); }
.bb-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bb-green); }

/* Mobile nav */
.bb-mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--bb-bg); border-top: 1px solid var(--bb-amber);
  height: 48px; flex-direction: row; align-items: center;
}
@media (max-width: 768px) { .bb-mobile-nav { display: flex; } .bb-statusbar, .db-statusbar { display: none; } }
.bb-mob-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; height: 48px; min-width: 44px;
  color: var(--bb-text-muted); text-decoration: none; font-family: var(--bb-mono);
  font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.1s; cursor: pointer; background: none; border: none;
}
.bb-mob-item:hover { color: var(--bb-text-dim); }
.bb-mob-item.active { color: var(--bb-amber); }

/* Portfolio card */
.bb-portfolio-card {
  background: var(--bb-bg-panel); border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius); padding: 16px 20px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  transition: all 0.1s; cursor: pointer; text-decoration: none;
}
.bb-portfolio-card:hover { border-color: var(--bb-amber); background: var(--bb-bg-hover); }
.bb-portfolio-name { font-size: 13px; font-weight: 600; color: var(--bb-text); font-family: var(--bb-mono); }
.bb-portfolio-value { font-size: 20px; font-weight: 600; color: var(--bb-amber); font-variant-numeric: tabular-nums; }

/* Result count */
.bb-result-count { font-size: 10px; color: var(--bb-text-dim); font-family: var(--bb-mono); }
.bb-result-count span { color: var(--bb-amber); font-weight: 600; }

/* Select */
.bb-select { background: var(--bb-bg-panel); border: 1px solid var(--bb-border-bright); color: var(--bb-text); font-family: var(--bb-mono); font-size: 11px; padding: 5px 28px 5px 10px; border-radius: var(--bb-radius); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6a58'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.bb-select:focus { border-color: var(--bb-amber); }

/* ─── ANIMATIONS ────────────────────────────────────────────────────────── */

@keyframes bb-fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.bb-animate { animation: bb-fadein 0.25s ease both; }
@keyframes bb-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.bb-pulse { animation: bb-pulse 2s infinite; }
@keyframes bb-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.bb-blink { animation: bb-blink 1s step-end infinite; }

/* ============================================================================
   GLOBAL OVERRIDE FINALE — Bloomberg Terminal Black Unification
   Appended last so these rules win over all page-specific CSS.
   Fixes ~45 pages to match dashboard reference: #141413 bg, #1a1918 cards,
   #2a2927 borders, 2px radius, Poppins, #d97757 cyan accent,
   no hover lifts, no aurora, no gradients.
   ============================================================================ */

/* ─── 1. KILL ALL HOVER LIFT TRANSFORMS ──────────────────────────────────── */
[class*="-card"]:hover,
[class*="-panel"]:hover,
.kpi-card:hover,
.glass-card:hover,
.stat-card:hover,
.summary-card:hover,
.metric-card:hover,
.info-card:hover,
.holding-row:hover,
[class*="kpi"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ─── 2. FIX WRONG PAGE BACKGROUNDS ─────────────────────────────────────── */
.ao-page,
.h-page,
.tx-page,
.gl-page,
.ph-page,
.pa-page,
.sc-page {
  background: #141413 !important;
}
.movers-header,
.md-hero,
.md-idx,
.md-card,
.md-tab-bar,
.da-header,
.da-card {
  background: #1a1918 !important;
}
/* Market page main gradient kill */
main[class*="bg-gradient"],
main[style*="background:linear-gradient"],
main[style*="background-image:linear-gradient"] {
  background: #141413 !important;
  background-image: none !important;
}

/* ─── 3. FIX WRONG ACCENT COLORS ────────────────────────────────────────── */
/* Alpha Optimizer */
.ao-btn,
.ao-tab.active,
.ao-sh::before,
.ao-factor-bar {
  background: #d97757 !important;
  color: #141413 !important;
}
.ao-tab.active {
  border-color: #d97757 !important;
}
/* Goals page */
.gl-terminal-hdr,
.gl-btn-primary {
  background: #d97757 !important;
  color: #141413 !important;
}
/* Price-alerts header */
.ph-terminal-hdr,
.pa-terminal-hdr {
  background: #d97757 !important;
  color: #141413 !important;
}
/* Override per-page CSS vars that use non-cyan accents */
.ao-page { --ao-blue: #d97757 !important; --ao-accent: #d97757 !important; }
.gl-page { --gl-terminal: #d97757 !important; --gl-accent: #d97757 !important; }
.ph-page, .pa-page { --ph-terminal: #d97757 !important; --pa-accent: #d97757 !important; }

/* ─── 4. KILL AURORA ANIMATIONS & ORBS ───────────────────────────────────── */
[class*="-aurora"],
[class*="aurora-"],
[class*="-orb"],
[class*="orb-"] {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}
[class*="-grid-overlay"],
[class*="grid-overlay"] {
  display: none !important;
}

/* ─── 5. FLATTEN TAILWIND BORDER-RADIUS ──────────────────────────────────── */
.rounded-full:not(.w-2):not(.h-2):not(.w-3):not(.h-3):not([class*="dot"]):not([class*="avatar"]):not([class*="status"]),
.rounded-xl,
.rounded-lg,
.rounded-md {
  border-radius: 2px !important;
}
/* Exception: keep tiny status indicator dots round */
.rounded-full.w-2,
.rounded-full.h-2,
.rounded-full.w-3,
.rounded-full.h-3 {
  border-radius: 9999px !important;
}

/* ─── 6. FLATTEN STITCH DESIGN SYSTEM (price-alerts) ─────────────────────── */
.stitch-input,
.stitch-select,
.stitch-btn,
.stitch-btn-primary,
.stitch-btn-secondary,
.stitch-card,
.stitch-modal {
  border-radius: 2px !important;
}

/* ─── 7. FLATTEN SETTINGS TABS ───────────────────────────────────────────── */
.st-tab,
.settings-tab,
.st-card {
  border-radius: 2px !important;
}

/* ─── 8. FONT NORMALIZATION ──────────────────────────────────────────────── */
.summary-card .value,
.da-value,
.da-stat,
[class*="-kpi"] .value,
[class*="-kpi"] .label,
.metric-value,
.stat-value {
  font-family: 'Poppins', sans-serif !important;
}

/* ─── 9. CARD PADDING CAP ───────────────────────────────────────────────── */
.glass-card {
  padding: 16px !important;
}

/* ─── 10. BOX-SHADOW ELIMINATION ─────────────────────────────────────────── */
[class*="-kpi"]:hover,
.shadow-lg,
.shadow-xl,
.shadow-md,
.shadow-2xl,
[class*="-card"].shadow-lg,
[class*="-card"].shadow-xl {
  box-shadow: none !important;
}

/* ─── 11. MARKET.EJS GRADIENT & TAB FIXES ────────────────────────────────── */
.md-tab.active {
  background: #faf9f5 !important;
  color: #141413 !important;
}
.md-tab:not(.active) {
  background: transparent !important;
  color: #8a8580 !important;
}

/* ─── 12. TAB ACCENT NORMALIZATION ───────────────────────────────────────── */
.tab-nav .tab-btn.active,
.nav-tab.active,
[class*="-tab"].active {
  color: #d97757 !important;
  border-bottom-color: #d97757 !important;
}

/* ─── 13. MISC CLEANUP ──────────────────────────────────────────────────── */
/* Kill any remaining gradient backgrounds on buttons/badges that aren't inline */
[class*="-btn-primary"]:not([style*="background"]) {
  background: #d97757 !important;
  color: #141413 !important;
  border: none !important;
}
/* Ensure all modals match theme */
[class*="-modal-content"],
[class*="-modal"] > div:first-child {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
}
/* Input field consistency */
[class*="-input"]:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #d97757 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(217,119,87,0.3) !important;
}
/* ============================================================================
   BB DESIGN SYSTEM — Reusable component classes for Bloomberg Terminal Black
   ============================================================================ */

/* Page wrapper */
.bb-page {
  background: #141413;
  min-height: 100vh;
  color: #e8e5de;
  font-family: 'Poppins', sans-serif;
}

/* Cards */
.bb-card {
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 2px;
  padding: 20px;
}

.bb-card-sm {
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 2px;
  padding: 12px;
}

/* Inputs */
.bb-input,
.bb-select {
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 2px;
  color: #e8e5de;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s ease;
}

.bb-input:focus,
.bb-select:focus {
  border-color: #d97757;
}

/* Tab bar */
.bb-tab-bar {
  display: flex;
  gap: 2px;
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 2px;
  padding: 3px;
}

/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.kpi-card {
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 2px;
  padding: 14px;
}

.kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a8580;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #e8e5de;
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  font-size: 11px;
  margin-top: 4px;
}

/* Filter chips */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid #2a2927;
  border-radius: 2px;
  color: #8a8580;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.12s ease;
}

.filter-chip:hover {
  color: #e8e5de;
  border-color: #3a3735;
}

.filter-chip.active {
  background: #faf9f5;
  color: #141413;
  border-color: #faf9f5;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.success {
  background: rgba(0,200,83,0.15);
  color: #00c853;
}

.status-badge.danger {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.status-badge.warning {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}

.status-badge.info {
  background: rgba(217,119,87,0.12);
  color: #d97757;
}

/* Section header */
.section-hdr {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a8580;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2927;
  margin-bottom: 12px;
}

/* Table container with styled scrollbar */
.bb-table-container {
  overflow-x: auto;
  border: 1px solid #2a2927;
  border-radius: 2px;
}

.bb-table-container::-webkit-scrollbar { height: 4px; }
.bb-table-container::-webkit-scrollbar-track { background: #1a1918; }
.bb-table-container::-webkit-scrollbar-thumb { background: #2a2927; border-radius: 2px; }

/* Pagination */
.pagination-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid #2a2927;
  border-radius: 2px;
  color: #8a8580;
  cursor: pointer;
  transition: all 0.12s ease;
}

.pagination-btn:hover {
  color: #e8e5de;
  border-color: #3a3735;
}

.pagination-btn.active {
  background: #faf9f5;
  color: #141413;
  border-color: #faf9f5;
}

/* Export button variant */
.bb-export-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #2a2927;
  border-radius: 2px;
  color: #8a8580;
  cursor: pointer;
  transition: all 0.12s ease;
}

.bb-export-btn:hover {
  border-color: #d97757;
  color: #d97757;
}

/* Modal */
.bb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,20,19,0.8);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-detail-modal {
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 2px;
  width: 90vw;
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
  color: #e8e5de;
}

/* ============================================================================
   UNIFIED LAYOUT STANDARDIZATION
   Forces ALL per-page custom classes to render identically.
   Uses attribute selectors to catch every prefix (h-, st-, an-, wl-, pp-, etc.)
   ============================================================================ */

/* --- PAGE WRAPPERS: All [prefix]-page classes --- */
[class*="-page"] {
  background: #141413 !important;
  min-height: 100vh !important;
  padding: 1.5rem !important;
  color: #e8e5de !important;
  font-family: 'Poppins', sans-serif !important;
}

/* --- CARDS: All [prefix]-card, [prefix]-glass, [prefix]-panel classes --- */
[class*="-card"]:not(.kpi-card):not(.bb-card):not(.bb-card-sm):not([class*="card-dark"]),
[class*="-glass"],
[class*="-panel"]:not(.cw-panel):not([class*="panel-"]) {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
  color: #e8e5de !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Card padding standardization */
[class*="-card"]:not(.kpi-card):not(.bb-card):not(.bb-card-sm):not([class*="card-dark"]),
[class*="-glass"],
[class*="-panel"]:not(.cw-panel):not([class*="panel-"]) {
  padding: 16px !important;
}

/* --- KPI GRIDS: All [prefix]-kpi-grid classes --- */
[class*="-kpi-grid"],
[class*="kpi-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 1.25rem !important;
}

/* --- KPI CARDS: All [prefix]-kpi classes (individual cards) --- */
[class$="-kpi"],
[class*="-kpi "],
.kpi-card {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
  padding: 14px !important;
}

/* --- KPI LABELS & VALUES --- */
[class*="-kpi-label"],
[class*="-kpi-title"],
.kpi-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #8a8580 !important;
  margin-bottom: 6px !important;
  font-family: 'Poppins', sans-serif !important;
}

[class*="-kpi-value"],
[class*="-kpi-num"],
.kpi-value {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #e8e5de !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'Poppins', sans-serif !important;
}

/* --- TAB CONTAINERS: All [prefix]-tabs classes --- */
[class*="-tabs"]:not(.st-tabs) {
  display: flex !important;
  gap: 2px !important;
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
  padding: 3px !important;
  margin-bottom: 1.25rem !important;
  overflow-x: auto !important;
}

/* --- TAB BUTTONS: All [prefix]-tab classes --- */
[class$="-tab"],
[class*="-tab "]:not([class*="-table"]),
[class*="-tab."] {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 2px !important;
  color: #8a8580 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.12s ease !important;
}

[class$="-tab"]:hover,
[class*="-tab "]:not([class*="-table"]):hover {
  color: #e8e5de !important;
}

[class$="-tab"].active,
[class*="-tab "].active,
[class*="-tab.active"] {
  background: #faf9f5 !important;
  color: #141413 !important;
}

/* --- AURORA / HERO HEADERS: Kill gradients, standardize --- */
[class*="-aurora"],
[class*="-hero"] {
  background: #141413 !important;
  background-image: none !important;
  border-bottom: 1px solid #2a2927 !important;
  padding: 1.25rem 0 !important;
  margin-bottom: 1.25rem !important;
  position: relative !important;
}

/* Kill aurora pseudo-elements (gradient orbs) */
[class*="-aurora"]::before,
[class*="-aurora"]::after,
[class*="-hero"]::before,
[class*="-hero"]::after {
  display: none !important;
}

/* --- SECTION HEADERS: All [prefix]-header, [prefix]-hdr classes --- */
[class*="-header"]:not(.cw-header):not([class*="header-"]):not(header),
[class*="-hdr"] {
  font-family: 'Poppins', sans-serif !important;
  color: #e8e5de !important;
}

/* --- TABLES: All [prefix]-table classes --- */
[class*="-table"] table,
[class*="-table"] {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  color: #e8e5de !important;
}

[class*="-table"] th {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8a8580 !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #2a2927 !important;
  background: #141413 !important;
  white-space: nowrap !important;
}

[class*="-table"] td {
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(30,30,30,0.5) !important;
  color: #e8e5de !important;
}

[class*="-table"] tr:hover td {
  background: #1a1918 !important;
}

/* --- INPUTS: All [prefix]-input, [prefix]-select classes --- */
[class*="-input"],
[class*="-select"]:not([class*="select-"]) {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
  color: #e8e5de !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

[class*="-input"]:focus,
[class*="-select"]:focus {
  border-color: #d97757 !important;
}

/* --- MODALS: All [prefix]-modal classes --- */
[class*="-modal"]:not([class*="modal-"]) {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
  color: #e8e5de !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Modal overlays — MUST be above topnav (z-index:1000) and ticker (z-index:999) */
[class*="-modal-overlay"],
[class*="-overlay"]:not(.live-ticker-wrapper):not([class*="tooltip"]),
[class*="-modal"][style*="position:fixed"],
[class*="-modal"][style*="position: fixed"],
.modal-overlay,
.chart-modal-overlay,
.stock-modal-overlay {
  background: rgba(20,20,19,0.85) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 10000 !important;
}

/* Modal content panels — above overlay */
[class*="-modal"]:not([class*="-overlay"]):not([class*="modal-"]) {
  z-index: 10001 !important;
}

/* Fixed position modals with low z-index — force above header */
div[style*="position:fixed"][style*="inset:0"],
div[style*="position: fixed"][style*="inset: 0"] {
  z-index: 10000 !important;
}

/* --- BUTTONS: Standardize action buttons --- */
[class*="-btn"]:not(.cw-fab):not(.pagination-btn):not([class*="btn-"]):not(.cw-send):not(.cw-broker-btn) {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  transition: all 0.12s ease !important;
}

/* --- BADGES: Standardize status badges --- */
[class*="-badge"] {
  border-radius: 2px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* --- GLOBAL TYPOGRAPHY --- */
[class*="-title"],
[class*="-heading"] {
  font-family: 'Poppins', sans-serif !important;
  color: #e8e5de !important;
}

[class*="-subtitle"],
[class*="-desc"],
[class*="-description"] {
  font-family: 'Poppins', sans-serif !important;
  color: #8a8580 !important;
}

/* --- SCROLLBAR STANDARDIZATION for all custom containers --- */
[class*="-table"]::-webkit-scrollbar,
[class*="-panel"]::-webkit-scrollbar,
[class*="-modal"]::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

[class*="-table"]::-webkit-scrollbar-track,
[class*="-panel"]::-webkit-scrollbar-track,
[class*="-modal"]::-webkit-scrollbar-track {
  background: #1a1918;
}

[class*="-table"]::-webkit-scrollbar-thumb,
[class*="-panel"]::-webkit-scrollbar-thumb,
[class*="-modal"]::-webkit-scrollbar-thumb {
  background: #2a2927;
  border-radius: 2px;
}

/* --- SECTION SPACING RHYTHM --- */
[class*="-section"],
[class*="-group"] {
  margin-bottom: 1.25rem !important;
}

/* --- KILL ALL REMAINING GRADIENTS ON STRUCTURAL ELEMENTS --- */
[class*="-page"],
[class*="-card"],
[class*="-glass"],
[class*="-panel"],
[class*="-aurora"],
[class*="-hero"] {
  background-image: none !important;
}

/* ============================================================================
   TAILWIND SLATE → BB BLACK COLOR OVERRIDES
   Remaps all Tailwind slate-* utility classes to Bloomberg Terminal Black palette.
   This eliminates ~5,500 instances of warm-gray slate colors across 80+ EJS files
   without touching any template code.
   ============================================================================ */

/* --- BACKGROUNDS --- */
.bg-slate-950 { background-color: #141413 !important; }
.bg-slate-900 { background-color: #1a1918 !important; }
.bg-slate-800 { background-color: #1a1918 !important; }
.bg-slate-700 { background-color: #252422 !important; }
.bg-slate-600 { background-color: #252422 !important; }
.bg-slate-500 { background-color: #a09c97 !important; }
.bg-slate-400 { background-color: #8a8580 !important; }
.bg-slate-300 { background-color: #a3a3a3 !important; }
.bg-slate-200 { background-color: #e8e5de !important; }
.bg-slate-100 { background-color: #e5e5e5 !important; }
.bg-slate-50  { background-color: #f5f5f5 !important; }

/* Background with opacity variants */
.bg-slate-900\/50 { background-color: rgba(10,10,10,0.5) !important; }
.bg-slate-900\/80 { background-color: rgba(10,10,10,0.8) !important; }
.bg-slate-900\/90 { background-color: rgba(10,10,10,0.9) !important; }
.bg-slate-900\/95 { background-color: rgba(10,10,10,0.95) !important; }
.bg-slate-800\/50 { background-color: rgba(17,17,17,0.5) !important; }
.bg-slate-800\/80 { background-color: rgba(17,17,17,0.8) !important; }
.bg-slate-800\/90 { background-color: rgba(17,17,17,0.9) !important; }
.bg-slate-700\/50 { background-color: rgba(26,26,26,0.5) !important; }

/* --- HOVER BACKGROUNDS --- */
.hover\:bg-slate-950:hover { background-color: #141413 !important; }
.hover\:bg-slate-900:hover { background-color: #1a1918 !important; }
.hover\:bg-slate-800:hover { background-color: #1a1918 !important; }
.hover\:bg-slate-700:hover { background-color: #252422 !important; }
.hover\:bg-slate-600:hover { background-color: #252422 !important; }
.hover\:bg-slate-800\/50:hover { background-color: rgba(17,17,17,0.5) !important; }
.hover\:bg-slate-800\/80:hover { background-color: rgba(17,17,17,0.8) !important; }
.hover\:bg-slate-700\/50:hover { background-color: rgba(26,26,26,0.5) !important; }

/* --- BORDERS --- */
.border-slate-800 { border-color: #2a2927 !important; }
.border-slate-700 { border-color: #2a2927 !important; }
.border-slate-600 { border-color: #3a3735 !important; }
.border-slate-500 { border-color: #a09c97 !important; }
.border-slate-400 { border-color: #8a8580 !important; }
.border-slate-300 { border-color: #a3a3a3 !important; }

/* Border with opacity variants */
.border-slate-700\/50 { border-color: rgba(30,30,30,0.5) !important; }
.border-slate-600\/50 { border-color: rgba(42,42,42,0.5) !important; }

/* Hover borders */
.hover\:border-slate-600:hover { border-color: #3a3735 !important; }
.hover\:border-slate-500:hover { border-color: #a09c97 !important; }

/* --- TEXT COLORS --- */
.text-slate-50  { color: #f5f5f5 !important; }
.text-slate-100 { color: #e5e5e5 !important; }
.text-slate-200 { color: #e8e5de !important; }
.text-slate-300 { color: #a3a3a3 !important; }
.text-slate-400 { color: #8a8580 !important; }
.text-slate-500 { color: #a09c97 !important; }
.text-slate-600 { color: #a09c97 !important; }
.text-slate-700 { color: #2a2927 !important; }
.text-slate-800 { color: #1a1918 !important; }
.text-slate-900 { color: #1a1918 !important; }

/* Hover text */
.hover\:text-slate-200:hover { color: #e8e5de !important; }
.hover\:text-slate-300:hover { color: #a3a3a3 !important; }
.hover\:text-slate-400:hover { color: #8a8580 !important; }
.hover\:text-slate-100:hover { color: #e5e5e5 !important; }

/* --- RING COLORS --- */
.ring-slate-700 { --tw-ring-color: #2a2927 !important; }
.ring-slate-600 { --tw-ring-color: #3a3735 !important; }
.ring-slate-800 { --tw-ring-color: #2a2927 !important; }
.focus\:ring-slate-600:focus { --tw-ring-color: #3a3735 !important; }
.focus\:ring-slate-700:focus { --tw-ring-color: #2a2927 !important; }

/* --- DIVIDE COLORS --- */
.divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color: #2a2927 !important; }
.divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #2a2927 !important; }
.divide-slate-600 > :not([hidden]) ~ :not([hidden]) { border-color: #3a3735 !important; }

/* --- GRADIENT STOPS --- */
.from-slate-900 { --tw-gradient-from: #1a1918 !important; }
.from-slate-800 { --tw-gradient-from: #1a1918 !important; }
.from-slate-950 { --tw-gradient-from: #000 !important; }
.to-slate-900 { --tw-gradient-to: #1a1918 !important; }
.to-slate-800 { --tw-gradient-to: #1a1918 !important; }
.to-slate-950 { --tw-gradient-to: #000 !important; }
.via-slate-900 { --tw-gradient-via: #1a1918 !important; }
.via-slate-800 { --tw-gradient-via: #1a1918 !important; }

/* --- PLACEHOLDER COLORS --- */
.placeholder-slate-500::placeholder { color: #a09c97 !important; }
.placeholder-slate-400::placeholder { color: #8a8580 !important; }
.placeholder\:text-slate-500::placeholder { color: #a09c97 !important; }
.placeholder\:text-slate-400::placeholder { color: #8a8580 !important; }

/* --- OUTLINE --- */
.outline-slate-700 { outline-color: #2a2927 !important; }
.outline-slate-600 { outline-color: #3a3735 !important; }

/* --- ACCENT COLOR --- */
.accent-slate-700 { accent-color: #2a2927 !important; }

/* ============================================================================
   TAILWIND ZINC/GRAY/NEUTRAL → BB BLACK OVERRIDES
   Catch any zinc/gray/neutral Tailwind classes too
   ============================================================================ */

/* Zinc backgrounds */
.bg-zinc-900 { background-color: #1a1918 !important; }
.bg-zinc-800 { background-color: #1a1918 !important; }
.bg-zinc-700 { background-color: #252422 !important; }
.hover\:bg-zinc-800:hover { background-color: #1a1918 !important; }
.hover\:bg-zinc-700:hover { background-color: #252422 !important; }

/* Zinc borders */
.border-zinc-700 { border-color: #2a2927 !important; }
.border-zinc-800 { border-color: #2a2927 !important; }
.border-zinc-600 { border-color: #3a3735 !important; }

/* Zinc text */
.text-zinc-400 { color: #8a8580 !important; }
.text-zinc-300 { color: #a3a3a3 !important; }
.text-zinc-500 { color: #a09c97 !important; }
.text-zinc-200 { color: #e8e5de !important; }

/* Gray backgrounds */
.bg-gray-900 { background-color: #1a1918 !important; }
.bg-gray-800 { background-color: #1a1918 !important; }
.bg-gray-700 { background-color: #252422 !important; }
.hover\:bg-gray-800:hover { background-color: #1a1918 !important; }
.hover\:bg-gray-700:hover { background-color: #252422 !important; }

/* Gray borders */
.border-gray-700 { border-color: #2a2927 !important; }
.border-gray-800 { border-color: #2a2927 !important; }
.border-gray-600 { border-color: #3a3735 !important; }

/* Gray text */
.text-gray-400 { color: #8a8580 !important; }
.text-gray-300 { color: #a3a3a3 !important; }
.text-gray-500 { color: #a09c97 !important; }
.text-gray-200 { color: #e8e5de !important; }

/* Neutral backgrounds */
.bg-neutral-900 { background-color: #1a1918 !important; }
.bg-neutral-800 { background-color: #1a1918 !important; }
.hover\:bg-neutral-800:hover { background-color: #1a1918 !important; }

/* Neutral borders/text */
.border-neutral-700 { border-color: #2a2927 !important; }
.text-neutral-400 { color: #8a8580 !important; }
.text-neutral-300 { color: #a3a3a3 !important; }

/* ============================================================================
   GLASS/GLASSMORPHISM → SOLID BB BLACK
   Kill all glassmorphism patterns: blur, translucent bg, large radius
   ============================================================================ */

.glass-card,
.glass-elevated,
.glass-panel,
.glass-dark,
.glass,
[class*="glass-"] {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
}

/* Remove any remaining backdrop-filter from utility classes */
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
.backdrop-blur-xl,
.backdrop-blur-2xl,
.backdrop-blur-3xl,
.backdrop-blur {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- RESPONSIVE: Mobile standardization --- */
@media (max-width: 768px) {
  [class*="-page"] {
    padding: 0.75rem !important;
  }

  [class*="-kpi-grid"],
  [class*="kpi-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  [class*="-kpi-value"],
  [class*="-kpi-num"],
  .kpi-value {
    font-size: 18px !important;
  }

  [class*="-tabs"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
/* ============================================
   INDYXQUANT Pro V6 - Mobile-First Responsive
   ============================================ */

/* Mobile Bottom Navigation */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.5rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
[data-theme="dark"] .mobile-nav { background: rgba(20, 20, 19, 0.98); border-top: 1px solid #1a1918; /* -webkit-backdrop-filter removed */ }
[data-theme="dark"] .mobile-nav { background: rgba(20, 20, 19, 0.98); border-top: 1px solid #1a1918; /* backdrop-filter removed */ }
[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.98); border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 6px -1px rgba(20, 20, 19, 0.1); /* -webkit-backdrop-filter removed */ }
[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.98); border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 6px -1px rgba(20, 20, 19, 0.1); /* backdrop-filter removed */ }

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s;
  min-width: 4rem;
  text-decoration: none;
}
[data-theme="dark"] .mobile-nav-item { color: #a09c97; }
[data-theme="light"] .mobile-nav-item { color: #6b6966; }
.mobile-nav-item.active,
.mobile-nav-item:active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(139, 92, 246, 0.2));
}
[data-theme="dark"] .mobile-nav-item.active { color: #d97757; }
[data-theme="light"] .mobile-nav-item.active { color: #d97757; }
.mobile-nav-item svg { width: 1.25rem; height: 1.25rem; }
.mobile-nav-item span { font-size: 0.625rem; margin-top: 0.125rem; font-weight: 500; }

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 60;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
}
[data-theme="dark"] .mobile-menu-btn { background: rgba(10, 10, 10, 0.95); color: white; }
[data-theme="light"] .mobile-menu-btn { background: rgba(255, 255, 255, 0.95); color: #3a3735; box-shadow: 0 2px 8px rgba(20,20,19,0.15); }

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.5);
  z-index: 35;
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
}
.sidebar-overlay.active { display: block; }

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .mobile-nav { display: none !important; }
  .mobile-menu-btn { display: none !important; }
  
  aside { 
    transform: translateX(-100%); 
    transition: transform 0.3s ease;
    z-index: 45;
  }
  aside.open { transform: translateX(0); }
  
  main {
    margin-left: 0 !important;
    padding: 1rem !important;
    padding-top: 4.5rem !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
  
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { padding-left: 0; padding-right: 0; }
  h1 { font-size: 1.375rem !important; }
  h2 { font-size: 1.125rem !important; }
  h3 { font-size: 1rem !important; }
}

@media (max-width: 640px) {
  .card { padding: 1rem !important; border-radius: 0.75rem; }
  .btn-primary, .btn-secondary, .btn-ghost { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
  .form-input { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
  canvas { max-height: 200px !important; }
  table { font-size: 0.8125rem; }
  table th, table td { padding: 0.5rem 0.25rem !important; }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .btn-primary, .btn-secondary, .btn-ghost, .nav-item, .mobile-nav-item {
    min-height: 44px;
  }
  input, select, textarea { min-height: 44px; }
}

/* ============================================
   Core Theme Styles (continued below)
   ============================================ */

/* Base */
* { scrollbar-width: thin; scrollbar-color: #8a8580 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #8a8580; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8a8580; }
::selection { background: rgba(14, 165, 233, 0.3); }
html { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Card - Theme Aware */
.card {
  border-radius: 1rem;
  border-width: 1px;
  transition: all 0.2s ease;
}
[data-theme="dark"] .card {
  background: rgba(20, 20, 19, 0.6);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border-color: rgba(30, 30, 30, 0.5);
}
[data-theme="light"] .card {
  background: white;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.1);
}
.card:hover {
  border-color: rgba(100, 116, 139, 0.5);
}
[data-theme="light"] .card:hover {
  box-shadow: 0 4px 12px rgba(20, 20, 19, 0.1);
}

/* Navigation */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
[data-theme="dark"] .nav-item { color: #a09c97; }
[data-theme="light"] .nav-item { color: #6b6966; }
[data-theme="dark"] .nav-item:hover { background: rgba(30, 30, 30, 0.5); color: white; }
[data-theme="light"] .nav-item:hover { background: #f3f4f6; color: #1a1918; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(139, 92, 246, 0.2));
  color: #d97757;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, #d97757, #b8956a);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}
[data-theme="dark"] .btn-secondary { background: #1a1918; color: white; border-color: #2a2927; }
[data-theme="light"] .btn-secondary { background: white; color: #3a3735; border-color: #d1d5db; }
.btn-secondary:hover { border-color: #d97757; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.3); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: transparent;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
[data-theme="dark"] .btn-ghost { color: #a09c97; }
[data-theme="light"] .btn-ghost { color: #6b6966; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(30, 30, 30, 0.5); color: white; }
[data-theme="light"] .btn-ghost:hover { background: #f3f4f6; color: #1a1918; }

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

/* Form Inputs */
.form-input {
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  outline: none;
}
[data-theme="dark"] .form-input {
  background: rgba(10, 10, 10, 0.5);
  border-color: #2a2927;
  color: white;
}
[data-theme="light"] .form-input {
  background: white;
  border-color: #d1d5db;
  color: #1a1918;
}
.form-input::placeholder {
  color: #8a8580;
}
.form-input:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Badges */
.badge-default, .badge-success, .badge-warning, .badge-danger, .badge-info {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
[data-theme="dark"] .badge-default { background: rgba(30, 30, 30, 0.5); color: #a09c97; }
[data-theme="light"] .badge-default { background: #f3f4f6; color: #6b6966; }
.badge-success { background: rgba(16, 185, 129, 0.2); color: #00c853; }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: #d97757; }
.badge-danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-info { background: rgba(14, 165, 233, 0.2); color: #d97757; }

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal.active { display: flex; }
.modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 19, 0.6);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem;
  background: transparent;
  border: none;
  animation: slideUp 0.3s ease;
}
[data-theme="dark"] .modal-content { background: transparent; border: none; }
[data-theme="light"] .modal-content { background: transparent; border: none; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
[data-theme="dark"] .modal-header h3 { color: white; font-weight: 600; font-size: 1.125rem; }
[data-theme="light"] .modal-header h3 { color: #1a1918; font-weight: 600; font-size: 1.125rem; }
.modal-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  transition: all 0.15s ease;
}
[data-theme="dark"] .modal-close { background: transparent; color: #8a8580; }
[data-theme="light"] .modal-close { background: transparent; color: #a09c97; }
.modal-close:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Toast Notifications */
.toast {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 280px;
  animation: slideUp 0.3s ease;
  box-shadow: 0 10px 40px rgba(20, 20, 19, 0.3);
}
[data-theme="dark"] .toast { background: #1a1918; border-color: #2a2927; }
[data-theme="light"] .toast { background: white; border-color: #e5e7eb; }
.toast-success { border-color: rgba(16, 185, 129, 0.5); }
.toast-error { border-color: rgba(239, 68, 68, 0.5); }
.toast-info { border-color: rgba(14, 165, 233, 0.5); }

/* Table */
table { border-collapse: collapse; }

/* Animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px currentColor; }
  50% { box-shadow: 0 0 20px currentColor; }
}

/* Live Indicator */
.live-indicator {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Range Input */
input[type="range"] {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  cursor: pointer;
}
[data-theme="dark"] input[type="range"] { background: #2a2927; }
[data-theme="light"] input[type="range"] { background: #e5e7eb; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d97757, #b8956a);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
  aside { transform: translateX(-100%); transition: transform 0.3s ease; }
  aside.open { transform: translateX(0); }
  main { margin-left: 0 !important; }
}

/* ============================================
   Skeleton Loaders
   ============================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
[data-theme="dark"] .skeleton { background: #1a1918; }
[data-theme="light"] .skeleton { background: #e5e7eb; }

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long { width: 90%; }

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.skeleton-card {
  height: 120px;
  margin-bottom: 1rem;
}

.skeleton-chart {
  height: 200px;
}

.skeleton-table-row {
  height: 3rem;
  margin-bottom: 0.5rem;
}

/* Button Loading State */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Empty State Styling */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-state svg {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  opacity: 0.4;
}

[data-theme="dark"] .empty-state svg { color: #8a8580; }
[data-theme="light"] .empty-state svg { color: #a09c97; }

.empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .empty-state h3 { color: #e8e5de; }
[data-theme="light"] .empty-state h3 { color: #252422; }

.empty-state p {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

[data-theme="dark"] .empty-state p { color: #a09c97; }
[data-theme="light"] .empty-state p { color: #6b6966; }

/* Improved Hover Effects */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

[data-theme="dark"] .hover-lift:hover {
  box-shadow: 0 8px 30px rgba(20, 20, 19, 0.3);
}

[data-theme="light"] .hover-lift:hover {
  box-shadow: 0 8px 30px rgba(20, 20, 19, 0.1);
}

/* Status Indicator */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.status-online .status-dot { background: #00c853; box-shadow: 0 0 8px #00c853; }
.status-offline .status-dot { background: #8a8580; }
.status-warning .status-dot { background: #d97757; box-shadow: 0 0 8px #d97757; }
.status-error .status-dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

/* Pulse Animation for Live Data */
.pulse-live {
  animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* ============================================================================
   SKELETON LOADING SYSTEM
   Creates content-aware loading placeholders
   ============================================================================ */

/* Base Skeleton Animation */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Base Skeleton Element */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 1000px 100%;
  animation: skeleton-shimmer 2s infinite linear;
  border-radius: 4px;
  display: inline-block;
}

/* Skeleton Shapes */
.skeleton-line {
  height: 12px;
  margin: 8px 0;
  border-radius: 4px;
}

.skeleton-line-sm {
  height: 8px;
  margin: 6px 0;
}

.skeleton-line-lg {
  height: 16px;
  margin: 10px 0;
}

.skeleton-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.skeleton-avatar {
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.skeleton-rect {
  border-radius: 6px;
}

/* Width Utilities */
.skeleton-w-full { width: 100%; }
.skeleton-w-3-4 { width: 75%; }
.skeleton-w-2-3 { width: 66.666%; }
.skeleton-w-1-2 { width: 50%; }
.skeleton-w-1-3 { width: 33.333%; }
.skeleton-w-1-4 { width: 25%; }
.skeleton-w-1-5 { width: 20%; }

/* Component Skeletons */

/* Card Skeleton */
.skeleton-card {
  background: var(--bg-secondary, #0f1419);
  border: 1px solid var(--border-primary, #3a3735);
  border-radius: 6px;
  padding: 16px;
}

.skeleton-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-primary, #3a3735);
}

.skeleton-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chart Skeleton */
.skeleton-chart {
  width: 100%;
  height: 300px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.02) 100%
  );
  background-size: 1000px 100%;
  animation: skeleton-shimmer 2s infinite linear;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.skeleton-chart::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(26, 140, 255, 0.1) 0%,
    transparent 100%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cpath d='M0,100 L0,50 Q100,30 200,40 T400,50 L400,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cpath d='M0,100 L0,50 Q100,30 200,40 T400,50 L400,100 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Table Skeleton */
.skeleton-table {
  width: 100%;
}

.skeleton-table-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-primary, #3a3735);
}

.skeleton-table-header {
  background: var(--bg-tertiary, #151c25);
}

/* KPI Bar Skeleton */
.skeleton-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border-primary, #3a3735);
  border-radius: 6px;
  overflow: hidden;
}

.skeleton-kpi-item {
  background: var(--bg-secondary, #0f1419);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Holdings Table Skeleton */
.skeleton-holdings-row {
  display: grid;
  grid-template-columns: 60px 1fr 120px 120px 120px 100px 80px;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--border-primary, #3a3735);
  align-items: center;
}

@media (max-width: 768px) {
  .skeleton-holdings-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Stats Grid Skeleton */
.skeleton-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.skeleton-stat-card {
  background: var(--bg-secondary, #0f1419);
  border: 1px solid var(--border-primary, #3a3735);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Portfolio Card Skeleton */
.skeleton-portfolio-card {
  background: var(--bg-secondary, #0f1419);
  border: 1px solid var(--border-primary, #3a3735);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-portfolio-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* Transaction Skeleton */
.skeleton-transaction {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  background: var(--bg-tertiary, #151c25);
}

/* News Item Skeleton */
.skeleton-news-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--border-primary, #3a3735);
}

.skeleton-news-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 6px;
}

.skeleton-news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Loading Container */
.skeleton-container {
  padding: 24px;
}

.skeleton-container.fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fade out animation when content loads */
.skeleton-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Accessibility */
.skeleton[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dashboard Widget Skeleton */
.skeleton-dashboard-widget {
  background: var(--bg-secondary, #0f1419);
  border: 1px solid var(--border-primary, #3a3735);
  border-radius: 8px;
  overflow: hidden;
}

/* Stock Detail Skeleton */
.skeleton-stock-detail {
  padding: 24px;
}

/* ============================================================================
   ERROR STATE SYSTEM
   User-friendly error messages with retry functionality
   ============================================================================ */

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 200px;
}

.error-state-icon {
  color: var(--text-tertiary, #6e7681);
  margin-bottom: 16px;
}

.error-state-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #f0f6fc);
  margin: 0 0 8px 0;
}

.error-state-message {
  font-size: 14px;
  color: var(--text-secondary, #8b949e);
  margin: 0 0 24px 0;
  max-width: 360px;
}

.error-state-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent-primary, #1a8cff);
  color: #faf9f5;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.error-state-retry-btn:hover {
  background: var(--accent-hover, #0066cc);
  transform: translateY(-1px);
}

.error-state-retry-btn:active {
  transform: translateY(0);
}

.error-state-retry-btn svg {
  transition: transform 0.3s ease;
}

.error-state-retry-btn:hover svg {
  transform: rotate(-45deg);
}

/* Error state variants */
.error-state.error-state--network .error-state-icon {
  color: var(--warning, #f0ad4e);
}

.error-state.error-state--empty .error-state-icon {
  color: var(--text-tertiary, #6e7681);
}

/* Empty State (for no data) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  color: var(--text-tertiary, #6e7681);
  margin-bottom: 16px;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #f0f6fc);
  margin: 0 0 8px 0;
}

.empty-state-message {
  font-size: 14px;
  color: var(--text-secondary, #8b949e);
  margin: 0 0 20px 0;
}

.empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent-primary, #1a8cff);
  color: #faf9f5;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.empty-state-action:hover {
  background: var(--accent-hover, #0066cc);
}

/* Offline Banner */
.offline-banner {
  display: none !important;
}

.offline-banner-icon {
  color: var(--warning, #f0ad4e);
}

.offline-banner-text {
  font-size: 14px;
  color: var(--warning-text, #ffcc00);
}

/* Dark mode adjustments */
[data-theme="light"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(20, 20, 19, 0.05) 0%,
    rgba(20, 20, 19, 0.1) 50%,
    rgba(20, 20, 19, 0.05) 100%
  );
}

[data-theme="light"] .skeleton-chart::before {
  background: linear-gradient(
    to top,
    rgba(26, 140, 255, 0.15) 0%,
    transparent 100%
  );
}

[data-theme="light"] .error-state-icon {
  color: #666;
}

[data-theme="light"] .error-state-title {
  color: #252422;
}

[data-theme="light"] .error-state-message {
  color: #666;
}

[data-theme="light"] .empty-state-icon {
  color: #999;
}

[data-theme="light"] .empty-state-title {
  color: #252422;
}

[data-theme="light"] .empty-state-message {
  color: #666;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .error-state {
    padding: 32px 16px;
  }

  .error-state-icon {
    width: 40px;
    height: 40px;
  }

  .error-state-title {
    font-size: 16px;
  }

  .error-state-message {
    font-size: 13px;
  }

  .skeleton-dashboard-widget > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================================
   PREMIUM LOADING EFFECTS
   Enhanced loading indicators and transitions
   ============================================================================ */

/* Gradient Shimmer Skeleton */
.skeleton-premium {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(59, 130, 246, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    rgba(255, 255, 255, 0.02) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-premium-shimmer 2s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-premium-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pulsing Dot Loader */
.loading-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.loading-dots span {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #d97757, #b8956a);
  border-radius: 50%;
  animation: loading-dot-pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Gradient Spinner */
.spinner-premium {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #d97757 90deg,
    #b8956a 180deg,
    transparent 270deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #faf9f5 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #faf9f5 calc(100% - 4px));
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Loading Bar */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, #d97757, #b8956a, transparent);
  animation: loading-bar 1.5s ease-in-out infinite;
}

@keyframes loading-bar {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* Content Fade In */
.content-loaded {
  animation: content-fade-in 0.4s ease-out;
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Skeleton Card with Glow */
.skeleton-card-premium {
  background: linear-gradient(145deg, rgba(15, 20, 25, 0.9), rgba(21, 28, 37, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.skeleton-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(59, 130, 246, 0.1),
    transparent
  );
  animation: shimmer-pass 2s ease-in-out infinite;
}

@keyframes shimmer-pass {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 23, 0.8);
  /* backdrop-filter removed */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

/* Skeleton Text Lines */
.skeleton-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-text-block .skeleton-line:nth-child(1) { width: 100%; }
.skeleton-text-block .skeleton-line:nth-child(2) { width: 85%; }
.skeleton-text-block .skeleton-line:nth-child(3) { width: 70%; }

/* Light theme premium skeletons */
[data-theme="light"] .skeleton-premium {
  background: linear-gradient(
    90deg,
    rgba(20, 20, 19, 0.03) 0%,
    rgba(20, 20, 19, 0.05) 20%,
    rgba(59, 130, 246, 0.1) 50%,
    rgba(20, 20, 19, 0.05) 80%,
    rgba(20, 20, 19, 0.03) 100%
  );
}

[data-theme="light"] .skeleton-card-premium {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
}

[data-theme="light"] .loading-overlay {
  background: rgba(255, 255, 255, 0.8);
}
/* ============================================
   INDYXQUANT Pro - Advanced UI System
   Modern, User-Centric Design System
   ============================================ */

/* ============================================
   CSS Variables - Design Tokens
   ============================================ */
:root {
  /* Primary Gradient Palette */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --gradient-warning: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
  --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
  --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-dark: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --gradient-aurora: linear-gradient(135deg, #00c6ff 0%, #0072ff 25%, #a07348 50%, #f472b6 75%, #d97757 100%);

  /* Accent Colors */
  --accent-blue: #d97757;
  --accent-purple: #b8956a;
  --accent-pink: #ec4899;
  --accent-cyan: #d97757;
  --accent-emerald: #00c853;
  --accent-amber: #d97757;
  --accent-rose: #f43f5e;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(20, 20, 19, 0.37);
  --glass-blur: blur(12px);

  /* Neon Glow */
  --glow-blue: 0 0 20px rgba(217, 119, 87, 0.5), 0 0 40px rgba(217, 119, 87, 0.3);
  --glow-purple: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
  --glow-emerald: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.3);
  --glow-amber: 0 0 20px rgba(245, 158, 11, 0.5), 0 0 40px rgba(245, 158, 11, 0.3);

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   Dark Theme Background
   ============================================ */
[data-theme="dark"] body {
  background: linear-gradient(180deg, #0a0e17 0%, #0f1419 50%, #151c25 100%);
  background-attachment: fixed;
}

[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(217, 119, 87, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ============================================
   Glass Cards - Glassmorphism Effect
   ============================================ */
.glass-card {
  background: rgba(15, 20, 25, 0.7);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 6px -1px rgba(20, 20, 19, 0.2),
    0 2px 4px -1px rgba(20, 20, 19, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  transition: all var(--transition-normal);
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 10px 15px -3px rgba(20, 20, 19, 0.3),
    0 4px 6px -2px rgba(20, 20, 19, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.glass-card-elevated {
  background: rgba(21, 28, 37, 0.8);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow:
    0 20px 25px -5px rgba(20, 20, 19, 0.4),
    0 10px 10px -5px rgba(20, 20, 19, 0.2);
}

/* ============================================
   Gradient Cards
   ============================================ */
.gradient-card {
  position: relative;
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.gradient-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.3), rgba(139, 92, 246, 0.3));
  -webkit-mask: linear-gradient(#faf9f5 0 0) content-box, linear-gradient(#faf9f5 0 0);
  mask: linear-gradient(#faf9f5 0 0) content-box, linear-gradient(#faf9f5 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.gradient-card-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
}

.gradient-card-success::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(52, 211, 153, 0.4));
}

.gradient-card-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%);
}

.gradient-card-danger::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(248, 113, 113, 0.4));
}

/* ============================================
   Neon Glow Effects
   ============================================ */
.neon-blue {
  box-shadow: var(--glow-blue);
}

.neon-purple {
  box-shadow: var(--glow-purple);
}

.neon-emerald {
  box-shadow: var(--glow-emerald);
}

.neon-amber {
  box-shadow: var(--glow-amber);
}

.neon-text-blue {
  text-shadow: 0 0 10px rgba(217, 119, 87, 0.8), 0 0 20px rgba(217, 119, 87, 0.5);
}

.neon-text-emerald {
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.8), 0 0 20px rgba(16, 185, 129, 0.5);
}

/* ============================================
   Advanced Buttons
   ============================================ */
.btn-gradient {
  position: relative;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: white;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.btn-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}

.btn-gradient:hover::before {
  opacity: 1;
}

.btn-gradient:active {
  transform: translateY(0);
}

.btn-glass {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-neon {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: #d97757;
  background: transparent;
  border: 2px solid #d97757;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-neon:hover {
  color: white;
  background: #d97757;
  box-shadow: var(--glow-blue);
}

/* ============================================
   Stat Cards - KPI Display
   ============================================ */
.stat-card {
  position: relative;
  padding: 1.5rem;
  background: rgba(15, 20, 25, 0.6);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px -15px rgba(20, 20, 19, 0.5);
}

.stat-card-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #faf9f5 0%, #a09c97 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card-value.positive {
  background: linear-gradient(135deg, #00c853 0%, #00c853 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat-card-value.negative {
  background: linear-gradient(135deg, #ef4444 0%, #ef4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8580;
  margin-bottom: 0.5rem;
}

.stat-card-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 119, 87, 0.1);
  border-radius: var(--radius-lg);
  color: #d97757;
}

/* ============================================
   Chart Container Styles
   ============================================ */
.chart-container {
  position: relative;
  padding: 1.5rem;
  background: rgba(15, 20, 25, 0.5);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chart-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-title::before {
  content: '';
  width: 3px;
  height: 1rem;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* ============================================
   Data Tables - Advanced Styling
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table thead tr {
  background: rgba(15, 20, 25, 0.95);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
}

.data-table th {
  padding: 0.875rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8580;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table tbody tr {
  transition: all var(--transition-fast);
}

.data-table tbody tr:hover {
  background: rgba(217, 119, 87, 0.05);
}

.data-table td {
  padding: 1rem;
  font-size: 0.875rem;
  color: #e8e5de;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all var(--transition-fast);
}

.data-table tbody tr:hover td {
  border-color: rgba(217, 119, 87, 0.2);
}

/* ============================================
   Ticker Tape / Marquee
   ============================================ */
.ticker-tape {
  display: flex;
  gap: 2rem;
  padding: 0.75rem 0;
  background: rgba(15, 20, 25, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
}

@keyframes ticker-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.ticker-symbol {
  font-weight: 600;
  color: #d97757;
  font-family: 'Poppins', sans-serif;
}

.ticker-price {
  color: white;
  font-family: 'Poppins', sans-serif;
}

.ticker-change {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
}

.ticker-change.up {
  color: #00c853;
  background: rgba(16, 185, 129, 0.1);
}

.ticker-change.down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   Progress Bars & Meters
   ============================================ */
.progress-bar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-bar-animated .progress-bar-fill {
  background-size: 200% 100%;
  animation: progress-shine 2s linear infinite;
}

@keyframes progress-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Circular Progress */
.circular-progress {
  position: relative;
  width: 120px;
  height: 120px;
}

.circular-progress svg {
  transform: rotate(-90deg);
}

.circular-progress-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.circular-progress-fill {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-slow);
}

.circular-progress-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: white;
}

/* ============================================
   Tooltips
   ============================================ */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  background: rgba(20, 20, 19, 0.95);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 100;
}

.tooltip:hover::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  visibility: visible;
}

/* ============================================
   Badges & Tags
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.badge-primary {
  color: #d97757;
  background: rgba(217, 119, 87, 0.15);
  border: 1px solid rgba(217, 119, 87, 0.3);
}

.badge-success {
  color: #00c853;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-warning {
  color: #d97757;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-pro {
  background: linear-gradient(135deg, #d97757 0%, #d97757 100%);
  color: white;
  border: none;
}

.badge-live {
  color: #00c853;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid #00c853;
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.badge-live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #00c853;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ============================================
   Input Fields - Modern Styling
   ============================================ */
.input-modern {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: white;
  background: rgba(15, 20, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  outline: none;
  transition: all var(--transition-normal);
}

.input-modern:focus {
  background: rgba(15, 20, 25, 0.8);
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.2);
}

.input-modern::placeholder {
  color: #8a8580;
}

.input-group {
  position: relative;
}

.input-group-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8580;
  pointer-events: none;
}

.input-group .input-modern {
  padding-left: 2.75rem;
}

/* ============================================
   Animations & Keyframes
   ============================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(217, 119, 87, 0.3); }
  50% { box-shadow: 0 0 40px rgba(217, 119, 87, 0.6); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ============================================
   Sparklines & Mini Charts
   ============================================ */
.sparkline {
  display: inline-block;
  width: 80px;
  height: 24px;
  vertical-align: middle;
}

.sparkline-positive {
  stroke: #00c853;
  fill: rgba(16, 185, 129, 0.1);
}

.sparkline-negative {
  stroke: #ef4444;
  fill: rgba(239, 68, 68, 0.1);
}

/* ============================================
   Mini Donut Chart
   ============================================ */
.mini-donut {
  position: relative;
  width: 48px;
  height: 48px;
}

.mini-donut svg {
  transform: rotate(-90deg);
}

.mini-donut-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: white;
}

/* ============================================
   Skeleton Loaders - Enhanced
   ============================================ */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

.skeleton-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Responsive Utilities
   ============================================ */
@media (max-width: 768px) {
  .stat-card-value {
    font-size: 1.5rem;
  }

  .glass-card {
    border-radius: var(--radius-lg);
  }

  .chart-container {
    padding: 1rem;
  }
}

/* ============================================
   Advanced Top Navigation - Glassmorphism
   ============================================ */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(10, 14, 23, 0.85) !important;
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 1000;
  transition: all var(--transition-normal);
}

.topnav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(217, 119, 87, 0.3),
    rgba(139, 92, 246, 0.3),
    transparent);
}

.topnav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.topnav-logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d97757 0%, #b8956a 100%);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3);
  transition: all var(--transition-normal);
}

.topnav-logo:hover .topnav-logo-icon {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(217, 119, 87, 0.4);
}

.topnav-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: #e8e5de;
  letter-spacing: -0.025em;
}

.topnav-logo-text span {
  background: linear-gradient(135deg, #d97757 0%, #b8956a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation Items */
.topnav-item {
  position: relative;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #a09c97;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.topnav-item:hover {
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.topnav-item.active {
  color: white;
  background: rgba(217, 119, 87, 0.15);
}

.topnav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, #d97757, #b8956a);
  border-radius: 1px;
}

/* Search Button - Enhanced */
.topnav-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: #8a8580;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.topnav-search:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(217, 119, 87, 0.3);
  color: #a09c97;
}

.topnav-search-kbd {
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-family: 'Poppins', sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #8a8580;
}

/* User Menu - Enhanced */
.topnav-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.topnav-user:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.topnav-user-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d97757 0%, #b8956a 100%);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

/* Notification Button */
.topnav-notification {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  color: #a09c97;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.topnav-notification:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.topnav-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 0.625rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #ef4444 0%, #d97757 100%);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* Ticker in Nav - Enhanced */
.topnav-ticker {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.topnav-ticker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
}

.topnav-ticker-symbol {
  color: #d97757;
  font-weight: 600;
}

.topnav-ticker-change {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-weight: 500;
}

.topnav-ticker-change.up {
  color: #00c853;
  background: rgba(16, 185, 129, 0.1);
}

.topnav-ticker-change.down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   Mega Menu - Glassmorphism
   ============================================ */
.megamenu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: rgba(15, 20, 25, 0.95);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(20, 20, 19, 0.4);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  z-index: 999;
}

.megamenu.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.megamenu-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* Account Dropdown - Enhanced */
.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: rgba(21, 28, 37, 0.95);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(20, 20, 19, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all var(--transition-normal);
  z-index: 1001;
  overflow: hidden;
}

.topnav-user-wrapper:hover .account-dropdown,
.topnav-user:focus + .account-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.account-dropdown-header {
  padding: 1rem;
  background: rgba(217, 119, 87, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-dropdown-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
}

.account-dropdown-email {
  font-size: 0.75rem;
  color: #8a8580;
  margin-top: 0.25rem;
}

.account-dropdown-links {
  padding: 0.5rem;
}

.account-dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #a09c97;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.account-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.account-dropdown-link.danger {
  color: #ef4444;
}

.account-dropdown-link.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.account-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.5rem 0;
}

/* ============================================
   Enhanced Holdings Table
   ============================================ */
.holdings-table-row {
  transition: all var(--transition-fast);
}

.holdings-table-row:hover {
  background: rgba(217, 119, 87, 0.05);
}

.holdings-table-row td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stock-symbol {
  font-weight: 600;
  color: white;
}

.stock-name {
  font-size: 0.75rem;
  color: #8a8580;
}

.stock-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.stock-change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
}

.stock-change.up {
  color: #00c853;
  background: rgba(16, 185, 129, 0.1);
}

.stock-change.down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   Enhanced Sidebar Navigation
   ============================================ */
.sidebar {
  background: rgba(15, 20, 25, 0.95);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #a09c97;
  text-decoration: none;
  border-radius: var(--radius-lg);
  margin: 0.25rem 0.5rem;
  transition: all var(--transition-fast);
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.sidebar-link.active {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  color: white;
  border-left: 3px solid #d97757;
}

.sidebar-link-icon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.sidebar-link:hover .sidebar-link-icon,
.sidebar-link.active .sidebar-link-icon {
  opacity: 1;
}

/* ============================================
   Enhanced Form Elements
   ============================================ */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8580;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: white;
  background: rgba(15, 20, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  outline: none;
  transition: all var(--transition-normal);
}

.form-input:focus {
  background: rgba(15, 20, 25, 0.95);
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.2);
}

.form-input::placeholder {
  color: #8a8580;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ============================================
   Enhanced Modals
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.6);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 100%;
  max-width: 480px;
  background: rgba(21, 28, 37, 0.98);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px rgba(20, 20, 19, 0.5);
  transform: translateY(20px) scale(0.95);
  transition: all var(--transition-normal);
}

.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: var(--radius-md);
  color: #a09c97;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   Toast Notifications - Enhanced
   ============================================ */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 3000;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  min-width: 300px;
  background: rgba(21, 28, 37, 0.98);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(20, 20, 19, 0.4);
  transform: translateX(120%);
  opacity: 0;
  transition: all var(--transition-bounce);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.toast.success .toast-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #00c853;
}

.toast.error .toast-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.toast.warning .toast-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #d97757;
}

.toast.info .toast-icon {
  background: rgba(217, 119, 87, 0.15);
  color: #d97757;
}

.toast-message {
  flex: 1;
  font-size: 0.875rem;
  color: white;
}

.toast-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #8a8580;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.toast-close:hover {
  color: white;
}

/* ============================================
   Loading States
   ============================================ */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(217, 119, 87, 0.2);
  border-top-color: #d97757;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: #d97757;
  border-radius: 50%;
  animation: bounce-dot 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce-dot {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ============================================
   Responsive - Mobile Navigation
   ============================================ */
@media (max-width: 1024px) {
  .topnav-menu {
    display: none;
  }

  .topnav-ticker {
    display: none;
  }
}

@media (max-width: 768px) {
  .topnav-search-text,
  .topnav-search-kbd {
    display: none;
  }

  .topnav-user-name {
    display: none;
  }
}

/* ============================================
   Light Theme Overrides
   ============================================ */
[data-theme="light"] {
  --bg-primary: #e8e5de;
  --bg-secondary: #faf9f5;
  --bg-tertiary: #e8e5de;
  --text-primary: #1a1918;
  --text-secondary: #8a8580;
  --text-tertiary: #8a8580;
  --border-primary: #e8e5de;
  --border-secondary: #e8e5de;
}

[data-theme="light"] body {
  background: linear-gradient(135deg, #e8e5de 0%, #e8e5de 100%) !important;
  color: #1a1918;
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(217, 119, 87, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(20, 20, 19, 0.1);
  box-shadow: 0 4px 20px rgba(20, 20, 19, 0.08);
}

[data-theme="light"] .glass-card-elevated {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(20, 20, 19, 0.08);
  box-shadow: 0 10px 40px rgba(20, 20, 19, 0.12);
}

[data-theme="light"] .stat-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(20, 20, 19, 0.08);
}

[data-theme="light"] .stat-card-label {
  color: #8a8580;
}

[data-theme="light"] .stat-card-value {
  color: #1a1918;
}

[data-theme="light"] .chart-container {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(20, 20, 19, 0.08);
}

[data-theme="light"] .chart-title {
  color: #1a1918;
}

[data-theme="light"] .topnav {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: rgba(20, 20, 19, 0.1) !important;
}

[data-theme="light"] .topnav::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(217, 119, 87, 0.2),
    rgba(139, 92, 246, 0.2),
    transparent);
}

[data-theme="light"] .topnav-logo-text {
  color: #1a1918;
}

[data-theme="light"] .topnav-item {
  color: #8a8580;
}

[data-theme="light"] .topnav-item:hover {
  color: #1a1918;
  background: rgba(20, 20, 19, 0.05);
}

[data-theme="light"] .topnav-search {
  background: rgba(20, 20, 19, 0.05);
  border-color: rgba(20, 20, 19, 0.1);
  color: #8a8580;
}

[data-theme="light"] .topnav-notification {
  background: rgba(20, 20, 19, 0.05);
  border-color: rgba(20, 20, 19, 0.08);
  color: #8a8580;
}

[data-theme="light"] .topnav-notification:hover {
  background: rgba(20, 20, 19, 0.1);
  color: #1a1918;
}

[data-theme="light"] .topnav-user {
  background: rgba(20, 20, 19, 0.05);
  border-color: rgba(20, 20, 19, 0.08);
}

[data-theme="light"] .topnav-user-name {
  color: #1a1918;
}

[data-theme="light"] .megamenu {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .account-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .account-dropdown-name {
  color: #1a1918;
}

[data-theme="light"] .account-dropdown-link {
  color: #8a8580;
}

[data-theme="light"] .account-dropdown-link:hover {
  background: rgba(20, 20, 19, 0.05);
  color: #1a1918;
}

[data-theme="light"] .btn-glass {
  background: rgba(20, 20, 19, 0.05);
  border-color: rgba(20, 20, 19, 0.1);
  color: #8a8580;
}

[data-theme="light"] .btn-glass:hover {
  background: rgba(20, 20, 19, 0.1);
  color: #1a1918;
}

[data-theme="light"] .form-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(20, 20, 19, 0.15);
  color: #1a1918;
}

[data-theme="light"] .form-input:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
}

[data-theme="light"] .form-input::placeholder {
  color: #a09c97;
}

[data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .modal-title {
  color: #1a1918;
}

[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .toast-message {
  color: #1a1918;
}

[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .sidebar-link {
  color: #8a8580;
}

[data-theme="light"] .sidebar-link:hover {
  background: rgba(20, 20, 19, 0.05);
  color: #1a1918;
}

[data-theme="light"] .sidebar-link.active {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: #d97757;
}

/* Light theme for Bloomberg tables */
[data-theme="light"] .bloomberg-table th {
  background: rgba(20, 20, 19, 0.03);
  color: #8a8580;
  border-color: rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .bloomberg-table td {
  color: #1a1918;
  border-color: rgba(20, 20, 19, 0.08);
}

[data-theme="light"] .bloomberg-table tr:hover {
  background: rgba(217, 119, 87, 0.05);
}

/* Light theme text colors */
[data-theme="light"] .text-white {
  color: #1a1918 !important;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 {
  color: #8a8580 !important;
}

[data-theme="light"] .text-slate-500 {
  color: #a09c97 !important;
}
/**
 * INDYXQUANT Pro - Premium UI Components
 * Stitch Design System - Global Components
 */

/* ==================== Toast Notifications ==================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(145deg, rgba(26, 26, 30, 0.98) 0%, rgba(20, 20, 22, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(20, 20, 19, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  pointer-events: auto;
  max-width: 400px;
  animation: toast-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.exiting {
  animation: toast-exit 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 14px;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 2px;
}

.toast-message {
  font-size: 13px;
  color: #a1a1aa;
  line-height: 1.4;
}

.toast-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #8a8580;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  flex-shrink: 0;
  margin: -4px -8px -4px 4px;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

/* Toast Variants */
.toast-success .toast-icon { color: #00c853; }
.toast-success { border-left: 3px solid #00c853; }

.toast-error .toast-icon { color: #ef4444; }
.toast-error { border-left: 3px solid #ef4444; }

.toast-warning .toast-icon { color: #d97757; }
.toast-warning { border-left: 3px solid #d97757; }

.toast-info .toast-icon { color: #d97757; }
.toast-info { border-left: 3px solid #d97757; }

/* Toast Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  border-radius: 0 0 0 14px;
  animation: toast-progress 5s linear forwards;
}

@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ==================== Modals ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.75);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: linear-gradient(145deg, rgba(26, 26, 30, 0.98) 0%, rgba(20, 20, 22, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(20, 20, 19, 0.6);
  z-index: 9999;
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 10;
}

.modal-title {
  font-size: 14px;
  font-weight: 600;
  color: #fafafa;
}

.modal-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #71717a;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  font-size: 18px;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fafafa;
}

.modal-body {
  padding: 12px 16px;
  overflow-y: auto;
  max-height: calc(85vh - 100px);
}

/* Modal Content - transparent wrapper, no extra background */
.modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 14px;
}

/* ==================== Compact Modal Styling ==================== */
/* Make all form inputs smaller inside modals */
.modal .form-input,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="date"],
.modal select,
.modal textarea {
  padding: 6px 10px !important;
  font-size: 12px !important;
  min-height: 32px !important;
  height: auto !important;
  border-radius: 6px !important;
}

/* Smaller labels */
.modal label {
  font-size: 10px !important;
  margin-bottom: 2px !important;
  display: block;
}

/* Reduce vertical spacing in forms */
.modal .space-y-4 > * + * {
  margin-top: 8px !important;
}

.modal .space-y-5 > * + * {
  margin-top: 10px !important;
}

.modal .space-y-3 > * + * {
  margin-top: 6px !important;
}

/* Smaller helper text */
.modal p.text-xs,
.modal .text-xs,
.modal p.text-slate-500 {
  font-size: 9px !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

/* Tighter grid gaps */
.modal .grid.gap-3 {
  gap: 6px !important;
}

.modal .grid.gap-4 {
  gap: 8px !important;
}

/* Reduce margins */
.modal .mb-4 {
  margin-bottom: 8px !important;
}

.modal .mb-5 {
  margin-bottom: 10px !important;
}

.modal .mb-1\.5,
.modal .mb-1 {
  margin-bottom: 2px !important;
}

/* Smaller padding areas */
.modal .py-3 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.modal .p-4 {
  padding: 8px !important;
}

.modal .p-3 {
  padding: 6px !important;
}

/* Smaller headings */
.modal h3 {
  font-size: 13px !important;
}

/* Compact buttons inside modals */
.modal button,
.modal .bloomberg-btn {
  padding: 6px 12px !important;
  font-size: 11px !important;
  min-height: 28px !important;
}

.modal button.modal-close {
  padding: 4px !important;
  min-height: 24px !important;
  width: 24px !important;
  height: 24px !important;
}

/* Price display box - make it compact */
.modal .bg-slate-800\/50,
.modal [class*="border-green-400"] {
  padding: 6px 8px !important;
}

/* Search results dropdown - keep it reasonable */
.modal #searchResults {
  max-height: 150px !important;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 20, 19, 0.2);
}

/* Modal Sizes */
.modal-sm { max-width: 320px; }
.modal-lg { max-width: 500px; }
.modal-xl { max-width: 600px; }
.modal-full { max-width: 90vw; max-height: 90vh; }

/* ==================== Dropdown Menu ==================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: linear-gradient(145deg, rgba(26, 26, 30, 0.98) 0%, rgba(20, 20, 22, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(20, 20, 19, 0.5);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

.dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: #a1a1aa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.dropdown-item:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #fafafa;
}

.dropdown-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.dropdown-item:hover svg {
  opacity: 1;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 8px 0;
}

.dropdown-header {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8580;
}

/* ==================== Tabs ==================== */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #71717a;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.tab:hover {
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.04);
}

.tab.active {
  color: #fafafa;
  background: rgba(99, 102, 241, 0.15);
  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.2);
}

/* Underline Tabs Variant */
.tabs-underline {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.tabs-underline .tab {
  flex: none;
  padding: 12px 4px;
  border-radius: 0;
  position: relative;
}

.tabs-underline .tab.active {
  background: transparent;
  box-shadow: none;
}

.tabs-underline .tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #8a9bbf;
  border-radius: 1px 1px 0 0;
}

/* ==================== Accordion ==================== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.accordion-item:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.accordion-title {
  font-size: 14px;
  font-weight: 600;
  color: #fafafa;
}

.accordion-icon {
  width: 20px;
  height: 20px;
  color: #71717a;
  transition: transform 0.2s;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
  max-height: 500px;
}

.accordion-body {
  padding: 0 20px 20px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

/* ==================== Avatar ==================== */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #8a9bbf 0%, #b8956a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar Sizes */
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-xl { width: 72px; height: 72px; font-size: 24px; }

/* Avatar Group */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -12px;
  border: 2px solid #0f0f11;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* ==================== Chip/Tag ==================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: #a1a1aa;
  transition: all 0.15s;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fafafa;
}

.chip-primary { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.3); color: #818cf8; }
.chip-success { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); color: #00c853; }
.chip-danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #ef4444; }
.chip-warning { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); color: #d97757; }

.chip-remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 2px;
}

.chip-remove:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ==================== Toggle Switch ==================== */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: background 0.2s;
}

.toggle input:checked + .toggle-track {
  background: #8a9bbf;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fafafa;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px rgba(20, 20, 19, 0.2);
}

.toggle input:checked ~ .toggle-thumb {
  transform: translateX(20px);
}

/* ==================== Slider ==================== */
.slider {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #8a9bbf;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #8a9bbf;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

/* ==================== Stepper ==================== */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
}

.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.stepper-step.completed:not(:last-child)::after {
  background: #8a9bbf;
}

.stepper-circle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: #71717a;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}

.stepper-step.active .stepper-circle {
  background: #8a9bbf;
  border-color: #8a9bbf;
  color: white;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.stepper-step.completed .stepper-circle {
  background: #00c853;
  border-color: #00c853;
  color: white;
}

.stepper-label {
  font-size: 12px;
  color: #71717a;
  text-align: center;
}

.stepper-step.active .stepper-label {
  color: #fafafa;
}

/* ==================== Data List ==================== */
.data-list {
  display: flex;
  flex-direction: column;
}

.data-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.data-list-item:last-child {
  border-bottom: none;
}

.data-list-label {
  font-size: 13px;
  color: #71717a;
}

.data-list-value {
  font-size: 13px;
  font-weight: 500;
  color: #fafafa;
  font-family: 'SF Mono', 'Poppins', sans-serif;
}

/* ==================== Stat Card Grid ==================== */
.stat-grid {
  display: grid;
  gap: 16px;
}

.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .stat-grid-2,
  .stat-grid-3,
  .stat-grid-4,
  .stat-grid-6 { grid-template-columns: 1fr; }
}

/* ==================== Mobile Responsive ==================== */
@media (max-width: 640px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }

  .toast {
    max-width: none;
  }

  .modal {
    width: 95%;
    max-height: 90vh;
    border-radius: 16px;
  }

  .modal-header {
    padding: 16px 20px;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-footer {
    padding: 12px 20px;
    flex-wrap: wrap;
  }
}
/* Mega Menu Navigation Styles */

/* Top Navigation Bar */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height, 56px);
  background: var(--nav-bg, #1a1918);
  border-bottom: 1px solid var(--nav-border, #2a2927);
  z-index: 1000;
  /* backdrop-filter removed */
}

.topnav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  max-width: 100%;
}

/* Logo */
.topnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 32px;
  text-decoration: none;
}

.topnav-logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ff6600 0%, #ff8533 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav-logo-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.topnav-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #e6edf3);
  letter-spacing: -0.5px;
}

.topnav-logo-text span {
  color: var(--accent-primary, #ff6600);
}

/* Main Navigation Items */
.topnav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.topnav-item {
  position: relative;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #8b949e);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.topnav-item:hover {
  color: var(--text-primary, #e6edf3);
  background: var(--nav-hover, rgba(255, 255, 255, 0.05));
}

.topnav-item.active {
  color: var(--text-primary, #e6edf3);
  background: var(--nav-hover, rgba(255, 255, 255, 0.05));
}

.topnav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--accent-primary, #ff6600);
  border-radius: 1px;
}

.topnav-item-icon {
  display: inline-flex;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.topnav-item.active .topnav-item-icon {
  transform: rotate(180deg);
}

/* Right Side Actions */
.topnav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Market Ticker in Nav */
.topnav-ticker {
  display: none;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
}

@media (min-width: 1280px) {
  .topnav-ticker {
    display: flex;
  }
}

.topnav-ticker-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topnav-ticker-symbol {
  color: var(--text-tertiary);
}

.topnav-ticker-change {
  font-weight: 500;
}

.topnav-ticker-change.up {
  color: var(--positive);
}

.topnav-ticker-change.down {
  color: var(--negative);
}

/* Search Button */
.topnav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-tertiary, #151c25);
  border: 1px solid var(--border-primary, #3a3735);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.topnav-search:hover {
  border-color: var(--accent-secondary, #1a8cff);
}

.topnav-search-icon {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
}

.topnav-search-text {
  font-size: 13px;
  color: var(--text-muted, #484f58);
}

.topnav-search-kbd {
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  background: var(--bg-surface, #1a222d);
  border: 1px solid var(--border-secondary);
  border-radius: 3px;
}

/* Notification Button */
.topnav-notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.topnav-notification:hover {
  background: var(--nav-hover);
  color: var(--text-primary);
}

.topnav-notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: var(--negative);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* User Menu */
.topnav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.topnav-user:hover {
  background: var(--nav-hover);
  border-color: var(--border-primary);
}

.topnav-user-avatar {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
}

.topnav-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.topnav-user-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

/* Mega Menu Panel */
.megamenu {
  position: fixed;
  top: var(--nav-height, 56px);
  left: 0;
  right: 0;
  background: var(--bg-surface, #1a222d);
  border-bottom: 1px solid var(--border-primary, #3a3735);
  box-shadow: var(--shadow-xl);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.megamenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.megamenu-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* Mega Menu Grid */
.megamenu-grid {
  display: grid;
  gap: 32px;
}

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

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

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

/* Mega Menu Column */
.megamenu-column {
  min-width: 0;
}

.megamenu-column-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--accent-primary, #ff6600);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-secondary);
}

/* Mega Menu Links */
.megamenu-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.megamenu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text-secondary, #8b949e);
  text-decoration: none;
  transition: color 0.15s ease;
}

.megamenu-link:hover {
  color: var(--text-primary, #e6edf3);
}

.megamenu-link-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.megamenu-link:hover .megamenu-link-icon {
  color: var(--accent-secondary);
}

.megamenu-link-badge {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--accent-muted);
  color: var(--accent-primary);
  border-radius: 3px;
}

.megamenu-badge {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  background: linear-gradient(135deg, #d97757, #b8956a);
  color: white;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.megamenu-badge-pro {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
}

.mobile-menu-badge-pro {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: white;
  border-radius: 3px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.megamenu-link-new {
  color: var(--text-primary, #e6edf3) !important;
  font-weight: 500;
}

/* Featured Item in Menu */
.megamenu-featured {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
}

.megamenu-featured-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.megamenu-featured-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.megamenu-featured-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-secondary);
  text-decoration: none;
}

.megamenu-featured-link:hover {
  text-decoration: underline;
}

/* Quick Stats in Menu */
.megamenu-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.megamenu-stat {
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
}

.megamenu-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.megamenu-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.megamenu-stat-value.positive {
  color: var(--positive);
}

.megamenu-stat-value.negative {
  color: var(--negative);
}

/* Account Dropdown (Simple) */
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  margin-top: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1001;
}

.account-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-secondary);
}

.account-dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.account-dropdown-email {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.account-dropdown-links {
  padding: 8px;
}

.account-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.account-dropdown-link:hover {
  background: var(--nav-hover);
  color: var(--text-primary);
}

.account-dropdown-link-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.account-dropdown-divider {
  height: 1px;
  background: var(--border-secondary);
  margin: 8px;
}

.account-dropdown-link.danger {
  color: var(--negative);
}

.account-dropdown-link.danger:hover {
  background: var(--negative-bg);
}

/* Mobile Navigation */
@media (max-width: 1023px) {
  .topnav-menu,
  .topnav-search-text,
  .topnav-search-kbd,
  .topnav-user-name {
    display: none;
  }

  .topnav-inner {
    padding: 0 16px;
  }

  .topnav-logo {
    margin-right: auto;
  }

  .megamenu {
    display: none;
  }
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
}

.mobile-menu-btn:hover {
  background: var(--nav-hover);
  color: var(--text-primary);
}

@media (max-width: 1023px) {
  .mobile-menu-btn {
    display: flex;
  }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.6);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-primary);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 1101;
}

.mobile-menu-overlay.open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-primary);
}

.mobile-menu-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-menu-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
}

.mobile-menu-close:hover {
  background: var(--nav-hover);
  color: var(--text-primary);
}

/* Mobile Menu Sections */
.mobile-menu-section {
  border-bottom: 1px solid var(--border-secondary);
}

.mobile-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.mobile-menu-trigger:hover {
  background: var(--nav-hover);
}

.mobile-menu-trigger-icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.mobile-menu-section.open .mobile-menu-trigger-icon {
  transform: rotate(180deg);
}

.mobile-menu-content {
  display: none;
  padding: 8px 16px 16px;
  background: var(--bg-tertiary);
}

.mobile-menu-section.open .mobile-menu-content {
  display: block;
}

.mobile-menu-link {
  display: block;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
}

.mobile-menu-link:hover {
  background: var(--nav-hover);
  color: var(--text-primary);
}

/* Mobile Menu Footer */
.mobile-menu-footer {
  padding: 16px;
  border-top: 1px solid var(--border-primary);
  margin-top: auto;
}

.mobile-menu-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-bottom: 12px;
}

.mobile-menu-user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.mobile-menu-user-info {
  flex: 1;
}

.mobile-menu-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-menu-user-plan {
  font-size: 12px;
  color: var(--accent-primary);
}

.mobile-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--negative);
  background: var(--negative-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.mobile-menu-logout:hover {
  background: var(--negative);
  color: white;
}
/* ============================================================================
   INDYXQUANT Pro - Enhanced Visuals & Advanced UX
   Premium visual effects, animations, and data visualization improvements
   ============================================================================ */

/* ============================================================================
   1. ANIMATED GRADIENT BACKGROUNDS
   ============================================================================ */

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* ============================================================================
   2. ENHANCED STAT CARDS - Premium KPI Design
   ============================================================================ */

.stat-card {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 20, 25, 0.9), rgba(21, 28, 37, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue, #d97757), var(--accent-purple, #b8956a));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow:
    0 20px 40px rgba(20, 20, 19, 0.3),
    0 0 40px rgba(59, 130, 246, 0.1);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--accent-blue, #d97757);
  transition: all 0.3s ease;
}

.stat-card:hover .stat-card-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.stat-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary, #6e7681);
  margin-bottom: 8px;
}

.stat-card-value {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono, 'Poppins', sans-serif);
  color: var(--text-primary, #e6edf3);
  line-height: 1.1;
  animation: count-up 0.6s ease-out;
}

.stat-card-value.positive {
  color: #00c853;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.stat-card-value.negative {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Stat Card Variants */
.stat-card-success {
  border-color: rgba(16, 185, 129, 0.2);
}

.stat-card-success::before {
  background: linear-gradient(90deg, #00c853, #00c853);
}

.stat-card-danger {
  border-color: rgba(239, 68, 68, 0.2);
}

.stat-card-danger::before {
  background: linear-gradient(90deg, #ef4444, #ef4444);
}

/* ============================================================================
   3. ENHANCED CHART CONTAINERS
   ============================================================================ */

.chart-container {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 20, 25, 0.95), rgba(10, 14, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px;
  overflow: hidden;
}

.chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-title::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, var(--accent-blue, #d97757), var(--accent-purple, #b8956a));
  border-radius: 2px;
}

/* Timeframe Buttons */
.timeframe-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #8b949e);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeframe-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e6edf3);
}

.timeframe-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--accent-blue, #d97757);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* ============================================================================
   4. SPARKLINE VISUALIZATIONS
   ============================================================================ */

.sparkline-container {
  position: relative;
  height: 40px;
  margin-top: 12px;
  overflow: hidden;
}

.sparkline-positive {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.2) 0%, transparent 100%);
}

.sparkline-negative {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.2) 0%, transparent 100%);
}

/* Mini Chart */
.mini-chart {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: 8px;
}

.mini-chart-line {
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-chart-area {
  opacity: 0.2;
}

/* ============================================================================
   5. DATA TREND INDICATORS
   ============================================================================ */

.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.trend-indicator-up {
  background: rgba(16, 185, 129, 0.15);
  color: #00c853;
}

.trend-indicator-up svg {
  animation: float-indicator 1s ease-in-out infinite;
}

@keyframes float-indicator {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.trend-indicator-down {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.trend-indicator-neutral {
  background: rgba(107, 114, 128, 0.15);
  color: #6b6966;
}

/* ============================================================================
   6. PROGRESS BARS & GAUGES
   ============================================================================ */

.progress-bar-container {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-bar-animated {
  background: linear-gradient(90deg,
    var(--accent-blue, #d97757),
    var(--accent-purple, #b8956a),
    var(--accent-blue, #d97757));
  background-size: 200% 100%;
  animation: gradient-shift 2s linear infinite;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

/* Circular Progress */
.circular-progress {
  position: relative;
  width: 80px;
  height: 80px;
}

.circular-progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 8;
}

.circular-progress-bar {
  fill: none;
  stroke: url(#gradient-progress);
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.circular-progress-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ============================================================================
   7. ENHANCED TABLES
   ============================================================================ */

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead th {
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary, #6e7681);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.data-table tbody tr {
  transition: all 0.2s ease;
}

.data-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.05);
}

.data-table tbody td {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 14px;
}

.data-table .symbol-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.symbol-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-blue);
}

.symbol-name {
  font-weight: 600;
  color: var(--text-primary);
}

.symbol-ticker {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ============================================================================
   8. INTERACTIVE BADGES & TAGS
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-live {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  animation: pulse-glow 2s ease-in-out infinite;
}

.badge-live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #00c853;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #d97757;
}

.badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: #d97757;
}

/* ============================================================================
   9. ENHANCED BUTTONS
   ============================================================================ */

.btn-glass {
  position: relative;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.btn-glass:hover::before {
  left: 100%;
}

.btn-gradient {
  position: relative;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #d97757, #b8956a);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-gradient:active {
  transform: translateY(0);
}

/* Ripple Effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

/* ============================================================================
   10. PORTFOLIO ALLOCATION VISUALIZATION
   ============================================================================ */

.allocation-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.allocation-segment {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.allocation-segment:hover {
  filter: brightness(1.2);
}

.allocation-segment::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.allocation-segment:hover::after {
  opacity: 1;
}

/* Allocation Legend */
.allocation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.allocation-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.allocation-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* ============================================================================
   11. ANIMATED NUMBERS
   ============================================================================ */

.animated-number {
  display: inline-block;
  transition: all 0.3s ease;
}

.animated-number.updating {
  animation: count-up 0.4s ease-out;
}

/* Price Change Animation */
.price-flash-up {
  animation: flash-green 0.5s ease;
}

.price-flash-down {
  animation: flash-red 0.5s ease;
}

@keyframes flash-green {
  0%, 100% { background: transparent; }
  50% { background: rgba(16, 185, 129, 0.3); }
}

@keyframes flash-red {
  0%, 100% { background: transparent; }
  50% { background: rgba(239, 68, 68, 0.3); }
}

/* ============================================================================
   12. TOOLTIP ENHANCEMENTS
   ============================================================================ */

.tooltip {
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  padding: 10px 14px;
  background: var(--bg-elevated, #252422);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(20, 20, 19, 0.3);
}

.tooltip-content::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bg-elevated);
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* ============================================================================
   13. CARD HOVER EFFECTS
   ============================================================================ */

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(20, 20, 19, 0.2);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.15);
}

.hover-border:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

/* ============================================================================
   14. SKELETON LOADING ENHANCEMENTS
   ============================================================================ */

.skeleton-enhanced {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.skeleton-chart {
  height: 200px;
  border-radius: 12px;
}

/* ============================================================================
   15. SCROLL ANIMATIONS
   ============================================================================ */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ============================================================================
   16. ENHANCED INPUTS
   ============================================================================ */

.input-enhanced {
  position: relative;
  width: 100%;
}

.input-enhanced input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.input-enhanced input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

.input-enhanced label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: all 0.2s ease;
}

.input-enhanced input:focus + label,
.input-enhanced input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 11px;
  padding: 0 4px;
  background: var(--bg-secondary);
  color: var(--accent-blue);
}

/* ============================================================================
   17. PAGE TRANSITIONS
   ============================================================================ */

.page-enter {
  animation: page-fade-in 0.4s ease-out;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   18. LIGHT THEME ADJUSTMENTS
   ============================================================================ */

[data-theme="light"] .stat-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
  border-color: rgba(20, 20, 19, 0.06);
}

[data-theme="light"] .stat-card:hover {
  box-shadow: 0 20px 40px rgba(20, 20, 19, 0.1);
}

[data-theme="light"] .chart-container {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

[data-theme="light"] .btn-glass {
  background: rgba(20, 20, 19, 0.03);
  border-color: rgba(20, 20, 19, 0.08);
}

[data-theme="light"] .btn-glass:hover {
  background: rgba(20, 20, 19, 0.06);
}

[data-theme="light"] .skeleton-enhanced {
  background: linear-gradient(90deg,
    rgba(20, 20, 19, 0.04) 0%,
    rgba(20, 20, 19, 0.08) 50%,
    rgba(20, 20, 19, 0.04) 100%);
}

/* ============================================================================
   19. GLASS CARD EFFECT (Premium Glassmorphism)
   ============================================================================ */

.glass-card {
  background: rgba(20, 20, 19, 0.7);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(20, 20, 19, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.glass-card-subtle {
  background: rgba(20, 20, 19, 0.5);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

/* ============================================================================
   20. GRID BACKGROUND PATTERNS
   ============================================================================ */

.grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.grid-dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* ============================================================================
   21. FLOATING ORBS (Ambient Background)
   ============================================================================ */

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: float-slow 8s ease-in-out infinite;
}

.orb-blue {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
}

.orb-purple {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
  animation-delay: -2s;
}

.orb-emerald {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
  animation-delay: -4s;
}

/* ============================================================================
   22. PRICE TICKER ANIMATIONS
   ============================================================================ */

@keyframes tick-up {
  0% { color: inherit; }
  50% { color: #00c853; transform: translateY(-2px); }
  100% { color: inherit; transform: translateY(0); }
}

@keyframes tick-down {
  0% { color: inherit; }
  50% { color: #ef4444; transform: translateY(2px); }
  100% { color: inherit; transform: translateY(0); }
}

.price-tick-up {
  animation: tick-up 0.4s ease-out;
}

.price-tick-down {
  animation: tick-down 0.4s ease-out;
}

.stock-price {
  font-family: var(--font-mono);
  font-weight: 600;
  display: inline-block;
}

.stock-change-pct {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9em;
}

/* ============================================================================
   23. ENHANCED MOBILE BOTTOM NAV
   ============================================================================ */

.mobile-bottom-nav {
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  background: rgba(20, 20, 19, 0.9) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-bottom-nav .nav-item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
}

.mobile-bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: linear-gradient(90deg, #d97757, #b8956a);
  border-radius: 0 0 3px 3px;
}

.mobile-bottom-nav .fab-btn {
  background: linear-gradient(135deg, #d97757, #b8956a);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  transform: translateY(-50%);
  border: 3px solid rgba(20, 20, 19, 0.9);
}

.mobile-bottom-nav .fab-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* ============================================================================
   24. MARKET STATUS INDICATORS
   ============================================================================ */

.market-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #00c853;
  text-transform: uppercase;
}

.market-open::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #00c853;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.market-closed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(107, 114, 128, 0.15);
  border: 1px solid rgba(107, 114, 128, 0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #6b6966;
  text-transform: uppercase;
}

.market-closed::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #6b6966;
  border-radius: 50%;
}

/* ============================================================================
   25. NOTIFICATION BADGES
   ============================================================================ */

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ef4444, #ef4444);
  border: 2px solid var(--bg-primary);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounce-subtle 2s ease-in-out infinite;
}

@keyframes bounce-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ============================================================================
   26. ENHANCED DROPDOWN MENUS
   ============================================================================ */

.dropdown-enhanced {
  position: relative;
}

.dropdown-menu-enhanced {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(20, 20, 19, 0.95);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 100;
  box-shadow: 0 20px 40px rgba(20, 20, 19, 0.4);
}

.dropdown-enhanced:hover .dropdown-menu-enhanced,
.dropdown-enhanced.active .dropdown-menu-enhanced {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item-enhanced {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-item-enhanced:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-primary);
}

.dropdown-item-enhanced svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

/* ============================================================================
   27. MODAL ENHANCEMENTS
   ============================================================================ */

.modal-backdrop {
  background: rgba(20, 20, 19, 0.6);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
}

.modal-enhanced {
  background: linear-gradient(180deg, rgba(21, 28, 37, 0.98), rgba(15, 20, 25, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 25px 50px rgba(20, 20, 19, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: modal-in 0.3s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================================================
   28. LOADING SPINNERS
   ============================================================================ */

.spinner-gradient {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #d97757;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner-dots {
  display: flex;
  gap: 6px;
}

.spinner-dots span {
  width: 8px;
  height: 8px;
  background: #d97757;
  border-radius: 50%;
  animation: bounce-dots 1.4s ease-in-out infinite;
}

.spinner-dots span:nth-child(1) { animation-delay: 0s; }
.spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce-dots {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   29. FOCUS STATES
   ============================================================================ */

:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* ============================================================================
   30. SMOOTH SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
/* ============================================================================
   MICRO-ANIMATIONS
   Subtle animations that make the app feel responsive and polished
   ============================================================================ */

/* ============================================================================
   1. BUTTON & INTERACTIVE ELEMENTS
   ============================================================================ */

/* Button Hover Effects */
button:not(:disabled),
.btn:not(:disabled),
a.btn:not(.disabled) {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

button:not(:disabled):hover,
.btn:not(:disabled):hover,
a.btn:not(.disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 20, 19, 0.15);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
a.btn:not(.disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(20, 20, 19, 0.1);
}

/* Primary Button Glow */
.btn-primary:hover,
button.bg-blue-600:hover,
button.bg-orange-500:hover {
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.4),
              0 4px 12px rgba(20, 20, 19, 0.2);
}

/* Icon Buttons */
.icon-button,
button[aria-label],
.nav-icon {
  transition: all 0.2s ease;
}

.icon-button:hover,
button[aria-label]:hover,
.nav-icon:hover {
  transform: scale(1.1);
  color: var(--accent-primary, #ff6600);
}

/* Link Underline Animation */
a:not(.btn):not(.nav-link) {
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:not(.btn):not(.nav-link)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:not(.btn):not(.nav-link):hover::after {
  width: 100%;
}

/* ============================================================================
   2. CARD & CONTAINER ANIMATIONS
   ============================================================================ */

/* Card Hover Effect */
.card,
.portfolio-card,
.holding-card,
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.portfolio-card:hover,
.holding-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(20, 20, 19, 0.3);
  border-color: var(--accent-primary, #ff6600);
}

/* Stat Card Number Pulse on Update */
@keyframes pulse-update {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.stat-value.updating,
.price-value.updating {
  animation: pulse-update 0.5s ease-out;
}

/* ============================================================================
   3. PRICE & VALUE ANIMATIONS
   ============================================================================ */

/* Price Flash (Green for increase, Red for decrease) */
@keyframes flash-green {
  0% { background-color: transparent; }
  50% { background-color: rgba(16, 185, 129, 0.2); }
  100% { background-color: transparent; }
}

@keyframes flash-red {
  0% { background-color: transparent; }
  50% { background-color: rgba(239, 68, 68, 0.2); }
  100% { background-color: transparent; }
}

.price-increase {
  animation: flash-green 0.6s ease-out;
}

.price-decrease {
  animation: flash-red 0.6s ease-out;
}

/* Number Count Up Animation */
@keyframes count-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-count {
  animation: count-up 0.4s ease-out;
}

/* Percentage Change Indicator */
.percent-change {
  transition: all 0.3s ease;
}

.percent-change.positive {
  color: #00c853;
}

.percent-change.negative {
  color: #ef4444;
}

/* Arrow Indicators */
.trend-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.trend-arrow.up {
  animation: bounce-up 0.6s ease-out;
}

.trend-arrow.down {
  animation: bounce-down 0.6s ease-out;
}

@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ============================================================================
   4. LIST & TABLE ANIMATIONS
   ============================================================================ */

/* Table Row Hover */
table tbody tr,
.table-row {
  transition: all 0.2s ease;
}

table tbody tr:hover,
.table-row:hover {
  background-color: rgba(255, 102, 0, 0.05);
  transform: translateX(4px);
}

/* Staggered List Animation */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.4s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   5. MODAL & DROPDOWN ANIMATIONS
   ============================================================================ */

/* Modal Entrance */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal,
.dialog,
[role="dialog"] {
  animation: modal-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dropdown Menu Slide */
@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu,
.context-menu {
  animation: dropdown-enter 0.2s ease-out;
}

/* ============================================================================
   6. FORM INPUT ANIMATIONS
   ============================================================================ */

/* Input Focus Effect */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: all 0.2s ease;
  border: 1px solid var(--border-primary, #30363d);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent-primary, #ff6600);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
  transform: translateY(-1px);
}

/* Checkbox & Radio Animation */
input[type="checkbox"],
input[type="radio"] {
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  transform: scale(1.1);
}

/* Label Float Animation */
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  transform: translateY(-20px) scale(0.85);
  color: var(--accent-primary, #ff6600);
}

.floating-label label {
  transition: all 0.2s ease;
  transform-origin: left top;
}

/* ============================================================================
   7. LOADING & PROGRESS ANIMATIONS
   ============================================================================ */

/* Spinner Rotation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner,
.loading-spinner {
  animation: spin 0.8s linear infinite;
}

/* Progress Bar Fill */
@keyframes progress-fill {
  from { width: 0; }
}

.progress-bar {
  animation: progress-fill 1s ease-out;
}

/* Pulse Animation for Loading States */
@keyframes pulse-loading {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading-pulse {
  animation: pulse-loading 1.5s ease-in-out infinite;
}

/* Dots Loading Animation */
@keyframes dots-loading {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.loading-dots::after {
  content: '.';
  animation: dots-loading 1.5s steps(1) infinite;
}

/* ============================================================================
   8. CHART & VISUALIZATION ANIMATIONS
   ============================================================================ */

/* Chart Bars Grow Animation */
@keyframes bar-grow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
  }
}

.chart-bar {
  animation: bar-grow 0.6s ease-out;
}

.chart-bar:nth-child(1) { animation-delay: 0.05s; }
.chart-bar:nth-child(2) { animation-delay: 0.1s; }
.chart-bar:nth-child(3) { animation-delay: 0.15s; }
.chart-bar:nth-child(4) { animation-delay: 0.2s; }
.chart-bar:nth-child(5) { animation-delay: 0.25s; }

/* Line Chart Draw Animation */
@keyframes line-draw {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.chart-line {
  stroke-dasharray: 1000;
  animation: line-draw 1.5s ease-out forwards;
}

/* ============================================================================
   9. BADGE & NOTIFICATION ANIMATIONS
   ============================================================================ */

/* Badge Pulse */
@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.badge.pulse,
.notification-badge {
  animation: badge-pulse 2s ease-in-out infinite;
}

/* Badge Pop In */
@keyframes badge-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.badge.new {
  animation: badge-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================================================
   10. PAGE TRANSITION ANIMATIONS
   ============================================================================ */

/* Page Fade In */
@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page-content {
  animation: page-fade-in 0.3s ease-out;
}

/* Slide In from Right */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slide-in-right 0.4s ease-out;
}

/* Slide In from Left */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slide-in-left 0.4s ease-out;
}

/* ============================================================================
   11. TOGGLE & SWITCH ANIMATIONS
   ============================================================================ */

/* Toggle Switch */
.toggle-switch {
  position: relative;
  transition: background-color 0.3s ease;
}

.toggle-switch::before {
  content: '';
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toggle-switch.on::before {
  transform: translateX(20px);
}

/* Tab Switch Animation */
.tab-indicator {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   12. SCROLL ANIMATIONS
   ============================================================================ */

/* Scroll Reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Sticky Header on Scroll */
.sticky-header {
  transition: all 0.3s ease;
}

.sticky-header.scrolled {
  box-shadow: 0 4px 12px rgba(20, 20, 19, 0.1);
  /* backdrop-filter removed */
  background-color: rgba(10, 14, 23, 0.95);
}

/* ============================================================================
   13. UTILITY CLASSES
   ============================================================================ */

/* Quick animation utilities */
.animate-bounce {
  animation: bounce 1s infinite;
}

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

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   14. HOVER EFFECTS FOR SPECIFIC COMPONENTS
   ============================================================================ */

/* Nav Menu Items */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-primary, #ff6600);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::before,
.nav-link.active::before {
  width: 100%;
}

/* Portfolio Cards */
.portfolio-card .portfolio-value {
  transition: all 0.3s ease;
}

.portfolio-card:hover .portfolio-value {
  transform: scale(1.05);
  color: var(--accent-primary, #ff6600);
}

/* Action Buttons with Icons */
.action-btn {
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.action-btn:active::before {
  width: 300px;
  height: 300px;
}
/* ============================================================================
   TOAST NOTIFICATION SYSTEM
   Elegant, non-intrusive notifications
   ============================================================================ */

/* Toast Container */
#toast-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}

/* Position Variants */
#toast-container.top-right {
  top: 24px;
  right: 24px;
}

#toast-container.top-left {
  top: 24px;
  left: 24px;
}

#toast-container.top-center {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

#toast-container.bottom-right {
  bottom: 24px;
  right: 24px;
}

#toast-container.bottom-left {
  bottom: 24px;
  left: 24px;
}

#toast-container.bottom-center {
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

/* Toast Base */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 500px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--bg-elevated, #1f2937);
  border: 1px solid var(--border-primary, #30363d);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
}

.toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* Toast Variants */
.toast.success {
  border-left: 4px solid #00c853;
  background: linear-gradient(
    to right,
    rgba(16, 185, 129, 0.1) 0%,
    var(--bg-elevated, #1f2937) 50%
  );
}

.toast.error {
  border-left: 4px solid #ef4444;
  background: linear-gradient(
    to right,
    rgba(239, 68, 68, 0.1) 0%,
    var(--bg-elevated, #1f2937) 50%
  );
}

.toast.warning {
  border-left: 4px solid #d97757;
  background: linear-gradient(
    to right,
    rgba(245, 158, 11, 0.1) 0%,
    var(--bg-elevated, #1f2937) 50%
  );
}

.toast.info {
  border-left: 4px solid #d97757;
  background: linear-gradient(
    to right,
    rgba(59, 130, 246, 0.1) 0%,
    var(--bg-elevated, #1f2937) 50%
  );
}

.toast.loading {
  border-left: 4px solid #8b909b;
  background: linear-gradient(
    to right,
    rgba(107, 114, 128, 0.1) 0%,
    var(--bg-elevated, #1f2937) 50%
  );
}

/* Toast Icon */
.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast.success .toast-icon {
  color: #00c853;
}

.toast.error .toast-icon {
  color: #ef4444;
}

.toast.warning .toast-icon {
  color: #d97757;
}

.toast.info .toast-icon {
  color: #d97757;
}

.toast.loading .toast-icon {
  color: #8b909b;
}

/* Toast Content */
.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  margin-bottom: 2px;
}

.toast-message {
  font-size: 13px;
  color: var(--text-secondary, #8b949e);
  line-height: 1.4;
}

/* Toast Action Button */
.toast-action {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-primary, #ff6600);
  background: transparent;
  border: 1px solid var(--accent-primary, #ff6600);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toast-action:hover {
  background: rgba(255, 102, 0, 0.1);
}

/* Toast Close Button */
.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #6e7681);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.toast-close:hover {
  color: var(--text-primary, #e6edf3);
  background: rgba(255, 255, 255, 0.1);
}

/* Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: left;
  animation: toast-progress linear;
}

.toast.success .toast-progress {
  color: #00c853;
}

.toast.error .toast-progress {
  color: #ef4444;
}

.toast.warning .toast-progress {
  color: #d97757;
}

.toast.info .toast-progress {
  color: #d97757;
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Loading Spinner */
.toast-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Animations */
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
}

@keyframes toast-enter-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-exit-left {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-100%) scale(0.95);
  }
}

@keyframes toast-enter-center {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes toast-exit-center {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.95);
  }
}

/* Apply animations based on position */
#toast-container.top-right .toast,
#toast-container.bottom-right .toast {
  animation: toast-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#toast-container.top-right .toast.toast-exiting,
#toast-container.bottom-right .toast.toast-exiting {
  animation: toast-exit 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#toast-container.top-left .toast,
#toast-container.bottom-left .toast {
  animation: toast-enter-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#toast-container.top-left .toast.toast-exiting,
#toast-container.bottom-left .toast.toast-exiting {
  animation: toast-exit-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#toast-container.top-center .toast,
#toast-container.bottom-center .toast {
  animation: toast-enter-center 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#toast-container.top-center .toast.toast-exiting,
#toast-container.bottom-center .toast.toast-exiting {
  animation: toast-exit-center 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  #toast-container {
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
  }

  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* Dark Mode */
[data-theme="light"] .toast {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .toast-title {
  color: #111827;
}

[data-theme="light"] .toast-message {
  color: #8b909b;
}

[data-theme="light"] .toast-close {
  color: #9ca3af;
}

[data-theme="light"] .toast-close:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.05);
}

/* Accessibility */
.toast[role="alert"] {
  /* Screen readers will announce this */
}

.toast:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
/* ============================================================================
   EMPTY STATES
   Beautiful, helpful empty state components
   ============================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  min-height: 400px;
}

.empty-state-compact {
  min-height: 300px;
  padding: 40px 24px;
}

.empty-state-small {
  min-height: 200px;
  padding: 32px 16px;
}

/* Empty State Icon */
.empty-state-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(255, 102, 0, 0.05) 100%);
  border-radius: 50%;
  position: relative;
  animation: float 3s ease-in-out infinite;
}

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

.empty-state-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 102, 0, 0.2);
  animation: rotate 20s linear infinite;
}

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

.empty-state-icon svg,
.empty-state-icon img {
  width: 64px;
  height: 64px;
  color: var(--accent-primary, #ff6600);
  opacity: 0.8;
}

.empty-state-compact .empty-state-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.empty-state-compact .empty-state-icon svg,
.empty-state-compact .empty-state-icon img {
  width: 48px;
  height: 48px;
}

.empty-state-small .empty-state-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
}

.empty-state-small .empty-state-icon svg,
.empty-state-small .empty-state-icon img {
  width: 32px;
  height: 32px;
}

/* Empty State Content */
.empty-state-content {
  max-width: 480px;
}

.empty-state-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  margin-bottom: 12px;
  line-height: 1.3;
}

.empty-state-compact .empty-state-title {
  font-size: 20px;
  margin-bottom: 8px;
}

.empty-state-small .empty-state-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.empty-state-description {
  font-size: 16px;
  color: var(--text-secondary, #8b949e);
  margin-bottom: 24px;
  line-height: 1.6;
}

.empty-state-compact .empty-state-description {
  font-size: 14px;
  margin-bottom: 20px;
}

.empty-state-small .empty-state-description {
  font-size: 13px;
  margin-bottom: 16px;
}

/* Empty State Actions */
.empty-state-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.empty-state-action-primary,
.empty-state-action-secondary {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.empty-state-action-primary {
  background: var(--accent-primary, #ff6600);
  color: white;
  border: none;
  cursor: pointer;
}

.empty-state-action-primary:hover {
  background: var(--accent-hover, #ff8533);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(255, 102, 0, 0.3);
}

.empty-state-action-secondary {
  background: transparent;
  color: var(--text-primary, #e6edf3);
  border: 1px solid var(--border-primary, #30363d);
  cursor: pointer;
}

.empty-state-action-secondary:hover {
  background: var(--bg-elevated, #1a222d);
  border-color: var(--accent-primary, #ff6600);
}

/* Empty State Variants */

/* No Data Variant */
.empty-state-no-data .empty-state-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
}

.empty-state-no-data .empty-state-icon::before {
  border-color: rgba(59, 130, 246, 0.2);
}

.empty-state-no-data .empty-state-icon svg {
  color: #d97757;
}

/* Error Variant */
.empty-state-error .empty-state-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.empty-state-error .empty-state-icon::before {
  border-color: rgba(239, 68, 68, 0.2);
}

.empty-state-error .empty-state-icon svg {
  color: #ef4444;
}

/* Success Variant */
.empty-state-success .empty-state-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.empty-state-success .empty-state-icon::before {
  border-color: rgba(16, 185, 129, 0.2);
}

.empty-state-success .empty-state-icon svg {
  color: #00c853;
}

/* Search Results Variant */
.empty-state-search .empty-state-icon {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.empty-state-search .empty-state-icon::before {
  border-color: rgba(168, 85, 247, 0.2);
}

.empty-state-search .empty-state-icon svg {
  color: #c4875e;
}

/* Helper Text & Links */
.empty-state-help {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border-primary, #30363d);
  max-width: 640px;
  width: 100%;
}

.empty-state-help-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  margin-bottom: 12px;
}

.empty-state-help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.empty-state-help-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary, #8b949e);
}

.empty-state-help-list li::before {
  content: '→';
  color: var(--accent-primary, #ff6600);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.empty-state-help-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 16px;
}

.empty-state-help-link {
  font-size: 13px;
  color: var(--accent-primary, #ff6600);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.empty-state-help-link:hover {
  text-decoration: underline;
  gap: 8px;
}

/* Illustration Background Pattern */
.empty-state-illustration {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 50%, currentColor 1px, transparent 1px),
                    radial-gradient(circle at 80% 80%, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--accent-primary, #ff6600);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .empty-state {
    padding: 40px 16px;
    min-height: 320px;
  }

  .empty-state-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
  }

  .empty-state-icon svg,
  .empty-state-icon img {
    width: 56px;
    height: 56px;
  }

  .empty-state-title {
    font-size: 20px;
  }

  .empty-state-description {
    font-size: 14px;
  }

  .empty-state-actions {
    flex-direction: column;
    width: 100%;
  }

  .empty-state-action-primary,
  .empty-state-action-secondary {
    width: 100%;
    justify-content: center;
  }

  .empty-state-help {
    margin-top: 24px;
    padding-top: 24px;
  }

  .empty-state-help-links {
    flex-direction: column;
    gap: 12px;
  }
}

/* Dark Mode Adjustments (already default) */

/* Light Mode */
[data-theme="light"] .empty-state-icon {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.08) 0%, rgba(255, 102, 0, 0.03) 100%);
}

[data-theme="light"] .empty-state-icon::before {
  border-color: rgba(255, 102, 0, 0.15);
}

[data-theme="light"] .empty-state-title {
  color: #111827;
}

[data-theme="light"] .empty-state-description {
  color: #8b909b;
}

[data-theme="light"] .empty-state-action-secondary {
  color: #111827;
  border-color: #e5e7eb;
  background: transparent;
}

[data-theme="light"] .empty-state-action-secondary:hover {
  background: #f3f4f6;
  border-color: #ff6600;
}

[data-theme="light"] .empty-state-help {
  border-top-color: #e5e7eb;
}

[data-theme="light"] .empty-state-help-title {
  color: #111827;
}

[data-theme="light"] .empty-state-help-list li {
  color: #8b909b;
}

/* Accessibility */
.empty-state[role="status"],
.empty-state[role="alert"] {
  /* Screen readers will announce this */
}

/* Animation Classes */
.empty-state.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   IX-EMPTY-STATE — shared Bloomberg-style block
   Used by: market.ejs, risk.ejs, tax-dashboard.ejs (and any future page).
   ix- prefix avoids collision with the legacy `.empty-state` patterns above.
   ============================================================================ */
.ix-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 56px 32px; margin: 24px auto; max-width: 480px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-family: 'Inter', 'Poppins', -apple-system, sans-serif;
}
.ix-empty-icon {
  font-size: 38px !important; color: #d97757;
  background: rgba(217, 119, 87, 0.08);
  width: 64px; height: 64px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ix-empty-title {
  font-family: 'Source Serif Pro','Source Serif 4', Georgia, serif;
  font-size: 19px; font-weight: 600; color: #ecead2;
  margin: 0 0 6px; letter-spacing: -0.012em;
}
.ix-empty-body {
  font-size: 13px; color: #b8b2a4;
  margin: 0 0 18px; line-height: 1.55; max-width: 360px;
}
.ix-empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: #d97757; color: #0a0a09;
  border: 1px solid #d97757; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.ix-empty-cta:hover {
  background: #f0875e; border-color: #f0875e; transform: translateY(-1px);
}
.ix-empty-cta .material-symbols-outlined { font-size: 16px; }
.ix-empty-cta-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12); color: #b8b2a4;
}
.ix-empty-cta-ghost:hover {
  border-color: rgba(255,255,255,0.22); color: #ecead2; background: transparent;
}

/* === Inline error — for failed fetches === */
.ix-inline-error {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin: 16px 0;
  background: rgba(196, 98, 93, 0.06);
  border: 1px solid rgba(196, 98, 93, 0.25);
  border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #ecead2;
}
.ix-inline-error .material-symbols-outlined {
  color: #c4625d; font-size: 18px !important;
  flex-shrink: 0; margin-top: 1px;
}
.ix-inline-error-text { flex: 1; line-height: 1.55; }
.ix-inline-error-text strong { color: #c4625d; font-weight: 600; }
.ix-inline-error-retry {
  background: transparent;
  border: 1px solid rgba(196, 98, 93, 0.4); color: #c4625d;
  padding: 5px 12px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ix-inline-error-retry:hover {
  background: rgba(196, 98, 93, 0.12); color: #ecead2;
}
/**
 * Tufte-Inspired Finance Component Styles
 * Clean, data-dense, professional visualization
 * Based on Edward Tufte's principles + Wealthfront/Personal Capital aesthetics
 */

/* ============================================
   GLOBAL TUFTE OVERRIDES
   ============================================ */

/* Tabular numbers for financial data alignment */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Muted semantic colors for gains/losses */
.positive { color: #166534 !important; }
.negative { color: #991b1b !important; }
[data-theme="dark"] .positive { color: #00c853 !important; }
[data-theme="dark"] .negative { color: #ef4444 !important; }

.bg-positive { background-color: #f0fdf4 !important; }
.bg-negative { background-color: #fef2f2 !important; }
[data-theme="dark"] .bg-positive { background-color: rgba(74, 222, 128, 0.1) !important; }
[data-theme="dark"] .bg-negative { background-color: rgba(248, 113, 113, 0.1) !important; }

/* ============================================
   STAT CARD COMPONENT
   ============================================ */

.tufte-stat-card {
  background: #faf9f5;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgba(20, 20, 19, 0.05);
  transition: border-color 0.15s ease;
}

[data-theme="dark"] .tufte-stat-card {
  background: #0f1419;
  border-color: #3a3735;
}

.tufte-stat-card:hover {
  border-color: #d1d5db;
}

[data-theme="dark"] .tufte-stat-card:hover {
  border-color: #484f58;
}

.tufte-stat-card .stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b6966;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

[data-theme="dark"] .tufte-stat-card .stat-label {
  color: #a09c97;
}

.tufte-stat-card .stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.tufte-stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1a1918;
  font-family: 'Poppins', 'SF Mono', Consolas, monospace;
  line-height: 1.2;
}

[data-theme="dark"] .tufte-stat-card .stat-value {
  color: #f9fafb;
}

.tufte-stat-card .stat-change {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Poppins', 'SF Mono', Consolas, monospace;
}

.tufte-stat-card .stat-change-label {
  font-size: 0.75rem;
  color: #a09c97;
}

.tufte-stat-card .stat-sparkline {
  margin-top: 12px;
}

.tufte-stat-card .stat-benchmark {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.75rem;
}

[data-theme="dark"] .tufte-stat-card .stat-benchmark {
  border-top-color: #3a3735;
}

.tufte-stat-card .benchmark-label {
  color: #6b6966;
}

[data-theme="dark"] .tufte-stat-card .benchmark-label {
  color: #a09c97;
}

.tufte-stat-card .benchmark-value {
  color: #3a3735;
  font-weight: 500;
}

[data-theme="dark"] .tufte-stat-card .benchmark-value {
  color: #d1d5db;
}

.tufte-stat-card .benchmark-diff {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.tufte-stat-card .benchmark-diff.positive {
  background: #dcfce7;
}

.tufte-stat-card .benchmark-diff.negative {
  background: #fee2e2;
}

[data-theme="dark"] .tufte-stat-card .benchmark-diff.positive {
  background: rgba(74, 222, 128, 0.2);
}

[data-theme="dark"] .tufte-stat-card .benchmark-diff.negative {
  background: rgba(248, 113, 113, 0.2);
}

/* ============================================
   HOLDINGS TABLE COMPONENT
   ============================================ */

.tufte-holdings-table {
  background: #faf9f5;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(20, 20, 19, 0.05);
}

[data-theme="dark"] .tufte-holdings-table {
  background: #0f1419;
  border-color: #3a3735;
}

.tufte-holdings-table .table-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-theme="dark"] .tufte-holdings-table .table-header {
  background: #151c25;
  border-bottom-color: #3a3735;
}

.tufte-holdings-table .table-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1918;
  margin: 0;
}

[data-theme="dark"] .tufte-holdings-table .table-title {
  color: #f9fafb;
}

.tufte-holdings-table .table-count {
  font-size: 0.75rem;
  color: #6b6966;
}

[data-theme="dark"] .tufte-holdings-table .table-count {
  color: #a09c97;
}

.tufte-holdings-table .table-container {
  overflow-x: auto;
}

.tufte-holdings-table table {
  width: 100%;
  border-collapse: collapse;
}

.tufte-holdings-table thead tr {
  border-bottom: 1px solid #e5e7eb;
}

[data-theme="dark"] .tufte-holdings-table thead tr {
  border-bottom-color: #3a3735;
}

.tufte-holdings-table th {
  padding: 10px 16px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b6966;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="dark"] .tufte-holdings-table th {
  color: #a09c97;
}

.tufte-holdings-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

[data-theme="dark"] .tufte-holdings-table tbody tr {
  border-bottom-color: #2a2927;
}

.tufte-holdings-table .holding-row {
  cursor: pointer;
}

.tufte-holdings-table .holding-row:hover {
  background: #f9fafb;
}

[data-theme="dark"] .tufte-holdings-table .holding-row:hover {
  background: #151c25;
}

.tufte-holdings-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #3a3735;
}

[data-theme="dark"] .tufte-holdings-table td {
  color: #d1d5db;
}

.tufte-holdings-table .symbol-cell .symbol {
  font-weight: 600;
  color: #1a1918;
  display: block;
}

[data-theme="dark"] .tufte-holdings-table .symbol-cell .symbol {
  color: #f9fafb;
}

.tufte-holdings-table .symbol-cell .company-name {
  font-size: 0.75rem;
  color: #6b6966;
  display: block;
  margin-top: 2px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .tufte-holdings-table .symbol-cell .company-name {
  color: #a09c97;
}

.tufte-holdings-table .sparkline-cell {
  padding: 8px 12px;
}

.tufte-holdings-table .sparkline-cell .no-data {
  color: #d1d5db;
  font-size: 0.75rem;
}

[data-theme="dark"] .tufte-holdings-table .sparkline-cell .no-data {
  color: #8f8a85;
}

.tufte-holdings-table .return-cell {
  font-weight: 500;
  font-family: 'Poppins', 'SF Mono', Consolas, monospace;
}

.tufte-holdings-table .totals-row {
  background: #f9fafb;
  border-top: 2px solid #e5e7eb;
}

[data-theme="dark"] .tufte-holdings-table .totals-row {
  background: #151c25;
  border-top-color: #3a3735;
}

.tufte-holdings-table .totals-row td {
  color: #1a1918;
}

[data-theme="dark"] .tufte-holdings-table .totals-row td {
  color: #f9fafb;
}

/* ============================================
   ALLOCATION BAR COMPONENT
   ============================================ */

.tufte-allocation-bar {
  background: #faf9f5;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px 0 rgba(20, 20, 19, 0.05);
}

[data-theme="dark"] .tufte-allocation-bar {
  background: #0f1419;
  border-color: #3a3735;
}

.tufte-allocation-bar .allocation-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1918;
  margin: 0 0 16px 0;
}

[data-theme="dark"] .tufte-allocation-bar .allocation-title {
  color: #f9fafb;
}

.tufte-allocation-bar .allocation-bar-container {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
}

[data-theme="dark"] .tufte-allocation-bar .allocation-bar-container {
  background: #2a2927;
}

.tufte-allocation-bar .allocation-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  min-width: 2px;
}

.tufte-allocation-bar .allocation-segment:hover {
  opacity: 0.85;
}

.tufte-allocation-bar .segment-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #faf9f5;
  text-shadow: 0 1px 2px rgba(20, 20, 19, 0.3);
}

.tufte-allocation-bar .allocation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 16px;
}

.tufte-allocation-bar .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tufte-allocation-bar .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.tufte-allocation-bar .legend-name {
  font-size: 0.8125rem;
  color: #3a3735;
}

[data-theme="dark"] .tufte-allocation-bar .legend-name {
  color: #d1d5db;
}

.tufte-allocation-bar .legend-value {
  font-size: 0.8125rem;
  color: #6b6966;
  font-family: 'Poppins', 'SF Mono', Consolas, monospace;
}

[data-theme="dark"] .tufte-allocation-bar .legend-value {
  color: #a09c97;
}

/* ============================================
   BENCHMARK COMPARISON COMPONENT
   ============================================ */

.tufte-benchmark-comparison {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #faf9f5;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 20px;
  box-shadow: 0 1px 2px 0 rgba(20, 20, 19, 0.05);
  font-size: 0.875rem;
}

[data-theme="dark"] .tufte-benchmark-comparison {
  background: #0f1419;
  border-color: #3a3735;
}

.tufte-benchmark-comparison .benchmark-period {
  color: #6b6966;
}

[data-theme="dark"] .tufte-benchmark-comparison .benchmark-period {
  color: #a09c97;
}

.tufte-benchmark-comparison .portfolio-return {
  font-weight: 600;
  font-family: 'Poppins', 'SF Mono', Consolas, monospace;
}

.tufte-benchmark-comparison .vs-text {
  color: #a09c97;
}

.tufte-benchmark-comparison .benchmark-return {
  color: #3a3735;
}

[data-theme="dark"] .tufte-benchmark-comparison .benchmark-return {
  color: #d1d5db;
}

.tufte-benchmark-comparison .performance-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.tufte-benchmark-comparison .performance-badge.outperforming {
  background: #dcfce7;
  color: #166534;
}

.tufte-benchmark-comparison .performance-badge.underperforming {
  background: #fee2e2;
  color: #991b1b;
}

[data-theme="dark"] .tufte-benchmark-comparison .performance-badge.outperforming {
  background: rgba(74, 222, 128, 0.2);
  color: #00c853;
}

[data-theme="dark"] .tufte-benchmark-comparison .performance-badge.underperforming {
  background: rgba(248, 113, 113, 0.2);
  color: #ef4444;
}

/* ============================================
   SPARKLINE SVG STYLES
   ============================================ */

.sparkline-svg {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================
   GLOBAL SHADOW OVERRIDES
   ============================================ */

/* Reduce heavy shadows globally */
.shadow-2xl,
.shadow-xl,
.shadow-lg {
  box-shadow: 0 1px 2px 0 rgba(20, 20, 19, 0.05) !important;
}

/* Remove glow effects */
.shadow-glow-blue,
.shadow-glow-purple,
.shadow-glow-emerald,
.glow {
  box-shadow: 0 1px 2px 0 rgba(20, 20, 19, 0.05) !important;
}

/* ============================================
   GRADIENT BACKGROUND OVERRIDES
   ============================================ */

/* Convert gradient cards to solid backgrounds */
.glass-card,
.stat-card:not(.tufte-stat-card) {
  background: #0f1419 !important;
  border: 1px solid #3a3735 !important;
}

[data-theme="light"] .glass-card,
[data-theme="light"] .stat-card:not(.tufte-stat-card) {
  background: #faf9f5 !important;
  border: 1px solid #e5e7eb !important;
}

/* ============================================
   COLOR MUTING OVERRIDES
   ============================================ */

/* Mute bright greens */
.text-green-500,
.text-green-400,
.text-green-600,
.text-emerald-500,
.text-emerald-400,
.text-emerald-600 {
  color: #166534 !important;
}

[data-theme="dark"] .text-green-500,
[data-theme="dark"] .text-green-400,
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-emerald-500,
[data-theme="dark"] .text-emerald-400,
[data-theme="dark"] .text-emerald-600 {
  color: #00c853 !important;
}

/* Mute bright reds */
.text-red-500,
.text-red-400,
.text-red-600 {
  color: #991b1b !important;
}

[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-400,
[data-theme="dark"] .text-red-600 {
  color: #ef4444 !important;
}

/* ============================================
   ROUNDED CORNER STANDARDIZATION
   ============================================ */

.rounded-2xl,
.rounded-3xl {
  border-radius: 8px !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .tufte-stat-card {
    padding: 16px;
  }

  .tufte-stat-card .stat-value {
    font-size: 1.5rem;
  }

  .tufte-holdings-table th,
  .tufte-holdings-table td {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }

  .tufte-allocation-bar .allocation-legend {
    gap: 8px 16px;
  }

  .tufte-benchmark-comparison {
    padding: 10px 16px;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .tufte-stat-card .stat-value-row {
    flex-direction: column;
    gap: 4px;
  }

  .tufte-holdings-table .sparkline-cell {
    display: none;
  }
}
/**
 * INDYXQUANT Pro - Mobile Responsive Styles
 * Handles responsive layout, collapsible sidebar, and mobile navigation
 */

/* ============================================
   BASE RESPONSIVE VARIABLES
   ============================================ */
:root {
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 64px;
  --header-height: 64px;
  --mobile-nav-height: 72px;
}

/* ============================================
   SIDEBAR - RESPONSIVE BEHAVIOR
   ============================================ */

/* Desktop sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(to bottom, #141413, #1a1918);
  border-right: 1px solid #2a2927;
  z-index: 40;
  transition: transform 0.3s ease, width 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .sidebar-item-text,
.sidebar-collapsed .sidebar-section-title,
.sidebar-collapsed .sidebar-logo-text {
  display: none;
}

.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding: 12px;
}

/* Main content area */
.main-content {
  margin-left: var(--sidebar-width);
  transition: margin-left 0.3s ease;
}

.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Sidebar toggle button */
.sidebar-toggle {
  position: fixed;
  left: var(--sidebar-width);
  top: 16px;
  width: 24px;
  height: 24px;
  background: #1a1918;
  border: 1px solid #2a2927;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
  transition: left 0.3s ease, transform 0.3s ease;
  color: #a09c97;
}

.sidebar-toggle:hover {
  background: #2a2927;
  color: white;
}

.sidebar-collapsed .sidebar-toggle {
  left: var(--sidebar-collapsed-width);
}

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

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.5);
  z-index: 35;
}

.mobile-overlay.active {
  display: block;
}

/* Mobile bottom nav */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: #1a1918;
  border-top: 1px solid #2a2927;
  z-index: 45;
}

.mobile-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  padding: 0 8px;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: #a09c97;
  text-decoration: none;
  font-size: 10px;
  border-radius: 8px;
  transition: all 0.2s;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: #d97757;
  background: rgba(59, 130, 246, 0.1);
}

.mobile-nav-item svg {
  width: 20px;
  height: 20px;
}

/* Mobile hamburger menu */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #a09c97;
  cursor: pointer;
}

/* Mobile header */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: #141413;
  border-bottom: 1px solid #2a2927;
  z-index: 40;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
}

.mobile-header-logo {
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.mobile-header-logo span {
  color: #d97757;
}

/* ============================================
   TABLET BREAKPOINT (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .sidebar {
    width: var(--sidebar-collapsed-width);
  }
  
  .sidebar .sidebar-item-text,
  .sidebar .sidebar-section-title,
  .sidebar .sidebar-logo-text {
    display: none;
  }
  
  .sidebar .sidebar-item {
    justify-content: center;
    padding: 12px;
  }
  
  .main-content {
    margin-left: var(--sidebar-collapsed-width);
  }
  
  .sidebar-toggle {
    display: none;
  }
  
  /* Cards in grid */
  .grid-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   MOBILE BREAKPOINT (< 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Hide desktop sidebar */
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }
  
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  
  .sidebar.mobile-open .sidebar-item-text,
  .sidebar.mobile-open .sidebar-section-title,
  .sidebar.mobile-open .sidebar-logo-text {
    display: block;
  }
  
  .sidebar.mobile-open .sidebar-item {
    justify-content: flex-start;
    padding: 10px 16px;
  }
  
  /* Mobile header hidden — topnav handles the header */
  .mobile-header {
    display: none !important;
  }

  .mobile-menu-btn {
    display: flex;
  }

  /* Adjust main content */
  .main-content {
    margin-left: 0;
    padding-top: var(--header-height);
    padding-bottom: var(--mobile-nav-height);
  }
  
  .main-content .p-8 {
    padding: 16px;
  }
  
  /* Stack grids */
  .grid-cols-5,
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .lg\:grid-cols-5,
  .lg\:grid-cols-4,
  .lg\:grid-cols-3,
  .lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  /* Cards */
  .card {
    border-radius: 12px;
  }
  
  /* Tables */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px;
  }
  
  /* Charts */
  .chart-container {
    height: 250px !important;
  }
  
  /* Buttons */
  .btn-primary,
  .btn-ghost {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  /* Forms */
  input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Modals */
  .modal {
    margin: 16px;
    max-height: calc(100vh - 32px);
  }
  
  /* Hide certain elements */
  .hide-mobile {
    display: none !important;
  }
  
  /* KPI cards */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .kpi-card {
    padding: 12px;
  }
  
  .kpi-card .text-2xl {
    font-size: 1.25rem;
  }
}

/* ============================================
   SMALL MOBILE (< 375px)
   ============================================ */
@media (max-width: 375px) {
  .mobile-nav-item {
    padding: 6px 8px;
    font-size: 9px;
  }
  
  .mobile-nav-item svg {
    width: 18px;
    height: 18px;
  }
  
  .main-content .p-8 {
    padding: 12px;
  }
  
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TOUCH IMPROVEMENTS
   ============================================ */
@media (hover: none) {
  /* Larger touch targets */
  .sidebar-item,
  .mobile-nav-item,
  button,
  a {
    min-height: 44px;
  }
  
  /* Remove hover effects on touch */
  .sidebar-item:hover {
    background: transparent;
  }
  
  .sidebar-item:active {
    background: rgba(59, 130, 246, 0.2);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .sidebar,
  .mobile-nav,
  .mobile-header,
  .sidebar-toggle {
    display: none !important;
  }
  
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .card {
    break-inside: avoid;
    border: 1px solid #e5e7eb;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-nav {
    height: 48px;
  }

  .mobile-nav-item {
    flex-direction: row;
    gap: 8px;
  }

  .mobile-nav-item svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   SMALL MOBILE OPTIMIZATIONS (< 480px)
   ============================================ */
@media (max-width: 480px) {
  /* Topnav optimizations */
  .topnav-search {
    padding: 6px 8px;
    min-width: 36px;
  }

  .topnav-actions {
    gap: 6px;
  }

  .topnav-notification {
    width: 36px;
    height: 36px;
  }

  /* Reduce logo text size */
  .topnav-logo-text {
    font-size: 16px;
  }

  /* Page content padding */
  .p-4, .p-6 {
    padding: 12px !important;
  }

  .lg\\:p-6, .lg\\:p-8 {
    padding: 12px !important;
  }

  /* Card spacing */
  .space-y-6 > * + * {
    margin-top: 16px;
  }

  /* Typography scaling */
  .text-2xl {
    font-size: 1.25rem !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
  }

  /* Button groups stack vertically */
  .flex.items-center.gap-3 {
    flex-wrap: wrap;
  }

  /* Timeframe buttons scroll horizontally */
  .chart-header .flex.items-center.gap-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .timeframe-btn {
    flex-shrink: 0;
    min-width: 40px;
  }
}

/* ============================================
   MOBILE BOTTOM NAV ACCOMMODATION
   ============================================ */
@media (max-width: 768px) {
  /* Reduce top padding — live-ticker is hidden on mobile, only topnav (56px) */
  #mainContentWrapper {
    padding-top: 60px !important;
  }

  /* Ensure main content has padding for bottom nav */
  main {
    padding-bottom: 88px !important;
  }

  /* Fixed elements should account for bottom nav */
  .fixed.bottom-4 {
    bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Toast container above bottom nav */
  #toastContainer {
    bottom: calc(88px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* PWA install prompt above bottom nav */
  #installPrompt {
    bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ============================================
   PREVENT HORIZONTAL SCROLLING
   ============================================ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Ensure tables don't cause horizontal scroll */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Ensure images scale */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Prevent fixed-width elements from overflowing */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

/* ============================================
   MOBILE DEVICE-ONLY UI
   Uses JS class .is-mobile-device (screen.width based)
   so desktop zoom does NOT trigger mobile UI.
   These rules MUST be last to override all other files.
   ============================================ */

/* Show bottom tab bar only on actual mobile devices */
html.is-mobile-device .mobile-nav {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height, 72px);
  background: rgba(10, 14, 23, 0.96);
  /* -webkit-backdrop-filter removed */
  /* backdrop-filter removed */
  /* -webkit-backdrop-filter removed */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1010;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Show more menu (off-screen, slides up via .open class) */
html.is-mobile-device .mobile-more-menu {
  display: block !important;
}

/* Reduce top padding on mobile (live-ticker hidden, only topnav 56px) */
html.is-mobile-device #mainContentWrapper {
  padding-top: 60px !important;
  padding-bottom: calc(var(--mobile-nav-height, 72px) + 16px);
}

/* Hide topnav desktop menu items on mobile devices */
html.is-mobile-device .ix-nav-menu {
  display: none !important;
}

/* Show hamburger on mobile devices */
html.is-mobile-device .ix-mobile-btn {
  display: flex !important;
}

/* Topnav overflow fix on mobile */
html.is-mobile-device .ix-nav {
  overflow: hidden;
}

html.is-mobile-device .ix-nav-inner {
  overflow: hidden;
}

/* Hide non-essential topnav items on small mobile */
@media (max-width: 480px) {
  html.is-mobile-device .ix-nav .ix-search-btn,
  html.is-mobile-device .ix-nav [onclick*="commandPalette"] {
    display: none !important;
  }
}
/* ============================================================================
   MOBILE RESPONSIVE DESIGN
   Adaptive layouts for tablets and mobile devices
   ============================================================================ */

/* ============================================================================
   1. RESPONSIVE DASHBOARD GRID
   ============================================================================ */

/* Desktop: 4-column grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

/* Tablet: 2-column grid */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile: Single column */
@media (max-width: 640px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ============================================================================
   2. RESPONSIVE KPI CARDS
   ============================================================================ */

.kpi-card {
  background: var(--bg-secondary, #1a1918);
  border: 1px solid var(--border-primary, #2a2927);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.kpi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kpi-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #8a8580);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217,119,87,0.12);
  border-radius: 8px;
  color: var(--accent-primary, #d97757);
}

.kpi-card-value {
  font-size: 32px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: var(--text-primary, #e8e5de);
  line-height: 1.2;
  margin-bottom: 8px;
}

.kpi-card-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.kpi-card-change.positive {
  color: #00c853;
}

.kpi-card-change.negative {
  color: #ef4444;
}

/* Mobile KPI Optimization */
@media (max-width: 640px) {
  .kpi-card {
    padding: 16px;
  }

  .kpi-card-value {
    font-size: 24px;
  }

  .kpi-card-icon {
    width: 28px;
    height: 28px;
  }

  /* Horizontal compact layout for mobile */
  .kpi-card-compact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
  }

  .kpi-card-compact .kpi-card-icon {
    flex-shrink: 0;
  }

  .kpi-card-compact .kpi-card-content {
    flex: 1;
    min-width: 0;
  }

  .kpi-card-compact .kpi-card-header {
    margin-bottom: 4px;
  }

  .kpi-card-compact .kpi-card-value {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .kpi-card-compact .kpi-card-change {
    font-size: 12px;
  }
}

/* ============================================================================
   3. RESPONSIVE CHARTS
   ============================================================================ */

.chart-container {
  background: var(--bg-secondary, #1a1918);
  border: 1px solid var(--border-primary, #2a2927);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e8e5de);
}

.chart-actions {
  display: flex;
  gap: 8px;
}

/* Mobile Chart Adjustments */
@media (max-width: 768px) {
  .chart-container {
    padding: 16px;
    margin-bottom: 16px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .chart-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .chart-actions::-webkit-scrollbar {
    height: 4px;
  }

  .chart-actions::-webkit-scrollbar-thumb {
    background: var(--border-primary, #2a2927);
    border-radius: 2px;
  }
}

@media (max-width: 640px) {
  .chart-title {
    font-size: 16px;
  }

  /* Responsive charts - fit container without forced scroll */
  .chart-wrapper {
    position: relative;
    width: 100%;
  }

  .chart-wrapper canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 250px;
  }

  /* Only force min-width for complex charts that need it */
  .chart-wrapper.scrollable {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }

  .chart-wrapper.scrollable canvas {
    min-width: 400px;
  }
}

/* Extra small screens (375px and below) */
@media (max-width: 375px) {
  .chart-container {
    padding: 12px;
    margin-bottom: 12px;
  }

  .chart-title {
    font-size: 14px;
  }

  .chart-wrapper canvas {
    max-height: 200px;
  }
}

/* ============================================================================
   4. RESPONSIVE TABLES
   ============================================================================ */

.responsive-table-wrapper {
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
}

.responsive-table {
  width: 100%;
  min-width: 100%;
}

@media (max-width: 768px) {
  .responsive-table {
    font-size: 14px;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 12px 8px;
  }

  /* Hide less important columns on mobile */
  .responsive-table .hide-mobile {
    display: none;
  }
}

/* Card-style table for mobile */
@media (max-width: 640px) {
  .table-as-cards {
    display: block;
  }

  .table-as-cards thead {
    display: none;
  }

  .table-as-cards tbody {
    display: block;
  }

  .table-as-cards tr {
    display: block;
    background: var(--bg-secondary, #1a1918);
    border: 1px solid var(--border-primary, #2a2927);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .table-as-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-secondary, #2a2927);
  }

  .table-as-cards td:last-child {
    border-bottom: none;
  }

  .table-as-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary, #8a8580);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

/* ============================================================================
   5. RESPONSIVE NAVIGATION
   ============================================================================ */

/* Hide desktop nav on mobile */
@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }
}

@media (min-width: 769px) {
  .desktop-nav {
    display: block;
  }
}

/* Mobile nav visibility controlled by .is-mobile-device class (JS device detection) */

/* ============================================================================
   6. RESPONSIVE SIDEBAR
   ============================================================================ */

.sidebar {
  width: 280px;
  transition: transform 0.3s ease;
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    background: var(--bg-secondary, #1a1918);
    border-right: 1px solid var(--border-primary, #2a2927);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 19, 0.5);
    z-index: 999;
  }

  .sidebar.open + .sidebar-overlay {
    display: block;
  }
}

/* ============================================================================
   7. RESPONSIVE MODALS
   ============================================================================ */

.modal {
  max-width: 600px;
  width: 90%;
  margin: 20px auto;
}

@media (max-width: 640px) {
  .modal {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
  }

  .modal-content {
    padding: 20px 16px;
  }
}

/* ============================================================================
   8. RESPONSIVE FORMS
   ============================================================================ */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-group label {
    font-size: 14px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions button {
    width: 100%;
  }
}

/* ============================================================================
   9. RESPONSIVE SPACING
   ============================================================================ */

/* Reduce spacing on mobile */
@media (max-width: 640px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section-padding {
    padding: 24px 0;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  /* Reduce card padding */
  .card {
    padding: 16px;
  }
}

/* ============================================================================
   10. RESPONSIVE BUTTONS
   ============================================================================ */

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .button-group {
    flex-direction: column;
    gap: 8px;
  }

  .button-group button,
  .button-group a {
    width: 100%;
    justify-content: center;
  }

  /* Stack button text on very small screens */
  .btn-with-icon {
    flex-direction: column;
    gap: 4px;
    padding: 12px;
  }
}

/* ============================================================================
   11. RESPONSIVE HEADER
   ============================================================================ */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page-header-actions {
    width: 100%;
  }
}

/* ============================================================================
   12. RESPONSIVE FILTERS
   ============================================================================ */

.filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .filters {
    flex-direction: column;
    gap: 8px;
  }

  .filter-item {
    width: 100%;
  }

  .filter-item select,
  .filter-item input {
    width: 100%;
  }
}

/* ============================================================================
   13. RESPONSIVE TABS
   ============================================================================ */

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 640px) {
  .tabs {
    margin: 0 -16px;
    padding: 0 16px;
  }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================================================
   14. RESPONSIVE PORTFOLIO CARDS
   ============================================================================ */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .portfolio-card {
    padding: 16px;
  }
}

/* ============================================================================
   15. TOUCH-FRIENDLY ELEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Increase tap targets for mobile */
  button,
  a,
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }

  /* Add more padding to interactive elements */
  .interactive-element {
    padding: 12px;
  }

  /* Larger checkboxes and radio buttons */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================================
   16. RESPONSIVE UTILITIES
   ============================================================================ */

/* Show/Hide utilities */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-inline {
    display: inline !important;
  }
}

.hide-tablet {
  display: block;
}

.show-tablet {
  display: none;
}

@media (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }

  .show-tablet {
    display: block !important;
  }
}

/* ============================================================================
   17. LANDSCAPE MOBILE OPTIMIZATION
   ============================================================================ */

@media (max-width: 896px) and (orientation: landscape) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal {
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Reduce header padding in landscape */
  .page-header {
    margin-bottom: 16px;
  }
}

/* ============================================================================
   18. SAFE AREA SUPPORT (iOS Notch)
   ============================================================================ */

@supports (padding: max(0px)) {
  .container,
  .page-content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .mobile-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ============================================================================
   19. PRINT STYLES
   ============================================================================ */

@media print {
  .mobile-nav,
  .sidebar,
  .command-palette,
  .toast-container,
  button,
  .hide-print {
    display: none !important;
  }

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

  body {
    background: white;
    color: black;
  }
}

/* ============================================================================
   20. ENHANCED MOBILE FORM INPUTS
   ============================================================================ */

@media (max-width: 640px) {
  /* Prevent iOS zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Better date/time inputs on mobile */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 16px;
  }

  /* Full-width buttons on mobile */
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
  }

  /* Stack button groups vertically */
  .btn-group-mobile {
    flex-direction: column;
    gap: 8px;
  }

  .btn-group-mobile > button,
  .btn-group-mobile > a {
    width: 100%;
  }

  /* Better select dropdown */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
  }

  /* Form label spacing */
  label {
    margin-bottom: 6px;
    font-size: 14px;
  }

  /* Form row spacing */
  .form-row {
    margin-bottom: 16px;
  }
}

/* ============================================================================
   21. MOBILE MODALS & SHEETS
   ============================================================================ */

@media (max-width: 640px) {
  /* Full-screen modals on mobile */
  .modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .modal-header {
    padding: 16px;
    border-bottom: 1px solid rgba(30,30,30,0.5);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
  }

  .modal-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    padding: 16px;
    border-top: 1px solid rgba(30,30,30,0.5);
    position: sticky;
    bottom: 0;
    background: inherit;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Drag handle for bottom sheets */
  .modal-drag-handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 0 auto 12px;
  }
}

/* ============================================================================
   22. MOBILE NAVIGATION IMPROVEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Hide desktop sidebar completely */
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 1000;
    transition: left 0.3s ease;
    background: var(--bg-primary, #141413);
    border-right: 1px solid rgba(30,30,30,0.5);
  }

  .sidebar.open {
    left: 0;
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 20, 19, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Main content takes full width */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: 80px; /* Space for bottom nav */
  }

  /* Mobile header — hidden (topnav handles the header) */
  .mobile-header {
    display: none !important;
  }

  .mobile-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #e8e5de);
  }
}

/* ============================================================================
   23. MOBILE TOUCH IMPROVEMENTS
   ============================================================================ */

@media (max-width: 768px) {
  /* Larger tap targets */
  button,
  a,
  .clickable,
  .tap-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better spacing for touch */
  .touch-list > * {
    padding: 12px 16px;
    margin-bottom: 2px;
  }

  /* Active state feedback */
  .touch-active:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  /* Disable hover effects on touch */
  @media (hover: none) {
    button:hover,
    a:hover,
    .clickable:hover {
      transform: none;
      box-shadow: none;
    }
  }
}

/* ============================================================================
   24. MOBILE TYPOGRAPHY
   ============================================================================ */

@media (max-width: 640px) {
  h1, .h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  h2, .h2 {
    font-size: 20px;
    line-height: 1.35;
  }

  h3, .h3 {
    font-size: 18px;
    line-height: 1.4;
  }

  h4, .h4 {
    font-size: 16px;
  }

  p, .body-text {
    font-size: 15px;
    line-height: 1.6;
  }

  .small-text {
    font-size: 13px;
  }

  .text-xs-mobile {
    font-size: 12px !important;
  }
}

@media (max-width: 375px) {
  h1, .h1 {
    font-size: 22px;
  }

  h2, .h2 {
    font-size: 18px;
  }

  h3, .h3 {
    font-size: 16px;
  }
}

/* ============================================================================
   25. MOBILE SPACING UTILITIES
   ============================================================================ */

@media (max-width: 640px) {
  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-2 { padding: 8px !important; }
  .p-mobile-3 { padding: 12px !important; }
  .p-mobile-4 { padding: 16px !important; }

  .px-mobile-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-mobile-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .px-mobile-4 { padding-left: 16px !important; padding-right: 16px !important; }

  .py-mobile-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
  .py-mobile-3 { padding-top: 12px !important; padding-bottom: 12px !important; }

  .m-mobile-0 { margin: 0 !important; }
  .mb-mobile-2 { margin-bottom: 8px !important; }
  .mb-mobile-3 { margin-bottom: 12px !important; }
  .mb-mobile-4 { margin-bottom: 16px !important; }

  .gap-mobile-2 { gap: 8px !important; }
  .gap-mobile-3 { gap: 12px !important; }
}

/* ============================================================================
   26. MOBILE DATA DISPLAY
   ============================================================================ */

@media (max-width: 640px) {
  /* Compact KPI display */
  .kpi-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary, #1a1918);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .kpi-compact-label {
    font-size: 13px;
    color: var(--text-secondary, #8a8580);
  }

  .kpi-compact-value {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
  }

  /* Horizontal scrolling for data rows */
  .scroll-x-mobile {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .scroll-x-mobile > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .scroll-x-mobile::-webkit-scrollbar {
    display: none;
  }

  /* Stock ticker mobile style */
  .stock-card-mobile {
    min-width: 140px;
    padding: 12px;
    background: var(--bg-secondary, #1a1918);
    border-radius: 8px;
    border: 1px solid var(--border-primary, #2a2927);
  }

  .stock-symbol-mobile {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .stock-price-mobile {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 4px;
  }

  .stock-change-mobile {
    font-size: 12px;
    font-weight: 500;
  }
}

/* ============================================================================
   27. PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* GPU acceleration for smooth scrolling */
  .smooth-scroll {
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Optimize images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Hide complex shadows on mobile */
  .shadow-complex {
    box-shadow: 0 2px 8px rgba(20, 20, 19, 0.2);
  }
}

/* ============================================================================
   17. PWA STANDALONE — notch / home-indicator safe areas
   The viewport meta now ships `viewport-fit=cover`, so content extends edge to
   edge (under the status bar / home indicator). When the app is launched from
   the home screen (display-mode: standalone) we pad the top/bottom by the
   device safe-area insets so the sticky topnav clears the notch and the bottom
   tab bar clears the home indicator. In a normal browser tab the OS chrome
   already reserves that space, so these rules are scoped to standalone only.
   ============================================================================ */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* If a sticky/fixed topnav exists, push it below the notch instead of body
     padding (body padding would scroll the bar away). */
  .topnav,
  header.topnav,
  .sticky-header {
    top: env(safe-area-inset-top, 0px);
  }

  /* Bottom tab bar sits above the home indicator. */
  .mobile-bottom-nav-container,
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
/* ============================================================================
   MOBILE EXPERIENCE ENHANCEMENTS
   Touch-friendly improvements, bottom sheets, and responsive polish
   ============================================================================ */

/* Touch-Friendly Tap Targets */
@media (max-width: 768px) {
  /* Minimum 44px touch targets */
  button,
  a,
  .btn,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 12px 16px;
  }

  /* Table responsiveness */
  .bloomberg-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bloomberg-table th,
  .bloomberg-table td {
    white-space: nowrap;
    padding: 12px 8px;
    font-size: 13px;
  }

  /* Card stacking on mobile */
  .grid {
    gap: 12px;
  }

  /* Reduce padding on mobile */
  .bloomberg-card {
    padding: 12px;
  }

  .bloomberg-card-header {
    padding: 12px;
  }

  .bloomberg-card-body {
    padding: 12px;
  }

  /* Full-width buttons on mobile */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn {
    width: 100%;
  }
}

/* ============================================================================
   BOTTOM SHEET MODAL
   Swipeable bottom sheet for mobile modals
   ============================================================================ */

.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bottom-sheet-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary, #1a1918);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 90vh;
  overflow: hidden;
  touch-action: none;
}

.bottom-sheet.visible {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--text-tertiary, #a09c97);
  border-radius: 2px;
  margin: 12px auto;
  cursor: grab;
}

.bottom-sheet-handle:active {
  cursor: grabbing;
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border-primary, #2a2927);
}

.bottom-sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e8e5de);
  margin: 0;
}

.bottom-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary, #2a2927);
  color: var(--text-secondary, #8a8580);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.bottom-sheet-close:hover {
  background: var(--bg-hover, #2a2927);
}

.bottom-sheet-content {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   SWIPE GESTURES
   Visual feedback for swipe actions
   ============================================================================ */

.swipeable {
  position: relative;
  touch-action: pan-y;
  overflow: hidden;
}

.swipeable-content {
  transition: transform 0.3s ease;
}

.swipeable-action {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.swipeable-action-left {
  left: 0;
  transform: translateX(-100%);
  background: var(--success, #00c853);
}

.swipeable-action-right {
  right: 0;
  transform: translateX(100%);
  background: var(--danger, #ef4444);
}

.swipeable-action-icon {
  color: white;
}

/* ============================================================================
   PULL TO REFRESH
   Visual indicator for pull-to-refresh
   ============================================================================ */

.pull-to-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary, #141413);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 9990;
}

.pull-to-refresh.pulling {
  transform: translateY(0);
}

.pull-to-refresh-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--accent-primary, #d97757);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pull-to-refresh-text {
  margin-left: 12px;
  font-size: 14px;
  color: var(--text-secondary, #8a8580);
}

/* ============================================================================
   MOBILE NAVIGATION
   Bottom navigation bar for mobile
   ============================================================================ */

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary, #1a1918);
  border-top: 1px solid var(--border-primary, #2a2927);
  display: none;
  padding: 8px 0;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  z-index: 9000;
}

/* Mobile nav visibility controlled by .is-mobile-device class in responsive.css */

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  color: var(--text-tertiary, #a09c97);
  text-decoration: none;
  transition: color 0.2s ease;
  min-width: 64px;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: var(--accent-primary, #d97757);
}

.mobile-nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.mobile-nav-label {
  font-size: 10px;
  font-weight: 500;
}

/* ============================================================================
   RESPONSIVE DATA TABLES
   Cards on mobile, tables on desktop
   ============================================================================ */

@media (max-width: 768px) {
  .responsive-table {
    border: none;
    background: transparent;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .responsive-table tr {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #1a1918);
    border: 1px solid var(--border-primary, #2a2927);
    border-radius: 8px;
    padding: 16px;
  }

  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-secondary, #2a2927);
  }

  .responsive-table td:last-child {
    border-bottom: none;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--text-secondary, #8a8580);
    font-size: 12px;
    text-transform: uppercase;
  }
}

/* ============================================================================
   FLOATING ACTION BUTTON
   FAB for primary actions on mobile
   ============================================================================ */

.fab {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-primary, #d97757);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(217,119,87,0.3);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(217,119,87,0.4);
}

.fab:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .fab {
    display: flex;
  }
}

.fab-icon {
  width: 24px;
  height: 24px;
}

/* FAB Menu */
.fab-menu {
  position: fixed;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 7999;
}

.fab-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  background: var(--bg-secondary, #1a1918);
  border: 1px solid var(--border-primary, #2a2927);
  border-radius: 24px;
  text-decoration: none;
  color: var(--text-primary, #e8e5de);
  box-shadow: 0 2px 8px rgba(20, 20, 19, 0.3);
  transition: background 0.2s ease;
}

.fab-menu-item:hover {
  background: var(--bg-tertiary, #2a2927);
}

.fab-menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-primary, #d97757);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.fab-menu-label {
  font-size: 14px;
  font-weight: 500;
}

/* ============================================================================
   TOUCH FEEDBACK
   Visual feedback for touch interactions
   ============================================================================ */

.touch-feedback {
  position: relative;
  overflow: hidden;
}

.touch-feedback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.touch-feedback:active::after {
  opacity: 1;
  transform: scale(2);
}

/* ============================================================================
   SAFE AREA INSETS
   Support for notched devices
   ============================================================================ */

@supports (padding-top: env(safe-area-inset-top)) {
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================================
   HAPTIC FEEDBACK HINTS
   Class to trigger haptic feedback via JS
   ============================================================================ */

.haptic-light,
.haptic-medium,
.haptic-heavy {
  /* Styles here - haptic feedback is triggered via JS */
}

/* ============================================================================
   MOBILE-SPECIFIC CHART INTERACTIONS
   Better touch support for charts
   ============================================================================ */

@media (max-width: 768px) {
  .chart-container {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .chart-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  .time-periods {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .period-btn {
    flex-shrink: 0;
    min-width: 48px;
    padding: 10px 16px;
  }
}

/* ============================================================================
   LOADING STATES FOR MOBILE
   Optimized loading states for mobile
   ============================================================================ */

@media (max-width: 768px) {
  .skeleton-chart {
    height: 200px;
  }

  .skeleton-dashboard-widget > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .skeleton-stock-detail > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* ============================================================================
   MOBILE BOTTOM NAVIGATION
   Touch-friendly navigation bar for mobile devices
   ============================================================================ */

/* mobile-bottom-nav visibility controlled by .is-mobile-device class */

.mobile-bottom-nav-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 0;
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  min-width: 64px;
  text-decoration: none;
  color: var(--text-secondary, #8a8580);
  transition: all 0.2s ease;
  border-radius: 12px;
  position: relative;
}

.mobile-bottom-nav-item:active {
  transform: scale(0.95);
}

.mobile-bottom-nav-item.active {
  color: #d97757;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12));
}

.mobile-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, #d97757, #b8956a);
  border-radius: 0 0 3px 3px;
}

.mobile-bottom-nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mobile-bottom-nav-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.mobile-bottom-nav-item.active .mobile-bottom-nav-icon svg {
  stroke-width: 2.5;
}

.mobile-bottom-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Badge for notifications */
.mobile-bottom-nav-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-elevated, #111);
}

/* Ripple effect on tap */
.mobile-bottom-nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--accent-primary, #d97757);
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s ease;
}

.mobile-bottom-nav-item:active::after {
  opacity: 0.1;
  transform: scale(1);
}

/* Floating Action Button (FAB) variant */
.mobile-bottom-nav-fab {
  position: relative;
  margin-top: -32px;
}

.mobile-bottom-nav-fab .mobile-bottom-nav-item {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #d97757 0%, #b8956a 100%);
  color: white;
  border-radius: 50%;
  box-shadow:
    0 8px 20px rgba(59, 130, 246, 0.4),
    0 0 0 3px rgba(20, 20, 19, 0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-bottom-nav-fab .mobile-bottom-nav-item:hover {
  box-shadow:
    0 12px 28px rgba(59, 130, 246, 0.5),
    0 0 0 3px rgba(20, 20, 19, 0.9);
  transform: translateY(-2px);
}

.mobile-bottom-nav-fab .mobile-bottom-nav-icon {
  width: 28px;
  height: 28px;
}

.mobile-bottom-nav-fab .mobile-bottom-nav-label {
  display: none;
}

.mobile-bottom-nav-fab .mobile-bottom-nav-item:active {
  transform: scale(0.9);
  box-shadow:
    0 4px 12px rgba(59, 130, 246, 0.3),
    0 0 0 3px rgba(20, 20, 19, 0.9);
}

/* Alternative: Pill-style nav */
.mobile-bottom-nav-pill {
  padding: 12px 16px;
  background: var(--bg-secondary, #1a1918);
  border-top: none;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -4px 12px rgba(20, 20, 19, 0.3);
}

.mobile-bottom-nav-pill .mobile-bottom-nav-container {
  gap: 8px;
}

.mobile-bottom-nav-pill .mobile-bottom-nav-item {
  flex: 1;
  background: var(--bg-elevated, #111);
  border-radius: 16px;
  padding: 12px 8px;
}

.mobile-bottom-nav-pill .mobile-bottom-nav-item.active {
  background: rgba(217,119,87,0.15);
}

/* More Menu (overflow menu) */
.mobile-bottom-nav-more-menu {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
  right: 16px;
  background: var(--bg-elevated, #111);
  border: 1px solid var(--border-primary, #2a2927);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(20, 20, 19, 0.4);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: all 0.2s ease;
}

.mobile-bottom-nav-more-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mobile-bottom-nav-more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-primary, #e8e5de);
  text-decoration: none;
  transition: background 0.15s ease;
}

.mobile-bottom-nav-more-item:hover,
.mobile-bottom-nav-more-item:active {
  background: var(--bg-secondary, #1a1918);
}

.mobile-bottom-nav-more-item svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary, #8a8580);
}

.mobile-bottom-nav-more-item span {
  font-size: 14px;
  font-weight: 500;
}

/* Backdrop for more menu */
.mobile-bottom-nav-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 999;
  display: none;
}

.mobile-bottom-nav-backdrop.open {
  display: block;
}

/* Animations */
@keyframes nav-item-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.mobile-bottom-nav-item.bounce {
  animation: nav-item-bounce 0.4s ease;
}

/* Landscape mode optimization */
@media (max-width: 896px) and (orientation: landscape) {
  .mobile-bottom-nav-container {
    padding: 4px 0;
  }

  .mobile-bottom-nav-item {
    padding: 6px 8px;
    min-width: 56px;
  }

  .mobile-bottom-nav-label {
    font-size: 10px;
  }

  .mobile-bottom-nav-fab {
    margin-top: -24px;
  }

  .mobile-bottom-nav-fab .mobile-bottom-nav-item {
    width: 48px;
    height: 48px;
  }
}

/* Dark mode (default) */
/* Light mode */
[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: #e5e7eb;
}

[data-theme="light"] .mobile-bottom-nav-item {
  color: #8b909b;
}

[data-theme="light"] .mobile-bottom-nav-item.active {
  color: #d97757;
}

[data-theme="light"] .mobile-bottom-nav-more-menu {
  background: #faf9f5;
  border-color: #e5e7eb;
}

[data-theme="light"] .mobile-bottom-nav-more-item {
  color: #111827;
}

[data-theme="light"] .mobile-bottom-nav-more-item:hover {
  background: #f3f4f6;
}

[data-theme="light"] .mobile-bottom-nav-pill {
  background: #f9fafb;
}

[data-theme="light"] .mobile-bottom-nav-pill .mobile-bottom-nav-item {
  background: #faf9f5;
}

/* Accessibility */
.mobile-bottom-nav-item:focus {
  outline: 2px solid var(--accent-primary, #d97757);
  outline-offset: 2px;
}

/* Haptic feedback class (to be triggered via JS) */
.mobile-bottom-nav-item.haptic {
  animation: haptic-feedback 0.1s ease;
}

@keyframes haptic-feedback {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.98); }
}
/* ============================================================================
   TOUCH-OPTIMIZED TABLES
   Mobile-friendly table layouts with swipe gestures
   ============================================================================ */

/* Base table styles remain unchanged for desktop */
.touch-table {
  width: 100%;
  border-collapse: collapse;
}

/* Desktop table styles */
@media (min-width: 769px) {
  .touch-table thead {
    background: var(--bg-elevated, #111);
  }

  .touch-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #8a8580);
    border-bottom: 1px solid var(--border-primary, #2a2927);
  }

  .touch-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-secondary, #2a2927);
    color: var(--text-primary, #e8e5de);
  }

  .touch-table tbody tr {
    transition: background 0.2s ease;
  }

  .touch-table tbody tr:hover {
    background: rgba(217,119,87,0.06);
  }
}

/* Mobile: Convert to card-based layout */
@media (max-width: 768px) {
  .touch-table {
    display: block;
  }

  .touch-table thead {
    display: none;
  }

  .touch-table tbody {
    display: block;
  }

  .touch-table tr {
    display: block;
    background: var(--bg-secondary, #1a1918);
    border: 1px solid var(--border-primary, #2a2927);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  /* Swipe indicator */
  .touch-table tr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-primary, #d97757);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .touch-table tr.swiping::before {
    opacity: 1;
  }

  .touch-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(--border-secondary, #2a2927);
  }

  .touch-table td:last-child {
    border-bottom: none;
  }

  /* Label from data attribute */
  .touch-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #8a8580);
    flex-shrink: 0;
    margin-right: 16px;
  }

  .touch-table td > * {
    text-align: right;
  }

  /* Swipe Actions */
  .touch-table-swipe-container {
    position: relative;
    overflow: hidden;
  }

  .touch-table-row-wrapper {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: pan-y;
  }

  .touch-table-row-wrapper.swiped-left {
    transform: translateX(-80px);
  }

  .touch-table-row-wrapper.swiped-right {
    transform: translateX(80px);
  }

  /* Swipe action buttons */
  .touch-table-actions {
    position: absolute;
    top: 0;
    right: -80px;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    transition: right 0.3s ease;
  }

  .touch-table-actions-left {
    left: -80px;
    right: auto;
    background: #00c853;
  }

  .touch-table-row-wrapper.swiped-left + .touch-table-actions {
    right: 0;
  }

  .touch-table-row-wrapper.swiped-right ~ .touch-table-actions-left {
    left: 0;
  }

  .touch-table-action-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.2s ease;
  }

  .touch-table-action-btn:active {
    transform: scale(0.9);
  }
}

/* Compact table variant (minimal info) */
.touch-table-compact {
  font-size: 14px;
}

@media (max-width: 768px) {
  .touch-table-compact tr {
    padding: 12px;
  }

  .touch-table-compact td {
    padding: 6px 0;
    font-size: 13px;
  }

  .touch-table-compact td::before {
    font-size: 11px;
  }
}

/* Expandable rows */
.touch-table-expandable tr {
  cursor: pointer;
}

@media (max-width: 768px) {
  .touch-table-expandable tr::after {
    content: '›';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 24px;
    color: var(--text-tertiary, #a09c97);
    transition: transform 0.3s ease;
  }

  .touch-table-expandable tr.expanded::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  .touch-table-details {
    display: none;
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--border-primary, #2a2927);
    animation: slideDown 0.3s ease;
  }

  .touch-table-expandable tr.expanded .touch-table-details {
    display: block;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Holdings Table (specific styling) */
.holdings-table td[data-label="Symbol"] {
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

.holdings-table td[data-label="Change"],
.holdings-table td[data-label="Gain/Loss"] {
  font-family: 'Poppins', sans-serif;
}

.holdings-table .positive {
  color: #00c853;
}

.holdings-table .negative {
  color: #ef4444;
}

@media (max-width: 768px) {
  .holdings-table tr {
    padding-right: 48px; /* Space for expand arrow */
  }
}

/* Transactions Table */
.transactions-table td[data-label="Date"] {
  font-size: 12px;
  color: var(--text-secondary, #8a8580);
}

.transactions-table .transaction-type {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.transactions-table .transaction-type.buy {
  background: rgba(16, 185, 129, 0.1);
  color: #00c853;
}

.transactions-table .transaction-type.sell {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Watchlist Table */
.watchlist-table td[data-label="Symbol"]::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 8px;
  background: #00c853;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Loading State for Tables */
.touch-table-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.touch-table-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Pull to Refresh Indicator */
.touch-table-refresh-indicator {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary, #8a8580);
  font-size: 14px;
  display: none;
  animation: fadeIn 0.3s ease;
}

.touch-table-refresh-indicator.pulling {
  display: block;
}

.touch-table-refresh-indicator svg {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sticky header on scroll */
@media (max-width: 768px) {
  .touch-table-sticky-summary {
    position: sticky;
    top: 56px; /* Below mobile header */
    z-index: 10;
    background: var(--bg-primary, #141413);
    border-bottom: 1px solid var(--border-primary, #2a2927);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    /* -webkit-backdrop-filter removed */
    /* backdrop-filter removed */
    /* -webkit-backdrop-filter removed */
  }
}

/* Empty state in table */
.touch-table-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary, #8a8580);
}

@media (max-width: 768px) {
  .touch-table-empty {
    padding: 32px 16px;
  }
}

/* Sorting indicators */
.touch-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 28px;
}

.touch-table th[data-sort]::after {
  content: '↕';
  position: absolute;
  right: 8px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.touch-table th[data-sort].sort-asc::after {
  content: '↑';
  opacity: 1;
  color: var(--accent-primary, #d97757);
}

.touch-table th[data-sort].sort-desc::after {
  content: '↓';
  opacity: 1;
  color: var(--accent-primary, #d97757);
}

/* Infinite scroll loading */
.touch-table-load-more {
  text-align: center;
  padding: 24px;
}

.touch-table-load-more button {
  padding: 12px 24px;
  background: var(--bg-elevated, #111);
  border: 1px solid var(--border-primary, #2a2927);
  border-radius: 8px;
  color: var(--text-primary, #e8e5de);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.touch-table-load-more button:hover {
  background: var(--bg-secondary, #1a1918);
  border-color: var(--accent-primary, #d97757);
}

/* Selection mode */
.touch-table-selectable tr {
  position: relative;
  padding-left: 48px;
}

.touch-table-selectable input[type="checkbox"] {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Bulk actions bar */
.touch-table-bulk-actions {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
  left: 0;
  right: 0;
  background: var(--bg-elevated, #111);
  border-top: 1px solid var(--border-primary, #2a2927);
  padding: 12px 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(20, 20, 19, 0.2);
}

.touch-table-bulk-actions.active {
  display: flex;
}

.touch-table-bulk-actions-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e8e5de);
}

.touch-table-bulk-actions-buttons {
  display: flex;
  gap: 8px;
}

.touch-table-bulk-actions button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.touch-table-bulk-actions button.primary {
  background: var(--accent-primary, #d97757);
  color: white;
}

.touch-table-bulk-actions button.secondary {
  background: transparent;
  color: var(--text-primary, #e8e5de);
  border: 1px solid var(--border-primary, #2a2927);
}
/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║  GLOBAL OVERRIDES — BLOOMBERG TERMINAL BLACK                                ║
   ║  This file loads LAST in the CSS bundle to guarantee visual consistency.     ║
   ║  All rules use !important to override any earlier conflicting styles.        ║
   ║  Reference: dashboard.ejs — pure black bg, #1a1918 cards, cyan accent,      ║
   ║  2px radius, JetBrains Mono, no gradients/shadows/hover lifts.              ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

/* ─── 1. PAGE BACKGROUND — PURE BLACK ─────────────────────────────────────── */
body,
html,
main,
.main-content,
[class*="-page"],
[class*="page-"] {
  background: #141413 !important;
  background-image: none !important;
}
/* Kill any main/section gradient backgrounds */
main[class*="bg-gradient"],
main[style*="background"],
section[class*="bg-gradient"] {
  background: #141413 !important;
  background-image: none !important;
}
/* Per-page body classes that use wrong backgrounds */
.ao-page, .h-page, .tx-page, .gl-page, .pa-page, .ph-page {
  background: #141413 !important;
}

/* ─── 2. CARD BACKGROUNDS — #1a1918 ───────────────────────────────────────── */
.glass-card,
.glass-card-sm,
.stat-card,
.tufte-stat-card,
.bb-card,
.bb-card-sm,
.kpi-card,
[class*="-card"]:not(.text-emerald-400):not(.text-red-400):not([class*="avatar"]),
[class*="-panel"],
[class*="-section"] {
  background: #1a1918 !important;
  background-image: none !important;
  border: 1px solid #2a2927 !important;
}
/* Headers within cards */
.movers-header,
.md-hero,
.md-idx,
.md-card,
[class*="-header"]:not(.bloomberg-header):not(th):not(thead) {
  background: #1a1918 !important;
}
/* Bloomberg-style section headers — keep cyan bg */
.bloomberg-header {
  background: #1a1918 !important;
  border-bottom: 1px solid #2a2927 !important;
}

/* ─── 3. BORDER RADIUS — 2px EVERYWHERE ───────────────────────────────────── */
/* Override tufte-finance.css (.rounded-2xl/.rounded-3xl → 8px) */
.rounded-2xl,
.rounded-3xl {
  border-radius: 2px !important;
}
/* Override components.css (modal inputs → 6px) */
.modal input,
.modal select,
.modal textarea {
  border-radius: 2px !important;
}
/* Override Tailwind radius classes */
.rounded-full:not(.w-2):not(.h-2):not(.w-3):not(.h-3):not([class*="dot"]):not([class*="avatar"]):not([class*="status"]):not(.rounded-full.w-1):not(.rounded-full.h-1),
.rounded-xl,
.rounded-lg,
.rounded-md {
  border-radius: 2px !important;
}
/* Exception: keep tiny status dots round */
.rounded-full.w-1, .rounded-full.h-1,
.rounded-full.w-2, .rounded-full.h-2,
.rounded-full.w-3, .rounded-full.h-3,
[class*="dot"], [class*="status-dot"],
[class*="avatar"] {
  border-radius: 9999px !important;
}
/* Cards, inputs, buttons, selects — all 2px */
.glass-card, .glass-card-sm, .stat-card, .tufte-stat-card,
.bb-card, .bb-card-sm, .kpi-card,
.stitch-input, .stitch-select, .stitch-btn, .stitch-btn-primary, .stitch-btn-secondary,
.stitch-card, .stitch-modal,
.st-tab, .settings-tab, .st-card,
.glass-input, .glass-select, .bloomberg-select,
.bb-input, .bb-select, .bb-tab-bar,
input, select, textarea, button,
[class*="-modal-content"], [class*="-modal"] > div:first-child {
  border-radius: 2px !important;
}

/* ─── 4. KILL ALL HOVER LIFTS & TRANSFORMS ────────────────────────────────── */
/* Override micro-animations.css and enhanced-visuals.css hover effects */
.glass-card:hover,
.glass-card-sm:hover,
.stat-card:hover,
.stat-card:hover::before,
.stat-card:hover::after,
.tufte-stat-card:hover,
.kpi-card:hover,
.bb-card:hover,
.bb-card-sm:hover,
[class*="-card"]:hover,
.holding-card:hover,
.portfolio-card:hover,
.btn-glass:hover,
.btn-glass:hover::before,
.table-row:hover,
a.btn:not(.disabled):hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Kill stat-card icon hover animation */
.stat-card:hover .stat-card-icon {
  transform: none !important;
}
/* Kill button hover transforms */
button:hover,
a:hover,
.btn:hover,
[class*="-btn"]:hover {
  transform: none !important;
}

/* ─── 5. BOX SHADOW ELIMINATION ───────────────────────────────────────────── */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl,
[class*="-card"].shadow-lg, [class*="-card"].shadow-xl,
[class*="-kpi"]:hover,
.glass-card, .stat-card, .tufte-stat-card, .kpi-card {
  box-shadow: none !important;
}

/* ─── 6. KILL AURORA, ORBS, GRID OVERLAYS ─────────────────────────────────── */
[class*="-aurora"], [class*="aurora-"],
[class*="-orb"], [class*="orb-"] {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}
[class*="-grid-overlay"], [class*="grid-overlay"] {
  display: none !important;
}

/* ─── 7. ACCENT COLOR NORMALIZATION — CYAN #d97757 ────────────────────────── */
/* Override per-page CSS variables */
.ao-page { --ao-blue: #d97757 !important; --ao-accent: #d97757 !important; }
.gl-page { --gl-terminal: #d97757 !important; --gl-accent: #d97757 !important; }
.ph-page, .pa-page { --ph-terminal: #d97757 !important; --pa-accent: #d97757 !important; }
/* Alpha-optimizer buttons/tabs */
.ao-btn, .ao-tab.active, .ao-btn-primary {
  background: #d97757 !important;
  color: #141413 !important;
}
.ao-sh::before {
  background: #d97757 !important;
}
/* Goals/price-alerts terminal headers */
.gl-terminal-hdr, .ph-terminal-hdr, .pa-terminal-hdr,
.gl-btn-primary {
  background: #d97757 !important;
  color: #141413 !important;
}
/* Tab accent normalization */
.tab-nav .tab-btn.active,
.nav-tab.active,
[class*="-tab"].active:not(.md-tab) {
  color: #d97757 !important;
  border-bottom-color: #d97757 !important;
}
/* Market tabs */
.md-tab.active {
  background: #faf9f5 !important;
  color: #141413 !important;
}
.md-tab:not(.active) {
  background: transparent !important;
  color: #8a8580 !important;
}
/* Primary buttons (not inline-styled) */
[class*="-btn-primary"]:not([style*="background"]) {
  background: #d97757 !important;
  color: #141413 !important;
  border: none !important;
}

/* ─── 7b. OFF-BRAND TAILWIND BLUE → TERRACOTTA ─────────────────────────────────
   The platform palette has NO blue (green=positive, red=negative, amber=warning,
   terracotta=brand accent). A handful of analytics pages (liquidity, rebalance,
   stress-test, working-capital, optimizer, charts, shared-portfolio,
   portfolio-history) still carry Tailwind blue utilities — many inside JS-built
   HTML strings. Remap the utilities globally to terracotta so the whole platform
   is brand-consistent and any future stray blue is auto-corrected. */
.text-blue-300, .text-blue-400 { color: #e0875f !important; }
.text-blue-500, .text-blue-600, .text-blue-700 { color: #d97757 !important; }
.bg-blue-400, .bg-blue-500 { background-color: #d97757 !important; }
.bg-blue-600, .bg-blue-700 { background-color: #c4543a !important; }
.border-blue-400, .border-blue-500, .border-blue-600 { border-color: #d97757 !important; }
.ring-blue-400, .ring-blue-500 { --tw-ring-color: #d97757 !important; }
/* Opacity utility variants (e.g. bg-blue-500/10) */
.bg-blue-500\/5  { background-color: rgba(217,119,87,0.05) !important; }
.bg-blue-500\/10 { background-color: rgba(217,119,87,0.10) !important; }
.bg-blue-500\/20 { background-color: rgba(217,119,87,0.20) !important; }
.border-blue-500\/20, .border-blue-500\/30 { border-color: rgba(217,119,87,0.25) !important; }
.text-blue-400\/80 { color: rgba(224,135,95,0.8) !important; }
/* Gradient stops */
.from-blue-400, .from-blue-500 { --tw-gradient-from: #d97757 !important;
  --tw-gradient-to: rgba(217,119,87,0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-blue-500 { --tw-gradient-to: #d97757 !important; }
.to-blue-600, .to-blue-700 { --tw-gradient-to: #c4543a !important; }
.via-blue-500 { --tw-gradient-stops: var(--tw-gradient-from), #d97757, var(--tw-gradient-to) !important; }

/* ─── 8. FONT NORMALIZATION — Poppins + JetBrains Mono for data ──────────── */
body, html, input, select, textarea, button,
.glass-card, .bb-card {
  font-family: 'Poppins', sans-serif !important;
}
/* Keep monospace for financial data values */
.summary-card .value,
.da-value, .da-stat,
[class*="-kpi"] .value,
.metric-value, .stat-value, .stat-card-value,
.kpi-value,
.tufte-stat-card .value,
table, th, td {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace !important;
}
/* Prose text uses Lora serif */
p, .description, .form-sub, .subtitle {
  font-family: 'Lora', serif !important;
}

/* ─── 9. TEXT COLOR HIERARCHY ─────────────────────────────────────────────── */
/* Ensure consistent text colors across pages */
.text-slate-400, .text-gray-400, .text-zinc-400, .text-neutral-400 {
  color: #8a8580 !important;
}
.text-slate-500, .text-gray-500, .text-zinc-500, .text-neutral-500 {
  color: #6b6966 !important;
}
/* Positive/negative semantic colors */
.positive, .text-green-400, .text-emerald-400, [class*="text-green"] {
  color: #00c853 !important;
}
.negative, .text-red-400, .text-rose-400, [class*="text-red"] {
  color: #ef4444 !important;
}

/* ─── 10. INPUT & FORM CONSISTENCY ────────────────────────────────────────── */
input, select, textarea,
.glass-input, .glass-select,
.bb-input, .bb-select,
.bloomberg-select,
.stitch-input, .stitch-select {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  color: #e8e5de !important;
}
input:focus, select:focus, textarea:focus,
[class*="-input"]:focus {
  border-color: #d97757 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(217,119,87,0.3) !important;
}
/* Select dropdown options dark background */
select option {
  background: #1a1918 !important;
  color: #e8e5de !important;
}

/* ─── 11. TABLE CONSISTENCY ───────────────────────────────────────────────── */
table {
  border-collapse: collapse !important;
}
thead, thead tr, thead th {
  background: #1a1918 !important;
  border-bottom: 1px solid #2a2927 !important;
  color: #8a8580 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.7rem !important;
}
tbody tr {
  border-bottom: 1px solid rgba(30,30,30,0.5) !important;
}
tbody tr:hover {
  background: rgba(217,119,87,0.04) !important;
}

/* ─── 12. MODAL CONSISTENCY ───────────────────────────────────────────────── */
[class*="-modal-content"],
[class*="-modal"] > div:first-child,
.modal-content, .modal-dialog {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
}

/* ─── 13. SCROLLBAR STYLING ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #141413;
}
::-webkit-scrollbar-thumb {
  background: #2a2927;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3735;
}

/* ─── 14. BADGE & TAG NORMALIZATION ───────────────────────────────────────── */
.badge, [class*="-badge"],
.tag, [class*="-tag"],
.chip, [class*="-chip"] {
  border-radius: 2px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ─── 15. CHART CONTAINER CONSISTENCY ─────────────────────────────────────── */
canvas {
  border-radius: 0 !important;
}
.chart-container, [class*="-chart"] {
  background: transparent !important;
  border: none !important;
}

/* ─── 16. GRADIENT KILL (non-inline) ──────────────────────────────────────── */
/* Kill gradient backgrounds that aren't set via inline style attribute */
[class*="bg-gradient"]:not([style*="background"]) {
  background: #141413 !important;
  background-image: none !important;
}

/* ─── 17. STAT CARD PSEUDO-ELEMENT KILL ───────────────────────────────────── */
/* enhanced-visuals.css adds gradient pseudo-elements to stat-cards */
.stat-card::before,
.stat-card::after {
  display: none !important;
}

/* ─── 18. GLASS CARD PADDING CAP ──────────────────────────────────────────── */
.glass-card {
  padding: 16px !important;
}

/* ─── 19. LINK UNDERLINE ANIMATION KILL ───────────────────────────────────── */
/* micro-animations.css adds animated underlines */
a:not(.btn):not(.nav-link)::after {
  display: none !important;
}

/* ─── 20. CONSISTENT LABEL STYLING ────────────────────────────────────────── */
/* Dashboard-style uppercase labels with tracking */
.kpi-label, [class*="-label"],
.stat-card-label, .tufte-stat-card .label,
.text-xs.uppercase {
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  color: #8a8580 !important;
}

/* ─── 21. PER-PAGE BUTTON/TAB GRADIENT KILL ───────────────────────────────── */
/* Override per-page <style> blocks that use indigo/purple gradients for buttons */
.ac-btn-primary,
.trend-period-btn.active,
[class*="-btn-primary"],
[class*="-btn"].active:not(.md-tab) {
  background: #d97757 !important;
  background-image: none !important;
  color: #141413 !important;
  box-shadow: none !important;
}
.ac-btn-outline,
[class*="-btn-outline"] {
  background: rgba(217,119,87,0.08) !important;
  border-color: rgba(217,119,87,0.25) !important;
  color: #d97757 !important;
}
.ac-select:focus,
[class*="-select"]:focus {
  border-color: rgba(217,119,87,0.5) !important;
}

/* ─── 22. FOCUS RING STANDARDIZATION ──────────────────────────────────────── */
*:focus-visible {
  outline: 1px solid rgba(217,119,87,0.5) !important;
  outline-offset: 1px !important;
}

/* ─── 23. PILL/CHIP ACCENT OVERRIDE ───────────────────────────────────────── */
.pill, [class*="-pill"] {
  border-color: #2a2927 !important;
  border-radius: 2px !important;
}
.pill.active, [class*="-pill"].active {
  background: rgba(217,119,87,0.15) !important;
  border-color: #d97757 !important;
  color: #d97757 !important;
}

/* ─── 24. SVG ICON COLOR STANDARDIZATION ──────────────────────────────────── */
/* Per-page SVGs with purple/indigo stroke — override to cyan */
svg[stroke="#8a9bbf"],
svg[stroke="#b8956a"],
svg[stroke="#a07348"] {
  stroke: #d97757 !important;
}

/* ─── 25. PER-PAGE CSS VARIABLE OVERRIDES ─────────────────────────────────── */
/* Override common per-page variables that deviate from Bloomberg palette */
:root {
  --clr-purple: #d97757 !important;
  --clr-yellow: #d97757 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* 26. DIVIDEND PAGES — UNIVERSAL VISUAL NORMALIZATION                       */
/* Match all dividend pages to dividend-safety.ejs layout/formatting         */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 26a. Dividend-Growth Hero Header Kill ───────────────────────────────── */
.bg-gradient-to-r.from-slate-900.via-emerald-900\/20,
.bg-gradient-to-r.from-slate-900.via-purple-900\/20 {
  background: linear-gradient(135deg, rgba(20,20,19,0.95) 0%, rgba(20,40,50,0.3) 40%, rgba(20,20,19,0.95) 100%) !important;
  border-bottom-color: rgba(217,119,87,0.2) !important;
}

/* ─── 26b. Dividend KPI Cards — Kill Colorful Gradients ──────────────────── */
.bg-gradient-to-br.from-emerald-500\/10,
.bg-gradient-to-br.from-sky-500\/10,
.bg-gradient-to-br.from-purple-500\/10,
.bg-gradient-to-br.from-amber-500\/10,
.bg-gradient-to-br.from-emerald-500\/10.to-green-500\/5,
.bg-gradient-to-br.from-sky-500\/10.to-blue-500\/5,
.bg-gradient-to-br.from-purple-500\/10.to-violet-500\/5,
.bg-gradient-to-br.from-amber-500\/10.to-orange-500\/5,
.bg-gradient-to-br.from-emerald-500\/10.to-teal-500\/5 {
  background: linear-gradient(145deg, #111, #1a1918) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
/* Kill decorative circles in KPI cards */
.bg-emerald-500\/10.rounded-full,
.bg-sky-500\/10.rounded-full,
.bg-purple-500\/10.rounded-full,
.bg-amber-500\/10.rounded-full {
  display: none !important;
}

/* ─── 26c. Green/Purple Accent → Cyan ─────────────────────────────────────── */
.text-emerald-400,
.text-green-400 {
  color: #00c853 !important;
}
.text-purple-400,
.text-violet-400,
.text-purple-400\/80,
.text-emerald-400\/80 {
  color: #d97757 !important;
}
.text-sky-400 {
  color: #d97757 !important;
}
.text-amber-400 {
  color: #f5a623 !important;
}

/* ─── 26d. Green/Purple Buttons → Cyan ────────────────────────────────────── */
.bg-emerald-500,
.bg-green-500,
.bg-purple-500 {
  background-color: #d97757 !important;
  color: #141413 !important;
}
.bg-emerald-500:hover,
.bg-green-500:hover,
.bg-emerald-600,
.bg-green-600,
.bg-purple-600,
.bg-purple-500:hover {
  background-color: #b96549 !important;
}
.shadow-emerald-500\/25,
.shadow-purple-500\/25,
.shadow-lg.shadow-emerald-500\/25,
.shadow-lg.shadow-purple-500\/25 {
  box-shadow: none !important;
}

/* ─── 26e. Dividend-Forecast Green Accent → Cyan ──────────────────────────── */
:root {
  --df-green: #d97757 !important;
}
.df-tab.active {
  color: #d97757 !important;
  border-bottom-color: #d97757 !important;
}
.df-panel-title::before {
  background: #d97757 !important;
}
.df-btn-green {
  border-color: rgba(217,119,87,0.3) !important;
  color: #d97757 !important;
}
.df-btn-green:hover {
  background: rgba(217,119,87,0.08) !important;
  border-color: rgba(217,119,87,0.5) !important;
}
.df-badge {
  background: rgba(217,119,87,0.08) !important;
  border-color: rgba(217,119,87,0.2) !important;
  color: #d97757 !important;
}
.df-table th {
  border-bottom-color: #d97757 !important;
}
.df-scenario-pill.active {
  color: #d97757 !important;
}
.df-progress-fill {
  background: #d97757 !important;
}
.df-spinner {
  border-top-color: #d97757 !important;
}
.holding-row-clickable:hover {
  background: rgba(217,119,87,0.06) !important;
}

/* ─── 26f. Dividend-Screener Green → Cyan ─────────────────────────────────── */
.bg-slate-900.border-b-2.border-green-400 {
  background: linear-gradient(135deg, rgba(20,20,19,0.95) 0%, rgba(20,40,50,0.3) 40%, rgba(20,20,19,0.95) 100%) !important;
  border-bottom-color: rgba(217,119,87,0.2) !important;
}
.text-green-400.font-mono {
  color: #d97757 !important;
}
.bloomberg-btn-primary,
.bg-green-500.hover\:bg-green-600 {
  background: #d97757 !important;
  color: #141413 !important;
}
.bloomberg-btn-primary:hover {
  background: #b96549 !important;
}
.bloomberg-btn-secondary {
  background: #1a1918 !important;
  border-color: #2a2927 !important;
  color: #e8e5de !important;
}
.bloomberg-btn-secondary:hover {
  border-color: rgba(217,119,87,0.3) !important;
  color: #d97757 !important;
}
.bloomberg-btn-filter {
  background: #1a1918 !important;
  border-color: #2a2927 !important;
}
.bloomberg-btn-filter.active,
.bloomberg-btn-filter:hover {
  background: rgba(217,119,87,0.1) !important;
  border-color: rgba(217,119,87,0.3) !important;
  color: #d97757 !important;
}
.bloomberg-card {
  background: #1a1918 !important;
  border: 1px solid #2a2927 !important;
  border-radius: 2px !important;
}
.focus\:border-green-400:focus {
  border-color: rgba(217,119,87,0.5) !important;
}
.text-green-500.focus\:ring-green-500 {
  color: #d97757 !important;
}

/* ─── 26g. Dividend-Aristocrats Style Normalization ───────────────────────── */
.aristocrat-page .page-title h1 {
  font-family: 'Poppins', sans-serif !important;
}
.aristocrat-page .summary-card {
  background: linear-gradient(145deg, #111, #1a1918) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
}
.aristocrat-page .summary-card .value {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.aristocrat-page .clean-table th {
  background: rgba(20,20,19,0.8) !important;
  color: rgba(115,115,115,0.7) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid #3a3735 !important;
}
.aristocrat-page .clean-table td {
  border-bottom-color: #1a1918 !important;
  color: #e8e5de !important;
}
.aristocrat-page .clean-table tbody tr:hover {
  background: rgba(217,119,87,0.04) !important;
}
.aristocrat-page .tab-btn.active {
  color: #d97757 !important;
  border-bottom-color: #d97757 !important;
}
.aristocrat-page .data-card {
  background: #1a1918 !important;
  border-color: #2a2927 !important;
}
.aristocrat-page .data-card-header {
  border-bottom-color: #2a2927 !important;
}

/* ─── 26h. Dividends.ejs Dashboard Stat Cards ─────────────────────────────── */
.dividend-page .stat-card {
  background: linear-gradient(145deg, #111, #1a1918) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.dividend-page .stat-card .stat-icon {
  border-radius: 2px !important;
}
.dividend-page .btn-primary {
  background: #d97757 !important;
  background-image: none !important;
  color: #141413 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.dividend-page .btn-primary:hover {
  background: #b96549 !important;
  background-image: none !important;
}
.dividend-page .select-control {
  background: rgba(20,20,19,0.8) !important;
  border: 1px solid #3a3735 !important;
  border-radius: 2px !important;
  color: #e8e5de !important;
}
.dividend-page .tab-btn.active {
  background: #d97757 !important;
  color: #141413 !important;
  border-radius: 2px !important;
}
.dividend-page .data-table th {
  background: rgba(20,20,19,0.8) !important;
  color: rgba(115,115,115,0.7) !important;
  border-bottom: 1px solid #3a3735 !important;
}
.dividend-page .data-table tr:hover td {
  background: rgba(217,119,87,0.04) !important;
}
.dividend-page .badge {
  border-radius: 2px !important;
}
.dividend-page .alert-card {
  border-radius: 2px !important;
}
.dividend-page .benchmark-card {
  background: rgba(217,119,87,0.05) !important;
  border-color: rgba(217,119,87,0.2) !important;
}

/* ─── 26i. Dividend-Calendar BB Style Polish ──────────────────────────────── */
.bb-kpi-val.text-\[\#00c853\] {
  color: #00c853 !important;
}

/* ─── 26j. Yield Curve Purple → Cyan ──────────────────────────────────────── */
.bg-gradient-to-r.from-purple-500\/10,
.bg-gradient-to-r.from-purple-500\/10.to-violet-500\/5,
.bg-gradient-to-br.from-purple-500.to-violet-600 {
  background: rgba(217,119,87,0.15) !important;
}
.border-purple-500\/20,
.border-purple-500\/30 {
  border-color: rgba(217,119,87,0.2) !important;
}
.text-purple-300 {
  color: #d97757 !important;
}
.bg-purple-500\/20 {
  background: rgba(217,119,87,0.15) !important;
}
.bg-purple-500\/10 {
  background: rgba(217,119,87,0.08) !important;
}
.border-purple-500 {
  border-color: #d97757 !important;
}
.border-t-transparent.border-purple-500 {
  border-top-color: transparent !important;
}

/* ─── 26k. Slate/Dark Card Normalization ──────────────────────────────────── */
.bg-slate-800\/50 {
  background: #1a1918 !important;
}
.border-slate-700 {
  border-color: #2a2927 !important;
}
.bg-slate-800 {
  background: #1a1918 !important;
}
.border-slate-600 {
  border-color: #3a3735 !important;
}
.bg-slate-700 {
  background: #1a1918 !important;
}

/* ─── 26l. Icon Box Normalization — All gradient icon boxes → flat cyan ──── */
.bg-gradient-to-br.from-emerald-500.to-green-600,
.bg-gradient-to-br.from-purple-500.to-violet-600,
.bg-gradient-to-br.from-sky-500.to-blue-600 {
  background: rgba(217,119,87,0.15) !important;
  box-shadow: none !important;
}

/* ─── 26m. Rounded Elements in Dividend Pages ─────────────────────────────── */
.rounded-lg,
.rounded-full:not(.live-dot):not(.today-marker):not([class*="w-4"][class*="h-4"]):not([class*="w-2"][class*="h-2"]) {
  border-radius: 2px !important;
}

/* ─── 27. Income / Payout-Ratio / DRIP / Buybacks — Green→Cyan Normalization ─── */

/* 27a. Tab active state for income page */
.tab-btn.active {
  color: #d97757 !important;
  border-bottom-color: #d97757 !important;
}

/* 27b. Payout ratio sector summary green title in JS */
.bloomberg-card h3.font-semibold,
.bloomberg-card h4.font-bold {
  color: #e8e5de !important;
}

/* 27c. Income page checkbox accent */
input[type="checkbox"].text-green-400,
input[type="checkbox"]:checked {
  accent-color: #d97757 !important;
}

/* 27d. Buybacks / income — JS-generated green section headers */
h4.text-green-400,
h5.text-green-400 {
  color: #d97757 !important;
}

/* 27e. KPI card holdings green → cyan for buybacks */
#kpiHoldings.text-green-400 {
  color: #d97757 !important;
}

/* 27f. DRIP page — emerald grade badge overrides */
.filter-chip.bg-emerald-500\/20 {
  background: rgba(217,119,87,0.15) !important;
  color: #d97757 !important;
  border-color: rgba(217,119,87,0.3) !important;
}

/* 27g. Growth year button active state in DRIP */
.growth-yr-btn.bg-emerald-500\/20 {
  background: rgba(217,119,87,0.15) !important;
  color: #d97757 !important;
  border-color: rgba(217,119,87,0.3) !important;
}

/* 27h. DRIP toggle switch emerald → cyan */
.peer-checked\:bg-emerald-500:checked ~ div,
input:checked + .bg-slate-600 {
  background-color: #d97757 !important;
}

/* 27i. Status box blue → subtle dark */
#statusBox {
  background: rgba(217,119,87,0.05) !important;
  border-color: rgba(217,119,87,0.2) !important;
}
#statusBox .text-blue-300,
#statusText {
  color: #d97757 !important;
}