/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}: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:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,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:initial}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;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-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:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[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]{display:none}*,::backdrop,: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:#fff;--tw-ring-color:#3b82f680;--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: }.\!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}.\!visible{visibility:visible!important}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-4{left:1rem;right:1rem}.-right-2{right:-.5rem}.-top-2{top:-.5rem}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-20{top:5rem}.top-24{top:6rem}.top-36{top:9rem}.top-4{top:1rem}.top-64{top:16rem}.z-40{z-index:40}.z-50{z-index:50}.z-\[9999\]{z-index:9999}.col-span-full{grid-column:1/-1}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-16{margin-left:4rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.mr-1{margin-right:.25rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-12{height:3rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.max-h-\[90vh\]{max-height:90vh}.w-1\/3{width:33.333333%}.w-12{width:3rem}.w-2\/3{width:66.666667%}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-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%}.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 spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.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-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-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))}.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-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[\#8B5CF6\]{--tw-border-opacity:1;border-color:rgb(139 92 246/var(--tw-border-opacity))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-indigo-200{--tw-border-opacity:1;border-color:rgb(199 210 254/var(--tw-border-opacity))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity))}.border-pink-200{--tw-border-opacity:1;border-color:rgb(251 207 232/var(--tw-border-opacity))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity))}.border-purple-300{--tw-border-opacity:1;border-color:rgb(216 180 254/var(--tw-border-opacity))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-teal-200{--tw-border-opacity:1;border-color:rgb(153 246 228/var(--tw-border-opacity))}.border-teal-300{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white\/20{border-color:#fff3}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity))}.bg-\[\#008CA8\]{--tw-bg-opacity:1;background-color:rgb(0 140 168/var(--tw-bg-opacity))}.bg-\[\#008CA8\]\/10{background-color:#008ca81a}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-black\/40{background-color:#0006}.bg-black\/50{background-color:#00000080}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/20{background-color:#fff3}.bg-white\/95{background-color:#fffffff2}.bg-yellow-200{--tw-bg-opacity:1;background-color:rgb(254 240 138/var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-opacity-60{--tw-bg-opacity:0.6}.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))}.from-\[\#008CA8\]{--tw-gradient-from:#008ca8 var(--tw-gradient-from-position);--tw-gradient-to:#008ca800 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:#6366f100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pink-500{--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:#ec489900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from:#faf5ff var(--tw-gradient-from-position);--tw-gradient-to:#faf5ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-50{--tw-gradient-from:#f0fdfa var(--tw-gradient-from-position);--tw-gradient-to:#f0fdfa00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:#14b8a600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-\[\#00447C\]{--tw-gradient-to:#00447c var(--tw-gradient-to-position)}.to-cyan-600{--tw-gradient-to:#0891b2 var(--tw-gradient-to-position)}.to-purple-100{--tw-gradient-to:#f3e8ff var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.to-rose-600{--tw-gradient-to:#e11d48 var(--tw-gradient-to-position)}.to-teal-100{--tw-gradient-to:#ccfbf1 var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-56{padding:14rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.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-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.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-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-1{padding-left:.25rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,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-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.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-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[\#00447C\]{--tw-text-opacity:1;color:rgb(0 68 124/var(--tw-text-opacity))}.text-\[\#008CA8\]{--tw-text-opacity:1;color:rgb(0 140 168/var(--tw-text-opacity))}.text-\[\#8B5CF6\]{--tw-text-opacity:1;color:rgb(139 92 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity))}.text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity))}.text-purple-900{--tw-text-opacity:1;color:rgb(88 28 135/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/70{color:#ffffffb3}.text-white\/80{color:#fffc}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128/var(--tw-placeholder-opacity))}.opacity-50{opacity:.5}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--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 #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.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)}.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-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.last\:border-0:last-child{border-width:0}.hover\:scale-110:hover{--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))}.hover\:border-\[\#00447C\]:hover{--tw-border-opacity:1;border-color:rgb(0 68 124/var(--tw-border-opacity))}.hover\:border-\[\#8B5CF6\]:hover{--tw-border-opacity:1;border-color:rgb(139 92 246/var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.hover\:bg-\[\#00447C\]:hover{--tw-bg-opacity:1;background-color:rgb(0 68 124/var(--tw-bg-opacity))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-green-200:hover{--tw-bg-opacity:1;background-color:rgb(187 247 208/var(--tw-bg-opacity))}.hover\:bg-purple-50:hover{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity))}.hover\:bg-red-100:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:bg-white\/30:hover{background-color:#ffffff4d}.hover\:from-purple-100:hover{--tw-gradient-from:#f3e8ff var(--tw-gradient-from-position);--tw-gradient-to:#f3e8ff00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-teal-100:hover{--tw-gradient-from:#ccfbf1 var(--tw-gradient-from-position);--tw-gradient-to:#ccfbf100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-purple-200:hover{--tw-gradient-to:#e9d5ff var(--tw-gradient-to-position)}.hover\:to-teal-200:hover{--tw-gradient-to:#99f6e4 var(--tw-gradient-to-position)}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.focus\:border-\[\#008CA8\]:focus{--tw-border-opacity:1;border-color:rgb(0 140 168/var(--tw-border-opacity))}.focus\:bg-blue-50:focus{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.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-\[\#008CA8\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 140 168/var(--tw-ring-opacity))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.focus\:ring-white\/50:focus{--tw-ring-color:#ffffff80}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--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-visible\:ring-\[\#007CC2\]:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 124 194/var(--tw-ring-opacity))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:640px){.sm\:w-96{width:24rem}.sm\:w-\[520px\]{width:520px}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width:768px){.md\:left-1\/2{left:50%}.md\:w-\[480px\]{width:480px}.md\:-translate-x-1\/2{--tw-translate-x:-50%;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))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:p-12{padding:3rem}.md\:p-8{padding:2rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.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\:flex-row{flex-direction:row}}@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.dark\:border-slate-600:where([data-theme=dark],[data-theme=dark] *){--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity))}.dark\:bg-slate-800:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}/* =============================================
   CIP Exam Prep Tool - Consolidated Stylesheet
   Version: Clean Build (Dec 2024)
   
   This file consolidates:
   - Main styles
   - Dark mode support (integrated)
   - All visual fixes
   ============================================= */

/* =============================================
   PRIM&R CIP Exam Prep Tool - Professional Brand Identity
   ============================================= */

/* PRIM&R Brand Colors with Enhanced Professional Palette */
:root {
    /* Primary Brand Colors */
    --primr-navy: #003366;
    --primr-navy-dark: #002244;
    --primr-navy-light: #004488;
    --primr-red: #B20838;
    --primr-red-light: #C41E3A;
    --primr-teal: #008CA8;
    --primr-teal-dark: #006B8C;
    --primr-teal-light: #1A9BB8;
    --primr-purple: #542988;
    --primr-aqua: #007CC2;
    --primr-gold: #F8981D;
    --primr-green: #78A22F;
    --primr-yellow: #FDB924;
    
    /* RGB versions for rgba() usage */
    --primr-teal-rgb: 0, 140, 168;
    --primr-navy-rgb: 0, 68, 124;
    --primr-green-rgb: 120, 162, 47;
    --primr-yellow-rgb: 253, 185, 36;
    
    /* Enhanced Neutral Colors */
    --bg-light: #F8FAFC;
    --bg-dark: #0F172A;
    --bg-lighter: #F1F5F9;
    --bg-white: #FFFFFF;
    --text-primary: #1E293B;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;
    --border-dark: #94A3B8;
    --border-color: #E2E8F0;
    
    /* Professional Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Animation Durations */
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --transition-slow: 350ms;
}

/* =============================================
   DARK MODE
   ============================================= */

[data-theme="dark"] {
    /* BRIGHT accent colors - user preference! */
    --primr-navy: #2563EB;
    --primr-navy-dark: #1E40AF;
    --primr-navy-light: #3B82F6;
    --primr-red: #EF4444;
    --primr-red-light: #F87171;
    --primr-teal: #14B8A6;
    --primr-teal-dark: #0D9488;
    --primr-teal-light: #2DD4BF;
    --primr-purple: #A855F7;
    --primr-aqua: #3B82F6;
    --primr-gold: #FBBF24;
    --primr-green: #84CC16;
    --primr-yellow: #FDE047;
    
    /* RGB versions for rgba() usage */
    --primr-teal-rgb: 20, 184, 166;
    --primr-navy-rgb: 37, 99, 235;
    --primr-green-rgb: 132, 204, 22;
    --primr-yellow-rgb: 253, 224, 71;
    
    /* Dark Mode Neutral Colors - Slate (default) */
    --bg-light: #0F172A;
    --bg-dark: #0F172A;
    --bg-lighter: #1E293B;
    --bg-white: #1E293B;
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --border-light: #334155;
    --border-medium: #475569;
    --border-dark: #64748B;
    --border-color: #334155;
    
    /* Dark Mode Shadows - lighter and more subtle */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.5);
}

/* Dark Mode Theme Variants */

/* 💠 Northern Lights - dark navy sky, teal/green aurora glow, whisper of purple */
[data-theme="dark"][data-dark-style="aurora"] {
    --bg-light: #010814;
    --bg-lighter: #071525;
    --bg-white: #0c1f33;
    --border-light: #115e59;
    --border-medium: #14b8a6;
    --primr-teal: #2dd4bf;
    --primr-teal-light: #5eead4;
    --primr-teal-dark: #0f3d38;
    --primr-navy: #5eead4;
    --primr-navy-light: #99f6e4;
    --primr-navy-dark: #010814;
    --text-primary: #ccfbf1;
    --text-secondary: #5eead4;
    --text-muted: #14b8a6;
}

/* 🐚 Deep Sea - true abyss black, sparse cyan bioluminescence */
[data-theme="dark"][data-dark-style="ocean"] {
    --bg-light: #000204;
    --bg-lighter: #000a0f;
    --bg-white: #001018;
    --border-light: #003040;
    --border-medium: #0891b2;
    --primr-teal: #06b6d4;
    --primr-teal-light: #22d3ee;
    --primr-teal-dark: #003040;
    --primr-navy: #0891b2;
    --primr-navy-light: #06b6d4;
    --primr-navy-dark: #000204;
    --text-primary: #cffafe;
    --text-secondary: #22d3ee;
    --text-muted: #0e7490;
}

/* ❄️ Frost - desaturated steel gray, ice white, minimal blue */
[data-theme="dark"][data-dark-style="frost"] {
    --bg-light: #101214;
    --bg-lighter: #1a1d21;
    --bg-white: #24282e;
    --border-light: #3f444d;
    --border-medium: #6b7280;
    --primr-teal: #9ca3af;
    --primr-teal-light: #d1d5db;
    --primr-teal-dark: #3f444d;
    --primr-navy: #6b7280;
    --primr-navy-light: #9ca3af;
    --primr-navy-dark: #101214;
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
}

/* 🌀 Blacklight - deep purple-black, vibrant neon magenta + cyan */
[data-theme="dark"][data-dark-style="blacklight"] {
    --bg-light: #080010;
    --bg-lighter: #10001f;
    --bg-white: #1a0030;
    --border-light: #581c87;
    --border-medium: #a855f7;
    --primr-teal: #00f0ff;
    --primr-teal-light: #67f9ff;
    --primr-teal-dark: #581c87;
    --primr-navy: #e879f9;
    --primr-navy-light: #f0abfc;
    --primr-navy-dark: #080010;
    --text-primary: #fae8ff;
    --text-secondary: #e879f9;
    --text-muted: #c026d3;
}

/* 📟 Matrix - pure black, only phosphor green */
[data-theme="dark"][data-dark-style="matrix"] {
    --bg-light: #000000;
    --bg-lighter: #030303;
    --bg-white: #080808;
    --border-light: #0a2f0a;
    --border-medium: #15803d;
    --primr-teal: #22c55e;
    --primr-teal-light: #4ade80;
    --primr-teal-dark: #0a2f0a;
    --primr-navy: #16a34a;
    --primr-navy-light: #22c55e;
    --primr-navy-dark: #000000;
    --text-primary: #4ade80;
    --text-secondary: #22c55e;
    --text-muted: #15803d;
}

/* =============================================
   LIGHT MODE COMPONENT STYLES (Deep Integration)
   Mirrors dark mode architecture - uses CSS custom properties
   for the single light mode theme
   ============================================= */

/* === TYPOGRAPHY & TEXT COLORS === */
[data-theme="light"] .text-gray-800 { color: var(--text-primary) !important; }
[data-theme="light"] .text-gray-700 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-gray-600 { color: var(--text-muted) !important; }

/* === BACKGROUNDS === */
[data-theme="light"] .bg-white { background-color: var(--bg-white) !important; }
[data-theme="light"] .bg-gray-50 { background-color: var(--bg-lighter) !important; }
[data-theme="light"] .bg-gray-100 { background-color: var(--bg-lighter) !important; }

/* === BORDERS === */
[data-theme="light"] .border-gray-200 { border-color: var(--border-light) !important; }
[data-theme="light"] .border-gray-300 { border-color: var(--border-medium) !important; }

/* === TABLES (Glossary & Documents) === */
[data-theme="light"] .glossary-card table,
[data-theme="light"] .glossary-item-enhanced table,
[data-theme="light"] article.glossary-card > div {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .glossary-card td,
[data-theme="light"] .glossary-card th {
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="light"] .glossary-card table tbody,
[data-theme="light"] .glossary-card table thead {
    background: transparent !important;
}

[data-theme="light"] .doc-modal-content table thead,
[data-theme="light"] .modal-body table thead {
    background: rgba(var(--primr-navy-rgb, 37, 99, 235), 0.08) !important;
}

[data-theme="light"] .doc-modal-content table thead th,
[data-theme="light"] .modal-body table thead th {
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="light"] .doc-modal-content table tbody tr,
[data-theme="light"] .modal-body table tbody tr {
    background: var(--bg-white) !important;
}

[data-theme="light"] .doc-modal-content table tbody tr:nth-child(even),
[data-theme="light"] .modal-body table tbody tr:nth-child(even) {
    background: var(--bg-lighter) !important;
}

/* === MODALS === */
[data-theme="light"] .historical-modal-content,
[data-theme="light"] .doc-modal {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .doc-modal-header,
[data-theme="light"] .doc-modal-footer {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="light"] #note-modal {
    background: var(--bg-white) !important;
}

[data-theme="light"] #note-modal h2 {
    color: var(--text-primary) !important;
}

[data-theme="light"] #note-modal-textarea {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* === CARDS === */
[data-theme="light"] #glossary-container > article.glossary-card {
    background: var(--bg-white) !important;
}

[data-theme="light"] #glossary-container > article.glossary-card:hover {
    background: var(--bg-lighter) !important;
}

[data-theme="light"] .historical-card {
    background: var(--bg-white) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="light"] .card:not(.chart-table-card) {
    background: var(--bg-white) !important;
    border-color: var(--border-light) !important;
}

[data-theme="light"] .card:not(.chart-table-card):hover,
[data-theme="light"] .card:not(.chart-table-card):focus-within {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
}

/* === FLASHCARDS === */
[data-theme="light"] .flashcard-side,
[data-theme="light"] .flashcard-front,
[data-theme="light"] .flashcard-back {
    background: var(--bg-white) !important;
    border-color: var(--border-medium);
}

[data-theme="light"] .flashcard-front {
    border-left-color: var(--primr-navy);
}

[data-theme="light"] .flashcard-back {
    border-left-color: var(--primr-teal);
}

/* === FORMS & INPUTS === */
[data-theme="light"] .form-input {
    background: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

[data-theme="light"] .form-input:focus {
    border-color: var(--primr-teal);
    box-shadow: 0 0 0 3px rgba(var(--primr-teal-rgb, 8, 145, 178), 0.1);
}

[data-theme="light"] .form-input::placeholder {
    color: var(--text-muted);
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input.search,
[data-theme="light"] .search-input,
[data-theme="light"] #glossary-search,
[data-theme="light"] #notes-search-input {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* Fix global search input text visibility in light mode */
[data-theme="light"] #global-search-input {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1f2937 !important; /* gray-800 */
}

[data-theme="light"] #global-search-input::placeholder {
    color: #9ca3af !important; /* gray-400 */
}

[data-theme="light"] input[type="text"]::placeholder,
[data-theme="light"] input[type="search"]::placeholder,
[data-theme="light"] input.search::placeholder {
    color: var(--text-muted) !important;
}

[data-theme="light"] textarea,
[data-theme="light"] #note-modal-textarea {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="light"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* === DRAWERS === */
[data-theme="light"] #notes-drawer {
    background: var(--bg-white) !important;
}

[data-theme="light"] #notes-drawer input {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] #notes-drawer li {
    background: var(--bg-white) !important;
    border-color: var(--border-light) !important;
}

[data-theme="light"] #notes-drawer li:hover {
    background: var(--bg-lighter) !important;
}

/* === GLOSSARY SPECIFIC === */
[data-theme="light"] .glossary-item-enhanced,
[data-theme="light"] .glossary-card {
    background: var(--bg-white) !important;
}

[data-theme="light"] .glossary-card > div,
[data-theme="light"] .glossary-card tbody,
[data-theme="light"] .glossary-card td {
    color: var(--text-primary) !important;
}

[data-theme="light"] #glossary-container a.source-pill,
[data-theme="light"] .flashcard a.source-pill {
    background: var(--bg-lighter) !important;
    color: var(--primr-teal) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="light"] #glossary-container a.source-pill:hover,
[data-theme="light"] .flashcard a.source-pill:hover {
    background: var(--primr-teal) !important;
    color: var(--bg-white) !important;
}

/* === QUIZ/KNOWLEDGE CHECKS === */
[data-theme="light"] .quiz-gradient,
[data-theme="light"] .knowledge-check {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
}

/* === NAVIGATION === */
[data-theme="light"] .nav-tab.active {
    background: var(--primr-navy) !important;
    color: var(--bg-white) !important;
}

[data-theme="light"] .nav-tab:hover:not(.active) {
    background: rgba(var(--primr-navy-rgb, 37, 99, 235), 0.1);
}

/* === ALERTS & BADGES === */
[data-theme="light"] .result-count,
[data-theme="light"] .badge {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* === HEADINGS === */
[data-theme="light"] .historical-modal-content h2,
[data-theme="light"] .historical-modal-content h3,
[data-theme="light"] .historical-card h3,
[data-theme="light"] .historical-card h4 {
    color: var(--text-primary) !important;
}

/* === SEARCH HIGHLIGHTS === */
[data-theme="light"] mark,
[data-theme="light"] .highlight {
    background-color: rgba(var(--primr-yellow-rgb, 251, 191, 36), 0.3) !important;
    color: var(--text-primary) !important;
}

/* === VISIBILITY FIXES: Knowledge Checks, Documents, Modals === */
[data-theme="light"] .quiz-gradient,
[data-theme="light"] .knowledge-check {
    background: var(--bg-white) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .knowledge-check .font-bold,
[data-theme="light"] .knowledge-check h2,
[data-theme="light"] .knowledge-check h3,
[data-theme="light"] .quiz-gradient .font-bold,
[data-theme="light"] .quiz-gradient h2,
[data-theme="light"] .quiz-gradient h3 {
    color: var(--text-primary) !important;
}

[data-theme="light"] .check-option {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .check-option:hover {
    background: var(--bg-white) !important;
    border-color: var(--primr-teal) !important;
}

[data-theme="light"] .doc-card-blue,
[data-theme="light"] .card-gradient {
    background: linear-gradient(135deg, rgba(var(--primr-navy-rgb, 37, 99, 235), 0.1) 0%, rgba(var(--primr-teal-rgb, 8, 145, 178), 0.1) 100%) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .doc-card-green {
    background: linear-gradient(135deg, rgba(var(--primr-green-rgb, 5, 150, 105), 0.1) 0%, rgba(var(--primr-teal-rgb, 8, 145, 178), 0.1) 100%) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .doc-card-orange {
    background: linear-gradient(135deg, rgba(var(--primr-gold-rgb, 245, 158, 11), 0.1) 0%, rgba(var(--primr-yellow-rgb, 251, 191, 36), 0.1) 100%) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .doc-card {
    background: var(--bg-white) !important;
}

[data-theme="light"] .doc-card h3,
[data-theme="light"] .doc-card h4,
[data-theme="light"] .doc-card p {
    color: var(--text-primary) !important;
}

[data-theme="light"] .historical-modal-content h2,
[data-theme="light"] .historical-modal-content h3,
[data-theme="light"] .historical-modal-content p,
[data-theme="light"] .historical-modal-content li {
    color: var(--text-primary) !important;
}

[data-theme="light"] .historical-card h3,
[data-theme="light"] .historical-card h4,
[data-theme="light"] .historical-card p {
    color: var(--text-primary) !important;
}

/* Chart-table cards: light-mode gradients are pastel, so use dark text */
[data-theme="light"] .chart-table-card h3,
[data-theme="light"] .chart-table-card h4,
[data-theme="light"] .chart-table-card p,
[data-theme="light"] .chart-table-card button {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .chart-table-card h3,
[data-theme="dark"] .chart-table-card h4,
[data-theme="dark"] .chart-table-card p,
[data-theme="dark"] .chart-table-card button {
    color: #ffffff !important;
}

/* Table links must be visible and styled in modals */
[data-theme="light"] .modal-body table a,
[data-theme="light"] .doc-modal-content table a,
[data-theme="light"] table a {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

[data-theme="light"] .modal-body table a:hover,
[data-theme="light"] .doc-modal-content table a:hover,
[data-theme="light"] table a:hover {
    color: #1e3a8a !important;
}

/* Table headers must be visible */
[data-theme="light"] .modal-body table thead,
[data-theme="light"] .doc-modal-content table thead,
[data-theme="light"] table thead {
    background: #dbeafe !important;
}

[data-theme="light"] .modal-body table thead th,
[data-theme="light"] .doc-modal-content table thead th,
[data-theme="light"] table thead th {
    color: #1e3a8a !important;
    font-weight: 700 !important;
    padding: 12px !important;
    border: 1px solid #93c5fd !important;
}

[data-theme="dark"] .modal-body table a,
[data-theme="dark"] .doc-modal-content table a,
[data-theme="dark"] table a {
    color: #60a5fa !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .modal-body table a:hover,
[data-theme="dark"] .doc-modal-content table a:hover,
[data-theme="dark"] table a:hover {
    color: #93c5fd !important;
}

/* Table headers in dark mode */
[data-theme="dark"] .modal-body table thead,
[data-theme="dark"] .doc-modal-content table thead,
[data-theme="dark"] table thead {
    background: #1e3a8a !important;
}

[data-theme="dark"] .modal-body table thead th,
[data-theme="dark"] .doc-modal-content table thead th,
[data-theme="dark"] table thead th {
    color: #dbeafe !important;
    font-weight: 700 !important;
    padding: 12px !important;
    border: 1px solid #3b82f6 !important;
}

/* Smooth transitions for theme switching */
body,
.nav-tab,
.feature-card,
.study-step,
.doc-card,
.glossary-item-enhanced,
.modal,
.content-section,
header {
    transition: background-color var(--transition-normal) ease,
                color var(--transition-normal) ease,
                border-color var(--transition-normal) ease;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-light);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   DARK MODE SPECIFIC OVERRIDES
   ============================================= */

[data-theme="dark"] .nav-tab:hover:not(.active) {
    background: rgba(20, 184, 166, 0.15);
    color: var(--primr-teal-light);
}

[data-theme="dark"] .study-path-container {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 2px solid var(--primr-teal);
}

[data-theme="dark"] .study-step {
    background: var(--bg-lighter);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .study-step:hover {
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* Dark mode for Tailwind text colors used in HTML */
[data-theme="dark"] .text-gray-800 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--text-muted) !important; }
[data-theme="dark"] .text-gray-500 { color: #94A3B8 !important; }
[data-theme="dark"] .text-gray-400 { color: #64748B !important; }

/* Dark mode for Tailwind background colors */
[data-theme="dark"] .bg-white { background-color: var(--bg-white) !important; }
[data-theme="dark"] .bg-gray-50 { background-color: var(--bg-lighter) !important; }
[data-theme="dark"] .bg-gray-100 { background-color: var(--bg-lighter) !important; }
[data-theme="dark"] .bg-gray-200 { background-color: #334155 !important; }

/* Dark mode for Tailwind borders */
[data-theme="dark"] .border-gray-200 { border-color: var(--border-light) !important; }
[data-theme="dark"] .border-gray-300 { border-color: var(--border-medium) !important; }

/* =============================================
   HEADER & NAVIGATION
   ============================================= */

/* =============================================
   REUSABLE BRAND COMPONENT CLASSES
   Used by JS components to avoid hardcoded colors
   ============================================= */

/* Primary brand gradient - used for buttons, headers, floating action buttons */
.brand-gradient {
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-navy) 100%);
}

/* Floating action button style */
.fab-brand {
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-navy) 100%);
    color: white;
    border-radius: 9999px;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
}

.fab-brand:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

/* Drawer/modal header style */
.drawer-header {
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-navy) 100%);
    color: white;
}


/* LIGHT MODE: force drawer header text/icons to stay white
   Some header children had explicit text colors (e.g., text-slate-900) that override the header color.
   Scope to non-dark so dark-mode tuning remains unchanged. */
:root:not([data-theme="dark"]) .drawer-header,
:root:not([data-theme="dark"]) .drawer-header * {
    color: #ffffff !important;
}

/* Ensure SVG icons in the header inherit the text color */
:root:not([data-theme="dark"]) .drawer-header svg {
    stroke: currentColor !important;
}
/* Drawer Header Contrast Fix (Dark Mode)
   The dark themes use brighter accent colors; without adjustment, header text (especially
   secondary labels like "By Tab") can lose contrast against the branded gradient.
   This darkens the gradient slightly and bumps header text contrast while preserving the look. */
[data-theme="dark"] .drawer-header {
    background:
        linear-gradient(135deg, rgba(2, 6, 23, 0.55) 0%, rgba(2, 6, 23, 0.65) 100%),
        linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-navy) 100%);
}

/* Make secondary header text more readable on the branded gradient */
[data-theme="dark"] .drawer-header .saved-view-tab {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .drawer-header .saved-view-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .drawer-header .saved-view-tab.active {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
}

/* Catch any Tailwind-style text-white/XX utility used inside drawer headers */
[data-theme="dark"] .drawer-header [class*="text-white/70"],
[data-theme="dark"] .drawer-header [class*="text-white/60"],
[data-theme="dark"] .drawer-header [class*="text-white/50"] {
    color: rgba(255, 255, 255, 0.86) !important;
}

/* Primary action button */
.btn-brand {
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-navy) 100%);
    color: white;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: opacity var(--transition-normal);
}

.btn-brand:hover {
    opacity: 0.9;
}

/* Brand border for hover states (used in dropzones, etc) */
.border-brand {
    border-color: var(--primr-teal);
}

/* Loading spinner with brand color */
.spinner-brand {
    border-color: var(--primr-teal);
    border-top-color: transparent;
}

.gradient-bg {
    background: linear-gradient(135deg, var(--primr-navy-dark) 0%, var(--primr-teal-dark) 50%, var(--primr-navy) 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

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

.nav-tab {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
    border-bottom: 3px solid transparent;
}

.nav-tab::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primr-teal), var(--primr-aqua));
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.nav-tab.active,
.nav-tab.active:hover,
.nav-tab.active:focus-visible {
    background: var(--primr-navy);
    color: white;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.nav-tab.active::after {
    width: 100%;
}

.nav-tab:hover:not(.active) {
    background: rgba(0, 140, 168, 0.08);
    color: var(--primr-teal);
    transform: translateY(-2px);
}

.nav-tab:hover:not(.active)::after {
    width: 60%;
}

/* =============================================
   LANDING PAGE / OVERVIEW
   ============================================= */

.feature-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 2rem;
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primr-teal), var(--primr-aqua));
    transform: scaleX(0);
    transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    border-color: var(--primr-teal);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
}

.feature-card h3 {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primr-navy);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-aqua) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 140, 168, 0.2);
}

.study-path-container {
    background: linear-gradient(135deg, rgba(0, 140, 168, 0.05) 0%, rgba(0, 68, 124, 0.05) 100%);
    border: 2px solid var(--primr-teal);
    border-radius: 1.5rem;
    padding: 2rem;
}

.study-step {
    background: var(--bg-white);
    border-left: 4px solid var(--primr-purple);
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.study-step:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(84, 41, 136, 0.15);
}

.step-number {
    background: var(--primr-purple);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.cta-button {
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-aqua) 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 140, 168, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 140, 168, 0.4);
}

.cta-button:active {
    transform: translateY(0);
}

/* =============================================
   CONTENT SECTIONS
   ============================================= */

.card-gradient {
    background: linear-gradient(135deg, var(--primr-teal) 0%, var(--primr-aqua) 100%);
}

.doc-card-blue {
    background: linear-gradient(135deg, var(--primr-aqua) 0%, var(--primr-purple) 100%);
}

.doc-card-green {
    background: linear-gradient(135deg, var(--primr-green) 0%, var(--primr-teal) 100%);
}

.doc-card-orange {
    background: linear-gradient(135deg, var(--primr-gold) 0%, var(--primr-yellow) 100%);
}

.quiz-gradient {
    background: linear-gradient(135deg, var(--primr-aqua) 0%, var(--primr-teal) 100%);
}

/* =============================================
   INTERACTIVE ELEMENTS
   ============================================= */



.document-card {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
}

.document-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.doc-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.doc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    filter: brightness(1.05);
}

.doc-card:active {
    transform: translateY(0);
}

.glossary-item-enhanced { transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; }

.glossary-item-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    /* The filter below was causing the table header issue. It has been removed. */
    /* filter: brightness(1.03); */
}


/* Historical Foundations */
.irb-scenario, .historical-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.irb-scenario:hover, .historical-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(0, 140, 168, 0.1);
}

.irb-scenario.selected, .historical-card.selected {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 32px -5px rgba(0, 0, 0, 0.2),
                0 8px 16px -5px rgba(0, 0, 0, 0.12) !important;
    border-left-width: 10px !important;
}

/* Ensure selected state is visible even when focused */
.irb-scenario.selected:focus, .historical-card.selected:focus {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 32px -5px rgba(0, 0, 0, 0.2),
                0 8px 16px -5px rgba(0, 0, 0, 0.12) !important;
    border-left-width: 10px !important;
}

.browse-mode-btn.active {
    border-bottom-color: var(--primr-purple);
    color: var(--primr-purple);
}

.historical-connection {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.historical-connection.revealed {
    opacity: 1;
    transform: translateY(0);
}

.timeline-step {
    transition: all 0.3s ease;
}

.timeline-step.active {
    background-color: var(--primr-navy);
    color: white;
}

/* =============================================
   MODAL & ANIMATIONS
   ============================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content-animated {
    animation: fadeIn 0.3s ease-out;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.comparison-table {
    font-size: 0.9rem;
}

.agency-badge {
    font-size: 0.75rem;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

*:focus {
    outline: 2px solid transparent;
}

*:focus-visible {
    outline: 3px solid var(--primr-teal);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 140, 168, 0.2);
}

button:focus-visible,
.nav-tab:focus-visible {
    outline: 3px solid var(--primr-teal);
    outline-offset: 2px;
}

.historical-card:focus-visible,
.glossary-item-enhanced:focus-visible,
.document-card:focus-visible,
.doc-card:focus-visible {
    outline: 3px solid var(--primr-teal);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primr-navy);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 100;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

.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;
}

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

/* Mobile touch targets */
@media (max-width: 768px) {
    button,
    .nav-tab,
    .historical-card {
        min-height: 44px;
        min-width: 44px;
    }
}

/* =============================================
   TYPOGRAPHY
   ============================================= */

h2 {
    color: var(--primr-navy);
    letter-spacing: -0.02em;
    font-weight: 700;
}

h3 {
    color: var(--text-primary);
    font-weight: 600;
}


/* === Fix: Collapse Historical Foundations detail panel when closed ========= */
.historical-connection:not(.revealed),
.event-detail.closed,
.theme-detail.closed,
.detail-box.closed {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure visible state uses normal flow */
.historical-connection.revealed {
  display: block !important;
}
/* ========================================================================= */



/* === Focus Color Unification: PRIM&R Navy =============================== */
:focus,
:focus-visible,
button:focus,
button:focus-visible,
.nav-tab:focus,
.nav-tab:focus-visible,
a:focus,
a:focus-visible,
[aria-label="Close details"]:focus,
[aria-label="Close details"]:focus-visible {
  outline: 3px solid #00447C !important;   /* PRIM&R Navy */
  outline-offset: 2px !important;
  box-shadow: none !important;
  outline-color: #00447C !important;
}
[aria-label="Close details"] {
  border-radius: 4px !important;
}
/* ======================================================================= */



/* === Keyboard-Only Focus Visibility ===================================== */
/* Do NOT show blue focus on mouse click */
*:focus { outline: none !important; box-shadow: none !important; }
/* Show consistent PRIM&R Navy focus ONLY for keyboard focus */
:focus-visible {
  outline: 3px solid #00447C !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* Close control stays square and consistent */
[aria-label="Close details"]:focus { outline: none !important; box-shadow: none !important; }
[aria-label="Close details"]:focus-visible {
  outline: 3px solid #00447C !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}
/* ======================================================================= */



/* === Tabs: show focus on keyboard only ================================ */
/* Remove focus rings on mouse click for tabs */
[role="tab"]:focus:not(:focus-visible),
.nav-tab:focus:not(:focus-visible),
button.tab:focus:not(:focus-visible),
button[role="tab"]:focus:not(:focus-visible),
.browse-mode-btn:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure keyboard users still see the navy outline on tabs */
[role="tab"]:focus-visible,
.nav-tab:focus-visible,
button.tab:focus-visible,
button[role="tab"]:focus-visible,
.browse-mode-btn:focus-visible {
  outline: 3px solid #00447C !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* ===================================================================== */


/* =============================================
   INTERACTIVE HISTORICAL FOUNDATIONS
   ============================================= */

/* Problem cards - clickable "What Went Wrong" items */
.problem-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}

.problem-card:hover {
    transform: translateX(6px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.15);
}

.problem-card:active {
    transform: translateX(4px);
}

/* Selected problem card - stays raised like Connections tiles */
.problem-card.selected-problem {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%) !important;
    border-left-width: 6px !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3) !important;
    transform: translateX(4px) !important;
}

.problem-text {
    line-height: 1.5;
}

.click-hint {
    opacity: 0.8;
    transition: opacity 0.2s;
}

.problem-card:hover .click-hint {
    opacity: 1;
}

/* Lessons panel - revealed information */
.lessons-panel {
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lessons-panel.hidden {
    display: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

/* Smooth transitions for lesson items */
.lessons-panel ul li {
    animation: fadeInUp 0.3s ease forwards;
    opacity: 0;
}

.lessons-panel ul li:nth-child(1) { animation-delay: 0.1s; }
.lessons-panel ul li:nth-child(2) { animation-delay: 0.2s; }
.lessons-panel ul li:nth-child(3) { animation-delay: 0.3s; }
.lessons-panel ul li:nth-child(4) { animation-delay: 0.4s; }
.lessons-panel ul li:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close button styling */
.close-lessons-btn {
    transition: all 0.2s ease;
}

.close-lessons-btn:hover {
    transform: scale(1.05);
}

/* Focus styles for accessibility */
.problem-card:focus {
    outline: 3px solid #542988;
    outline-offset: 2px;
}

.problem-card:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Improved spacing for case detail cards */
.case-detail-card {
    scroll-margin-top: 20px;
}

/* Gradient background for lessons panel */
.animate-slideIn {
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced visual hierarchy */
.lessons-panel h5 {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .problem-card {
        padding: 0.875rem;
    }
    
    .lessons-panel {
        padding: 1rem;
    }
    
    .problem-card:hover {
        transform: translateX(4px);
    }
}

/* Print styles */
@media print {
    .problem-card {
        break-inside: avoid;
    }
    
    .lessons-panel {
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
}

/* Flashcard Styles */
.flashcard-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.flashcard {
    perspective: 1000px;
    height: 500px;
    cursor: pointer;
    margin-bottom: 2rem;
    outline: none;
}

.flashcard:focus {
    outline: 3px solid #8B5CF6;
    outline-offset: 4px;
    border-radius: 1rem;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    background: white;
    border: 2px solid #e5e7eb;
    overflow: hidden;
}

.flashcard-front {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-left: 6px solid #8B5CF6;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.flashcard-back {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    transform: rotateY(180deg);
    border-left: 6px solid var(--primr-teal);
}

.flashcard-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.flashcard-content-wrapper::-webkit-scrollbar {
    width: 8px;
}

.flashcard-content-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.flashcard-content-wrapper::-webkit-scrollbar-thumb {
    background: #8B5CF6;
    border-radius: 4px;
}

.flashcard-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: #7C3AED;
}

.flashcard-back-centered {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow-y: auto;
}

.flashcard-back-centered > div:first-child {
    max-height: 100%;
    overflow-y: auto;
}

.flashcard-hint {
    padding: 1rem;
    text-align: center;
    background: linear-gradient(to top, rgba(255,255,255,0.95), transparent);
    border-top: 1px solid #e5e7eb;
}

.scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(139, 92, 246, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: none;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

.flashcard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.control-btn {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-weight: 600;
    color: var(--primr-navy);
    cursor: pointer;
    transition: all 0.2s;
}

.control-btn:hover:not(:disabled),
.control-btn:focus:not(:disabled) {
    border-color: var(--primr-purple);
    background: #faf5ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    z-index: 2;
}

.control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.progress-indicator {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #8B5CF6, var(--primr-navy));
    color: white;
    border-radius: 0.5rem;
    font-size: 1rem;
}

@media (max-width: 640px) {
    .flashcard {
        height: 450px;
    }
    
    .flashcard-controls {
        flex-direction: column;
    }
    
    .control-btn {
        width: 100%;
    }
    
    #study-controls .flex {
        flex-direction: column;
    }
    
    #study-controls button {
        width: 100%;
    }
}


/* SR: Spacing + Type Hierarchy (final) */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
}
html{ font-size:16px; }
body{ line-height:1.55; }
h1,h2,h3{ color: var(--primr-navy); }
h1{ font-size:1.875rem; line-height:1.25; margin: var(--space-7) 0 var(--space-4); }
h2{ font-size:1.5rem;   line-height:1.30; margin: var(--space-6) 0 var(--space-3); }
h3{ font-size:1.25rem;  line-height:1.35; margin: var(--space-5) 0 var(--space-2); }
p, li{ margin-bottom: var(--space-3); }

/* Focus-visible parity */
:focus-visible{ outline:3px solid var(--primr-aqua); outline-offset:2px; border-radius:10px; }

/* Hero/gradient white headings */
header[class*="bg-"] h1, header[class*="from-"] h1,
header[class*="bg-"] .h1, header[class*="from-"] .h1{ color:#fff !important; }

/* Tab/page subtle transitions */
@keyframes fadeSlideIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.content-section.anim-fade-in{ animation:fadeSlideIn 180ms cubic-bezier(.2,0,0,1); }
@media (prefers-reduced-motion: reduce){ .content-section.anim-fade-in{ animation:none; } }

/* Title contrast fix for gradient hero */
.gradient-bg h1, .gradient-bg .h1 { color:#fff !important; }
.gradient-bg p, .gradient-bg .subtitle, .gradient-bg .lead { color:#fff !important; }


/* overlay removed per design restore */
.gradient-bg {
  position: relative;
}
.gradient-bg__remove_before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08); /* adjust to .22–.28 if needed */
  pointer-events: none;
  border-radius: inherit;
}
.gradient-bg > * { position: relative; }

/* Subtle flashcard flip */
:root{ --flip-dur:160ms; --flip-ease:cubic-bezier(.2,0,0,1); }
.flashcard{ perspective: 900px; }
.flashcard-inner{
  transition: transform var(--flip-dur) var(--flip-ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.flashcard-front, .flashcard-back{ backface-visibility: hidden; }
.flashcard-back{ transform: rotateY(180deg); }
.flashcard.flipped .flashcard-inner{ transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce){ .flashcard-inner{ transition: none; } }


/* Flashcard elevation: the visible face gets the deeper shadow */
.flashcard{ perspective: 900px; }
.flashcard-inner{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--flip-dur,160ms) cubic-bezier(.2,0,0,1);
}

.flashcard-front, .flashcard-back{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.flashcard-back{ transform: rotateY(180deg); }

/* Stronger shadow on the face that's currently forward */
.flashcard:not(.flipped) .flashcard-front{ box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.flashcard.flipped .flashcard-back{ box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* Optional hover nudge */
.flashcard:hover .flashcard-front,
.flashcard:hover .flashcard-back{
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}

/* Reduced motion: no transform animation, but keep the elevation cue */
@media (prefers-reduced-motion: reduce){
  .flashcard-inner{ transition: none; }
}
/* =============================================
   ACCESSIBILITY - Consolidated Styles
   ============================================= */

/* =============================================
   SKIP LINK
   ============================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: #fff;
  color: #000;
  padding: .5rem .75rem;
  border: 2px solid #000;
  border-radius: .5rem;
  z-index: 10000;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .15);
}

/* =============================================
   SCREEN READER ONLY CONTENT
   ============================================= */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =============================================
   BADGE/TAG CONTRAST
   ============================================= */

.badge,
.tag,
.pill {
  color: #111;
}

.badge[data-contrast="dark"],
.tag[data-contrast="dark"],
.pill[data-contrast="dark"] {
  color: #fff;
}

/* =============================================
   GLOSSARY CONTROLS - Consolidated Styles
   ============================================= */

/* Custom color variables for glossary buttons */
:root {
  --glossary-mode: #542988;
  --glossary-focus: #00447C;
  --glossary-aqua: #0B6AA1;
  --glossary-hover-purple: #F6F3FA;
  --glossary-hover-aqua: #F0F8FF;
}

/* Flashcard container needs overflow visible for shadows */
#flashcard-container {
  overflow: visible !important;
}

/* =============================================
   GLOSSARY BUTTON STYLES
   ============================================= */

/* Study Mode Toggle */
#study-mode-toggle {
  background: #fff !important;
  border: 2px solid var(--glossary-mode) !important;
  color: var(--glossary-mode) !important;
}

#study-mode-toggle:hover {
  background: var(--glossary-hover-purple) !important;
}

#study-mode-toggle:focus-visible {
  outline: 3px solid var(--primr-navy);
  outline-offset: 2px;
}

#study-mode-toggle * {
  color: currentColor !important;
  fill: currentColor !important;
}

/* Direction Toggle */
#direction-toggle {
  background: #fff !important;
  border: 2px solid var(--glossary-mode) !important;
  color: var(--glossary-mode) !important;
}

#direction-toggle:hover {
  background: var(--glossary-hover-purple) !important;
}

#direction-toggle:focus-visible {
  outline: 3px solid var(--primr-navy);
  outline-offset: 2px;
}

#direction-toggle * {
  color: currentColor !important;
  fill: currentColor !important;
}

/* Shuffle Cards */
#shuffle-cards {
  background: #fff !important;
  border: 2px solid var(--glossary-aqua) !important;
  color: var(--glossary-aqua) !important;
}

#shuffle-cards:hover {
  background: var(--glossary-hover-aqua) !important;
}

#shuffle-cards:focus-visible {
  outline: 3px solid var(--primr-navy);
  outline-offset: 2px;
}

#shuffle-cards * {
  color: currentColor !important;
  fill: currentColor !important;
}

/* =============================================
   MOTION AND INTERACTION
   ============================================= */

/* Apply motion to control buttons */
#study-mode-toggle,
#direction-toggle,
#shuffle-cards,
#flashcard-container .control-btn,
#flashcard-container button[onclick*="prevCard"],
#flashcard-container button[onclick*="nextCard"] {
  transition: transform .15s ease, box-shadow .15s ease !important;
  will-change: transform, box-shadow;
}

/* Hover lift and shadow */
#study-mode-toggle:hover,
#direction-toggle:hover,
#shuffle-cards:hover,
#flashcard-container .control-btn:hover,
#flashcard-container button[onclick*="prevCard"]:hover,
#flashcard-container button[onclick*="nextCard"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12) !important;
}

/* Keyboard focus lift and shadow */
#study-mode-toggle:focus-visible,
#study-mode-toggle:focus,
#direction-toggle:focus-visible,
#direction-toggle:focus,
#shuffle-cards:focus-visible,
#shuffle-cards:focus,
#flashcard-container button[onclick*="prevCard"]:focus-visible,
#flashcard-container button[onclick*="prevCard"]:focus,
#flashcard-container button[onclick*="nextCard"]:focus-visible,
#flashcard-container button[onclick*="nextCard"]:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12) !important;
}

/* Pressed state */
#study-mode-toggle:active,
#direction-toggle:active,
#shuffle-cards:active,
#flashcard-container .control-btn:active,
#flashcard-container button[onclick*="prevCard"]:active,
#flashcard-container button[onclick*="nextCard"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06) !important;
}

/* =============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  #study-mode-toggle,
  #direction-toggle,
  #shuffle-cards,
  #flashcard-container .control-btn,
  #flashcard-container button[onclick*="prevCard"],
  #flashcard-container button[onclick*="nextCard"] {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  #study-mode-toggle:focus-visible,
  #direction-toggle:focus-visible,
  #shuffle-cards:focus-visible,
  #flashcard-container button[onclick*="prevCard"]:focus-visible,
  #flashcard-container button[onclick*="nextCard"]:focus-visible {
    transform: none;
    box-shadow: none;
  }
}

/* =============================================
   STUDY MODE CARDS
   ============================================= */

/* Prevent card lift when it contains interactive buttons */
.glossary-card:has(button),
.glossary-card:has([role="button"]) {
  transform: none !important;
  box-shadow: none !important;
}

.glossary-card:has(button):hover,
.glossary-card:has([role="button"]):hover,
.glossary-card:has(button):focus-within,
.glossary-card:has([role="button"]):focus-within {
  transform: none !important;
  box-shadow: none !important;
}

/* =============================================
   INTEGRATED PATCHES - Pro Site & Hotfixes
   (Previously in assets/css/)
   ============================================= */

/* ======== Pro-Site Visual System ======== */
/* Icons */
.material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  line-height: 1;
  vertical-align: -2px;
}
.icon--sm { font-size: 18px; }
.icon--lg { font-size: 24px; }

/* Emojis */
.emoji {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

/* Images */
img {
  image-rendering: auto;
}
.card img,
.tile img,
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Aspect ratio helpers */
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-4x3  { aspect-ratio: 4 / 3; }
.ar-1x1  { aspect-ratio: 1 / 1; }

/* Elevation & Motion */
:root {
  --elev-0: 0 0 0 rgba(0,0,0,0);
  --elev-1: 0 2px 8px rgba(0,0,0,.08);
  --elev-2: 0 6px 18px rgba(0,0,0,.12);
  --brand: #00447C; /* PRIM&R Navy */
}

.card,
.tile,
.button-like {
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--elev-0);
  border-radius: 12px;
  background: #fff;
}

.card:hover,
.card:focus-within,
.tile:hover,
.tile:focus-within,
.button-like:hover,
.button-like:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

/* Accessible Focus */
:where(a, button, .button-like, .card, .tile) {
  outline: none;
}
:where(a, button, .button-like, .card, .tile):focus-visible {
  box-shadow: var(--elev-2), 0 0 0 2px #fff, 0 0 0 4px var(--brand);
  transform: translateY(-2px);
}

/* Captions */
.figure { display: grid; gap: .5rem; }
.figcaption { font-size: .875rem; color: #545b66; }

/* Consistent spacing for headers followed by search/filters */
.header + .controls,
.header + .search,
h1 + .controls,
h1 + .search,
h2 + .controls,
h2 + .search {
  margin-top: 0.75rem;
}

/* Button-like links */
.button-like {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

/* Cards grid defaults */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* Ensure contrast for small meta text */
.meta, .subtle, .muted {
  color: #495268;
}

/* Prevent double-scroll issues in panels with fixed headers */
.tab-panel, .panel {
  overscroll-behavior: contain;
}

/* Make hover affordance consistent on lists */
.list-item,
.doc-item {
  transition: background-color .12s ease, box-shadow .12s ease;
  border-radius: 10px;
}
.list-item:hover,
.doc-item:hover {
  background: rgba(0,0,0,0.033);
  box-shadow: var(--elev-1);
}

/* Global image polish */
img.enhanced, .rounded-lg > img, .bg-white > img, .p-4 > img, .p-6 > img, .p-8 > img {
  border-radius: 12px;
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;
}

/* Cards / tiles: Tailwind-like containers */
.bg-white.rounded-lg,
.rounded-lg.bg-white,
.bg-white.shadow, .rounded-lg.shadow,
.bg-white.p-4, .bg-white.p-6, .bg-white.p-8 {
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.bg-white.rounded-lg:hover,
.bg-white.rounded-lg:focus-within,
.rounded-lg.bg-white:hover,
.rounded-lg.bg-white:focus-within,
.bg-white.shadow:hover,
.bg-white.shadow:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Lists that act like menus */
ul > li a,
ul > li.button-like,
ul > li > button {
  transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
  border-radius: 10px;
  display: block;
  padding: .5rem .6rem;
}
ul > li a:hover,
ul > li > button:hover,
ul > li a:focus-visible,
ul > li > button:focus-visible {
  background: rgba(0,0,0,0.035);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Accessible focus ring for all focusable elements */
:where(a, button, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand) !important;
  border-radius: 10px;
}

/* Header-to-controls spacing */
h1 + .flex, h2 + .flex, h3 + .flex,
.header + .flex {
  margin-top: 0.75rem;
}

/* ======== r3a Hotfix - Glossary & Quiz Specific ======== */

/* Keep tables flat in Glossary */
section[id*="gloss"] table,
section[class*="gloss"] table,
section[data-section*="gloss"] table { 
  box-shadow: none !important; 
  transform: none !important; 
}

/* Elevate the OUTER glossary term card on hover & keyboard focus */
section[id*="gloss"] .bg-white.rounded-lg:has(> table),
section[id*="gloss"] .bg-white.rounded-2xl:has(> table),
section[class*="gloss"] .bg-white.rounded-lg:has(> table),
section[class*="gloss"] .bg-white.rounded-2xl:has(> table),
section[data-section*="gloss"] .bg-white.rounded-lg:has(> table),
section[data-section*="gloss"] .bg-white.rounded-2xl:has(> table) {
  transition: transform .15s ease, box-shadow .15s ease, background-color .12s ease;
  border-radius: 12px;
}
section[id*="gloss"] .bg-white.rounded-lg:has(> table):hover,
section[id*="gloss"] .bg-white.rounded-2xl:has(> table):hover,
section[class*="gloss"] .bg-white.rounded-lg:has(> table):hover,
section[class*="gloss"] .bg-white.rounded-2xl:has(> table):hover,
section[data-section*="gloss"] .bg-white.rounded-lg:has(> table):hover,
section[data-section*="gloss"] .bg-white.rounded-2xl:has(> table):hover,
section[id*="gloss"] .bg-white.rounded-lg:has(:focus-visible),
section[id*="gloss"] .bg-white.rounded-2xl:has(:focus-visible),
section[class*="gloss"] .bg-white.rounded-lg:has(:focus-visible),
section[class*="gloss"] .bg-white.rounded-2xl:has(:focus-visible),
section[data-section*="gloss"] .bg-white.rounded-lg:has(:focus-visible),
section[data-section*="gloss"] .bg-white.rounded-2xl:has(:focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Knowledge Check: lift answer options/buttons only */
section[id*="quiz"] .answer-option,
section[class*="quiz"] .answer-option,
section[data-section*="quiz"] .answer-option,
section[id*="quiz"] button:not([aria-disabled="true"]),
section[class*="quiz"] button:not([aria-disabled="true"]),
section[data-section*="quiz"] button:not([aria-disabled="true"]),
section[id*="knowledge"] .answer-option,
section[class*="knowledge"] .answer-option,
section[data-section*="knowledge"] .answer-option,
section[id*="knowledge"] button:not([aria-disabled="true"]),
section[class*="knowledge"] button:not([aria-disabled="true"]),
section[data-section*="knowledge"] button:not([aria-disabled="true"]) {
  transition: transform .15s ease, box-shadow .15s ease, background-color .12s ease;
  border-radius: 10px;
}
section[id*="quiz"] .answer-option:hover,
section[class*="quiz"] .answer-option:hover,
section[data-section*="quiz"] .answer-option:hover,
section[id*="quiz"] .answer-option:focus-visible,
section[class*="quiz"] .answer-option:focus-visible,
section[data-section*="quiz"] .answer-option:focus-visible,
section[id*="quiz"] button:not([aria-disabled="true"]):hover,
section[class*="quiz"] button:not([aria-disabled="true"]):hover,
section[data-section*="quiz"] button:not([aria-disabled="true"]):hover,
section[id*="quiz"] button:not([aria-disabled="true"]):focus-visible,
section[class*="quiz"] button:not([aria-disabled="true"]):focus-visible,
section[data-section*="quiz"] button:not([aria-disabled="true"]):focus-visible,
section[id*="knowledge"] .answer-option:hover,
section[class*="knowledge"] .answer-option:hover,
section[data-section*="knowledge"] .answer-option:hover,
section[id*="knowledge"] .answer-option:focus-visible,
section[class*="knowledge"] .answer-option:focus-visible,
section[data-section*="knowledge"] .answer-option:focus-visible,
section[id*="knowledge"] button:not([aria-disabled="true"]):hover,
section[class*="knowledge"] button:not([aria-disabled="true"]):hover,
section[data-section*="knowledge"] button:not([aria-disabled="true"]):hover,
section[id*="knowledge"] button:not([aria-disabled="true"]):focus-visible,
section[class*="knowledge"] button:not([aria-disabled="true"]):focus-visible,
section[data-section*="knowledge"] button:not([aria-disabled="true"]):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ======== r3d Glossary Cards (Final) ======== */

/* Whole Glossary card lifts; tables stay flat */
.glossary-card {
  transition: transform .15s ease, box-shadow .15s ease, background-color .12s ease;
  border-radius: 12px;
  will-change: transform;
  cursor: pointer;
}
.glossary-card:hover,
.glossary-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.glossary-card table { 
  box-shadow: none !important; 
  transform: none !important; 
}
.glossary-card :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00447C;
  border-radius: 10px;
}

/* Glossary Source Pill Link Styles */
.source-pill {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
}

.source-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 68, 124, 0.2);
}

.source-pill:focus {
  outline: 2px solid #00447C;
  outline-offset: 2px;
}

.source-pill:active {
  transform: translateY(0);
}

/* Ensure pills in tables also get the hover effect */
table .source-pill {
  display: inline-flex;
}

/* =============================================
   SAVED DRAWER TABS
   ============================================= */

.saved-view-tab {
    color: rgba(255, 255, 255, 0.7);
}

.saved-view-tab:hover {
    color: white;
}

.saved-view-tab.active {
    background: white;
    color: #1F2937;
}

/* === Glossary List Hover (forced precedence) === */
#glossary-container > article.glossary-card {
  background-color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background-color .12s ease;
  border-radius: 12px;
  will-change: transform;
  position: relative;
}

#glossary-container > article.glossary-card table {
  box-shadow: none !important;
  transform: none !important;
}
#glossary-container > article.glossary-card :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00447C;
  border-radius: 10px;
}
/* === End Glossary List Hover (forced precedence) === */



/* === Glossary list view: source-pill link hover === */
#glossary-container a.source-pill:hover,
#glossary-container a.source-pill:focus-visible {
  background-color: #00447C !important; /* PRIM&R Navy */
  color: #ffffff !important;
  border-color: #00447C !important;
  box-shadow: 0 2px 4px rgba(0, 68, 124, 0.28);
  text-decoration: none;
  outline: none;
}
/* keep keyboard focus ring consistent on the pill itself */
#glossary-container a.source-pill:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #00447C;
}

/* === Flashcard-only: slightly stronger pill lift === */
.flashcard a.source-pill:hover,
.flashcard a.source-pill:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 68, 124, 0.22);
}

/* === Glossary list view: source-pill micro-lift === */
#glossary-container a.source-pill:hover,
#glossary-container a.source-pill:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 68, 124, 0.18);
}




/* === Glossary list view: match flashcard pill styling === */
#glossary-container a.source-pill {
  color: #00447C !important;
  border-color: #00447C !important;
  background-color: #ffffff !important;
}
#glossary-container a.source-pill:hover,
#glossary-container a.source-pill:focus-visible {
  background-color: #00447C !important;
  color: #ffffff !important;
  border-color: #00447C !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 68, 124, 0.18);
  text-decoration: none;
  outline: none;
}
/* === Restored from user baseline: glossary card lift === */
.glossary-card {
  transition: transform .15s ease, box-shadow .15s ease, background-color .12s ease;
  border-radius: 12px;
  will-change: transform;
  cursor: pointer;
}
.glossary-card:hover,
.glossary-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* === Glossary list view pills: match flashcards on HOVER/FOCUS (no base change) === */
#glossary-container a.source-pill:hover,
#glossary-container a.source-pill:focus-visible {
  background-color: #00447C !important; /* PRIM&R Navy */
  color: #ffffff !important;
  border-color: #00447C !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 68, 124, 0.18);
  text-decoration: none;
  outline: none;
}


/* === Glossary list view: force card lift (transform-only) === */
#glossary-container article.glossary-card:hover,
#glossary-container article.glossary-card:focus-within {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}


/* === FIX: Glossary Card Hover Effect & Table Header Integrity === */

/* 1. Add a subtle background color change on hover to replace the filter effect */
.glossary-card:hover,
.glossary-card:focus-within {
  background-color: #FDFDFE;
}

/* 2. Explicitly keep the table header's original background color on hover */
.glossary-card:hover table thead tr,
.glossary-card:focus-within table thead tr {
  background-color: #F9FAFB !important; /* Tailwind's 'bg-gray-50' */
}
/* ===== GLOBAL SEARCH FEATURE STYLES ===== */

/* Search highlight animation - visible on all backgrounds */
.search-highlight {
  animation: searchPulse 1.2s ease-in-out 3;
  /* Multi-layer approach for visibility on all backgrounds */
  outline: 4px solid #FDB924 !important; /* Gold/yellow outline */
  outline-offset: 2px;
  box-shadow: 
    0 0 0 2px #FFFFFF,           /* White inner ring */
    0 0 0 8px rgba(253, 185, 36, 0.3), /* Gold glow */
    0 4px 12px rgba(0, 0, 0, 0.2) !important; /* Shadow for depth */
  border-radius: 8px;
  background-color: rgba(253, 185, 36, 0.15) !important;
  scroll-margin-top: 100px;
  position: relative;
  z-index: 10;
}

@keyframes searchPulse {
  0%, 100% {
    outline-color: #FDB924; /* Gold */
    box-shadow: 
      0 0 0 2px #FFFFFF,
      0 0 0 8px rgba(253, 185, 36, 0.3),
      0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    outline-color: #F8981D; /* Darker orange */
    box-shadow: 
      0 0 0 2px #FFFFFF,
      0 0 0 12px rgba(248, 152, 29, 0.4), /* Bigger glow */
      0 6px 16px rgba(0, 0, 0, 0.25);
  }
}

/* Search result item interactions */
.search-result-item {
  position: relative;
}

.search-result-item:focus {
  outline: 2px solid #007CC2;
  outline-offset: -2px;
}

/* Ensure glossary table headers keep their background on hover 
   Explicitly keep the table header's original background color on hover */
.glossary-card:hover table thead tr,
.glossary-card:focus-within table thead tr {
  background-color: #F9FAFB !important; /* Tailwind's 'bg-gray-50' */
}

/*
   =============================================
   DRAWER BUTTON VISIBILITY - SMOOTH TRANSITION
   =============================================
*/

/* Apply smooth transition to both buttons */
#global-search-trigger,
#saved-drawer-toggle {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* When any drawer is open, hide both buttons */
#saved-drawer:not(.translate-x-full) ~ #global-search-trigger,
#saved-drawer:not(.translate-x-full) ~ #saved-drawer-toggle,
#global-search-drawer:not(.translate-x-full) ~ #global-search-trigger,
#global-search-drawer:not(.translate-x-full) ~ #saved-drawer-toggle {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

/* Ensure drawers appear on top of the trigger buttons */
#global-search-drawer,
#saved-drawer {
  z-index: 50;
}

#global-search-overlay,
#saved-drawer-overlay {
    z-index: 45;
}

#global-search-trigger,
#saved-drawer-toggle {
    z-index: 40;
}
/* =============================================
   HISTORICAL MODAL OVERLAY
   ============================================= */

/* Modal backdrop */
.historical-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.historical-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal content container */
.historical-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    padding-top: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    position: relative;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

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

/* Close button in modal */
.historical-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.2s ease;
    z-index: 10;
}

.historical-modal-close:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #374151;
}

.historical-modal-close:focus {
    outline: 3px solid var(--primr-navy);
    outline-offset: 2px;
}

/* Smooth scrolling within modal */
.historical-modal-content {
    scroll-behavior: smooth;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Hide the old detail container when using modal */
.historical-connection {
    display: none !important;
}


/* =============================================
   PROFESSIONAL LOADING STATES & ANIMATIONS
   ============================================= */

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-light);
    border-radius: 50%;
    border-top-color: var(--primr-teal);
    animation: spin 1s ease-in-out infinite;
}

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

.skeleton-loader {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border-medium) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

.fade-in {
    animation: fadeIn var(--transition-normal) ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================
   ENHANCED FORM STYLING
   ============================================= */

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    font-size: 16px;
    transition: all var(--transition-normal) ease;
    background: var(--bg-white);
}

.form-input:focus {
    outline: none;
    border-color: var(--primr-teal);
    box-shadow: 0 0 0 3px rgba(0, 140, 168, 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-button {
    padding: 12px 24px;
    background: var(--primr-teal);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.form-button:hover {
    background: var(--primr-teal-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.form-button:active {
    transform: translateY(0);
}

/* =============================================
   PROFESSIONAL ALERTS & NOTIFICATIONS
   ============================================= */

.alert {
    padding: 16px 20px;
    border-radius: 8px;
    margin: 16px 0;
    font-weight: 500;
    animation: slideDown var(--transition-normal) ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #1e40af;
    border: 1px solid #bae6fd;
}

/* =============================================
   RESPONSIVE ENHANCEMENTS
   ============================================= */

@media (max-width: 768px) {
    .feature-card {
        padding: 1.5rem;
    }
    
    .form-input, .form-button {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Missing from compiled Tailwind — add explicitly */
.max-w-5xl { max-width: 64rem; }

/* Constrain main content width regardless of container nesting */
#main-content {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Keep main nav tabs visible while scrolling at all viewport sizes */
#main-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}



/* Glossary content formatting */
#glossary-container article p {
  white-space: pre-line;
}

/* ========================================
   Document Modal Styles
   ======================================== */

.doc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.doc-modal {
    background: white;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.doc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    gap: 1rem;
}

.doc-modal-title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.doc-modal-description {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.doc-modal-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.doc-modal-actions button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}

.doc-modal-actions button:hover {
    transform: scale(1.1);
    color: #374151;
}

.doc-modal-actions .doc-close-btn {
    font-size: 1.5rem;
    line-height: 1;
    color: #9ca3af;
}

.doc-modal-actions .doc-close-btn:hover {
    color: #6b7280;
}

.doc-modal-content-wrapper {
    flex: 1;
    overflow: hidden;
}

.doc-modal-content {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .doc-modal {
        height: 95vh;
        max-width: 100%;
    }
    
    .doc-modal-header {
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .doc-modal-actions {
        justify-content: flex-end;
    }
}

/* =============================================
   THEME TOGGLE BUTTON
   ============================================= */

.theme-toggle {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    z-index: 1000;
    color: white;
}



[data-theme="dark"] .theme-toggle {
    /* Themed "glass" toggle that adapts to the active dark-style palette */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .theme-toggle:focus-visible {
    outline: 2px solid var(--border-medium);
    outline-offset: 3px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--primr-teal-light);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-normal) ease;
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

/* Mobile adjustments for theme toggle */
@media (max-width: 768px) {
    .theme-toggle {
        top: 1rem;
        left: 1rem;
        width: 44px;
        height: 44px;
        padding: 0.625rem;
    }
    
    .theme-toggle svg {
        width: 20px;
        height: 20px;
    }
}

/* Extra small mobile devices - ensure safe positioning */
@media (max-width: 480px) {
    .theme-toggle {
        top: 1.25rem;
        left: 1.25rem;
    }
}

/* Hide theme toggle when any drawer is open */
#saved-drawer:not(.translate-x-full) ~ .theme-toggle,
#notes-drawer:not(.translate-x-full) ~ .theme-toggle,
#global-search-drawer:not(.translate-x-full) ~ .theme-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

/* Also hide when drawers are open (alternative selector) */
body:has(#saved-drawer:not(.translate-x-full)) .theme-toggle,
body:has(#notes-drawer:not(.translate-x-full)) .theme-toggle,
body:has(#global-search-drawer:not(.translate-x-full)) .theme-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

/* Additional dark mode overrides for inline styled elements */
[data-theme="dark"] h4[style*="color: var(--primr-navy)"],
[data-theme="dark"] h2[style*="color: var(--primr-navy)"],
[data-theme="dark"] h3[style*="color: var(--primr-navy)"] {
    color: var(--primr-navy) !important;
}

/* Dark mode form input enhancements */
[data-theme="dark"] .form-input {
    background: var(--bg-lighter);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .form-input:focus {
    border-color: var(--primr-teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

[data-theme="dark"] .form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* =============================================
   COMPREHENSIVE DARK MODE OVERRIDES
   (Fixes for all hardcoded colors)
   ============================================= */

/* Flashcards */
[data-theme="dark"] .flashcard-side,
[data-theme="dark"] .flashcard-front,
[data-theme="dark"] .flashcard-back {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium);
}

[data-theme="dark"] .flashcard-front {
    background: linear-gradient(135deg, var(--bg-lighter) 0%, var(--bg-light) 100%) !important;
    border-left-color: var(--primr-purple);
}

[data-theme="dark"] .flashcard-back {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-lighter) 100%) !important;
    border-left-color: var(--primr-teal);
}

/* Glossary Buttons & Toggles */
[data-theme="dark"] #study-mode-toggle,
[data-theme="dark"] #direction-toggle,
[data-theme="dark"] #shuffle-cards {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #study-mode-toggle:hover,
[data-theme="dark"] #direction-toggle:hover,
[data-theme="dark"] #shuffle-cards:hover {
    background: var(--bg-light) !important;
}

/* Skip Link */
[data-theme="dark"] .skip-link:focus {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: var(--primr-teal) !important;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.3) !important;
}

/* Button-like elements */
[data-theme="dark"] .button-like {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .button-like:hover,
[data-theme="dark"] .button-like:focus-visible {
    background: var(--bg-light) !important;
}

/* Focus rings */
[data-theme="dark"] :where(a, button, .button-like, .card, .tile):focus-visible {
    box-shadow: var(--elev-2), 0 0 0 2px var(--bg-light), 0 0 0 4px var(--primr-teal) !important;
}

/* Saved View Tabs */
[data-theme="dark"] .saved-view-tab {
    color: var(--text-secondary);
}

[data-theme="dark"] .saved-view-tab:hover {
    color: var(--text-primary);
    background: var(--bg-lighter) !important;
}

[data-theme="dark"] .saved-view-tab.active {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* Glossary Cards */
[data-theme="dark"] #glossary-container > article.glossary-card {
    background-color: var(--bg-lighter) !important;
}

[data-theme="dark"] #glossary-container > article.glossary-card:hover {
    background-color: var(--bg-light) !important;
}

[data-theme="dark"] #glossary-container > article.glossary-card :focus-visible {
    box-shadow: 0 0 0 2px var(--bg-light), 0 0 0 4px var(--primr-teal) !important;
}

/* Source Pills */
[data-theme="dark"] #glossary-container a.source-pill,
[data-theme="dark"] .flashcard a.source-pill {
    color: var(--primr-navy) !important;
    border-color: var(--primr-navy) !important;
    background-color: var(--bg-lighter) !important;
}

[data-theme="dark"] #glossary-container a.source-pill:hover,
[data-theme="dark"] #glossary-container a.source-pill:focus-visible,
[data-theme="dark"] .flashcard a.source-pill:hover,
[data-theme="dark"] .flashcard a.source-pill:focus-visible {
    background-color: var(--primr-navy) !important;
    color: #ffffff !important;
    border-color: var(--primr-navy) !important;
}

[data-theme="dark"] #glossary-container a.source-pill:focus-visible,
[data-theme="dark"] .flashcard a.source-pill:focus-visible {
    box-shadow: 0 0 0 2px var(--bg-light), 0 0 0 4px var(--primr-navy) !important;
}

/* Modals */
[data-theme="dark"] .historical-modal-content,
[data-theme="dark"] .doc-modal {
    background: var(--bg-lighter) !important;
    color: var(--text-primary);
}

/* Modal headers and footers */
[data-theme="dark"] .doc-modal-header,
[data-theme="dark"] .doc-modal-footer {
    background: var(--bg-light);
    border-color: var(--border-medium);
}

/* Figcaption */
[data-theme="dark"] .figcaption {
    color: var(--text-muted) !important;
}

/* Control buttons */
[data-theme="dark"] .control-btn {
    background: var(--bg-lighter) !important;
    color: var(--text-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .control-btn:hover {
    background: var(--bg-light) !important;
}

/* Cards */
[data-theme="dark"] .card {
    background: var(--bg-lighter);
    border-color: var(--border-medium);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .card:focus-within {
    background: var(--bg-light);
}

/* =============================================
   ADDITIONAL DARK MODE FIXES - Round 2
   ============================================= */

/* Search inputs - ALL of them */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input.search,
[data-theme="dark"] .search-input,
[data-theme="dark"] #glossary-search,
[data-theme="dark"] #notes-search-input {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* Ensure global search input is readable in dark mode */
[data-theme="dark"] #global-search-input {
    background: rgba(55, 65, 81, 0.95) !important; /* gray-700 with opacity */
    color: #f3f4f6 !important; /* gray-100 */
}

[data-theme="dark"] #global-search-input::placeholder {
    color: #9ca3af !important; /* gray-400 */
}

[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] input.search::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* "Showing X result" badge */
[data-theme="dark"] .result-count,
[data-theme="dark"] .badge {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* Glossary card content/table area */
[data-theme="dark"] .glossary-card table,
[data-theme="dark"] .glossary-item-enhanced table,
[data-theme="dark"] article.glossary-card > div {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .glossary-card td,
[data-theme="dark"] .glossary-card th {
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

/* Historical card titles */
[data-theme="dark"] .historical-card h3,
[data-theme="dark"] .historical-card h4,
[data-theme="dark"] .irb-scenario h3,
[data-theme="dark"] .irb-scenario h4 {
    color: var(--text-primary) !important;
}

/* Historical cards should have dark backgrounds */
[data-theme="dark"] .historical-card {
    background: var(--bg-lighter) !important;
    border-color: var(--border-color) !important;
}

/* Search highlights - more visible */
[data-theme="dark"] mark,
[data-theme="dark"] .highlight {
    background-color: rgba(251, 191, 36, 0.5) !important;
    color: var(--bg-dark) !important;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 2px;
}

/* Try Again buttons */
[data-theme="dark"] .quiz-button,
[data-theme="dark"] button[onclick*="Again"] {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-medium) !important;
}

[data-theme="dark"] .quiz-button:hover,
[data-theme="dark"] button[onclick*="Again"]:hover {
    background: var(--primr-navy) !important;
    color: white !important;
    border-color: var(--primr-navy) !important;
}

/* Textareas - Notes and other forms */
[data-theme="dark"] textarea,
[data-theme="dark"] #note-modal-textarea {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Note modal specifically */
[data-theme="dark"] #note-modal {
    background: var(--bg-white) !important;
    border-color: var(--border-medium) !important;
}

[data-theme="dark"] #note-modal h2 {
    color: var(--text-primary) !important;
}


/* Note modal - ensure clear light mode styling */
[data-theme="light"] #note-modal,
html[data-theme="light"] #note-modal {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border-color: var(--border-light, #E2E8F0) !important;
}

[data-theme="light"] #note-modal h2,
html[data-theme="light"] #note-modal h2 {
    color: #1E293B !important;
}

[data-theme="light"] #note-modal-textarea,
html[data-theme="light"] #note-modal-textarea {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border-color: var(--border-light, #E2E8F0) !important;
}


/* Notes drawer */
[data-theme="dark"] #notes-drawer {
    background: var(--bg-white) !important;
}

[data-theme="dark"] #notes-drawer input {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* Notes list items */
[data-theme="dark"] #notes-drawer li {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
}

/* =============================================
   QUIZ SECTION DARK MODE ADJUSTMENTS
   ============================================= */

/* Tone down bright quiz card gradients */
[data-theme="dark"] .quiz-gradient,
[data-theme="dark"] .knowledge-check {
    background: linear-gradient(135deg, 
        rgba(20, 184, 166, 0.15) 0%, 
        rgba(59, 130, 246, 0.15) 100%) !important;
    border: 1px solid var(--border-medium);
}

/* Quiz answer option buttons */
[data-theme="dark"] .check-option {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .check-option:hover {
    background: var(--bg-light) !important;
    border-color: var(--primr-teal);
}

/* Selected/correct answers */
[data-theme="dark"] .check-option[data-correct="true"].selected,
[data-theme="dark"] .check-option.correct {
    background: rgba(132, 204, 22, 0.2) !important;
    border-color: var(--primr-green);
    color: var(--text-primary) !important;
}

/* Wrong answers */
[data-theme="dark"] .check-option.incorrect {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: var(--primr-red);
    color: var(--text-primary) !important;
}

/* Quiz card text should remain white for visibility on subtle gradient */
[data-theme="dark"] .quiz-gradient,
[data-theme="dark"] .knowledge-check {
    color: var(--text-primary) !important;
}

/* Quiz question text */
[data-theme="dark"] .knowledge-check .font-bold {
    color: var(--text-primary) !important;
}

/* =============================================
   UNIFIED BLACKLIGHT AESTHETIC (Sophisticated Dark)
   No fluorescent tones - subtle, elegant gradients
   ============================================= */

/* Document cards - tone down bright gradients */
[data-theme="dark"] .doc-card-blue,
[data-theme="dark"] .card-gradient {
    background: linear-gradient(135deg, 
        rgba(74, 111, 165, 0.08) 0%, 
        rgba(136, 115, 168, 0.08) 100%) !important;
    border: 1px solid rgba(74, 111, 165, 0.2);
}

[data-theme="dark"] .doc-card-green {
    background: linear-gradient(135deg, 
        rgba(107, 153, 85, 0.08) 0%, 
        rgba(74, 139, 143, 0.08) 100%) !important;
    border: 1px solid rgba(107, 153, 85, 0.2);
}

[data-theme="dark"] .doc-card-orange {
    background: linear-gradient(135deg, 
        rgba(184, 149, 111, 0.08) 0%, 
        rgba(196, 169, 101, 0.08) 100%) !important;
    border: 1px solid rgba(184, 149, 111, 0.2);
}

/* All document cards */
[data-theme="dark"] .doc-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--text-primary) !important;
}

[data-theme="dark"] .doc-card h3,
[data-theme="dark"] .doc-card h4,
[data-theme="dark"] .doc-card p {
    color: var(--text-primary) !important;
}

/* Glossary card body/content - fix white area */
[data-theme="dark"] .glossary-item-enhanced,
[data-theme="dark"] .glossary-card {
    background: var(--bg-lighter) !important;
}

[data-theme="dark"] .glossary-card > div,
[data-theme="dark"] .glossary-card tbody,
[data-theme="dark"] .glossary-card td {
    background: transparent !important;
}

/* Historical modal title visibility */
[data-theme="dark"] .historical-modal-content h2,
[data-theme="dark"] .historical-modal-content h3 {
    color: var(--text-primary) !important;
}

/* Quiz cards - even more subtle */
[data-theme="dark"] .quiz-gradient,
[data-theme="dark"] .knowledge-check {
    background: linear-gradient(135deg, 
        rgba(20, 184, 166, 0.08) 0%, 
        rgba(59, 130, 246, 0.08) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Feature cards on overview - maintain that good blacklight look */
[data-theme="dark"] .feature-card {
    background: var(--bg-lighter);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

[data-theme="dark"] .feature-card:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.3);
}

/* Consistent subtle gradients for icon backgrounds */
[data-theme="dark"] .feature-icon,
[data-theme="dark"] [data-icon] {
    opacity: 0.9;
}

/* Navigation tabs - subtle active state */
[data-theme="dark"] .nav-tab.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-bottom-color: rgba(59, 130, 246, 0.5);
}

[data-theme="dark"] .nav-tab:hover:not(.active) {
    background: rgba(148, 163, 184, 0.1) !important;
}

/* =============================================
   BLACK LIGHT AESTHETIC REFINEMENTS
   ============================================= */

/* Historical modal title - make it visible */
[data-theme="dark"] .historical-modal-content h2,
[data-theme="dark"] .historical-modal-content h3 {
    color: var(--text-primary) !important;
}

/* Glossary expanded content - ensure it's dark */
[data-theme="dark"] .glossary-card > div:not(.glossary-card-header),
[data-theme="dark"] .glossary-item-enhanced > div {
    background: transparent !important;
}

[data-theme="dark"] .glossary-card table tbody,
[data-theme="dark"] .glossary-card table thead {
    background: transparent !important;
}

/* Remove zebra striping from glossary card tables - uniform look */
[data-theme="dark"] .glossary-card table tbody tr,
[data-theme="dark"] .glossary-card table tbody tr:nth-child(even),
[data-theme="dark"] .glossary-card table tbody tr:nth-child(odd),
[data-theme="dark"] .glossary-item-enhanced table tbody tr,
[data-theme="dark"] .glossary-item-enhanced table tbody tr:nth-child(even),
[data-theme="dark"] .glossary-item-enhanced table tbody tr:nth-child(odd) {
    background: transparent !important;
}

/* Remove alternating colored left borders in dark mode glossary - uniform subtle border */
[data-theme="dark"] .glossary-card .border-l-4,
[data-theme="dark"] .glossary-item-enhanced .border-l-4,
[data-theme="dark"] .glossary-card .border-teal-300,
[data-theme="dark"] .glossary-card .border-purple-300,
[data-theme="dark"] .glossary-item-enhanced .border-teal-300,
[data-theme="dark"] .glossary-item-enhanced .border-purple-300 {
    border-left-color: var(--border-medium) !important;
}

/* Quiz cards - add subtle glow, less drab */
[data-theme="dark"] .quiz-gradient,
[data-theme="dark"] .knowledge-check {
    background: linear-gradient(135deg, 
        rgba(75, 126, 184, 0.15) 0%, 
        rgba(74, 139, 143, 0.15) 100%) !important;
    border: 1px solid rgba(75, 126, 184, 0.3);
    box-shadow: 0 0 20px rgba(75, 126, 184, 0.1);
}

/* Quiz options - subtle but visible */
[data-theme="dark"] .check-option {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(75, 126, 184, 0.2);
}

[data-theme="dark"] .check-option:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: var(--primr-teal);
    box-shadow: 0 0 12px rgba(74, 139, 143, 0.2);
}

/* Nav tabs - consistent with black light aesthetic */
[data-theme="dark"] .nav-tab.active {
    background: linear-gradient(135deg, 
        rgba(74, 111, 165, 0.3) 0%, 
        rgba(74, 139, 143, 0.3) 100%);
    box-shadow: 0 0 15px rgba(74, 111, 165, 0.2);
}

/* Document cards - add subtle glow effect */
[data-theme="dark"] .doc-card:hover,
[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 0 20px rgba(75, 126, 184, 0.15);
}

/* =============================================
   COMPREHENSIVE BLACK LIGHT FIXES
   All pastel and bright elements toned down
   ============================================= */

/* PASTEL HISTORICAL THEME CARDS - Tone them WAY down */
[data-theme="dark"] [style*="background: lightyellow"],
[data-theme="dark"] [style*="background: lightpink"],
[data-theme="dark"] [style*="background: lightblue"],
[data-theme="dark"] [style*="background: lightgreen"],
[data-theme="dark"] [style*="background: lavender"],
[data-theme="dark"] [style*="background: peachpuff"],
[data-theme="dark"] [style*="background: mistyrose"],
[data-theme="dark"] [style*="background: honeydew"],
[data-theme="dark"] [style*="background: #FFFFE0"],
[data-theme="dark"] [style*="background: #FFB6C1"],
[data-theme="dark"] [style*="background: #ADD8E6"],
[data-theme="dark"] [style*="background: #90EE90"],
[data-theme="dark"] [style*="background: #E6E6FA"],
[data-theme="dark"] [style*="background: #FFDAB9"],
[data-theme="dark"] [style*="background: #FFE4E1"],
[data-theme="dark"] [style*="background: #F0FFF0"] {
    background: var(--bg-lighter) !important;
    border: 1px solid var(--border-medium) !important;
}

/* Alert/Warning boxes - subtle instead of bright */
[data-theme="dark"] .alert,
[data-theme="dark"] .warning,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-info,
[data-theme="dark"] [style*="background: #FFE4E4"],
[data-theme="dark"] [style*="background: #FFF4E4"],
[data-theme="dark"] [style*="background: pink"],
[data-theme="dark"] [style*="background: lightcoral"] {
    background: rgba(194, 91, 111, 0.15) !important;
    border-color: rgba(194, 91, 111, 0.3) !important;
    color: var(--text-primary) !important;
}

/* "What Went Wrong" heading */
[data-theme="dark"] [style*="color: #D32F2F"],
[data-theme="dark"] [style*="color: red"],
[data-theme="dark"] h3[style*="color"],
[data-theme="dark"] h4[style*="color"] {
    color: var(--primr-red) !important;
}

/* Success/Info boxes */
[data-theme="dark"] .alert-success,
[data-theme="dark"] [style*="background: #E8F5E9"],
[data-theme="dark"] [style*="background: lightgreen"] {
    background: rgba(107, 153, 85, 0.15) !important;
    border-color: rgba(107, 153, 85, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Document modal table - make it dark */
[data-theme="dark"] .doc-modal table,
[data-theme="dark"] .doc-modal tbody,
[data-theme="dark"] .doc-modal thead {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .doc-modal td,
[data-theme="dark"] .doc-modal th {
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

/* Any remaining white backgrounds in content areas */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background:#FFF"] {
    background: var(--bg-lighter) !important;
}

/* Glossary content inner divs */
[data-theme="dark"] .glossary-card > div > div {
    background: transparent !important;
}

/* Historical modal - ensure all headings visible */
[data-theme="dark"] .historical-modal-content *[style*="color: #"],
[data-theme="dark"] .irb-scenario *[style*="color: #"] {
    color: var(--text-primary) !important;
}

/* =============================================
   COMPREHENSIVE BLACK LIGHT FIXES
   Matching Overview tab aesthetic everywhere
   ============================================= */

/* Document modals - make them DARK not white */
[data-theme="dark"] .doc-modal,
[data-theme="dark"] .doc-modal-content,
[data-theme="dark"] .modal-content {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .doc-modal table,
[data-theme="dark"] .modal-content table {
    background: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .doc-modal td,
[data-theme="dark"] .doc-modal th {
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

/* Historical theme cards - muted colors not pastels */
[data-theme="dark"] .theme-card,
[data-theme="dark"] .theme-card-yellow {
    background: linear-gradient(135deg, 
        rgba(184, 149, 111, 0.1) 0%,
        rgba(196, 169, 101, 0.1) 100%) !important;
    border: 1px solid rgba(184, 149, 111, 0.2);
}

[data-theme="dark"] .theme-card-pink,
[data-theme="dark"] .theme-card-red {
    background: linear-gradient(135deg,
        rgba(194, 91, 111, 0.1) 0%,
        rgba(212, 116, 133, 0.1) 100%) !important;
    border: 1px solid rgba(194, 91, 111, 0.2);
}

[data-theme="dark"] .theme-card-purple,
[data-theme="dark"] .theme-card-violet {
    background: linear-gradient(135deg,
        rgba(136, 115, 168, 0.1) 0%,
        rgba(136, 115, 168, 0.15) 100%) !important;
    border: 1px solid rgba(136, 115, 168, 0.2);
}

[data-theme="dark"] .theme-card-blue,
[data-theme="dark"] .theme-card-cyan {
    background: linear-gradient(135deg,
        rgba(74, 111, 165, 0.1) 0%,
        rgba(91, 126, 184, 0.1) 100%) !important;
    border: 1px solid rgba(74, 111, 165, 0.2);
}

[data-theme="dark"] .theme-card-green,
[data-theme="dark"] .theme-card-teal {
    background: linear-gradient(135deg,
        rgba(74, 139, 143, 0.1) 0%,
        rgba(95, 163, 167, 0.1) 100%) !important;
    border: 1px solid rgba(74, 139, 143, 0.2);
}

[data-theme="dark"] .theme-card-orange {
    background: linear-gradient(135deg,
        rgba(184, 149, 111, 0.1) 0%,
        rgba(196, 169, 101, 0.15) 100%) !important;
    border: 1px solid rgba(184, 149, 111, 0.2);
}

/* Alert/warning boxes in historical modals */
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-red,
[data-theme="dark"] .what-went-wrong,
[data-theme="dark"] .warning-box {
    background: rgba(194, 91, 111, 0.15) !important;
    border: 1px solid rgba(194, 91, 111, 0.3);
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert-green,
[data-theme="dark"] .what-we-learned,
[data-theme="dark"] .success-box {
    background: rgba(107, 153, 85, 0.15) !important;
    border: 1px solid rgba(107, 153, 85, 0.3);
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-blue,
[data-theme="dark"] .info-box {
    background: rgba(74, 111, 165, 0.15) !important;
    border: 1px solid rgba(74, 111, 165, 0.3);
    color: var(--text-primary) !important;
}

/* All modal titles must be visible */
[data-theme="dark"] .modal h1,
[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3,
[data-theme="dark"] .doc-modal h1,
[data-theme="dark"] .doc-modal h2,
[data-theme="dark"] .historical-modal h1,
[data-theme="dark"] .historical-modal h2 {
    color: var(--text-primary) !important;
}

/* Theme card text visibility */
[data-theme="dark"] .theme-card h3,
[data-theme="dark"] .theme-card h4,
[data-theme="dark"] .theme-card p {
    color: var(--text-primary) !important;
}

/* Theme card links */
[data-theme="dark"] .theme-card a {
    color: var(--primr-navy) !important;
}

[data-theme="dark"] .theme-card a:hover {
    color: var(--primr-navy-light) !important;
}

/* =============================================
   FIX REMAINING WHITE BACKGROUNDS
   ============================================= */

/* Glossary content - NO WHITE BOXES */
[data-theme="dark"] .glossary-card > div,
[data-theme="dark"] .glossary-card-content,
[data-theme="dark"] .glossary-expanded-content {
    background: transparent !important;
}

/* Document modals - NEVER white */
[data-theme="dark"] .doc-modal,
[data-theme="dark"] .doc-modal-body,
[data-theme="dark"] .modal-body {
    background: var(--bg-lighter) !important;
}

/* Alert boxes - MORE saturated, not washed out */
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .what-went-wrong {
    background: rgba(239, 68, 68, 0.25) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .what-we-learned {
    background: rgba(132, 204, 22, 0.25) !important;
    border: 1px solid rgba(132, 204, 22, 0.5) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.25) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    color: var(--text-primary) !important;
}

/* =============================================
   FIX ALL HOVER STATES AND BRIGHT TILES
   Keep bright accent colors, tone down backgrounds
   ============================================= */

/* Glossary hover - DARK not white */
[data-theme="dark"] {
    --glossary-hover-purple: rgba(168, 85, 247, 0.1) !important;
    --glossary-hover-aqua: rgba(20, 184, 166, 0.1) !important;
}

[data-theme="dark"] .glossary-card:hover,
[data-theme="dark"] .glossary-item-enhanced:hover {
    background: rgba(30, 41, 59, 0.8) !important;
}

/* Global search result hover - DARK not white */
[data-theme="dark"] .search-result:hover,
[data-theme="dark"] .search-item:hover {
    background: rgba(30, 41, 59, 0.8) !important;
}

/* Notes drawer item hover - DARK not white */
[data-theme="dark"] #notes-drawer li:hover {
    background: rgba(30, 41, 59, 0.8) !important;
}

/* Overview tiles - tone down bright gradients */
[data-theme="dark"] .feature-card[style*="linear-gradient"],
[data-theme="dark"] .tile[style*="linear-gradient"] {
    opacity: 0.15 !important;
}

/* Document cards in overview - subtle gradients */
[data-theme="dark"] .doc-card {
    opacity: 1 !important;
}

[data-theme="dark"] .doc-card-blue {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1) 0%, 
        rgba(168, 85, 247, 0.1) 100%) !important;
}

[data-theme="dark"] .doc-card-green {
    background: linear-gradient(135deg, 
        rgba(132, 204, 22, 0.1) 0%, 
        rgba(20, 184, 166, 0.1) 100%) !important;
}

[data-theme="dark"] .doc-card-orange {
    background: linear-gradient(135deg, 
        rgba(251, 191, 36, 0.1) 0%, 
        rgba(253, 185, 36, 0.1) 100%) !important;
}

[data-theme="dark"] .doc-card-pink {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.1) 0%, 
        rgba(239, 68, 68, 0.1) 100%) !important;
}

[data-theme="dark"] .doc-card-purple {
    background: linear-gradient(135deg, 
        rgba(168, 85, 247, 0.1) 0%, 
        rgba(147, 51, 234, 0.1) 100%) !important;
}

[data-theme="dark"] .doc-card-teal {
    background: linear-gradient(135deg, 
        rgba(20, 184, 166, 0.1) 0%, 
        rgba(6, 182, 212, 0.1) 100%) !important;
}

/* Override inline gradient styles in dark mode */
[data-theme="dark"] [style*="linear-gradient"] {
    opacity: 0.7 !important;
    filter: saturate(0.8);
}

/* But keep full opacity for small icon containers */
[data-theme="dark"] [style*="width:56px"][style*="linear-gradient"],
[data-theme="dark"] [style*="width: 56px"][style*="linear-gradient"] {
    opacity: 1 !important;
    filter: saturate(1);
}

/* Tone down feature card icon gradients */
[data-theme="dark"] .feature-card [style*="linear-gradient"] {
    opacity: 0.8 !important;
}

/* =============================================
   FINAL COMPREHENSIVE OVERRIDES
   These use !important to catch EVERYTHING
   ============================================= */

/* NO WHITE ON HOVER - ANYWHERE */
[data-theme="dark"] .glossary-card:hover table,
[data-theme="dark"] .glossary-card:hover tbody,
[data-theme="dark"] .glossary-card:hover td,
[data-theme="dark"] .glossary-card:hover th {
    background: transparent !important;
}

/* CRITICAL: Override the specific light mode thead tr hover rule */
[data-theme="dark"] .glossary-card:hover table thead tr,
[data-theme="dark"] .glossary-card:focus-within table thead tr {
    background: rgba(30, 41, 59, 0.6) !important;
}

[data-theme="dark"] .glossary-card:hover {
    background: rgba(30, 41, 59, 0.95) !important;
}

[data-theme="dark"] #notes-drawer li:hover,
[data-theme="dark"] .note-item:hover,
[data-theme="dark"] .notes-list li:hover {
    background: rgba(30, 41, 59, 0.95) !important;
}

/* TONE DOWN ALL DOC CARDS */
[data-theme="dark"] .doc-card {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

/* INLINE GRADIENT OVERRIDE */
[data-theme="dark"] [style*="linear-gradient"]:not([style*="56px"]):not(.theme-card):not(.theme-card *) {
    filter: brightness(0.35) saturate(0.7) !important;
}

[data-theme="dark"] [style*="56px"][style*="linear-gradient"] {
    filter: brightness(0.65) saturate(0.85) !important;
}

/* Exception: Theme cards should be more visible */
[data-theme="dark"] .theme-card[style*="linear-gradient"],
[data-theme="dark"] .theme-card *[style*="linear-gradient"] {
    filter: brightness(0.5) saturate(0.8) !important;
}

/* ALERT BOXES - DARK WITH BRIGHT BORDERS */
[data-theme="dark"] .alert,
[data-theme="dark"] [class*="alert-"] {
    background: rgba(30, 41, 59, 0.7) !important;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-warning {
    border: 2px solid var(--primr-red) !important;
}

[data-theme="dark"] .alert-success {
    border: 2px solid var(--primr-green) !important;
}

/* NO RED HEADERS */
[data-theme="dark"] h1, [data-theme="dark"] h2, 
[data-theme="dark"] h3, [data-theme="dark"] h4 {
    color: var(--text-primary) !important;
}

/* CATCH ALL BG-WHITE OVERRIDES */
[data-theme="dark"] .bg-white:not(.doc-modal-content table):not(td):not(th) {
    background: var(--bg-lighter) !important;
}

[data-theme="dark"] [class*="bg-gray-"]:not([class*="bg-gray-900"]):not([class*="bg-gray-800"]) {
    background: var(--bg-lighter) !important;
}

/* ============================================= 
   ADDITIONAL COMPREHENSIVE FIXES
   ============================================= */

/* Global search results container and hover */
[data-theme="dark"] #global-search-results,
[data-theme="dark"] [id*="search-results"] {
    background: var(--bg-dark) !important;
}

[data-theme="dark"] .search-result-item {
    background: var(--bg-lighter) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] [class*="search-result"]:hover,
[data-theme="dark"] .hover\:bg-blue-50:hover {
    background: rgba(30, 41, 59, 0.9) !important;
}

/* Notes drawer comprehensive hover fix */
[data-theme="dark"] #notes-drawer li,
[data-theme="dark"] .notes-list li,
[data-theme="dark"] .note-item {
    background: var(--bg-lighter) !important;
}

[data-theme="dark"] #notes-drawer li:hover,
[data-theme="dark"] .notes-list li:hover,
[data-theme="dark"] .note-item:hover {
    background: rgba(30, 41, 59, 0.9) !important;
}

/* Form select/dropdown elements */
[data-theme="dark"] select,
[data-theme="dark"] option {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Glossary Sources section hover fix - COMPREHENSIVE */
[data-theme="dark"] .glossary-card .sources-section,
[data-theme="dark"] .glossary-card [class*="source"],
[data-theme="dark"] .glossary-card .source-pill,
[data-theme="dark"] .glossary-card p.text-gray-600,
[data-theme="dark"] .glossary-card .bg-gray-100 {
    background: transparent !important;
}

[data-theme="dark"] .glossary-card:hover .sources-section,
[data-theme="dark"] .glossary-card:hover [class*="source"],
[data-theme="dark"] .glossary-card:hover .source-pill,
[data-theme="dark"] .glossary-card:hover p.text-gray-600,
[data-theme="dark"] .glossary-card:hover .bg-gray-100,
[data-theme="dark"] .glossary-card:hover p.text-gray-600 *,
[data-theme="dark"] .glossary-card:hover .source-pill span,
[data-theme="dark"] .glossary-card:hover .inline-flex {
    background: transparent !important;
}

/* Card-gradient for feature tiles */
[data-theme="dark"] .card-gradient {
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.15) 0%,
        rgba(20, 184, 166, 0.15) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
/* =====================================================
   COMPREHENSIVE FINAL FIXES - All Remaining Issues
   ===================================================== */

/* 1. BACKUP DRAWER - Hide theme toggle when backup drawer is open */
#backup-drawer:not(.translate-x-full) ~ .theme-toggle,
body:has(#backup-drawer:not(.translate-x-full)) .theme-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

/* 2. READ STATUS BADGES - Subtle muted style in dark mode */


/* LIGHT MODE: Read indicators on colored card backgrounds */
.chart-table-card .read-indicator {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #15803d !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.chart-table-card .read-indicator:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .read-button,
[data-theme="dark"] .read-badge,
[data-theme="dark"] [class*="read-status"],
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-green-50 {
    background: rgba(148, 163, 184, 0.15) !important;
    color: rgba(203, 213, 225, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .read-button:hover,
[data-theme="dark"] .read-badge:hover,
[data-theme="dark"] .bg-green-100:hover {
    background: rgba(148, 163, 184, 0.22) !important;
    border-color: rgba(148, 163, 184, 0.40) !important;
}

/* Override text-green classes in dark mode for read badges - muted slate */
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800 {
    color: rgba(203, 213, 225, 0.9) !important;
}

/* Override border-green classes in dark mode */
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-green-300,
[data-theme="dark"] .border-green-500 {
    border-color: rgba(148, 163, 184, 0.30) !important;
}

/* 3. GLOSSARY - Ensure highlighting works (word "bird" etc) */
[data-theme="dark"] .glossary-card mark,
[data-theme="dark"] .glossary-item mark,
[data-theme="dark"] article mark {
    background-color: rgba(251, 191, 36, 0.6) !important;
    color: var(--bg-dark) !important;
    font-weight: 700 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

/* 4. HISTORICAL FOUNDATIONS - Dropdown headers must be visible */
[data-theme="dark"] details summary,
[data-theme="dark"] .historical-card details summary,
[data-theme="dark"] summary {
    color: var(--text-primary) !important;
    background: rgba(30, 41, 59, 0.5) !important;
}

[data-theme="dark"] details summary:hover {
    background: rgba(30, 41, 59, 0.7) !important;
}

/* 5. DOCUMENT TILES - Make all tiles consistent in dark mode */
[data-theme="dark"] .doc-card {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

[data-theme="dark"] .doc-card-blue,
[data-theme="dark"] .doc-card-green,
[data-theme="dark"] .doc-card-purple,
[data-theme="dark"] .doc-card-orange,
[data-theme="dark"] .doc-card-red {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.12) 0%,
        rgba(168, 85, 247, 0.12) 100%) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

/* 6. DOCUMENT MODAL TABLES - Make tables dark mode compatible */
[data-theme="dark"] .doc-modal-content table,
[data-theme="dark"] .modal-body table {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .doc-modal-content table thead,
[data-theme="dark"] .modal-body table thead {
    background: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .doc-modal-content table thead th,
[data-theme="dark"] .modal-body table thead th {
    color: var(--text-primary) !important;
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .doc-modal-content table tbody tr,
[data-theme="dark"] .modal-body table tbody tr {
    background: var(--bg-lighter) !important;
}

[data-theme="dark"] .doc-modal-content table tbody tr:nth-child(even),
[data-theme="dark"] .modal-body table tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.5) !important;
}

[data-theme="dark"] .doc-modal-content table td,
[data-theme="dark"] .modal-body table td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 7. INLINE DOCUMENT STYLES - Override inline styles in loaded HTML docs */
[data-theme="dark"] .doc-modal iframe,
[data-theme="dark"] .doc-modal-content > div {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* =============================================
   DARK MODE ADDITIONAL FIXES
   (Merged from dark-mode-complete-fix.css)
   ============================================= */


/* SECTION 1: CONTROL BUTTONS */
[data-theme="dark"] .control-btn {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .control-btn:hover {
    background: var(--bg-light) !important;
}

/* SECTION 2: FLASHCARDS */
[data-theme="dark"] .flashcard-side,
[data-theme="dark"] .flashcard-front,
[data-theme="dark"] .flashcard-back {
    background: var(--bg-lighter) !important;
}

/* SECTION 3: GLOSSARY - THE BIG ONE */
/* Glossary card base - NEVER white */
[data-theme="dark"] #glossary-container > article.glossary-card {
    background-color: var(--bg-lighter) !important;
}

/* Glossary card hover - DARK not white */
[data-theme="dark"] #glossary-container > article.glossary-card:hover {
    background-color: var(--bg-light) !important;
}

/* Glossary inner content - transparent, not white */
[data-theme="dark"] .glossary-card > div,
[data-theme="dark"] .glossary-card table,
[data-theme="dark"] .glossary-card tbody,
[data-theme="dark"] .glossary-card thead {
    background: transparent !important;
}

/* Glossary source pills */
[data-theme="dark"] #glossary-container a.source-pill {
    background-color: var(--bg-lighter) !important;
    color: var(--primr-navy) !important;
    border-color: var(--primr-navy) !important;
}

[data-theme="dark"] #glossary-container a.source-pill:hover {
    background-color: var(--primr-navy) !important;
    color: #ffffff !important;
}

/* SECTION 4: GLOSSARY BUTTONS */
[data-theme="dark"] #study-mode-toggle,
[data-theme="dark"] #direction-toggle,
[data-theme="dark"] #shuffle-cards {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* SECTION 5: SAVED VIEW TABS */
[data-theme="dark"] .saved-view-tab.active {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* SECTION 6: BUTTON-LIKE ELEMENTS */
[data-theme="dark"] .button-like {
    background: var(--bg-lighter) !important;
    border-color: var(--border-medium) !important;
}

/* SECTION 7: MODALS - ALL OF THEM */
[data-theme="dark"] .historical-modal-content,
[data-theme="dark"] .doc-modal,
[data-theme="dark"] .modal-content {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
}

/* SECTION 8: ALERT BOXES - BRIGHT COLORS */
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] div[style*="background"] > p:first-child:contains("What Went Wrong") {
    background: rgba(239, 68, 68, 0.3) !important;
    border: 2px solid rgba(239, 68, 68, 0.7) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] div[style*="background"] > p:first-child:contains("What We Learned") {
    background: rgba(132, 204, 22, 0.3) !important;
    border: 2px solid rgba(132, 204, 22, 0.7) !important;
    color: var(--text-primary) !important;
}

/* SECTION 9: NOTES DRAWER HOVER */
[data-theme="dark"] #notes-drawer li:hover {
    background: rgba(30, 41, 59, 0.9) !important;
}

/* SECTION 10: GLOBAL SEARCH HOVER */
[data-theme="dark"] .search-result:hover {
    background: rgba(30, 41, 59, 0.9) !important;
}

/* SECTION 11: DOCUMENT CARDS - TONE DOWN BRIGHTNESS */
[data-theme="dark"] .doc-card-blue {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.12) 0%, 
        rgba(168, 85, 247, 0.12) 100%) !important;
}

[data-theme="dark"] .doc-card-green {
    background: linear-gradient(135deg, 
        rgba(132, 204, 22, 0.12) 0%, 
        rgba(20, 184, 166, 0.12) 100%) !important;
}

[data-theme="dark"] .doc-card-orange {
    background: linear-gradient(135deg, 
        rgba(251, 191, 36, 0.12) 0%, 
        rgba(253, 185, 36, 0.12) 100%) !important;
}

[data-theme="dark"] .doc-card-pink {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.12) 0%, 
        rgba(239, 68, 68, 0.12) 100%) !important;
}

[data-theme="dark"] .doc-card-purple {
    background: linear-gradient(135deg, 
        rgba(168, 85, 247, 0.12) 0%, 
        rgba(147, 51, 234, 0.12) 100%) !important;
}

[data-theme="dark"] .doc-card-teal {
    background: linear-gradient(135deg, 
        rgba(20, 184, 166, 0.12) 0%, 
        rgba(6, 182, 212, 0.12) 100%) !important;
}

[data-theme="dark"] .doc-card-red {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.12) 0%, 
        rgba(220, 38, 38, 0.12) 100%) !important;
}

/* SECTION 12: OVERVIEW FEATURE TILES - TONE DOWN */
[data-theme="dark"] .feature-card div[style*="linear-gradient"] {
    opacity: 0.75 !important;
    filter: saturate(0.85) !important;
}

/* SECTION 13: CARD GRADIENT CLASS */
[data-theme="dark"] .card-gradient {
    background: linear-gradient(135deg, 
        rgba(20, 184, 166, 0.12) 0%, 
        rgba(59, 130, 246, 0.12) 100%) !important;
}

/* SECTION 14: QUIZ GRADIENT */
[data-theme="dark"] .quiz-gradient {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15) 0%, 
        rgba(20, 184, 166, 0.15) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* SECTION 15: SKIP LINK */
[data-theme="dark"] .skip-link:focus {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
}

/* SECTION 16: THEME CARDS (Historical Foundations) */
[data-theme="dark"] .theme-card {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* SECTION 17: ENSURE ALL TABLES ARE DARK */
[data-theme="dark"] table {
    background: transparent !important;
}

[data-theme="dark"] td,
[data-theme="dark"] th {
    border-color: var(--border-medium) !important;
}

/* SECTION 18: ANY REMAINING WHITE BACKGROUNDS */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
    background: var(--bg-lighter) !important;
}

/* SECTION 19: GLOSSARY HOVER COLORS */
[data-theme="dark"] {
    --glossary-hover-purple: rgba(168, 85, 247, 0.1) !important;
    --glossary-hover-aqua: rgba(20, 184, 166, 0.1) !important;
}

/* SECTION 20: HISTORICAL PROBLEM/LEARNED CARDS */
[data-theme="dark"] .problem-card {
    background: rgba(239, 68, 68, 0.3) !important;
    border-left-color: #EF4444 !important;
}

[data-theme="dark"] .problem-card .problem-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .learned-card {
    background: rgba(132, 204, 22, 0.3) !important;
    border-left-color: #84CC16 !important;
}

[data-theme="dark"] .learned-card .learned-text {
    color: var(--text-primary) !important;
}

/* SECTION 21: OVERRIDE TAILWIND GRADIENT CLASSES */
[data-theme="dark"] .from-red-50,
[data-theme="dark"] .to-pink-50 {
    --tw-gradient-from: rgba(239, 68, 68, 0.3) !important;
    --tw-gradient-to: rgba(236, 72, 153, 0.3) !important;
}

[data-theme="dark"] .from-green-50,
[data-theme="dark"] .to-emerald-50 {
    --tw-gradient-from: rgba(132, 204, 22, 0.3) !important;
    --tw-gradient-to: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .from-blue-50,
[data-theme="dark"] .to-indigo-50 {
    --tw-gradient-from: rgba(59, 130, 246, 0.3) !important;
    --tw-gradient-to: rgba(99, 102, 241, 0.3) !important;
}

/* SECTION 22: TEXT COLOR OVERRIDES */
[data-theme="dark"] .text-red-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-green-800 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-blue-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-red-700 {
    color: #EF4444 !important;
}

[data-theme="dark"] .text-green-700 {
    color: #84CC16 !important;
}


/* SECTION: Historical Foundations cards & theme intro */

[data-theme="dark"] .historical-card,
[data-theme="dark"] .case-detail-card {
    background: var(--bg-lighter) !important;
    color: var(--text-primary) !important;
    border-color: rgba(148, 163, 184, 0.6) !important;
}

[data-theme="dark"] .historical-theme-intro {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(59, 130, 246, 0.7) !important;
}

[data-theme="dark"] .historical-theme-intro p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .historical-theme-intro p:last-child {
    color: #93c5fd !important; /* softer blue for ethical tension line */
}

/* =============================================
   DARK MODE FINAL OVERRIDES
   (Must be last for proper cascade)
   ============================================= */


/* Issue 1: NO red headers anywhere */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--text-primary, #F1F5F9) !important;
}

/* Issue 2: Tone down ALL bright document tiles */
[data-theme="dark"] .doc-card[class*="doc-card-"] {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
}

/* Issue 3: Glossary table cells NO white on hover */
[data-theme="dark"] .glossary-card table,
[data-theme="dark"] .glossary-card td,
[data-theme="dark"] .glossary-card th {
    background: transparent !important;
}

[data-theme="dark"] .glossary-card:hover,
[data-theme="dark"] .glossary-card:hover table,
[data-theme="dark"] .glossary-card:hover td {
    background: rgba(30, 41, 59, 0.6) !important;
}

/* Issue 4: Notes drawer NO white on hover */
[data-theme="dark"] #notes-drawer li {
    background: #1E293B !important;
}

[data-theme="dark"] #notes-drawer li:hover {
    background: #334155 !important;
}

[data-theme="dark"] #notes-drawer mark {
    background: rgba(251, 191, 36, 0.25) !important;
}

/* Issue 5: "What Went Wrong" boxes - colored not white */
[data-theme="dark"] .what-went-wrong,
[data-theme="dark"] [class*="alert-"][class*="danger"],
[data-theme="dark"] [class*="alert-"][class*="warning"] {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 2px solid rgba(239, 68, 68, 0.4) !important;
}

[data-theme="dark"] .what-we-learned,
[data-theme="dark"] [class*="alert-"][class*="success"] {
    background: rgba(132, 204, 22, 0.15) !important;
    border: 2px solid rgba(132, 204, 22, 0.4) !important;
}

/* Global: Ensure NO white backgrounds anywhere */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="backgroundColor: white"],
[data-theme="dark"] [style*="backgroundColor:white"] {
    background: #1E293B !important;
    background-color: #1E293B !important;
}


/* Notes Drawer: themed note rows (improves contrast + matches per-theme dark backgrounds) */
#notes-drawer #notes-drawer-content { background: transparent !important; }
#notes-drawer .notes-section { background: transparent !important; }
#notes-drawer .notes-section-list { list-style: none; margin: 0; padding-left: 0; }
#notes-drawer .notes-note-row { background: transparent !important; }
#notes-drawer .notes-note-row-inner { border-radius: 12px; }
#notes-drawer .notes-note-row-inner:focus-within { outline: 2px solid rgba(0,124,194,0.55); outline-offset: 2px; }

/* Light/default */
#notes-drawer .notes-section-header { background: rgba(2, 6, 23, 0.04); color: #475569; border-bottom: 1px solid rgba(2, 6, 23, 0.10); }
#notes-drawer .notes-note-row-inner { background: #FFFFFF; border: 1px solid rgba(2, 6, 23, 0.10); }
#notes-drawer .notes-note-row-inner:hover { background: rgba(2, 6, 23, 0.03); }

/* Dark themes */
[data-theme="dark"] #notes-drawer { background-color: var(--bg-light) !important; }
[data-theme="dark"] #notes-drawer .notes-section-header { background: rgba(255,255,255,0.04); color: rgba(226,232,240,0.90); border-bottom: 1px solid rgba(255,255,255,0.08); }
[data-theme="dark"] #notes-drawer .notes-note-row-inner { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
[data-theme="dark"] #notes-drawer .notes-note-row-inner:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] #notes-drawer .notes-note-row-inner .text-gray-500 { color: rgba(226,232,240,0.72) !important; }
[data-theme="dark"] #notes-drawer .notes-note-row-inner a, [data-theme="dark"] #notes-drawer .notes-note-row-inner .text-blue-600 { color: rgba(56, 189, 248, 0.95) !important; }

/* ============================================================
   Notes Drawer (Dark Mode) – Theme-tinted surfaces
   Goal: keep readability, but allow each dark theme to feel distinct.
   ============================================================ */

/* Default tint (used when no specific dark-style is selected) */
[data-theme="dark"] { --drawer-tint-rgb: 20, 184, 166; }

/* Notes drawer link accent (separate from surface tint so links remain identifiable in muted themes like "frost") */
[data-theme="dark"] { --drawer-link-rgb: 45, 212, 191; }

/* Per-theme tint values */
[data-theme="dark"][data-dark-style="aurora"]     { --drawer-tint-rgb: 45, 212, 191; }
[data-theme="dark"][data-dark-style="ocean"]      { --drawer-tint-rgb: 6, 182, 212; }
[data-theme="dark"][data-dark-style="frost"]      { --drawer-tint-rgb: 156, 163, 175; }
[data-theme="dark"][data-dark-style="blacklight"] { --drawer-tint-rgb: 167, 139, 250; }
[data-theme="dark"][data-dark-style="matrix"]     { --drawer-tint-rgb: 34, 197, 94; }

/* Per-theme link accents */
[data-theme="dark"][data-dark-style="aurora"]     { --drawer-link-rgb: 45, 212, 191; }
[data-theme="dark"][data-dark-style="ocean"]      { --drawer-link-rgb: 56, 189, 248; }
[data-theme="dark"][data-dark-style="frost"]      { --drawer-link-rgb: 147, 197, 253; }
[data-theme="dark"][data-dark-style="blacklight"] { --drawer-link-rgb: 196, 181, 253; }
[data-theme="dark"][data-dark-style="matrix"]     { --drawer-link-rgb: 74, 222, 128; }

/* Apply the tint to Notes drawer elements */
[data-theme="dark"] #notes-drawer .notes-section-header {
    background: linear-gradient(135deg, rgba(var(--drawer-tint-rgb), 0.14), rgba(255,255,255,0.03)) !important;
    border-bottom: 1px solid rgba(var(--drawer-tint-rgb), 0.22) !important;
}

[data-theme="dark"] #notes-drawer .notes-note-row-inner {
    background: linear-gradient(135deg, rgba(var(--drawer-tint-rgb), 0.10), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(var(--drawer-tint-rgb), 0.22) !important;
}

[data-theme="dark"] #notes-drawer .notes-note-row-inner:hover {
    background: linear-gradient(135deg, rgba(var(--drawer-tint-rgb), 0.14), rgba(255,255,255,0.03)) !important;
    border-color: rgba(var(--drawer-tint-rgb), 0.30) !important;
}

[data-theme="dark"] #notes-drawer .notes-note-row-inner:focus-within {
    outline: 2px solid rgba(var(--drawer-tint-rgb), 0.60) !important;
}

/* Make note titles/links follow the active theme accent instead of fixed "sky blue" */
[data-theme="dark"] #notes-drawer .notes-note-row-inner a,
[data-theme="dark"] #notes-drawer .notes-note-row-inner .text-blue-600 {
    color: rgba(var(--drawer-link-rgb), 0.96) !important;
}

/* Search-term highlight in Notes drawer should also respect theme tint */
[data-theme="dark"] #notes-drawer mark {
    background: rgba(var(--drawer-tint-rgb), 0.28) !important;
    color: var(--text-primary) !important;
}

/* =====================================================================
   PRIM&R Study Companion – Cohesive UI System (Gut Reno Reset)
   Applied as an override layer at the END of styles.css so it does not
   break JS behavior or markup assumptions.
   ===================================================================== */

:root{
  --primr-navy:#00447C;
  --primr-red:#B20838;
  --primr-teal:#008CA8;
  --primr-aqua:#007CC2;
  --primr-gold:#F8981D;
  --primr-purple:#542988;
  --primr-green:#78A22F;
  --primr-yellow:#FDB924;

  --bg:#F8FAFC;
  --panel:#FFFFFF;
  --panel-2:#F1F5F9;
  --border:#D5DEE9;
  --border-2:#C2CEDD;

  --text:#0F172A;
  --text-2:#334155;
  --muted:#64748B;

  --focus: rgba(0,140,168,.45);

  --radius: 14px;
  --shadow: 0 8px 24px rgba(15,23,42,.08);
}

[data-theme="dark"]{
  --bg:#0B1220;
  --panel:#0F1A2E;
  --panel-2:#111B2F;
  --border:#24324A;
  --border-2:#324560;

  --text:#E6EDF7;
  --text-2:#B7C3D7;
  --muted:#8A97AF;

  --focus: rgba(51,184,201,.45);
  --shadow: 0 10px 28px rgba(0,0,0,.35);
}

html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Typography cohesion */
h1,h2,h3,h4{
  color: var(--text) !important;
  letter-spacing: -.01em;
}
h1{ font-weight: 700 !important; }
h2,h3{ font-weight: 650 !important; }
p,li,span,div{ color: inherit; }

/* Panels / cards: unify across tabs (glossary, historical, knowledge checks, docs) */
.card, .glossary-card, .historical-card, .quiz-card,
.modal-content, .drawer, .drawer-content,
#notes-modal .modal-content, #saved-drawer .drawer-content{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* Generic “soft hover” */
.card:hover, .glossary-card:hover, .historical-card:hover, .quiz-card:hover{
  background: var(--panel-2) !important;
  border-color: var(--border-2) !important;
}

/* Buttons: keep consistent focus ring */
button:focus, button:focus-visible, a:focus, a:focus-visible, input:focus, textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus) !important;
}

/* Links */
a{ color: var(--primr-aqua); }
a:hover{ text-decoration: underline; }

/* =====================================================================
   Documents Tab – remove carnival gradients WITHOUT touching JS
   - Override the doc-card’s inline gradient classes by forcing our own
     neutral surface and text colors.
   ===================================================================== */
.doc-card{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  text-decoration: none !important;
}
.doc-card:hover{
  background: var(--panel-2) !important;
  border-color: var(--border-2) !important;
}

/* Doc titles and descriptions */
.doc-card .doc-title{ color: var(--text) !important; }
.doc-card p{ color: var(--text-2) !important; opacity: 1 !important; }

/* Stars in Docs:
   1) never blue on hover
   2) stays clickable (no pointer-events shenanigans)
*/
.doc-star-btn{
  color: var(--muted) !important;
  pointer-events: auto !important;
}
.doc-star-btn:hover{
  color: var(--text-2) !important; /* subtle, matches the rest of the app */
}
.doc-star-btn svg{
  stroke: currentColor !important;
  fill: none;
}
.doc-star-btn svg[fill="currentColor"]{
  fill: currentColor !important;
}

/* Notes + pen icons should follow text color, not accent */
[data-note-btn], .doc-card [data-note-btn]{
  color: var(--muted) !important;
}
[data-note-btn]:hover, .doc-card [data-note-btn]:hover{
  color: var(--text-2) !important;
}

/* Tables (docs + elsewhere) */
table{
  border-color: var(--border) !important;
}
table thead{
  background: rgba(0,68,124,.08) !important;
}
[data-theme="dark"] table thead{
  background: rgba(74,138,216,.14) !important;
}
table th, table td{
  border-color: var(--border) !important;
}
table tbody tr:nth-child(even){
  background: var(--panel-2) !important;
}


/* =========================================================
   Jan 2026 Accessibility Patch (Dark Mode)
   - Fix low-contrast "source pills" / citations chips
   - Prevent navy-on-dark hover that makes chips disappear
   ========================================================= */

[data-theme="dark"] #glossary-container a.source-pill,
[data-theme="dark"] .flashcard a.source-pill,
[data-theme="dark"] a.source-pill {
  background: rgba(var(--primr-teal-rgb), 0.14) !important;
  color: var(--text-primary) !important;
  border-color: rgba(var(--primr-teal-rgb), 0.40) !important;
  text-decoration: none !important;
}

[data-theme="dark"] #glossary-container a.source-pill:hover,
[data-theme="dark"] #glossary-container a.source-pill:focus-visible,
[data-theme="dark"] .flashcard a.source-pill:hover,
[data-theme="dark"] .flashcard a.source-pill:focus-visible,
[data-theme="dark"] a.source-pill:hover,
[data-theme="dark"] a.source-pill:focus-visible {
  background: rgba(var(--primr-teal-rgb), 0.28) !important;
  color: #FFFFFF !important;
  border-color: rgba(var(--primr-teal-rgb), 0.65) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 4px rgba(var(--primr-teal-rgb), 0.35) !important;
  transform: none !important; /* keep stable in modals */
}

/* If any legacy rules force a navy hover, override them in dark mode */
[data-theme="dark"] #glossary-container a.source-pill:hover,
[data-theme="dark"] #glossary-container a.source-pill:focus-visible {
  background-color: rgba(var(--primr-teal-rgb), 0.28) !important;
  border-color: rgba(var(--primr-teal-rgb), 0.65) !important;
}




/* === Drawer header text/icon fix (Light mode) ===
   Global heading color overrides were forcing drawer header titles/icons to dark text in light mode.
   Ensure drawer-header content stays white in BOTH themes.
*/
[data-theme] .drawer-header,
[data-theme] .drawer-header * {
  color: #ffffff !important;
}
[data-theme] .drawer-header button:hover {
  color: #ffffff !important;
}
/* Restore dark text on the active saved tab — the catch-all above forces white on everything */
:root:not([data-theme="dark"]) .drawer-header .saved-view-tab.active {
  color: #1F2937 !important;
}



/* === Analytics (learner-friendly, phone-first) === */
.analytics-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 22px;
}
.analytics-shell .a-header h2{
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
}
.analytics-shell .a-subhead{
  margin: 0 0 12px;
  opacity: .92;
}
.analytics-shell .a-start{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 12px 10px;
  margin: 12px 0 12px;
}

/* Light mode: make "How to read this data" section MORE vibrant */
:root:not([data-theme="dark"]) .analytics-shell .a-start {
  background: linear-gradient(135deg, rgba(0, 140, 168, 0.12), rgba(0, 68, 124, 0.15));
  border: 1px solid rgba(0, 68, 124, 0.25);
  box-shadow: 0 2px 4px rgba(0, 68, 124, 0.1);
}

.analytics-shell .a-start-title{
  font-weight: 800;
  margin-bottom: 6px;
}
.analytics-shell .a-start-list{
  margin: 0;
  padding-left: 18px;
}
.analytics-shell .a-start-list li{ margin: 6px 0; }

.analytics-shell .a-details{
  margin: 10px 0 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px 12px;
}

/* Light mode: make collapsible section visible */
:root:not([data-theme="dark"]) .analytics-shell .a-details {
  background: rgba(0, 140, 168, 0.03);
  border: 1px solid rgba(0, 68, 124, 0.12);
}

.analytics-shell .a-details summary{
  cursor: pointer;
  list-style: none;
}
.analytics-shell .a-details summary::-webkit-details-marker{ display:none; }

.analytics-shell .a-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.analytics-shell .a-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 10px 10px 9px;
}

/* Light mode: give cards MORE color like dark mode! */
:root:not([data-theme="dark"]) .analytics-shell .a-card {
  background: linear-gradient(135deg, rgba(0, 140, 168, 0.08), rgba(0, 68, 124, 0.12));
  border: 1px solid rgba(0, 68, 124, 0.2);
  box-shadow: 0 2px 4px rgba(0, 68, 124, 0.08);
}

.analytics-shell .a-card-title{ font-weight: 800; margin-bottom: 4px; }
.analytics-shell .a-card-body{ font-size: 13px; opacity: .95; line-height: 1.35; }
.analytics-shell .a-card-ex{ margin-top: 8px; font-size: 12px; opacity: .85; }
.analytics-shell .a-card-ex span{
  display:inline-block;
  padding: 2px 6px;
  margin: 3px 4px 0 0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

/* Light mode: make example pills AS VISIBLE as dark mode! */
:root:not([data-theme="dark"]) .analytics-shell .a-card-ex span {
  background: rgba(0, 140, 168, 0.12);
  color: rgba(0, 68, 124, 1);
  font-weight: 500;
}

.analytics-shell .a-note{ margin: 10px 2px 0; font-size: 13px; opacity: .88; }

/* Loader for iframe */
.iframe-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

.loader-spinner {
  border: 3px solid rgba(0, 140, 168, 0.2);
  border-top: 3px solid #008CA8;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-text {
  color: var(--primr-navy);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

[data-theme="dark"] .loader-text {
  color: white;
}

.analytics-shell .a-embed{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
}
.analytics-shell .a-embed iframe{
  width: 100%;
  height: 64vh;
  min-height: 520px;
  border: 0;
  display: block;
  background: #fff;
  /* Improve rendering quality */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

@media (max-width: 760px){
  .analytics-shell .a-grid{ grid-template-columns: 1fr; }
  .analytics-shell .a-embed iframe{ height: 68vh; min-height: 520px; }
}


/* Subtle visual cue for expandable analytics help */
.analytics-shell details > summary::after {
  content: "▾";
  float: right;
  font-size: 0.9em;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.analytics-shell details[open] > summary::after {
  transform: rotate(180deg);
}



/* Light mode warmth & clearer affordances */
body.light .analytics-shell .a-start,
body.light .analytics-shell .a-details {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

.analytics-shell details > summary::after {
  content: "▾";
  font-size: 0.9em;
  opacity: 0.5;
  margin-left: 6px;
}

.analytics-shell details[open] > summary::after {
  content: "▴";
}

.analytics-shell .a-geek summary {
  font-weight: 600;
}

.analytics-shell .a-geek ul {
  margin-left: 18px;
}

/* ============================================
[data-theme="dark"] .analytics-shell details summary {
  background: rgba(51, 65, 85, 0.3) !important;
}

/* ============================================

/* ============================================
   USAGE INSIGHTS MODAL - PROPER CSS CLASSES
   ============================================ */

/* Hero Section */
.insights-hero {
  background: linear-gradient(135deg, rgba(0, 140, 168, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 140, 168, 0.15);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .insights-hero {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.6) 0%, rgba(30, 41, 59, 0.8) 100%);
  border-color: rgba(71, 85, 105, 0.4);
}

.insights-icon-badge {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #008CA8, #007CC2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 140, 168, 0.25);
}

.insights-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-title {
  color: white;
}

.insights-text-primary {
  margin: 0 0 10px 0;
  line-height: 1.65;
  font-size: 0.95rem;
  color: #374151;
}

[data-theme="dark"] .insights-text-primary {
  color: #d1d5db;
}

.insights-text-secondary {
  margin: 0;
  line-height: 1.65;
  font-size: 0.95rem;
  color: #374151;
}

[data-theme="dark"] .insights-text-secondary {
  color: #d1d5db;
}

/* Card Section */
.insights-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .insights-card {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
}

.insights-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primr-teal), var(--primr-aqua));
}

.insights-card-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(0, 140, 168, 0.1), rgba(0, 124, 194, 0.1));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

[data-theme="dark"] .insights-card-icon {
  background: rgba(51, 65, 85, 0.5);
}

.insights-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-card-title {
  color: white;
}

.insights-card-text {
  line-height: 1.6;
  font-size: 0.9rem;
  color: #4B5563;
}

[data-theme="dark"] .insights-card-text {
  color: #d1d5db;
}

/* Accordion */
.insights-accordion {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

[data-theme="dark"] .insights-accordion {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
}

.insights-accordion-summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
  background: linear-gradient(to right, rgba(0, 140, 168, 0.03), transparent);
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-accordion-summary {
  background: rgba(71, 85, 105, 0.3);
  color: white;
}

.insights-accordion-content {
  padding: 16px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FAFAFA;
}

[data-theme="dark"] .insights-accordion-content {
  background: rgba(30, 41, 59, 0.4);
}

/* Activity Cards */
.insights-activity-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .insights-activity-card {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
}

.insights-activity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-activity-title {
  color: white;
}

.insights-activity-desc {
  color: #6B7280;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

[data-theme="dark"] .insights-activity-desc {
  color: #9ca3af;
}

.insights-activity-examples {
  font-size: 0.8rem;
  color: #9CA3AF;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-theme="dark"] .insights-activity-examples {
  color: #9ca3af;
}

.insights-tag {
  background: #F3F4F6;
  padding: 3px 8px;
  border-radius: 4px;
}

[data-theme="dark"] .insights-tag {
  background: rgb(71, 85, 105);
  color: #e5e7eb;
}

.insights-note {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
  color: #6B7280;
  font-size: 0.85rem;
  line-height: 1.5;
  background: white;
  border-radius: 6px;
  padding: 14px;
}

[data-theme="dark"] .insights-note {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
  color: #9ca3af;
}

/* Divider */
.insights-divider {
  margin: 32px 0 28px 0;
  text-align: center;
  position: relative;
}

.insights-divider-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #E5E7EB 20%, #E5E7EB 80%, transparent);
}

[data-theme="dark"] .insights-divider-line {
  background: linear-gradient(to right, transparent, rgba(71, 85, 105, 0.5) 20%, rgba(71, 85, 105, 0.5) 80%, transparent);
}

.insights-divider-text {
  position: relative;
  background: var(--bg-white, #f7fafc);
  padding: 0 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9CA3AF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .insights-divider-text {
  background: rgb(30, 41, 59);
  color: #9ca3af;
}

/* ============================================
   USAGE INSIGHTS MODAL - PROPER CSS CLASSES
   ============================================ */

/* Hero Section */
.insights-hero {
  background: linear-gradient(135deg, rgba(0, 140, 168, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(0, 140, 168, 0.15);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .insights-hero {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.6) 0%, rgba(30, 41, 59, 0.8) 100%);
  border-color: rgba(71, 85, 105, 0.4);
}

.insights-icon-badge {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #008CA8, #007CC2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 140, 168, 0.25);
}

.insights-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-title {
  color: white;
}

.insights-text-primary {
  margin: 0 0 10px 0;
  line-height: 1.65;
  font-size: 0.95rem;
  color: #374151;
}

[data-theme="dark"] .insights-text-primary {
  color: #d1d5db;
}

.insights-text-secondary {
  margin: 0;
  line-height: 1.65;
  font-size: 0.95rem;
  color: #374151;
}

[data-theme="dark"] .insights-text-secondary {
  color: #d1d5db;
}

/* Card Section */
.insights-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .insights-card {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
}

.insights-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primr-teal), var(--primr-aqua));
}

.insights-card-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(0, 140, 168, 0.1), rgba(0, 124, 194, 0.1));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

[data-theme="dark"] .insights-card-icon {
  background: rgba(51, 65, 85, 0.5);
}

.insights-card-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-card-title {
  color: white;
}

.insights-card-text {
  line-height: 1.6;
  font-size: 0.9rem;
  color: #4B5563;
}

[data-theme="dark"] .insights-card-text {
  color: #d1d5db;
}

/* Accordion */
.insights-accordion {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

[data-theme="dark"] .insights-accordion {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
}

.insights-accordion-summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
  background: linear-gradient(to right, rgba(0, 140, 168, 0.03), transparent);
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-accordion-summary {
  background: rgba(71, 85, 105, 0.3);
  color: white;
}

.insights-accordion-content {
  padding: 16px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FAFAFA;
}

[data-theme="dark"] .insights-accordion-content {
  background: rgba(30, 41, 59, 0.4);
}

/* Activity Cards */
.insights-activity-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .insights-activity-card {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
}

.insights-activity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primr-navy);
}

[data-theme="dark"] .insights-activity-title {
  color: white;
}

.insights-activity-desc {
  color: #6B7280;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

[data-theme="dark"] .insights-activity-desc {
  color: #9ca3af;
}

.insights-activity-examples {
  font-size: 0.8rem;
  color: #9CA3AF;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-theme="dark"] .insights-activity-examples {
  color: #9ca3af;
}

.insights-tag {
  background: #F3F4F6;
  padding: 3px 8px;
  border-radius: 4px;
}

[data-theme="dark"] .insights-tag {
  background: rgb(71, 85, 105);
  color: #e5e7eb;
}

.insights-note {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
  color: #6B7280;
  font-size: 0.85rem;
  line-height: 1.5;
  background: white;
  border-radius: 6px;
  padding: 14px;
}

[data-theme="dark"] .insights-note {
  background: rgb(51, 65, 85);
  border-color: rgb(71, 85, 105);
  color: #9ca3af;
}

/* Divider */
.insights-divider {
  margin: 32px 0 28px 0;
  text-align: center;
  position: relative;
}

.insights-divider-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #E5E7EB 20%, #E5E7EB 80%, transparent);
}

[data-theme="dark"] .insights-divider-line {
  background: linear-gradient(to right, transparent, rgba(71, 85, 105, 0.5) 20%, rgba(71, 85, 105, 0.5) 80%, transparent);
}

.insights-divider-text {
  position: relative;
  background: var(--bg-white, #f7fafc);
  padding: 0 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9CA3AF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .insights-divider-text {
  background: rgb(30, 41, 59);
  color: #9ca3af;
}

/* ============================================
   USAGE INSIGHTS - ADAPT TO DARK THEME STYLES
   ============================================ */

/* Aurora (Teal) Theme */
[data-theme="dark"][data-dark-style="aurora"] .insights-hero {
  background: linear-gradient(135deg, rgba(15, 61, 56, 0.6) 0%, rgba(7, 21, 37, 0.8) 100%);
  border-color: rgba(20, 184, 166, 0.3);
}

[data-theme="dark"][data-dark-style="aurora"] .insights-icon-badge {
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
}

[data-theme="dark"][data-dark-style="aurora"] .insights-card,
[data-theme="dark"][data-dark-style="aurora"] .insights-accordion,
[data-theme="dark"][data-dark-style="aurora"] .insights-activity-card,
[data-theme="dark"][data-dark-style="aurora"] .insights-note {
  background: rgba(15, 61, 56, 0.4);
  border-color: rgba(20, 184, 166, 0.3);
}

/* Ocean (Blue) Theme */
[data-theme="dark"][data-dark-style="ocean"] .insights-hero {
  background: linear-gradient(135deg, rgba(7, 89, 133, 0.6) 0%, rgba(3, 7, 18, 0.8) 100%);
  border-color: rgba(6, 182, 212, 0.3);
}

[data-theme="dark"][data-dark-style="ocean"] .insights-icon-badge {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

[data-theme="dark"][data-dark-style="ocean"] .insights-card,
[data-theme="dark"][data-dark-style="ocean"] .insights-accordion,
[data-theme="dark"][data-dark-style="ocean"] .insights-activity-card,
[data-theme="dark"][data-dark-style="ocean"] .insights-note {
  background: rgba(7, 89, 133, 0.4);
  border-color: rgba(6, 182, 212, 0.3);
}

/* Frost (Gray) Theme */
[data-theme="dark"][data-dark-style="frost"] .insights-hero {
  background: linear-gradient(135deg, rgba(55, 65, 81, 0.6) 0%, rgba(17, 24, 39, 0.8) 100%);
  border-color: rgba(156, 163, 175, 0.3);
}

[data-theme="dark"][data-dark-style="frost"] .insights-icon-badge {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
}

[data-theme="dark"][data-dark-style="frost"] .insights-card,
[data-theme="dark"][data-dark-style="frost"] .insights-accordion,
[data-theme="dark"][data-dark-style="frost"] .insights-activity-card,
[data-theme="dark"][data-dark-style="frost"] .insights-note {
  background: rgba(55, 65, 81, 0.4);
  border-color: rgba(156, 163, 175, 0.3);
}

/* Blacklight (Purple) Theme */
[data-theme="dark"][data-dark-style="blacklight"] .insights-hero {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.6) 0%, rgba(17, 24, 39, 0.8) 100%);
  border-color: rgba(167, 139, 250, 0.3);
}

[data-theme="dark"][data-dark-style="blacklight"] .insights-icon-badge {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
}

[data-theme="dark"][data-dark-style="blacklight"] .insights-card,
[data-theme="dark"][data-dark-style="blacklight"] .insights-accordion,
[data-theme="dark"][data-dark-style="blacklight"] .insights-activity-card,
[data-theme="dark"][data-dark-style="blacklight"] .insights-note {
  background: rgba(88, 28, 135, 0.4);
  border-color: rgba(167, 139, 250, 0.3);
}

/* Matrix (Green) Theme */
[data-theme="dark"][data-dark-style="matrix"] .insights-hero {
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.6) 0%, rgba(5, 10, 7, 0.8) 100%);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"][data-dark-style="matrix"] .insights-icon-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

[data-theme="dark"][data-dark-style="matrix"] .insights-card,
[data-theme="dark"][data-dark-style="matrix"] .insights-accordion,
[data-theme="dark"][data-dark-style="matrix"] .insights-activity-card,
[data-theme="dark"][data-dark-style="matrix"] .insights-note {
  background: rgba(20, 83, 45, 0.4);
  border-color: rgba(34, 197, 94, 0.3);
}

/* Fix accordion summary layout */
.insights-accordion-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.insights-accordion-summary > svg {
  flex-shrink: 0;
}

.insights-accordion summary::marker {
  display: none;
}

.insights-accordion summary::-webkit-details-marker {
  display: none;
}

.insights-accordion summary::after {
  content: "▾";
  color: var(--primr-teal);
  font-size: 14px;
  transition: transform 0.2s;
}

.insights-accordion[open] summary::after {
  transform: rotate(180deg);
}

/* Getting Started Button */
.getting-started-btn {
    position: absolute;
    top: calc(1rem + 48px + 0.5rem);
    left: 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem;
    cursor: pointer;
    width: 48px;
    height: 48px;
    color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.getting-started-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.getting-started-btn:focus-visible {
    outline: 3px solid var(--primr-teal-light);
    outline-offset: 2px;
}

.getting-started-btn svg {
    width: 22px;
    height: 22px;
}

[data-theme="dark"] .getting-started-btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-primary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .getting-started-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .getting-started-btn:focus-visible {
    outline: 2px solid var(--border-medium);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .getting-started-btn {
        top: calc(1rem + 44px + 0.5rem);
        left: 1rem;
        width: 44px;
        height: 44px;
        padding: 0.625rem;
    }

    .getting-started-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .getting-started-btn {
        top: 1.25rem;
        left: calc(1.25rem + 44px + 0.5rem);
    }
}

/* Welcome Modal */
#welcome-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10001 !important;
    padding: 1rem;
}

#welcome-modal > div {
    max-height: 90vh;
    overflow-y: auto;
}

@media (max-width: 640px) {
    #welcome-modal {
        padding: 0.5rem;
        align-items: flex-start !important;
    }
    
    #welcome-modal > div {
        max-height: calc(100vh - 1rem);
        margin-top: 0.5rem;
    }
}

[data-theme="dark"] #welcome-modal .bg-white {
    background: var(--bg-lighter) !important;
}

[data-theme="dark"] #welcome-modal .text-gray-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #welcome-modal .text-gray-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #welcome-modal .border-gray-200 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #welcome-modal #welcome-next {
    background: linear-gradient(to right, var(--primr-teal-dark), var(--primr-navy-dark)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #welcome-modal #welcome-next:hover {
    background: linear-gradient(to right, var(--primr-teal), var(--primr-navy)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #welcome-modal #welcome-prev {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #welcome-modal #welcome-prev:hover {
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   EXAM INFO SECTIONS - stacked layout
   ============================================================ */
.exam-info-detail {
    background: var(--bg-lighter);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

/* ============================================================
   SUMMARY (clickable header)
   ============================================================ */
.exam-info-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.exam-info-summary::-webkit-details-marker {
    display: none;
}

.exam-info-summary:hover {
    background: rgba(var(--primr-green-rgb), 0.08);
}

.exam-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primr-green);
    flex-shrink: 0;
    width: 1.5rem;
}

.exam-info-summary-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primr-green);
    flex: 1;
}

.exam-info-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.25s ease;
    display: block;
}

.exam-info-detail:open .exam-info-chevron {
    transform: rotate(180deg);
}

/* ============================================================
   BODY (content inside open details)
   ============================================================ */
.exam-info-body {
    padding: 0 1.25rem 1.25rem;
}

/* ============================================================
   ABOUT SECTION: intro + stat cards + info lines
   ============================================================ */
.exam-info-intro {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.exam-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .exam-stat-row {
        grid-template-columns: 1fr;
    }
}

.exam-stat-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.exam-stat-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primr-green);
    line-height: 1.3;
}

.exam-stat-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.4;
}

.exam-info-line {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.exam-info-line strong {
    color: var(--text-primary);
}

/* ============================================================
   STUDY STRATEGIES: icon rows
   ============================================================ */
.exam-strategy-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}

.exam-strategy-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.exam-strategy-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    width: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.1rem;
}

.exam-strategy-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primr-green);
    margin-bottom: 0.2rem;
}

.exam-strategy-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.exam-strategy-link {
    color: var(--primr-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.exam-strategy-link:hover {
    color: var(--primr-navy);
}

[data-theme="dark"] .exam-strategy-link {
    color: var(--primr-teal-light, #4dd9ec);
}

[data-theme="dark"] .exam-strategy-link:hover {
    color: #ffffff;
}

/* Body of Knowledge Links Bar */
.bok-links-bar {
  background: var(--primr-navy);
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bok-link {
  color: white;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s;
}

.bok-link:hover {
  opacity: 0.8;
}

[data-theme="dark"] .bok-links-bar {
  background: var(--primr-teal);
}

/* Fix Welcome accordion bullet size */
.exam-info-body ul {
  font-size: 0.875rem;
}
header h1, header p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* =============================================
   CATEGORY SEPARATOR COLORS
   Distinct border colors per category in
   Docs and Charts & Tables tabs.
   ============================================= */

/* Light mode */
.cat-sep-blue    { border-color: #3b82f6; }
.cat-sep-purple  { border-color: #8b5cf6; }
.cat-sep-emerald { border-color: #10b981; }
.cat-sep-amber   { border-color: #f59e0b; }
.cat-sep-teal    { border-color: #14b8a6; }
.cat-sep-rose    { border-color: #f43f5e; }
.cat-sep-sky     { border-color: #0ea5e9; }
.cat-sep-lime    { border-color: #84cc16; }

/* Dark mode - all variants use brighter borders for visibility */
[data-theme="dark"] .cat-sep-blue,
[data-dark-style]   .cat-sep-blue    { border-color: #60a5fa !important; }
[data-theme="dark"] .cat-sep-purple,
[data-dark-style]   .cat-sep-purple  { border-color: #a78bfa !important; }
[data-theme="dark"] .cat-sep-emerald,
[data-dark-style]   .cat-sep-emerald { border-color: #34d399 !important; }
[data-theme="dark"] .cat-sep-amber,
[data-dark-style]   .cat-sep-amber   { border-color: #fbbf24 !important; }
[data-theme="dark"] .cat-sep-teal,
[data-dark-style]   .cat-sep-teal    { border-color: #2dd4bf !important; }
[data-theme="dark"] .cat-sep-rose,
[data-dark-style]   .cat-sep-rose    { border-color: #fb7185 !important; }
[data-theme="dark"] .cat-sep-sky,
[data-dark-style]   .cat-sep-sky     { border-color: #38bdf8 !important; }
[data-theme="dark"] .cat-sep-lime,
[data-dark-style]   .cat-sep-lime    { border-color: #a3e635 !important; }

/* Dark mode - category title text */
[data-theme="dark"] .category-title,
[data-dark-style]   .category-title  { color: #e5e7eb !important; }