/* === TAILWIND STATIC BUILD === */
*,: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:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #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:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#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]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-0\.5{bottom:-.125rem}.-bottom-\[1px\]{bottom:-1px}.-right-0\.5{right:-.125rem}.-right-\[1px\]{right:-1px}.bottom-0{bottom:0}.bottom-20{bottom:5rem}.bottom-24{bottom:6rem}.bottom-4{bottom:1rem}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.top-3{top:.75rem}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-50{z-index:50}.z-\[10000\]{z-index:10000}.z-\[999999\]{z-index:999999}.z-\[99999\]{z-index:99999}.col-span-12{grid-column:span 12/span 12}.m-0{margin:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:.75rem;margin-bottom:.75rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.me-1{margin-inline-end:.25rem}.me-2{margin-inline-end:.5rem}.ml-1{margin-left:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.ms-1{margin-inline-start:.25rem}.ms-2{margin-inline-start:.5rem}.ms-3{margin-inline-start:.75rem}.ms-auto{margin-inline-start:auto}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-\[3px\]{margin-top:3px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.\!hidden{display:none!important}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[22px\]{height:22px}.h-\[7px\]{height:7px}.h-full{height:100%}.max-h-60{max-height:15rem}.max-h-\[200px\]{max-height:200px}.max-h-\[60vh\]{max-height:60vh}.max-h-\[90vh\]{max-height:90vh}.min-h-\[54px\]{min-height:54px}.min-h-\[86px\]{min-height:86px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-2\.5{width:.625rem}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[200px\]{width:200px}.w-\[22px\]{width:22px}.w-\[7px\]{width:7px}.w-\[94px\]{width:94px}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.max-w-\[1200px\]{max-width:1200px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-y-2{--tw-translate-y:0.5rem}.transform,.translate-y-2{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))}.cursor-pointer{cursor:pointer}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[auto_minmax\(0\2c 1fr\)_auto\]{grid-template-columns:auto minmax(0,1fr) auto}.grid-cols-\[minmax\(0\2c 1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.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-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-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-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.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,1))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-s{border-inline-start-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-\[\#1b1b1b\]{--tw-border-opacity:1;border-color:rgb(27 27 27/var(--tw-border-opacity,1))}.border-\[\#333333\],.border-\[\#333\]{--tw-border-opacity:1;border-color:rgb(51 51 51/var(--tw-border-opacity,1))}.border-\[var\(--primary\)\]{border-color:var(--primary)}.border-red-100{--tw-border-opacity:1;border-color:rgb(254 226 226/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-t-\[var\(--primary\)\]{border-top-color:var(--primary)}.bg-\[\#000000\]{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-\[\#0d0d0d\]{--tw-bg-opacity:1;background-color:rgb(13 13 13/var(--tw-bg-opacity,1))}.bg-\[\#121212\]{--tw-bg-opacity:1;background-color:rgb(18 18 18/var(--tw-bg-opacity,1))}.bg-\[\#161616\]{--tw-bg-opacity:1;background-color:rgb(22 22 22/var(--tw-bg-opacity,1))}.bg-\[\#171717\]{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-\[\#1a1a1a\]{--tw-bg-opacity:1;background-color:rgb(26 26 26/var(--tw-bg-opacity,1))}.bg-\[\#1b1b1b\]{--tw-bg-opacity:1;background-color:rgb(27 27 27/var(--tw-bg-opacity,1))}.bg-\[\#202020\]{--tw-bg-opacity:1;background-color:rgb(32 32 32/var(--tw-bg-opacity,1))}.bg-\[\#22c55e\]{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-\[\#242527\]{--tw-bg-opacity:1;background-color:rgb(36 37 39/var(--tw-bg-opacity,1))}.bg-\[\#2796f2\]{--tw-bg-opacity:1;background-color:rgb(39 150 242/var(--tw-bg-opacity,1))}.bg-\[\#333\]{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-\[\#e4e6ea\]{--tw-bg-opacity:1;background-color:rgb(228 230 234/var(--tw-bg-opacity,1))}.bg-\[\#e8f4fd\]{--tw-bg-opacity:1;background-color:rgb(232 244 253/var(--tw-bg-opacity,1))}.bg-\[\#e8faf0\]{--tw-bg-opacity:1;background-color:rgb(232 250 240/var(--tw-bg-opacity,1))}.bg-\[\#f7f8fa\]{--tw-bg-opacity:1;background-color:rgb(247 248 250/var(--tw-bg-opacity,1))}.bg-\[\#fef3e2\]{--tw-bg-opacity:1;background-color:rgb(254 243 226/var(--tw-bg-opacity,1))}.bg-\[var\(--primary\)\]{background-color:var(--primary)}.bg-amber-400\/90{background-color:rgba(251,191,36,.9)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-danger{--tw-bg-opacity:1;background-color:rgb(231 76 60/var(--tw-bg-opacity,1))}.bg-orange-500\/90{background-color:rgba(249,115,22,.9)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(39 150 242/var(--tw-bg-opacity,1))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.bg-slate-300\/90{background-color:rgba(203,213,225,.9)}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-success{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-warning{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.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-\[\#178FDB\]{--tw-gradient-from:#178fdb var(--tw-gradient-from-position);--tw-gradient-to:rgba(23,143,219,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-amber-50\/80{--tw-gradient-from:rgba(255,251,235,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,251,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,182,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-50\/60{--tw-gradient-from:rgba(255,247,237,.6) var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,247,237,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-500{--tw-gradient-from:#f97316 var(--tw-gradient-from-position);--tw-gradient-to:rgba(249,115,22,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(168,85,247,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-slate-100\/60{--tw-gradient-from:rgba(241,245,249,.6) var(--tw-gradient-from-position);--tw-gradient-to:rgba(241,245,249,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-\[\#53C6FF\]{--tw-gradient-to:#53c6ff var(--tw-gradient-to-position)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pl-\[108px\]{padding-left:108px}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-\[10px\]{padding-top:10px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-roboto{font-family:Roboto,sans-serif}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.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-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.tracking-\[0\.01em\]{letter-spacing:.01em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[\#178FDB\]{--tw-text-opacity:1;color:rgb(23 143 219/var(--tw-text-opacity,1))}.text-\[\#22c55e\]{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-\[\#2796f2\]{--tw-text-opacity:1;color:rgb(39 150 242/var(--tw-text-opacity,1))}.text-\[\#708095\]{--tw-text-opacity:1;color:rgb(112 128 149/var(--tw-text-opacity,1))}.text-\[\#777777\]{--tw-text-opacity:1;color:rgb(119 119 119/var(--tw-text-opacity,1))}.text-\[\#FFFFFF\]{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-\[\#FFFFFF\]\/40{color:hsla(0,0%,100%,.4)}.text-\[\#FFFFFF\]\/70{color:hsla(0,0%,100%,.7)}.text-\[\#e74c3c\]{--tw-text-opacity:1;color:rgb(231 76 60/var(--tw-text-opacity,1))}.text-\[\#f59e0b\]{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-\[var\(--color-primary\2c \#178FDB\)\]{color:var(--color-primary,#178fdb)}.text-\[var\(--primary\)\]{color:var(--primary)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-danger{--tw-text-opacity:1;color:rgb(231 76 60/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-inherit{color:inherit}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(39 150 242/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.text-success{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-warning{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/35{color:hsla(0,0%,100%,.35)}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-\[0_0_6px_rgba\(34\2c 197\2c 94\2c 0\.55\)\]{--tw-shadow:0 0 6px rgba(34,197,94,.55);--tw-shadow-colored:0 0 6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.025\)\]{--tw-shadow:inset 0 1px 0 0 hsla(0,0%,100%,.025);--tw-shadow-colored:inset 0 1px 0 0 var(--tw-shadow-color)}.shadow-\[inset_0_1px_0_0_rgba\(255\2c 255\2c 255\2c 0\.025\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-amber-500\/20{--tw-shadow-color:rgba(245,158,11,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-orange-500\/20{--tw-shadow-color:rgba(249,115,22,.2);--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-400\/20{--tw-shadow-color:rgba(148,163,184,.2);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.\!ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-amber-300\/60{--tw-ring-color:rgba(252,211,77,.6)}.ring-blue-500\/20{--tw-ring-color:rgba(59,130,246,.2)}.ring-orange-300\/50{--tw-ring-color:hsla(31,97%,72%,.5)}.ring-sky-500\/30{--tw-ring-color:rgba(14,165,233,.3)}.ring-slate-200\/60{--tw-ring-color:rgba(226,232,240,.6)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.sepia{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)}.sepia{--tw-sepia:sepia(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\:text-\[\#FFFFFF\]\/40::-moz-placeholder{color:hsla(0,0%,100%,.4)}.placeholder\:text-\[\#FFFFFF\]\/40::placeholder{color:hsla(0,0%,100%,.4)}.placeholder\:text-\[\#FFFFFF\]\/45::-moz-placeholder{color:hsla(0,0%,100%,.45)}.placeholder\:text-\[\#FFFFFF\]\/45::placeholder{color:hsla(0,0%,100%,.45)}.focus-within\:border-\[var\(--primary\)\]:focus-within{border-color:var(--primary)}.hover\:border-\[\#4a4a4a\]:hover{--tw-border-opacity:1;border-color:rgb(74 74 74/var(--tw-border-opacity,1))}.hover\:border-\[var\(--primary\)\]:hover{border-color:var(--primary)}.hover\:bg-\[\#1a7fd9\]:hover{--tw-bg-opacity:1;background-color:rgb(26 127 217/var(--tw-bg-opacity,1))}.hover\:bg-\[\#202020\]:hover{--tw-bg-opacity:1;background-color:rgb(32 32 32/var(--tw-bg-opacity,1))}.hover\:bg-\[\#242424\]:hover{--tw-bg-opacity:1;background-color:rgb(36 36 36/var(--tw-bg-opacity,1))}.hover\:bg-\[\#2a2a2a\]:hover{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.hover\:bg-\[\#444\]:hover{--tw-bg-opacity:1;background-color:rgb(68 68 68/var(--tw-bg-opacity,1))}.hover\:bg-\[\#e74c3c\]\/10:hover{background-color:rgba(231,76,60,.1)}.hover\:bg-\[var\(--primary-hover\)\]:hover{background-color:var(--primary-hover)}.hover\:bg-green-100:hover{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.hover\:bg-red-100:hover{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-\[\#FFFFFF\]:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-\[\#e74c3c\]:hover{--tw-text-opacity:1;color:rgb(231 76 60/var(--tw-text-opacity,1))}.hover\:text-\[var\(--primary\)\]:hover{color:var(--primary)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:border-\[\#2796f2\]:focus{--tw-border-opacity:1;border-color:rgb(39 150 242/var(--tw-border-opacity,1))}.focus\:border-\[var\(--primary\)\]:focus{border-color:var(--primary)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.sm\:hidden{display:none}}@media (min-width:768px){.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* === CSS VARIABLES (must come first) === */
/**
 * FORRE_DARK - CSS Variables & Tokens
 * Alla färger, spacing, tokens centralt
 */

:root {
  /* ============================================
     PRIMARY COLORS
     ============================================ */
  --primary: #2796f2;
  --primary-hover: #1a7fd9;
  --primary-glow: rgba(39,150,242,0.50);

  /* ============================================
     BACKGROUND SURFACES (hierarki)
     ============================================ */
  --surface-1: #161616;  /* Body bg */
  --surface-2: #1a1a1a;  /* Card bg */
  --surface-3: #1b1b1b;  /* Card alt */
  --surface-4: #202020;  /* Input bg */
  --surface-5: #121212;  /* Topbar */

  /* Legacy aliases (kompatibilitet) */
  --body-bg: var(--surface-1);
  --card-bg: var(--surface-2);
  --card-bg-alt: var(--surface-3);
  --panel-bg: #171717;
  --input-bg: var(--surface-4);
  --topbar-bg: var(--surface-5);

  /* ============================================
     TEXT COLORS
     ============================================ */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.70);
  --text-tertiary: rgba(255,255,255,0.40);
  --text-muted: #777777;

  /* ============================================
     BORDERS & DIVIDERS
     ============================================ */
  --border: #333333;
  --border-light: #2a2a2a;
  --border-dark: #2f2f2f;
  --divider: #2d2d2d;

  /* ============================================
     TINT-BAKGRUNDER (transparanta färger för widget-sidor)
     ============================================ */
  --tint-blue: rgba(39,150,242, 0.08);   /* hub / primary */
  --tint-green: rgba(34,197,94, 0.08);   /* lfg / live */
  --tint-warning: rgba(245,158,11, 0.08); /* events / leaderboard */
  --tint-purple: rgba(168,85,247, 0.08); /* progress / xp */
  --tint-danger: rgba(231,76,60, 0.08);  /* error / alert */

  /* ============================================
     STATUS COLORS
     ============================================ */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #e74c3c;
  --error: #e74c3c;

  /* ============================================
     RADIUS
     ============================================ */
  --radius: 4px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 20px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-default: 0 10px 24px rgba(0,0,0,0.28);
  --shadow-hover: 0 18px 40px rgba(0,0,0,0.55);
  --shadow-button: 0 14px 28px rgba(0,0,0,0.35);
  --shadow-navbar: 0 14px 28px rgba(0,0,0,0.35);
  --shadow-topbar: 0 10px 24px rgba(0,0,0,0.45);
  --shadow-dropdown: 0 18px 38px rgba(0,0,0,0.45);

  /* ============================================
     SURFACE CONTRAST — wider spread for depth
     ============================================ */
  --surface-2b: #222222;   /* Lighter card bg for contrast */
  --surface-6:  #282828;   /* Elevated surfaces */
  --border-active: #3a3a3a;

  /* Stronger tints for active/focused states */
  --tint-blue-strong:   rgba(39,150,242,0.15);
  --tint-green-strong:  rgba(34,197,94,0.15);
  --tint-warning-strong:rgba(245,158,11,0.15);
  --tint-purple-strong: rgba(168,85,247,0.15);
  --tint-danger-strong: rgba(231,76,60,0.15);

  /* ============================================
     LAYOUT
     ============================================ */
  --max-width: 1200px;
  --navbar-height: 58px;

  /* ============================================
     WIDGET TOKENS
     ============================================ */
  --widget-header-height: 36px;
  --widget-body-padding: 12px;
  --widget-footer-padding: 8px 12px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-speed: 0.12s ease;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-family: 'Roboto', sans-serif;
  --font-size-sm: 12px;
  --font-size-base: 14px;

  /* ============================================
     COMPATIBILITY ALIASES
     ============================================ */
  --bg-card: var(--card-bg);
  --bg-body: var(--body-bg);
  --border-color: var(--border);
  --text-main: var(--text-primary);
  --text-muted-alt: var(--text-muted);
  --spacing-lg: 20px;
  --spacing-sm: 12px;
  --radius-xl: var(--radius-lg);
  --radius-md: var(--radius);
  --shadow-elevated: var(--shadow-default);
  --shadow-glow-blue: 0 0 20px rgba(39,150,242,0.30);
  --fn-blue: var(--primary);
}
/* === CUSTOM COMPONENT CSS === */
/* --- buttons.css --- */
/**
 * FORRE_DARK - Buttons & Badges
 */

/* Base Button */
.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg-alt);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-speed), transform var(--transition-speed), background var(--transition-speed);
}

.tw-btn:hover {
  border-color: #4a4a4a;
  transform: translateY(-1px);
}

.tw-btn-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.tw-btn-primary:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: #fff;
}

/* Badge */
.tw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg-alt);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-primary);
}

.tw-badge-primary {
  border-color: var(--primary);
  color: var(--primary);
}

.tw-badge-success {
  border-color: var(--success);
  color: var(--success);
}

.tw-badge-danger {
  border-color: var(--danger);
  color: var(--danger);
}
/* --- content.css --- */
/**
 * FORRE_DARK - Content Shell
 */

.tw-content-section {
  width: 100%;
  flex: 1;
  background: var(--body-bg);
  padding: 20px 16px; /* 20px gap from header */
}

.tw-content-inner {
  margin: 0 auto;
  max-width: var(--max-width);
}

.tw-page-wrapper {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: var(--panel-bg);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px; /* 20px gap to footer */
}

/* Page wrapper dividers */
.tw-page-divider-top {
  position: absolute;
  inset-x: 0;
  top: 0;
  height: 1px;
  background: #3a3a3a;
}

.tw-page-divider-bottom {
  position: absolute;
  inset-x: 0;
  top: 1px;
  height: 1px;
  background: #1f1f1f;
}

.tw-page-content {
  padding: 16px;
  color: var(--text-primary);
}

/* Profile alignment safeguards in live mode: saved pb-widget margins must not push first widgets out of line */
body.tw-page-profile:not(.builder-edit-mode) .pb-col > .builder-drop-zone,
body.tw-page-profile[data-edit-mode="false"] .pb-col > .builder-drop-zone {
  min-height: 0;
}

/* Profile page in builder edit mode: remove row/drop-zone top space that pushes first widget down */
body.builder-edit-mode.tw-page-profile .pb-row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.builder-edit-mode.tw-page-profile .pb-col {
  min-height: 0 !important;
}

body.builder-edit-mode.tw-page-profile .pb-col > .builder-drop-zone {
  min-height: 0 !important;
}

body.builder-edit-mode.tw-page-profile .pb-col > .builder-drop-zone:empty {
  min-height: 50px !important;
}


/* --- footer.css --- */
/**
 * FORRE_DARK - Footer
 */

.tw-site-footer {
  background: var(--body-bg);
  margin-top: auto;
}

.tw-footer-divider {
  width: 100%;
  height: 1px;
  background: var(--divider);
}

.tw-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 16px 18px;
  color: var(--text-secondary);
  display: grid;
  gap: 16px;
}

.tw-footer-main-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.tw-footer-brand {
  display: grid;
  gap: 6px;
}

.tw-footer-logo {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  font-weight: 700;
}

.tw-footer-logo i {
  color: var(--primary);
}

.tw-footer-logo img {
  object-fit: contain;
}

.tw-footer-tagline {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tw-footer-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.tw-footer-topic {
  display: grid;
  gap: 10px;
}

.tw-footer-topic-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.tw-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.tw-footer-links a {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition-speed);
}

.tw-footer-links a:hover {
  color: var(--primary);
}

.tw-footer-social {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.tw-social-pill {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--transition-speed), color var(--transition-speed), background var(--transition-speed);
  font-size: 14px;
}

.tw-social-pill:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-2);
}

.tw-footer-copy {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 400;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}

@media (max-width: 1024px) {
  .tw-footer-main-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tw-footer-right {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tw-footer-nav,
  .tw-footer-social {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .tw-footer-inner {
    padding: 18px 14px 14px;
    gap: 12px;
  }

  .tw-footer-links {
    gap: 6px;
  }
}

/* --- friends-page.css --- */
/* Friends page (FORRE_DARK / 02 facit) */
.tw-friends-page {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tw-friends-hero {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  padding: 14px 14px 14px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.tw-friends-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--primary);
}

.tw-friends-hero-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.4px;
}

.tw-friends-hero-title i {
  color: var(--primary);
}

.tw-friends-hero-meta {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tw-friends-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.tw-friends-pill {
  border: 1px solid rgba(39, 150, 242, 0.35);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 9px;
  border-radius: 0;
}

.tw-friends-pill.is-muted {
  border-color: var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
}

.tw-friends-search-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10px;
  font-weight: 800;
  padding: 7px 10px;
}

.tw-friends-search-link:hover {
  border-color: var(--primary);
  color: var(--text-primary);
  background: rgba(39, 150, 242, 0.22);
}

.tw-friends-alert {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  padding: 10px 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 11px;
}

.tw-friends-alert.is-success {
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--success);
}

.tw-friends-alert.is-error {
  border-color: rgba(231, 76, 60, 0.5);
  color: var(--danger);
}

.tw-friends-section {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  padding: 12px;
}

.tw-friends-section-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tw-friends-section-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tw-friends-section-head h2 i {
  color: var(--primary);
}

.tw-friends-counter {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
}

.tw-friends-counter.is-primary {
  border-color: rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
}

.tw-friends-counter.is-warning {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning);
}

.tw-friends-request-list {
  display: grid;
  gap: 8px;
}

.tw-friends-request-card {
  position: relative;
  border: 1px solid rgba(51, 51, 51, 0.5);
  background: var(--surface-3);
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.tw-friends-request-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: transparent;
}

.tw-friends-request-card:not(.is-sent)::before {
  background: rgba(245, 158, 11, 0.8);
}

.tw-friends-request-card.is-sent::before {
  background: rgba(39, 150, 242, 0.7);
}

.tw-friends-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  overflow: hidden;
  position: relative;
}

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

.tw-friends-presence {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
}

.tw-friends-presence.is-online {
  background: var(--success);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.tw-friends-presence.is-offline {
  background: rgba(255, 255, 255, 0.25);
}

.tw-friends-request-info,
.tw-friends-card-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tw-friends-name {
  text-decoration: none;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-friends-name:hover {
  color: var(--primary);
}

.tw-friends-meta {
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tw-friends-request-actions,
.tw-friends-card-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.tw-friends-request-actions form,
.tw-friends-card-actions form {
  margin: 0;
}

.tw-friends-btn,
.tw-friends-card-btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 800;
  padding: 6px 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 30px;
}

.tw-friends-btn.is-accept {
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--success);
}

.tw-friends-btn.is-decline,
.tw-friends-card-btn.is-danger {
  border-color: rgba(231, 76, 60, 0.5);
  color: var(--danger);
}

.tw-friends-sent-status {
  color: var(--warning);
  font-size: 13px;
}

.tw-friends-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tw-friends-grid.is-hidden {
  display: none;
  margin-top: 10px;
}

.tw-friends-grid.is-open {
  display: grid;
}

.tw-friends-card {
  border: 1px solid rgba(51, 51, 51, 0.5);
  background: var(--surface-3);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.tw-friends-card.is-hidden {
  display: none;
}

.tw-friends-card:hover {
  border-color: rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.06);
}

.tw-friends-empty {
  border: 1px solid rgba(51, 51, 51, 0.5);
  background: var(--surface-1);
  text-align: center;
  padding: 28px 12px;
}

.tw-friends-empty i {
  color: rgba(39, 150, 242, 0.45);
  font-size: 22px;
}

.tw-friends-empty h3 {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

.tw-friends-empty p {
  margin: 0 0 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.tw-friends-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 12px;
}

.tw-friends-empty-cta:hover {
  color: var(--text-primary);
  border-color: var(--primary);
}

.tw-friends-more-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.tw-friends-more-btn {
  border: 1px solid rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  padding: 8px 12px;
}

.tw-friends-more-btn.is-open i {
  transform: rotate(180deg);
}

.tw-friends-more-btn i {
  transition: transform var(--transition-speed) ease;
}

@media (max-width: 900px) {
  .tw-friends-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tw-friends-hero {
    grid-template-columns: 1fr;
  }

  .tw-friends-hero-stats {
    justify-content: flex-start;
  }

  .tw-friends-request-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tw-friends-request-actions {
    grid-column: 1 / -1;
  }

  .tw-friends-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tw-friends-grid {
    grid-template-columns: 1fr;
  }
}

/* --- info-pages.css --- */
.tw-info-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tw-info-hero {
  border: 1px solid var(--border-dark);
  background: linear-gradient(120deg, rgba(39,150,242,0.12), rgba(39,150,242,0.03));
  box-shadow: var(--shadow-default);
  padding: 22px;
}

.tw-info-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.tw-info-title-row i {
  color: var(--primary);
  font-size: 16px;
}

.tw-info-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: 800;
}

.tw-info-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.tw-info-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tw-info-pill {
  border: 1px solid rgba(39,150,242,0.32);
  background: rgba(39,150,242,0.08);
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.tw-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.tw-info-card {
  border: 1px solid var(--border-dark);
  background: var(--surface-2);
  box-shadow: var(--shadow-default);
  padding: 16px;
}

.tw-info-card h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 700;
}

.tw-info-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
}

.tw-info-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 14px;
}

.tw-info-stack {
  display: grid;
  gap: 10px;
}

.tw-info-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.tw-info-list strong {
  color: var(--text-primary);
}

.tw-info-emphasis {
  border: 1px solid rgba(39,150,242,0.35);
  background: rgba(39,150,242,0.07);
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.tw-info-emphasis strong {
  color: var(--text-primary);
}

.tw-info-emphasis-danger {
  border-color: rgba(231,76,60,0.52);
  background: rgba(231,76,60,0.09);
}

.tw-info-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tw-info-mini-card {
  border: 1px solid var(--border);
  background: var(--surface-3);
  padding: 12px;
}

.tw-info-mini-card p {
  font-size: 13px;
}

.tw-info-mini-card-title {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.tw-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tw-info-table th,
.tw-info-table td {
  text-align: left;
  border-bottom: 1px solid var(--border-dark);
  padding: 9px 8px;
  vertical-align: top;
}

.tw-info-table th {
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.tw-info-table td {
  color: var(--text-secondary);
}

.tw-info-link {
  color: var(--primary);
  text-decoration: none;
}

.tw-info-link:hover {
  text-decoration: underline;
}

.tw-info-status {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface-3);
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
}

.tw-info-status-warning {
  border-color: rgba(245,158,11,0.55);
  color: #f2b950;
}

.tw-info-status-danger {
  border-color: rgba(231,76,60,0.55);
  color: #ee8b80;
}

.tw-info-faq-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tw-info-faq-nav a {
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 12px;
  text-decoration: none;
  padding: 6px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.tw-info-faq-nav a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.tw-info-faq-item {
  border: 1px solid var(--border-dark);
  background: var(--surface-3);
  padding: 12px;
}

.tw-info-faq-q {
  margin: 0 0 7px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
}

.tw-info-faq-a {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 14px;
}

@media (max-width: 900px) {
  .tw-info-title {
    font-size: 21px;
  }

  .tw-info-two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw-info-page {
    padding: 14px;
  }
}

/* --- leaderboard.css --- */
.tw-lb-subfilters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: -4px 0 18px;
}

.tw-lb-subfilter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
}

.tw-lb-subfilter-btn:hover,
.tw-lb-subfilter-btn.active {
    color: var(--primary);
    background: rgba(39,150,242,0.18);
    border-color: rgba(39,150,242,0.50);
    box-shadow: 0 8px 20px rgba(39,150,242,0.12);
}

.tw-rk-meta-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.tw-rk-meta-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.76);
    background: rgba(255,255,255,0.05);
}

.tw-rk-meta-tag.form {
    color: #8fd3ff;
    border-color: rgba(39,150,242,0.30);
    background: rgba(39,150,242,0.10);
}

.tw-rk-meta-tag.playstyle {
    color: #ffd37c;
    border-color: rgba(251,191,36,0.25);
    background: rgba(251,191,36,0.10);
}

.tw-rk-meta-tag.live {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.tw-rk-meta-tag.live.playlist,
.tw-rk-meta-tag.live.alive {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.tw-rk-meta-tag.live.lfg {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.tw-rk-meta-tag.live.time {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.tw-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #98f5a7;
    border: 1px solid rgba(52, 211, 153, 0.30);
    background: rgba(16, 185, 129, 0.12);
    vertical-align: middle;
}

.tw-live-pill.is-online {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(37, 99, 235, 0.14);
}

.tw-live-indicator {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
    animation: twLivePulse 1.8s infinite;
}

.tw-live-pill.is-online .tw-live-indicator {
    background: #60a5fa;
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.55);
}

.tw-live-indicator.podium {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(13, 18, 30, 0.9);
}

@keyframes twLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
/* FORRE_DARK Leaderboard Specific Styles */

.tw-lb-page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 16px 24px;
}

/* Layout */
.tw-lb-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

.tw-lb-main,
.tw-lb-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tw-lb-main > .tw-widget,
.tw-lb-sidebar > .tw-widget {
    margin: 0;
}

@media (max-width: 900px) {
    .tw-lb-layout {
        grid-template-columns: 1fr;
    }
}

/* Header */
.tw-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background:
        radial-gradient(circle at top left, rgba(39,150,242,0.16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 22px 40px rgba(0,0,0,0.18);
}

.tw-lb-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.tw-lb-eyebrow {
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.42);
}

.tw-lb-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.tw-lb-subtitle {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.62);
}

.tw-lb-header-pills {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.tw-lb-season-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(39,150,242,0.10);
    border: 1px solid rgba(39,150,242,0.24);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary);
}

.tw-lb-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #98f5a7;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.tw-lb-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tw-lb-filter-btn {
    padding: 6px 14px;
    background: var(--card-bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
}

.tw-lb-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tw-lb-filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Podium */
.tw-podium-widget {
    padding: 0;
}

.tw-podium-widget .tw-widget-body {
    padding: 20px;
}

.tw-podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    align-items: end;
}

@media (max-width: 600px) {
    .tw-podium {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.tw-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.tw-podium-place:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.tw-podium-place.first {
    order: 2;
}

.tw-podium-place.second {
    order: 1;
}

.tw-podium-place.third {
    order: 3;
}

.tw-podium-avatar {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    position: relative;
}

.tw-podium-place.first .tw-podium-avatar {
    width: 72px;
    height: 72px;
    font-size: 22px;
}

.tw-podium-crown {
    position: absolute;
    top: -12px;
    font-size: 20px;
}

.tw-podium-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tw-podium-score {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tw-podium-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 8px;
}

.tw-podium-place.first .tw-podium-bar {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.tw-podium-place.second .tw-podium-bar {
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.tw-podium-place.third .tw-podium-bar {
    background: linear-gradient(90deg, #f97316, #ea580c);
}

/* Ranking Table */
.tw-ranking-widget .tw-widget-body {
    padding: 0;
}

.tw-ranking-widget {
    --lb-premium-gold: #f6c94a;
    --lb-premium-silver: #cfd5df;
    --lb-premium-bronze: #d88a4a;
    --lb-zebra-a: rgba(255,255,255,0.012);
    --lb-zebra-b: rgba(255,255,255,0.028);
    --lb-select: rgba(39,150,242,0.12);
}

.tw-ranking-head {
    display: grid;
    grid-template-columns: 60px 48px 1fr 100px 70px 60px 60px 80px;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    background: var(--input-bg);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .tw-ranking-head {
        grid-template-columns: 50px 40px 1fr 80px;
    }
    .tw-ranking-head span:nth-child(5),
    .tw-ranking-head span:nth-child(6),
    .tw-ranking-head span:nth-child(8) {
        display: none;
    }
}

.tw-ranking-row {
    display: grid;
    grid-template-columns: 60px 48px 1fr 100px 70px 60px 60px 80px;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.12s ease;
}

.tw-ranking-row:hover {
    background: rgba(39, 150, 242, 0.05);
}

.tw-ranking-row.zebra-a {
    background: var(--lb-zebra-a);
}

.tw-ranking-row.zebra-b {
    background: var(--lb-zebra-b);
}

.tw-ranking-row.top-1 {
    border-left: 3px solid color-mix(in srgb, var(--lb-premium-gold) 85%, transparent);
    box-shadow: inset 0 0 0 1px rgba(246,201,74,0.16);
}

.tw-ranking-row.top-2 {
    border-left: 3px solid color-mix(in srgb, var(--lb-premium-silver) 80%, transparent);
    box-shadow: inset 0 0 0 1px rgba(207,213,223,0.12);
}

.tw-ranking-row.top-3 {
    border-left: 3px solid color-mix(in srgb, var(--lb-premium-bronze) 80%, transparent);
    box-shadow: inset 0 0 0 1px rgba(216,138,74,0.12);
}

.tw-ranking-row.is-me {
    background: rgba(39, 150, 242, 0.1);
    border-left: 3px solid var(--primary);
}
.tw-ranking-my-sep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary, #2796f2);
    border-top: 1px solid rgba(39, 150, 242, 0.25);
    background: rgba(39, 150, 242, 0.05);
}
.tw-ranking-my-sep i { margin-right: 6px; }
.tw-ranking-my-sep-pos { color: var(--text-muted, #888); font-size: 12px; }

@media (max-width: 700px) {
    .tw-ranking-row {
        grid-template-columns: 50px 40px 1fr 80px;
    }
    .tw-rk-kills,
    .tw-rk-wins,
    .tw-lb-sparkcell {
        display: none;
    }
}

.tw-lb-sparkcell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 26px;
}

.tw-lb-spark {
    width: 70px;
    height: 26px;
    display: block;
    overflow: visible;
    flex: 0 0 auto;
}

.tw-rk-pos {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.tw-rk-ribbon {
    position: relative;
    left: -8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    border-radius: 3px 6px 6px 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.tw-rk-ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
}

.tw-rk-ribbon.gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f172a;
}

.tw-rk-ribbon.gold::before {
    border-right: 7px solid #a16207;
}

.tw-rk-ribbon.silver {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #0f172a;
}

.tw-rk-ribbon.silver::before {
    border-right: 7px solid #64748b;
}

.tw-rk-ribbon.bronze {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
}

.tw-rk-ribbon.bronze::before {
    border-right: 7px solid #9a3412;
}

.tw-rk-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
}

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

.tw-rk-user {
    min-width: 0;
}

.tw-rk-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tw-rk-me-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
}

.tw-rk-level {
    font-size: 11px;
    color: var(--text-muted);
}

.tw-rk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-rk-badge.unreal { color: #A855F7; border-color: #A855F7; }
.tw-rk-badge.champion { color: #FF6B6B; border-color: #FF6B6B; }
.tw-rk-badge.elite { color: #00D4AA; border-color: #00D4AA; }
.tw-rk-badge.diamond { color: #B9F2FF; border-color: #B9F2FF; }
.tw-rk-badge.platinum { color: #00FFFF; border-color: #00FFFF; }
.tw-rk-badge.gold { color: #FFD700; border-color: #FFD700; }
.tw-rk-badge.silver { color: #C0C0C0; border-color: #C0C0C0; }
.tw-rk-badge.bronze { color: #CD7F32; border-color: #CD7F32; }
.tw-rk-badge.unranked { color: #888888; border-color: #888888; }

.tw-rk-rank {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.tw-rk-rank-progress {
    width: 72px;
    height: 4px;
    background: color-mix(in srgb, var(--surface-4) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 100%, transparent);
    overflow: hidden;
}

.tw-rk-rank-progress-bar {
    display: block;
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 38%, transparent);
}

.tw-rk-kills,
.tw-rk-wins,
.tw-rk-kd {
    color: var(--text-secondary);
}

.tw-rk-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.tw-rk-stat-main {
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.tw-rk-stat-sub {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 18px;
    width: 100%;
}

.tw-rk-kd .tw-rk-kd-wr {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
    background: color-mix(in srgb, var(--surface-3) 86%, transparent);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    white-space: nowrap;
}

.tw-rk-meta-tag.realtime-score {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.tw-rk-live-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tw-rk-meta-tag.live.session {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
    background: color-mix(in srgb, var(--surface-3) 86%, transparent);
}

.tw-rk-live-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--border) 100%, transparent);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.tw-rk-live-delta.is-up {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.tw-rk-live-delta.is-down {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.tw-rk-live-delta.is-flat {
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
    background: color-mix(in srgb, var(--surface-3) 86%, transparent);
}

/* Empty State */
.tw-ranking-empty {
    padding: 60px 20px;
    text-align: center;
}

.tw-empty-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.tw-empty-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tw-empty-sub {
    font-size: 13px;
    color: var(--text-muted);
}

/* Pagination */
.tw-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    border-top: 1px solid var(--border);
}

.tw-page-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
}

.tw-page-btn:hover:not(.disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.tw-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tw-page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sidebar Widgets */
.tw-my-position {
    text-align: center;
}

.tw-my-pos-rank {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary);
}

.tw-my-pos-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.tw-my-pos-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.tw-my-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.tw-my-stat {
    padding: 8px;
    background: var(--input-bg);
    border-radius: var(--radius);
}

.tw-my-stat-val {
    font-size: 18px;
    font-weight: 800;
}

.tw-my-stat-val.blue { color: var(--primary); }
.tw-my-stat-val.green { color: var(--success); }
.tw-my-stat-val.orange { color: var(--warning); }
.tw-my-stat-val.red { color: var(--danger); }

.tw-my-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.tw-my-rank-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--input-bg);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.tw-my-rank-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-alt);
    border-radius: 50%;
    font-size: 18px;
}

.tw-my-rank-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.tw-my-rank-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.tw-my-progress {
    text-align: left;
}

.tw-my-prog-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.tw-my-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-hover));
    border-radius: 3px;
}

.tw-my-prog-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
}

/* Season Info */
.tw-season-info {
    text-align: center;
}

.tw-season-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tw-season-dates {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.tw-season-ends {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.tw-se-unit {
    text-align: center;
}

.tw-se-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
}

.tw-se-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Tier Rows */
.tw-tier-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.tw-tier-row:last-child {
    border-bottom: none;
}

.tw-tier-icon {
    font-size: 16px;
}

.tw-tier-name {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
}

.tw-tier-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.tw-ranking-row.is-selected {
    background: var(--lb-select) !important;
    border-left: 3px solid var(--primary);
}

.tw-ranking-inline-exp {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
    background: color-mix(in srgb, var(--surface-4) 90%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 100%, transparent);
}

.tw-ranking-inline-exp.is-open {
    max-height: 380px;
}

.tw-ranking-inline-exp-inner {
    padding: 12px 16px 14px;
}

.tw-inline-exp-loading {
    font-size: 11px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tw-inline-exp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.tw-inline-exp-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.tw-inline-exp-meta {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tw-inline-exp-sessions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.tw-inline-exp-session {
    border: 1px solid color-mix(in srgb, var(--border) 100%, transparent);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    padding: 8px;
}

.tw-inline-exp-session-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.tw-inline-exp-session-k {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
}

.tw-inline-exp-session-p {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.tw-inline-exp-session-live {
    color: var(--success);
}

@media (max-width: 980px) {
    .tw-inline-exp-sessions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tw-inline-exp-sessions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tw-player-details-empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 18px 12px;
    color: var(--text-muted);
    text-align: center;
}

.tw-player-details-empty i {
    font-size: 20px;
    color: var(--primary);
}

.tw-player-details-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.tw-player-details-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.tw-player-details-link:hover .tw-player-details-name {
    color: var(--primary);
}

.tw-player-details-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg-alt);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

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

.tw-player-details-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.tw-player-details-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.tw-player-details-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.tw-player-details-kpi {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    text-align: center;
}

.tw-player-details-kpi-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.tw-player-details-kpi-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.tw-player-sessions-list {
    display: grid;
    gap: 8px;
}

.tw-player-session-row {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px;
}

.tw-player-session-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.tw-player-session-time {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.tw-player-session-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 22%, transparent);
    color: var(--success);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-player-session-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.tw-player-session-stat {
    font-size: 10px;
    color: var(--text-muted);
}

.tw-player-session-stat strong {
    display: block;
    font-size: 12px;
    color: var(--text-primary);
}

.tw-player-details-error {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 12px;
}

.tw-top10-live-widget .tw-widget-body {
    padding: 12px;
}

.tw-top10-list {
    display: grid;
    gap: 6px;
}

.tw-top10-item {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    min-width: 0;
    transition: border-color 0.12s ease;
}

.tw-top10-item:hover {
    border-color: var(--primary);
}

.tw-top10-rank {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-primary);
    background: var(--card-bg-alt);
    border: 1px solid var(--border);
    line-height: 1;
}

.tw-top10-stack {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tw-top10-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tw-top10-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-top10-name-link {
    text-decoration: none;
    transition: color var(--transition-speed);
}

.tw-top10-name-link:hover {
    color: var(--primary);
}

.tw-top10-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.tw-top10-mode-badge {
    display: inline-flex;
    align-items: center;
    min-height: 17px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--border) 100%, transparent);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.tw-top10-mode-badge--solo {
    border-color: color-mix(in srgb, var(--primary) 32%, transparent);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-3));
    color: var(--primary);
}

.tw-top10-mode-badge--duo {
    border-color: color-mix(in srgb, var(--success) 32%, transparent);
    background: color-mix(in srgb, var(--success) 12%, var(--surface-3));
    color: var(--success);
}

.tw-top10-mode-badge--trio {
    border-color: color-mix(in srgb, var(--warning) 34%, transparent);
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-3));
    color: var(--warning);
}

.tw-top10-mode-badge--squad {
    border-color: color-mix(in srgb, var(--text-primary) 18%, transparent);
    background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-3));
    color: var(--text-primary);
}

.tw-top10-mode-badge--party {
    border-color: color-mix(in srgb, var(--primary) 22%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-3));
    color: var(--text-secondary);
}

.tw-top10-mode-badge--battle-royale {
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-3));
    color: var(--text-primary);
}

.tw-top10-mode-badge--live {
    border-color: color-mix(in srgb, var(--border) 100%, transparent);
    background: color-mix(in srgb, var(--surface-3) 88%, transparent);
    color: var(--text-secondary);
}

.tw-top10-time {
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tw-top10-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tw-top10-chip {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--border) 100%, transparent);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}

.tw-top10-chip--join {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.tw-top10-chip--lfg {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.tw-top10-chip--alive {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.tw-top10-chip--kills {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--text-primary) 16%, transparent);
}

.tw-top10-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 26%, transparent);
    animation: tw-top10-pulse 1.4s infinite ease-in-out;
}

.tw-top10-empty {
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .tw-top10-item {
        grid-template-columns: 28px 1fr auto;
        padding: 6px 7px;
    }

    .tw-top10-name {
        font-size: 11px;
    }

    .tw-top10-meta {
        gap: 3px;
    }

    .tw-top10-mode-badge {
        min-height: 16px;
        padding: 0 5px;
        font-size: 8px;
    }

    .tw-top10-time {
        font-size: 9px;
    }

    .tw-top10-chip {
        font-size: 8px;
    }
}

@keyframes tw-top10-pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

/* --- lfg-page.css --- */
/**
 * FORRE_DARK — LFG (?page=lfg)
 * Gemensam 1200px-rail + bas för alla LFG-vyer (index har extra överstyrning i vyn).
 */
body.tw-page-lfg .pb-page-background {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

body.tw-page-lfg .pb-wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.tw-page-lfg .pb-content-area {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.tw-page-lfg .tw-page-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

body.tw-page-lfg .tw-lfg-page {
  max-width: 100%;
  box-sizing: border-box;
}

/* --- messenger-page.css --- */
/* Messenger page layout */
.tw-page-messenger .tw-page-wrapper {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 0;
  max-width: none;
}

.tw-page-messenger .tw-page-divider-top,
.tw-page-messenger .tw-page-divider-bottom {
  display: none;
}

.tw-page-messenger .pb-page-background {
  padding: 0;
  background: transparent;
}

.tw-page-messenger .pb-wrapper {
  max-width: none;
}

.tw-page-messenger .pb-content-area,
.tw-page-messenger .pb-fallback {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 0;
  overflow: visible;
}

.tw-page-messenger .tw-page-content {
  padding: 0;
}

.tw-page-messenger .tw-page-content,
.tw-page-messenger .pb-content-area,
.tw-page-messenger .messenger-page,
.tw-page-messenger .messenger-page > *,
.tw-page-messenger .messenger-page > * > * {
  pointer-events: auto;
}

.messenger-page {
  font-family: 'Roboto', sans-serif;
  display: flex;
  height: calc(100vh - 180px);
  min-height: 500px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  position: relative;
}

.messenger-page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--fd-accent, #2796f2) 50%, transparent 100%);
  opacity: 0.5;
  z-index: 10;
}

/* ═══════════════════════════════════════════
  LEFT SIDEBAR — Konversationslista
  ═══════════════════════════════════════════ */
.messenger-sidebar {
  width: 320px;
  min-width: 280px;
  background: var(--fd-card, #1b1b1b);
  border-right: 1px solid var(--fd-border, #2f2f2f);
  display: flex;
  flex-direction: column;
  position: relative;
}

.messenger-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--fd-accent-glow, rgba(39,150,242,.28)) 0%, transparent 100%);
}

/* Sidebar header */
.ms-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  position: relative;
}

.tw-ms-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  background: var(--surface-5, #121212);
}

.tw-ms-stat {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-dark, #2f2f2f);
  background: var(--surface-2, #1a1a1a);
}

.tw-ms-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--text-tertiary, rgba(255,255,255,0.40));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-ms-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success, #22c55e);
  box-shadow: 0 0 10px rgba(34,197,94,.45);
}

.tw-ms-stat-value {
  color: var(--text-primary, #fff);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tw-ms-stat-meta {
  margin-top: 4px;
  color: var(--text-secondary, rgba(255,255,255,0.70));
  font-size: 11px;
}

.ms-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-accent-glow, rgba(39,150,242,.28)), transparent);
}

.ms-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ms-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fd-text, #fff);
}

.ms-header-actions {
  display: flex;
  gap: 4px;
}

.ms-icon-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fd-text-muted, #777);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ms-icon-btn:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  color: var(--fd-accent, #2796f2);
}

.ms-icon-btn svg { width: 14px; height: 14px; }

/* Sidebar search */
.ms-search { position: relative; }

.tw-mob-lfg-return,
.tw-ms-lfg-return {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--fd-accent-border, rgba(39,150,242,.45));
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  color: var(--fd-accent, #2796f2);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tw-mob-lfg-return {
  margin-top: 8px;
}

.ms-search-input {
  width: 100%;
  height: 36px;
  background: var(--fd-sidebar-search-bg, #161616);
  border: 1px solid var(--fd-sidebar-search-border, #2f2f2f);
  border-radius: 4px;
  padding: 0 12px 0 32px;
  color: var(--fd-text, #fff);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  outline: none;
  transition: all 0.2s ease;
}

.ms-search-input::placeholder { color: var(--fd-text-dim, #555); }
.ms-search-input:focus {
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  box-shadow: 0 0 0 2px var(--fd-accent-soft, rgba(39,150,242,.12));
}

.ms-search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--fd-text-dim, #555);
  pointer-events: none;
}

/* Sidebar tabs */
.ms-tabs {
  display: flex;
  padding: 0 14px;
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
}

.ms-tab {
  padding: 10px 16px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fd-text-muted, #777);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ms-tab:hover { color: var(--fd-text-soft, #b8b8b8); }
.ms-tab.active {
  color: var(--fd-accent, #2796f2);
  border-bottom-color: var(--fd-accent, #2796f2);
}

/* Sidebar list */
.ms-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.ms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
  border-left: 2px solid transparent;
}

.ms-row:hover { background: var(--fd-sidebar-hover, rgba(39,150,242,.08)); }
.ms-row.active {
  background: var(--fd-sidebar-active, #232323);
  border-left-color: var(--fd-accent, #2796f2);
}

.ms-row + .ms-row::before {
  content: '';
  position: absolute;
  top: 0; left: 54px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--fd-border, #2f2f2f) 0%, rgba(47,47,47,.12) 100%);
}

.ms-row.unread .ms-name { color: var(--fd-text, #fff); font-weight: 600; }
.ms-row.unread .ms-preview { color: var(--fd-text-soft, #b8b8b8); }
.ms-row.unread::before {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--fd-accent, #2796f2);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--fd-accent-glow, rgba(39,150,242,.28));
}

.ms-avatar {
  width: 38px; height: 38px;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fd-border, #2f2f2f);
  background: var(--fd-surface, #161616);
}

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

.ms-avatar-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}

.ms-avatar .ms-online {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  background: var(--fd-success, #37c871);
  border: 1.5px solid var(--fd-card, #1b1b1b);
  border-radius: 50%;
  z-index: 2;
}

.ms-row-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

.ms-avatar-link,
.ms-profile-link,
.mc-profile-link {
  color: inherit;
  text-decoration: none;
}

.ms-avatar-link {
  flex-shrink: 0;
}

.ms-profile-link {
  display: inline-block;
  min-width: 0;
}

.ms-profile-link:hover {
  color: var(--fd-accent, #2796f2);
}

.ms-avatar-link:hover .ms-avatar {
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  box-shadow: 0 0 0 2px var(--fd-accent-soft, rgba(39,150,242,.12));
}

.ms-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.ms-name {
  font-size: 13px; font-weight: 500;
  color: var(--fd-text-soft, #b8b8b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}

.ms-time {
  font-size: 10px; color: var(--fd-text-dim, #555);
  white-space: nowrap; flex-shrink: 0;
}

.ms-preview {
  font-size: 12px; color: var(--fd-text-muted, #777);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}

.ms-preview .prefix { color: var(--fd-text-dim, #555); }

.tw-ms-row-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(39,150,242,.35);
  background: rgba(39,150,242,.14);
  color: var(--primary, #2796f2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════
     RIGHT SIDE — Chat Area
     ═══════════════════════════════════════════ */
.messenger-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--fd-surface, #161616);
  min-width: 0;
  overflow: hidden;
}

.messenger-chat > .mc-empty,
.messenger-chat > .mc-active {
  width: 100%;
  max-width: none;
}

/* Empty state */
.mc-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fd-text-muted, #777);
  padding: 40px;
}

.mc-empty-icon {
  width: 64px; height: 64px;
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border: 1px solid var(--fd-accent-border, rgba(39,150,242,.50));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

.mc-empty-icon svg { width: 28px; height: 28px; color: var(--fd-accent, #2796f2); }

.mc-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fd-text, #fff);
  margin-bottom: 6px;
}

.mc-empty-text {
  font-size: 13px;
  text-align: center;
  max-width: 280px;
}

.tw-mc-empty-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.tw-mc-empty-cta,
.tw-mc-empty-secondary {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-dark, #2f2f2f);
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.16s ease;
}

.tw-mc-empty-cta {
  background: var(--primary, #2796f2);
  color: var(--text-primary, #fff);
  border-color: rgba(39,150,242,.5);
  box-shadow: 0 10px 22px rgba(39,150,242,.18);
}

.tw-mc-empty-cta:hover {
  background: var(--primary-hover, #1a7fd9);
}

.tw-mc-empty-secondary {
  background: var(--surface-3, #1b1b1b);
  color: var(--text-secondary, rgba(255,255,255,0.70));
}

.tw-mc-empty-secondary:hover {
  color: var(--text-primary, #fff);
  border-color: rgba(39,150,242,.35);
}

.tw-mc-empty-note {
  margin-top: 14px;
  color: var(--text-tertiary, rgba(255,255,255,0.40));
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* Chat header */
.mc-header {
  background: var(--fd-panel, #202020);
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}

.mc-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-accent-glow, rgba(39,150,242,.28)), transparent);
}

.mc-avatar {
  width: 40px; height: 40px;
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border: 1px solid var(--fd-accent-border, rgba(39,150,242,.50));
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--fd-accent, #2796f2);
  flex-shrink: 0; position: relative;
  overflow: hidden;
}

.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-avatar .online-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--fd-success, #37c871);
  border: 2px solid var(--fd-panel, #202020);
  border-radius: 50%;
}

.mc-header-info { flex: 1; min-width: 0; }
.mc-header-name { color: var(--fd-text, #fff); font-weight: 600; font-size: 14px; }
.mc-header-status { color: var(--fd-text-muted, #777); font-size: 11px; margin-top: 2px; }

.mc-profile-link {
  display: inline-flex;
  align-items: center;
}

.mc-profile-link:hover .mc-avatar,
.mc-profile-link:hover .mc-header-name {
  color: var(--fd-accent, #2796f2);
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
}

.mc-header-actions { display: flex; gap: 6px; }

.mc-action-btn {
  width: 32px; height: 32px;
  background: var(--fd-surface-2, #1a1a1a);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fd-text-muted, #777); cursor: pointer;
  transition: all 0.2s ease;
}

.mc-action-btn:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  color: var(--fd-accent, #2796f2);
}

.mc-action-btn svg { width: 14px; height: 14px; }

/* Chat messages area */
.mc-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fd-surface, #161616);
}

/* Date divider (reuse from templates) */
.mc-date-divider {
  display: flex; align-items: center; gap: 10px; margin: 4px 0;
}

.mc-date-divider::before, .mc-date-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--fd-border, #2f2f2f);
}

.mc-date-divider span {
  color: var(--fd-text-dim, #555); font-size: 9px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Message row (reuse styling from templates) */
.mc-message-row {
  display: flex; gap: 8px; max-width: 70%;
  animation: msgIn 0.35s ease-out both;
}

.mc-message-row.incoming { align-self: flex-start; }
.mc-message-row.outgoing { align-self: flex-end; flex-direction: row-reverse; }

.mc-msg-avatar {
  width: 28px; height: 28px;
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border: 1px solid var(--fd-accent-border, rgba(39,150,242,.50));
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 10px; color: var(--fd-accent, #2796f2);
  flex-shrink: 0; align-self: flex-end;
  overflow: hidden;
}

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

.mc-msg-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-message-row.outgoing .mc-msg-avatar {
  background: var(--fd-elevated, #242527);
  border-color: var(--fd-border-soft, #333);
  color: var(--fd-text-soft, #b8b8b8);
}

.mc-msg-content { display: flex; flex-direction: column; gap: 3px; }
.mc-message-row.outgoing .mc-msg-content { align-items: flex-end; }

.mc-msg-bubble {
  padding: 10px 14px; border-radius: 6px;
  font-size: 13px; line-height: 1.5; color: var(--fd-text, #fff);
  word-wrap: break-word;
}

.mc-message-row.incoming .mc-msg-bubble {
  background: var(--fd-panel, #202020);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-bottom-left-radius: 2px;
}

.mc-message-row.outgoing .mc-msg-bubble {
  background: linear-gradient(135deg, var(--fd-accent, #2796f2), #1e7fd4);
  border: 1px solid rgba(39,150,242,.35);
  border-bottom-right-radius: 2px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(39,150,242,.18);
}

.mc-msg-time { font-size: 10px; color: var(--fd-text-dim, #555); padding: 0 4px; }
.mc-message-row.outgoing .mc-msg-time { text-align: right; }

.mc-msg-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 0;
}

.mc-message-row.outgoing .mc-msg-tools {
  justify-content: flex-end;
}

.mc-msg-action {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--fd-border, #2f2f2f);
  background: var(--surface-3, #1b1b1b);
  color: var(--text-secondary, rgba(255,255,255,0.70));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.mc-msg-action[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.mc-msg-action:hover {
  color: var(--text-primary, #fff);
  border-color: rgba(39,150,242,.35);
}

.mc-msg-action.is-danger:hover {
  border-color: rgba(231,76,60,.45);
  color: var(--danger, #e74c3c);
}

.mc-msg-action.is-warning:hover {
  border-color: rgba(245,158,11,.45);
  color: var(--warning, #f59e0b);
}

.mc-msg-image-wrap {
  margin-top: 4px;
}

.mc-msg-image {
  display: block;
  max-width: 220px;
  max-height: 180px;
  object-fit: cover;
  border: 1px solid var(--fd-border, #2f2f2f);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.mc-msg-seen {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--fd-text-dim, #555);
  padding: 0 4px; justify-content: flex-end;
}

.mc-msg-seen svg { width: 12px; height: 12px; color: var(--fd-accent, #2796f2); }

/* Typing indicator */
.mc-typing {
  display: flex; gap: 8px; align-self: flex-start;
  align-items: flex-end;
  animation: msgIn 0.35s ease-out both;
}

.mc-typing-bubble {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 16px;
  background: var(--fd-panel, #202020);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 6px; border-bottom-left-radius: 2px;
}

.mc-typing-dot {
  width: 6px; height: 6px;
  background: var(--fd-accent, #2796f2);
  border-radius: 50%;
  animation: typingWave 1.4s ease-in-out infinite;
  opacity: 0.4;
}

.mc-typing-dot:nth-child(1) { animation-delay: 0s; }
.mc-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.mc-typing-dot:nth-child(3) { animation-delay: 0.4s; }

.mc-typing-label { font-size: 10px; color: var(--fd-text-dim, #555); padding: 0 4px; margin-top: 2px; }

/* Chat input area */
.mc-input-area {
  background: var(--fd-panel, #202020);
  border-top: 1px solid var(--fd-border, #2f2f2f);
  padding: 12px 16px;
  position: relative;
}

.mc-input-area::before {
  content: '';
  position: absolute;
  top: -1px; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-accent-glow, rgba(39,150,242,.28)), transparent);
}

.mc-input-form { display: flex; align-items: flex-end; gap: 10px; }

.mc-input-wrapper {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--fd-surface, #161616);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 6px;
  position: relative;
  overflow: visible;
  transition: border-color 0.2s ease;
}

.mc-input-wrapper:focus-within {
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  box-shadow: 0 0 0 2px var(--fd-accent-soft, rgba(39,150,242,.12));
}

.mc-input-row {
  display: flex; align-items: center;
  padding: 0 8px;
  height: 44px;
}

.mc-input-field {
  flex: 1; background: none; border: none;
  padding: 0 10px; color: var(--fd-text, #fff);
  font-family: 'Roboto', sans-serif; font-size: 13px;
  outline: none; height: 100%;
}

.mc-input-field::placeholder { color: var(--fd-text-dim, #555); }

.mc-toolbar-btn {
  width: 30px; height: 30px;
  background: none; border: none; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fd-text-muted, #777); cursor: pointer;
  transition: all 0.2s ease; flex-shrink: 0;
}

.mc-toolbar-btn:hover { background: var(--fd-accent-soft, rgba(39,150,242,.12)); color: var(--fd-accent, #2796f2); }
.mc-toolbar-btn svg { width: 16px; height: 16px; }

.mc-send-btn {
  width: 44px; height: 44px;
  background: var(--fd-accent, #2796f2); border: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(39,150,242,.25);
  flex-shrink: 0;
}

.mc-send-btn:hover {
  background: var(--fd-accent-hover, rgba(39,150,242,.82));
  box-shadow: 0 4px 16px rgba(39,150,242,.35);
  transform: translateY(-1px);
}

.mc-send-btn svg { width: 18px; height: 18px; }

/* Image preview in input */
.mc-image-preview {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: 140px;
  padding: 6px;
  background: rgba(18,18,18,.96);
  border: 1px solid var(--fd-border, #2f2f2f);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

.mc-image-preview img {
  display: block;
  width: 100%;
  max-width: 128px;
  max-height: 96px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--fd-border, #2f2f2f);
}

.mc-image-preview-label {
  margin-top: 6px;
  color: var(--text-secondary, rgba(255,255,255,0.70));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mc-remove-image {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,.7);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
}

.mc-remove-image svg { width: 10px; height: 10px; }

/* Mobile app-view chat shell */
.tw-mob-view--chat {
  padding: 0 0 calc(56px + env(safe-area-inset-bottom));
  background: var(--surface-1, #161616);
}

.tw-mob-chat-shell {
  min-height: calc(100vh - 120px);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface-2, #1a1a1a);
  position: relative;
}

.tw-mob-chat-list-panel {
  min-width: 0;
}

.tw-mob-chat-top {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #333333);
  background: var(--surface-3, #1b1b1b);
  position: sticky;
  top: calc(44px + env(safe-area-inset-top));
  z-index: 36;
}

.tw-mob-chat-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  margin-bottom: 8px;
}

.tw-mob-chat-intro-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tw-mob-chat-intro-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary, #ffffff);
}

.tw-mob-chat-intro-meta {
  font-size: 10px;
  color: var(--text-tertiary, rgba(255,255,255,0.40));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-intro-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tw-mob-chat-intro-pill {
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-2, #1a1a1a);
  color: var(--text-secondary, rgba(255,255,255,0.70));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.tw-mob-chat-intro-pill.is-unread {
  border-color: rgba(39,150,242,.35);
  background: rgba(39,150,242,.12);
  color: var(--primary, #2796f2);
}

.tw-mob-chat-search {
  position: relative;
}

.tw-mob-chat-request-strip {
  display: grid;
  gap: 6px;
  position: sticky;
  top: calc(148px + env(safe-area-inset-top));
  z-index: 34;
  padding: 6px 12px 8px;
  border-bottom: 1px solid rgba(39,150,242,.14);
  background: var(--surface-2, #1a1a1a);
}

body.tw-page-messenger .tw-mob-chat-request-strip {
  display: none !important;
}

.tw-mob-chat-request-strip[hidden] {
  display: none !important;
}

.tw-mob-chat-request-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tw-mob-chat-request-title {
  color: var(--text-primary, #fff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tw-mob-chat-request-link {
  border: 0;
  background: transparent;
  color: var(--primary, #2796f2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.tw-mob-chat-request-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.tw-mob-chat-request-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(39,150,242,.22);
  background: rgba(39,150,242,.08);
  color: var(--text-primary, #fff);
  cursor: pointer;
  text-align: left;
  min-width: 172px;
  max-width: 210px;
  flex: 0 0 auto;
}

.tw-mob-chat-request-avatar {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  background: var(--surface-3, #1b1b1b);
}

.tw-mob-chat-request-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tw-mob-chat-request-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tw-mob-chat-request-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-request-preview {
  color: var(--text-secondary, rgba(255,255,255,.7));
  font-size: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-mob-chat-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #777777);
  font-size: 12px;
}

.tw-mob-chat-search input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-1, #161616);
  color: var(--text-primary, #ffffff);
  padding: 0 10px 0 32px;
  font-size: 12px;
}

.tw-mob-chat-search input:focus {
  outline: none;
  border-color: var(--primary, #2796f2);
  box-shadow: 0 0 0 2px rgba(39, 150, 242, 0.12);
}

.tw-mob-chat-tabs {
  display: flex;
  position: sticky;
  top: calc(86px + env(safe-area-inset-top));
  z-index: 35;
  border-bottom: 1px solid var(--border, #333333);
  background: var(--surface-2, #1a1a1a);
}

.tw-mob-chat-tabs .tw-mob-tab {
  flex: 1;
  min-height: 40px;
}

.tw-mob-chat-list {
  background: var(--surface-2, #1a1a1a);
}

.tw-mob-chat-item {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(51,51,51,.45);
  cursor: pointer;
}

.tw-mob-chat-item.is-unread {
  background: rgba(39,150,242,.08);
}

.tw-mob-chat-item:active {
  background: rgba(255,255,255,.04);
}

.tw-mob-chat-item .tw-mob-row-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-1, #161616);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, rgba(255,255,255,.7));
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.tw-mob-chat-item .tw-mob-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tw-mob-chat-item .tw-mob-row-avatar-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.tw-mob-chat-item .tw-mob-row-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tw-mob-chat-item .tw-mob-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-item .tw-mob-chat-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
  color: var(--text-tertiary, rgba(255,255,255,.4));
}

.tw-mob-chat-item .tw-mob-chat-meta-dot {
  width: 6px;
  height: 6px;
  background: var(--text-muted, #777777);
  border-radius: 50%;
  flex-shrink: 0;
}

.tw-mob-chat-item.is-unread .tw-mob-chat-meta-dot {
  background: var(--primary, #2796f2);
  box-shadow: 0 0 8px rgba(39,150,242,.45);
}

.tw-mob-chat-item .tw-mob-chat-meta-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-item .tw-mob-row-sub {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,.7));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-item-meta {
  display: grid;
  justify-items: end;
  align-items: center;
  gap: 4px;
  min-width: 34px;
}

.tw-mob-chat-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(39,150,242,.16);
  border: 1px solid rgba(39,150,242,.38);
  color: var(--primary, #2796f2);
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tw-mob-chat-item-time {
  font-size: 9px;
  color: var(--text-tertiary, rgba(255,255,255,.4));
  white-space: nowrap;
}

.tw-mob-chat-open {
  color: var(--text-muted, #777777);
  font-size: 11px;
}

.tw-mob-chat-item.is-unread .tw-mob-chat-open {
  color: var(--primary, #2796f2);
}

.tw-mob-chat-status {
  color: var(--text-muted, #777777);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tw-mob-chat-thread-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: fixed;
  top: calc(44px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 1000;
  background: var(--surface-2, #1a1a1a);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  visibility: hidden;
}

.tw-mob-chat-thread-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}

.tw-mob-chat-thread-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #333333);
  background: var(--surface-3, #1b1b1b);
}

.tw-mob-chat-back {
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-2, #1a1a1a);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tw-mob-chat-head-btn {
  width: 36px;
  min-height: 36px;
  margin-left: auto;
}

.tw-mob-chat-thread-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2, #1a1a1a);
  background-image: url('/public/assets/fortnite/default-avatar.png');
  flex-shrink: 0;
}
  border: 1px solid var(--border, #333333);
  background: var(--surface-2, #1a1a1a);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}

.tw-mob-chat-pinned {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(39,150,242,.18);
  background: rgba(39,150,242,.08);
  color: var(--text-secondary, rgba(255,255,255,.7));
  font-size: 11px;
}

.tw-mob-chat-pinned i {
  color: var(--primary, #2796f2);
}

.tw-mob-chat-pinned-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-pinned-clear {
  border: 0;
  background: transparent;
  color: var(--text-muted, #777);
  font-size: 10px;
  cursor: pointer;
}

.tw-mob-chat-pinned[hidden],
.tw-mob-chat-typing[hidden],
.tw-mob-chat-quote-chip[hidden] {
  display: none !important;
}

.tw-mob-chat-thread-user {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tw-mob-chat-thread-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-thread-state {
  font-size: 10px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-messages {
  padding: 12px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  align-content: start;
  gap: 6px;
  background: var(--surface-1, #161616);
  min-height: 0;
}

.tw-mob-chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 75%;
}

.tw-mob-chat-bubble-wrap.is-me {
  justify-self: end;
  align-items: flex-end;
}

.tw-mob-chat-bubble-wrap.is-other {
  justify-self: start;
  align-items: flex-start;
}

.tw-mob-chat-bubble {
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid var(--border, #333333);
  border-radius: 0;
}

.tw-mob-chat-bubble-wrap.is-pinned .tw-mob-chat-bubble,
.tw-mob-chat-bubble-wrap.is-pinned .tw-mob-chat-play-bubble {
  box-shadow: inset 2px 0 0 0 var(--primary, #2796f2);
}

.tw-mob-chat-bubble-wrap.is-me .tw-mob-chat-bubble {
  background: var(--primary, #2796f2);
  border-color: rgba(39, 150, 242, 0.45);
  color: #fff;
}

.tw-mob-chat-bubble-wrap.is-other .tw-mob-chat-bubble {
  background: var(--surface-3, #1b1b1b);
  color: var(--text-primary, #fff);
}

.tw-mob-chat-bubble-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tw-mob-chat-action-btn {
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text-muted, #777);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.tw-mob-chat-action-btn.is-active {
  border-color: rgba(39,150,242,.35);
  color: var(--primary, #2796f2);
}

.tw-mob-chat-reaction {
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(39,150,242,.22);
  background: rgba(39,150,242,.10);
  color: var(--text-primary, #fff);
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tw-mob-chat-time {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
}

.tw-mob-chat-compose {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border, #333333);
  background: var(--surface-2, #1a1a1a);
}

.tw-mob-chat-compose-mode {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border, #333333);
  background: #111111;
  overflow: hidden;
}

.tw-mob-chat-compose-mode-btn {
  border: 0;
  background: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.tw-mob-chat-compose-mode-btn.is-active {
  color: var(--text-primary, #ffffff);
  background: rgba(39, 150, 242, 0.18);
}

.tw-mob-chat-compose-main {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.tw-mob-chat-input-shell {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-1, #161616);
}

.tw-mob-chat-input-shell.is-media-selected {
  border-color: rgba(39, 150, 242, 0.55);
  box-shadow: inset 0 0 0 1px rgba(39, 150, 242, 0.12);
}

.tw-mob-chat-compose input {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-primary, #fff);
  font-size: 13px;
  padding: 0 4px;
}

.tw-mob-chat-input-shell .tw-mob-chat-quote-chip {
  order: -1;
  flex: 0 0 100%;
  max-width: 100%;
}

.tw-mob-chat-input-shell .tw-mob-chat-media-btn {
  min-width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,.7));
}

.tw-mob-chat-input-shell .tw-mob-chat-media-btn:active,
.tw-mob-chat-input-shell .tw-mob-chat-media-btn:focus {
  color: var(--primary, #2796f2);
  background: rgba(39, 150, 242, 0.10);
}

.tw-mob-chat-play-btn {
  width: 40px;
  min-height: 40px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-3, #1b1b1b);
  color: var(--primary, #2796f2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tw-mob-chat-compose-send {
  width: 40px;
  min-height: 40px;
  border: 1px solid var(--primary, #2796f2);
  background: var(--primary, #2796f2);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tw-mob-chat-play-panel {
  width: 100%;
  border: 1px solid rgba(39,150,242,.22);
  background: var(--surface-3, #1b1b1b);
  padding: 10px;
  display: none;
  gap: 8px;
}

.tw-mob-chat-play-panel.is-open {
  display: grid;
  animation: twMobPlayReqIn .2s ease;
}

.tw-mob-chat-play-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, rgba(255,255,255,.7));
  font-size: 11px;
  font-weight: 700;
}

.tw-mob-chat-play-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tw-mob-chat-play-chip {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border, #333333);
  background: var(--surface-2, #1a1a1a);
  color: var(--text-secondary, rgba(255,255,255,.7));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.tw-mob-chat-play-chip.is-active {
  border-color: var(--primary, #2796f2);
  background: var(--primary, #2796f2);
  color: #fff;
}

.tw-mob-chat-play-send {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--primary, #2796f2);
  background: var(--primary, #2796f2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tw-mob-chat-play-bubble {
  background: var(--surface-3, #1b1b1b);
  border: 1px solid rgba(39,150,242,.15);
  border-left: 2px solid var(--primary, #2796f2);
  padding: 8px;
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.tw-mob-chat-play-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.tw-mob-chat-play-meta {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,.7));
}

.tw-mob-chat-play-actions {
  display: flex;
  gap: 6px;
}

.tw-mob-chat-play-action {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border, #333333);
  background: transparent;
  color: var(--text-muted, #777);
  font-size: 10px;
  font-weight: 700;
}

.tw-mob-chat-play-action.is-join {
  background: var(--primary, #2796f2);
  border-color: var(--primary, #2796f2);
  color: #fff;
}

.tw-mob-chat-time-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tw-mob-chat-image-wrap {
  width: fit-content;
  max-width: 100%;
}

.tw-mob-chat-image {
  display: block;
  width: auto;
  max-width: min(240px, 100%);
  max-height: 220px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}

.tw-mob-chat-typing {
  min-height: 24px;
  padding: 0 14px 4px;
  color: var(--text-tertiary, rgba(255,255,255,.4));
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tw-mob-chat-read {
  font-size: 10px;
  color: rgba(255,255,255,.18);
}

.tw-mob-chat-read.is-read {
  color: var(--primary, #2796f2);
}

.tw-mob-chat-media-preview {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(39,150,242,.25);
  background: rgba(39,150,242,.08);
}

.tw-mob-chat-media-preview[hidden] {
  display: none !important;
}

.tw-mob-chat-media-preview-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}

.tw-mob-chat-media-preview-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tw-mob-chat-media-preview-label {
  color: var(--text-primary, #fff);
  font-size: 11px;
  font-weight: 700;
}

.tw-mob-chat-media-preview-name {
  color: var(--text-secondary, rgba(255,255,255,.7));
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-mob-chat-media-preview-remove {
  width: 28px;
  min-height: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text-secondary, rgba(255,255,255,.7));
  cursor: pointer;
}

.tw-mob-chat-reactions-menu {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(17,17,17,.96);
  box-shadow: 0 16px 32px rgba(0,0,0,.32);
}

.tw-mob-chat-reactions-menu[hidden] {
  display: none !important;
}

.tw-mob-reaction-btn,
.tw-mob-reaction-action {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text-primary, #fff);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.tw-mob-reaction-action.is-danger {
  color: #fca5a5;
}

.tw-mob-reaction-action.is-warning {
  color: #fcd34d;
}

.tw-mob-reaction-action[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

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

.tw-mob-chat-empty {
  padding: 18px 14px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
  font-size: 12px;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .messenger-page {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 180px);
  }

  .messenger-sidebar {
    width: 100%;
    min-width: auto;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--fd-border, #2f2f2f);
  }

  .messenger-chat {
    min-height: 50vh;
  }

  .tw-ms-overview {
    grid-template-columns: 1fr;
  }

  .tw-mc-empty-actions {
    width: 100%;
    flex-direction: column;
  }

  .tw-mc-empty-cta,
  .tw-mc-empty-secondary {
    width: 100%;
  }

  .mc-image-preview {
    right: auto;
    left: 0;
  }

  .ms-row.active {
    background: var(--fd-sidebar-active, #232323);
  }
}

/* ═══════════════════════════════════════════
   CHAT WINDOWS CONTAINER (docked bottom-right)
   Created dynamically by messenger-v2.js
   ═══════════════════════════════════════════ */
.chat-windows-container {
  position: fixed;
  bottom: 0; right: 0;
  z-index: 10000;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none;
}

.chat-windows-container > .chat-window {
  pointer-events: auto;
}

/* ── Chat window ── */
.chat-window {
  width: 350px;
  max-width: 90vw;
  height: 420px;
  background: var(--fd-panel, #202020);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
}

.chat-window.entering {
  animation: chatSlideUp 0.25s ease-out both;
}

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

.chat-window.minimized {
  width: 36px;
  height: auto;
}

/* ── Header ── */
.chat-header,
.chat-window-header {
  background: var(--fd-panel-2, #232323);
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  height: 44px;
}

.chat-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fd-accent, #2796f2);
}

.chat-window-avatar-wrap {
  width: 32px; height: 32px;
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.chat-window-avatar-wrap img,
.chat-window-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
}

.chat-window-avatar-wrap .online-dot,
.chat-window-avatar-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 9px; height: 9px;
  background: var(--fd-success, #37c871);
  border: 2px solid var(--fd-panel-2, #232323);
  border-radius: 50%;
}

.chat-window-user-info {
  flex: 1; min-width: 0;
}

.chat-window-username {
  color: var(--fd-text, #ffffff);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-window-status {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.chat-window-status .status-dot {
  width: 6px; height: 6px;
  background: var(--fd-text-muted, #777);
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-window-status .status-dot.online {
  background: var(--fd-success, #37c871);
}

.chat-window-status .status-text {
  color: var(--fd-text-muted, #777);
  font-size: 10px;
}

.chat-window-actions,
.header-socials {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.social-btn {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--fd-text-muted, #777);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.social-btn:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,0.12));
  color: var(--fd-accent, #2796f2);
}

.social-btn i { font-size: 13px; }

.social-btn.btn-close:hover {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

/* ── Message request banner ── */
.message-request-banner {
  background: var(--fd-request-bg, #2a2213);
  border-bottom: 1px solid var(--fd-request-border, #5b4720);
  padding: 8px 12px;
  flex-shrink: 0;
}

.message-request-banner-content { text-align: center; }

.message-request-banner .message-request-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-request-text, #f3e2b6);
  margin-bottom: 3px;
}

.message-request-banner .message-request-text {
  font-size: 10px;
  color: var(--fd-text-muted, #777);
  margin-bottom: 6px;
}

.message-request-banner .message-request-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.message-request-banner button {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.message-request-banner .btn-request-accept {
  background: var(--fd-accent, #2796f2);
  border: none;
  color: #fff;
}

.message-request-banner .btn-request-ignore {
  background: transparent;
  border: 1px solid var(--fd-border, #2f2f2f);
  color: var(--fd-text-muted, #777);
}

.message-request-banner .btn-request-block {
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
}

/* ── Chat body ── */
.chat-window-body,
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent !important;
}

.chat-window-body::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar { width: 4px; }

.chat-window-body::-webkit-scrollbar-track { background: transparent; }

.chat-window-body::-webkit-scrollbar-thumb {
  background: var(--fd-border, #2f2f2f);
  border-radius: 0;
}

.chat-window-body::-webkit-scrollbar-thumb:hover {
  background: var(--fd-text-dim, #555);
}

/* ── Minimized bar ── */
.chat-minimized-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px;
  background: var(--fd-panel-2, #232323);
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px 4px 0 0;
}

.chat-minimized-bar:hover {
  background: var(--fd-panel, #202020);
}

.chat-minimized-bar .minimized-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--fd-accent, #2796f2);
  flex-shrink: 0;
}

.chat-minimized-bar .minimized-info,
.minimized-unread,
.chat-minimized-bar .minimized-username,
.chat-minimized-bar .minimized-typing {
  display: none !important;
}

.chat-minimized-bar .minimized-typing {
  color: var(--fd-accent, #2796f2);
  font-size: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.minimized-typing .typing-dot {
  width: 4px; height: 4px;
  background: var(--fd-accent, #2796f2);
  border-radius: 50%;
  animation: minimizedDotBounce 1.4s infinite ease-in-out;
}

.minimized-typing .typing-dot:nth-child(2) { animation-delay: 0.2s; }
.minimized-typing .typing-dot:nth-child(3) { animation-delay: 0.4s; }

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

.chat-window.minimized .chat-minimized-bar { display: flex; }

.chat-window.minimized .chat-header,
.chat-window.minimized .chat-window-body,
.chat-window.minimized .chat-window-input { display: none; }

/* ── Chat input bar ── */
.chat-window-input,
.chat-input-bar {
  background: var(--fd-panel, #202020);
  border-top: 1px solid var(--fd-border, #2f2f2f);
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.chat-input-bar .chat-form {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
}

.chat-input-wrapper,
.chat-input-wrapper.chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 3px;
}

.chat-window .chat-input-actions {
  display: flex !important;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.chat-window .inline-btn,
.chat-window .chat-inline-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 32px !important;
  background: transparent;
  border: none;
  color: var(--fd-text-muted, #777);
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s ease, background 0.15s ease;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}

.chat-window .chat-inline-btn:hover {
  color: var(--fd-text, #fff);
}

.chat-window .chat-inline-btn.chat-attach-btn i { font-size: 15px; }
.chat-window .chat-emoji-btn i { font-size: 16px; }

/* Chat form text input */
.chat-window .chat-form input[type="text"],
.chat-window .input-field,
.chat-window .chat-form .input-field {
  flex: 1 !important;
  min-width: 0;
  background: var(--fd-surface, #161616) !important;
  border: 1px solid var(--fd-border, #2f2f2f) !important;
  border-radius: 0;
  padding: 6px 10px !important;
  color: var(--fd-text, #fff) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  line-height: 1.4;
  height: 34px !important;
}

.chat-window .chat-form input[type="text"]:focus,
.chat-window .chat-form .input-field:focus {
  outline: none;
  border-color: var(--fd-accent, #2796f2) !important;
  box-shadow: 0 0 0 2px rgba(39,150,242,0.15);
}

/* Chat form */
.chat-form input[type='hidden'] { display: none; }

.send-btn,
.chat-send-btn,
.chat-form input[type="submit"],
.chat-form button[type="submit"] {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fd-accent, #2796f2);
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.send-btn i,
.chat-send-btn i {
  font-size: 14px;
}

.send-btn:hover,
.chat-send-btn:hover,
.chat-form input[type="submit"]:hover,
.chat-form button[type="submit"]:hover {
  background: var(--fd-accent-hover, rgba(39,150,242,0.85));
}

/* ── Typing indicator ── */
.chat-typing-indicator {
  display: none;
  padding: 0 8px 4px;
  flex-shrink: 0;
  background: transparent;
}

.chat-typing-indicator.typing-active {
  display: block;
}

.chat-typing-indicator .typing-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.typing-bubble {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--fd-panel, #202020);
  border: none;
  padding: 5px 10px;
  border-radius: 0;
}

.typing-bubble .typing-dot {
  width: 5px; height: 5px;
  background: var(--fd-text-muted, #777);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-bubble .typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble .typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Hide "X skriver..." text — only show dots */
.typing-label {
  display: none;
}

/* ── Message rows ── */
.message-row {
  display: flex;
  gap: 6px;
  max-width: 78%;
  animation: msgIn 0.3s ease-out both;
}

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

.message-row.incoming { align-self: flex-start; }

.message-row.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 22px; height: 22px;
  border-radius: 0;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  align-self: flex-end;
}

.msg-avatar img,
.chat-message-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.msg-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.message-row.outgoing .msg-content { align-items: flex-end; }

/* ── Message bubbles ── */
.msg-bubble,
.message-bubble,
.chat-message-text {
  padding: 6px 10px;
  border-radius: 0;
  word-wrap: break-word;
  font-size: 12px;
  line-height: 1.4;
}

.message-row.incoming .msg-bubble,
.message-row.incoming .message-bubble,
.message-row.incoming .chat-message-text {
  background: var(--fd-panel, #202020);
  border: 1px solid var(--fd-border, #2f2f2f);
  color: var(--fd-text, #fff);
}

.message-row.outgoing .msg-bubble,
.message-row.outgoing .message-bubble,
.message-row.outgoing .chat-message-text {
  background: var(--fd-accent, #2796f2);
  color: #fff;
}

/* ── Date divider ── */
.date-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.date-divider::before,
.date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fd-border, #2f2f2f);
}

.date-divider span {
  color: var(--fd-text-dim, #555);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Message meta + read receipts ── */
.chat-message-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
}

.msg-time,
.chat-message-time {
  color: var(--fd-text-dim, #555);
  font-size: 8px;
}

.message-row.outgoing .msg-time,
.message-row.outgoing .chat-message-time {
  color: rgba(255,255,255,0.5);
}

/* "Sedd" read receipt — always blue */
.msg-seen,
.read-receipt,
.chat-message-seen {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  color: var(--fd-accent, #2796f2) !important;
}

.msg-seen svg,
.read-receipt svg,
.chat-message-seen svg {
  width: 11px; height: 11px;
  color: var(--fd-accent, #2796f2);
}

/* ── Chat loading ── */
.chat-loading {
  text-align: center;
  padding: 16px;
  color: var(--fd-text-muted, #777);
  font-size: 11px;
}

.chat-loading i { margin-right: 4px; }

/* ── Context menu (right-click) ── */
.message-context-menu {
  background: rgba(18,18,18,0.96) !important;
  border: 1px solid var(--fd-border, #2f2f2f) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  z-index: 10002 !important;
  min-width: 170px;
  padding: 4px 0 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--fd-text-soft, #b8b8b8);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-align: left;
  white-space: nowrap;
}

.context-menu-item:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,0.10));
  color: var(--fd-text, #fff);
}

.context-menu-item i {
  width: 14px;
  text-align: center;
  font-size: 12px;
}

.context-menu-item.is-disabled,
.context-menu-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.context-menu-item.is-disabled:hover {
  background: transparent;
  color: var(--fd-text-soft, #b8b8b8);
}

.context-menu-item[data-action="delete-me"] i { color: var(--fd-text-muted, #777); }
.context-menu-item[data-action="delete-all"] i { color: #ef4444; }
.context-menu-item[data-action="flag"] i { color: #f59e0b; }
.context-menu-item[data-action="copy"] i { color: var(--fd-accent, #2796f2); }

/* ── Images ── */
.chat-message-image-wrap {
  border-radius: 0;
  overflow: hidden;
}

.chat-message-image {
  display: block;
  max-width: 260px;
  max-height: 200px;
  width: auto; height: auto;
  border-radius: 0;
  cursor: pointer;
}

/* ── Chat window social media icons in header ── */
.chat-window-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}

.chat-window-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--fd-text-muted, #777);
  background: transparent;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  font-size: 14px;
}

.chat-window-social:hover {
  color: var(--fd-accent, #2796f2);
}

.chat-window-social.social-twitch:hover {
  color: #9146ff;
}

.chat-window-social.social-youtube:hover {
  color: #ff0000;
}

.chat-window-social.social-discord:hover {
  color: #5865f2;
}

.chat-window-social.social-spotify:hover {
  color: #1db954;
}

.chat-window-social.social-instagram:hover {
  color: #e1306c;
}

.chat-window-social.social-tiktok:hover {
  color: #00f2ea;
}

.chat-window-social.social-twitter:hover,
.chat-window-social.social-x:hover {
  color: #fff;
}

.chat-window-social.social-facebook:hover {
  color: #1877f2;
}

/* ── Seen/read receipt (Sedd) ── */
.chat-message-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--fd-text-muted, #777);
  margin-top: 2px;
}

.msg-seen,
.read-receipt,
.chat-message-status.read {
  color: var(--fd-accent, #2796f2) !important;
}

.msg-seen i,
.read-receipt i,
.chat-message-status i {
  font-size: 11px;
}

.chat-message-status-label {
  font-size: 10px;
  color: var(--fd-accent, #2796f2);
}

/* ── Emoji picker ── */
.chat-emoji-picker {
  background: rgba(18,18,18,0.97) !important;
  border: 1px solid var(--fd-border, #2f2f2f) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important;
  display: none !important;
  flex-direction: column !important;
  width: 280px !important;
  max-height: 340px !important;
  z-index: 10000;
}

.chat-emoji-popup {
  position: fixed !important;
}

.emoji-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  flex-shrink: 0;
}

.emoji-popup-title {
  color: var(--fd-text, #fff);
  font-size: 12px;
  font-weight: 600;
}

.emoji-popup-close {
  color: var(--fd-text-muted, #777);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}

.emoji-popup-close:hover {
  color: var(--fd-text, #fff);
}

.emoji-cat-header { display: flex; flex-shrink: 0; padding: 4px 4px 0; }
.emoji-cat-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
.emoji-cat-tabs::-webkit-scrollbar { height: 0; }
.emoji-cat-tab {
  border: 0; background: transparent; color: var(--fd-text-muted, #777);
  font-size: 11px; padding: 6px 8px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.emoji-cat-tab.active { color: #fff; border-bottom-color: var(--fd-accent, #2796f2); }
.emoji-cat-tab:hover { color: #ccc; }

.emoji-cat-panels { overflow-y: auto; padding: 6px; max-height: 260px; }
.emoji-cat-panel { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }

.chat-emoji-item {
  border: 0;
  background: transparent !important;
  color: #fff;
  font-size: 18px;
  height: 32px; width: 32px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease;
  display: flex; align-items: center; justify-content: center;
}

.chat-emoji-item:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,0.2));
}

/* ── Image lightbox ── */
.messenger-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
  cursor: zoom-out;
}
.messenger-lightbox.messenger-lightbox-open { opacity: 1; }
.messenger-lightbox img {
  max-width: 90vw; max-height: 90vh; border-radius: 4px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  cursor: default;
}
.messenger-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(32,32,32,0.9); color: #fff; font-size: 24px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.messenger-lightbox-close:hover { background: var(--fd-accent, #2796f2); }

/* ── PLAY_REQUEST card ── */
.play-request-card {
  background: var(--fd-panel, #202020);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-left: 3px solid var(--fd-accent, #2796f2);
  border-radius: 4px; padding: 12px; min-width: 220px; max-width: 300px;
}
.play-request-title {
  font-weight: 700; font-size: 14px; color: var(--fd-accent, #2796f2);
  margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.play-request-title i { font-size: 16px; }
.play-request-meta {
  font-size: 12px; color: var(--fd-text-muted, #777); margin-bottom: 10px;
}
.play-request-meta a {
  color: var(--fd-accent, #2796f2); text-decoration: none;
}
.play-request-meta a:hover { text-decoration: underline; }
.play-request-actions { display: flex; gap: 8px; }
.play-request-btn {
  flex: 1; border: 0; padding: 8px 12px; border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.play-request-btn:active { transform: scale(0.97); }
.play-request-btn.is-join {
  background: var(--fd-accent, #2796f2); color: #fff;
}
.play-request-btn.is-join:hover { background: #1e88e5; }
.play-request-btn:not(.is-join) {
  background: var(--fd-surface, #161616); color: var(--fd-text-muted, #777);
  border: 1px solid var(--fd-border, #2f2f2f);
}
.play-request-btn:not(.is-join):hover {
  background: var(--fd-border, #2f2f2f); color: #ccc;
}

/* --- messenger-templates.css --- */
/* Messenger tokens — extends FORRE_DARK base */
:root {
  /* Chat specific */
  --fd-chat-incoming-bg: var(--fd-panel, #202020);
  --fd-chat-outgoing-bg: var(--fd-accent, #2796f2);
  --fd-chat-outgoing-text: #ffffff;
  --fd-chat-input-bg: var(--fd-surface, #161616);
  --fd-chat-input-border: var(--fd-border, #2f2f2f);
  --fd-chat-toolbar-bg: var(--fd-panel, #202020);
  --fd-chat-toolbar-btn: var(--fd-text-muted, #777777);
  --fd-chat-toolbar-btn-hover: var(--fd-text, #ffffff);
  
  /* Unread states */
  --fd-unread-row-bg: rgba(39,150,242,.06);
  --fd-unread-dot: var(--fd-accent, #2796f2);
  
  /* Badges */
  --fd-badge-danger: #ef4444;
  --fd-badge-neutral: #232323;
  
  /* Message request */
  --fd-request-bg: #2a2213;
  --fd-request-border: #5b4720;
  --fd-request-text: #f3e2b6;
  
  /* Sidebar */
  --fd-sidebar-active: var(--fd-panel-2, #232323);
  --fd-sidebar-hover: var(--fd-dropdown-row-hover, rgba(39,150,242,.08));
  --fd-sidebar-search-bg: var(--fd-surface, #161616);
  --fd-sidebar-search-border: var(--fd-border, #2f2f2f);
  
  /* Misc */
  --fd-divider-subtle: var(--fd-border, #333333);
  --fd-online: var(--fd-success, #37c871);
  --fd-offline: var(--fd-text-muted, #777777);
  --fd-compose-bg: var(--fd-panel, #202020);
  --fd-compose-border: var(--fd-border-strong, #4a4a4a);
  --fd-minimized-bg: var(--fd-card, #1b1b1b);
  --fd-minimized-border: var(--fd-border, #333333);
}

/* ═══════════════════════════════════════════
     DROPDOWN — Meddelanden
     ═══════════════════════════════════════════ */
.messenger-dropdown-v2 {
  display: none;
  width: 310px;
  background: var(--fd-dropdown-glass, rgba(18,18,18,.92));
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 16px 48px rgba(0,0,0,.65),
    0 4px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  animation: dropIn 0.25s ease-out both;
}

.messenger-dropdown-v2.open { display: block; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Accent top line */
.messenger-dropdown-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--fd-accent, #2796f2) 50%, transparent 90%);
  opacity: 0.4;
  z-index: 10;
}

.dd-header {
  padding: 10px 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dd-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fd-text, #fff);
}

.dd-header-actions { display: flex; gap: 4px; }

.dd-icon-btn {
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fd-text-muted, #777);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dd-icon-btn:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  color: var(--fd-accent, #2796f2);
}

.dd-icon-btn svg { width: 12px; height: 12px; }

.dd-search { padding: 8px 14px 6px; }
.dd-search-wrap { position: relative; height: 28px; }

.dd-search-wrap svg {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 11px; height: 11px;
  color: var(--fd-text-dim, #555);
  pointer-events: none;
}

.dd-search-input {
  width: 100%; height: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 4px;
  padding: 0 8px 0 26px;
  color: var(--fd-text, #fff);
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  outline: none;
  transition: all 0.2s ease;
}

.dd-search-input::placeholder { color: var(--fd-text-dim, #555); }
.dd-search-input:focus {
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  background: rgba(39,150,242,.04);
  box-shadow: 0 0 0 1px var(--fd-accent-soft, rgba(39,150,242,.12));
}

.dd-list { padding: 2px 0 0; }

.dd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.dd-row:hover { background: var(--fd-dropdown-row-hover, rgba(39,150,242,.08)); }

.dd-row + .dd-row::before {
  content: '';
  position: absolute;
  top: 0; left: 52px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--fd-border, #2f2f2f) 0%, rgba(47,47,47,.15) 100%);
}

.dd-row.unread .dd-name { color: var(--fd-text, #fff); font-weight: 600; }
.dd-row.unread .dd-preview { color: var(--fd-text-soft, #b8b8b8); }
.dd-row.unread::after {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--fd-accent, #2796f2);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--fd-accent-glow, rgba(39,150,242,.28));
}

.dd-avatar {
  width: 34px; height: 34px;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fd-border, #2f2f2f);
  background: var(--fd-surface, #161616);
}

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

.dd-avatar-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}

.dd-avatar .dd-online {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  background: var(--fd-success, #37c871);
  border: 1.5px solid rgba(18,18,18,.92);
  border-radius: 50%;
  z-index: 2;
}

.dd-row-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

.dd-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.dd-name {
  font-size: 12px; font-weight: 500;
  color: var(--fd-text-soft, #b8b8b8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}

.dd-time {
  font-size: 9px; color: var(--fd-text-dim, #555);
  white-space: nowrap; flex-shrink: 0;
}

.dd-preview {
  font-size: 11px; color: var(--fd-text-muted, #777);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35;
}

.dd-preview .prefix { color: var(--fd-text-dim, #555); }
.dd-preview .emoji { font-size: 12px; letter-spacing: 1px; }

.dd-footer {
  padding: 7px 14px 9px;
  text-align: center;
  position: relative;
}

.dd-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-border, #2f2f2f), transparent);
}

.dd-footer a {
  font-size: 11px; color: var(--fd-accent, #2796f2);
  text-decoration: none; font-weight: 500;
  transition: all 0.2s;
}

.dd-footer a:hover {
  color: var(--fd-accent-hover, rgba(39,150,242,.82));
  text-shadow: 0 0 8px var(--fd-accent-glow, rgba(39,150,242,.28));
}

/* ═══════════════════════════════════════════
     FULL MESSENGER OVERLAY / DRAWER
     Created dynamically by messenger-v2.js
     ═══════════════════════════════════════════ */
body.messenger-full-open {
  overflow: hidden !important;
}

body.messenger-full-open .tw-mobile-bottom-nav {
  display: none;
}

.messenger-full-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.40);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.messenger-full-overlay.open {
  display: block;
  opacity: 1;
}

.messenger-full-panel {
  position: fixed;
  z-index: 2001;
  top: 0;
  right: 0;
  width: 100vw;
  max-width: 520px;
  height: 100vh;
  background: var(--fd-panel, #202020);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--fd-border, #2f2f2f);
}

@media (max-width: 600px) {
  .messenger-full-panel {
    max-width: 100vw;
  }
}

.messenger-full-panel.open {
  transform: translateX(0);
}

.messenger-full-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--fd-panel-2, #232323);
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  flex-shrink: 0;
  position: relative;
}

.messenger-full-toolbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fd-accent, #2796f2);
}

.messenger-full-title {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fd-text, #fff);
}

.messenger-full-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fd-text-muted, #999);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.messenger-full-close:hover {
  background: var(--fd-accent-soft, rgba(39,150,242,.12));
  border-color: var(--fd-accent-border, rgba(39,150,242,.5));
  color: var(--fd-accent, #2796f2);
}

.messenger-full-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
     NEW MESSAGE PANEL
     ═══════════════════════════════════════════ */
.nm-wrapper {
  position: relative;
  width: 310px;
}

.nm-panel {
  display: none;
  width: 310px;
  background: var(--fd-dropdown-glass, rgba(18,18,18,.92));
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 16px 48px rgba(0,0,0,.65),
    0 4px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
  position: fixed;
  right: 62px;
  bottom: 62px;
  z-index: 1001;
  animation: modalIn 0.3s ease-out both;
}

.nm-panel.open {
  display: block;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Accent top line */
.nm-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--fd-accent, #2796f2) 50%, transparent 90%);
  opacity: 0.4;
  z-index: 10;
}

.nm-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
  position: relative;
}

.nm-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fd-accent-glow, rgba(39,150,242,.28)), transparent);
}

.nm-header-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-text, #fff);
}

.nm-close {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fd-text-muted, #777);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nm-close:hover {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.3);
  color: #ef4444;
}

.nm-close svg { width: 12px; height: 12px; }

.nm-search { padding: 8px 14px; }
.nm-search-wrap { position: relative; height: 30px; }

.nm-search-input {
  width: 100%; height: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--fd-border, #2f2f2f);
  border-radius: 4px;
  padding: 0 10px;
  color: var(--fd-text, #fff);
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px;
  outline: none;
  transition: all 0.2s ease;
}

.nm-search-input::placeholder { color: var(--fd-text-dim, #555); }
.nm-search-input:focus {
  border-color: var(--fd-accent-border, rgba(39,150,242,.50));
  background: rgba(39,150,242,.04);
  box-shadow: 0 0 0 1px var(--fd-accent-soft, rgba(39,150,242,.12));
}

.nm-tabs {
  display: flex;
  padding: 0 14px;
  gap: 0;
  border-bottom: 1px solid var(--fd-border, #2f2f2f);
}

.nm-tab {
  padding: 7px 14px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fd-text-muted, #777);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}

.nm-tab:hover { color: var(--fd-text-soft, #b8b8b8); }
.nm-tab.active {
  color: var(--fd-accent, #2796f2);
  border-bottom-color: var(--fd-accent, #2796f2);
}

.nm-list { padding: 2px 0; }

.nm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

.nm-row:hover { background: var(--fd-dropdown-row-hover, rgba(39,150,242,.08)); }

.nm-row + .nm-row::before {
  content: '';
  position: absolute;
  top: 0; left: 50px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, var(--fd-border, #2f2f2f) 0%, rgba(47,47,47,.12) 100%);
}

.nm-avatar {
  width: 32px; height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fd-border, #2f2f2f);
  background: var(--fd-surface, #161616);
}

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

.nm-avatar-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px;
}

.nm-avatar .nm-online {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 7px; height: 7px;
  background: var(--fd-success, #37c871);
  border: 1.5px solid rgba(18,18,18,.92);
  border-radius: 50%;
  z-index: 2;
}

.nm-row-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 0;
}

.nm-username {
  font-size: 12px; font-weight: 500;
  color: var(--fd-text-soft, #b8b8b8);
  line-height: 1.3;
}

.nm-handle {
  font-size: 10px;
  color: var(--fd-text-dim, #555);
  line-height: 1.3;
}

.nm-row-arrow {
  color: var(--fd-text-dim, #555);
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.nm-row:hover .nm-row-arrow { opacity: 1; color: var(--fd-accent, #2796f2); }
.nm-row-arrow svg { width: 12px; height: 12px; }

/* Compose FAB button */
.compose-btn {
  position: absolute;
  bottom: -18px;
  right: -8px;
  width: 38px; height: 38px;
  background: var(--fd-compose-bg, #202020);
  border: 1px solid var(--fd-compose-border, #4a4a4a);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fd-accent, #2796f2);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 16px rgba(0,0,0,.5),
    0 0 0 1px rgba(39,150,242,.15);
  z-index: 20;
}

.compose-btn:hover {
  background: var(--fd-accent, #2796f2);
  color: #fff;
  border-color: var(--fd-accent, #2796f2);
  box-shadow:
    0 4px 20px rgba(39,150,242,.35),
    0 0 0 1px rgba(39,150,242,.5);
  transform: translateY(-1px);
}

.compose-btn svg { width: 16px; height: 16px; }


/* --- navbar.css --- */
/**
 * FORRE_DARK - Navbar Component - FORGE Style
 * Clean & Minimal: tunn separator + subtle underline indicator
 * Admin-edit funkar oforand - bara styling som andras
 */

/* ===== Navband - clean bottom border ===== */
.tw-navband {
  background: var(--body-bg);
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ===== Nav - no border, clean ===== */
.tw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: var(--navbar-height);
  border: none !important;
  background: transparent !important;
  box-shadow: var(--shadow-navbar);
  padding: 0 32px;
  margin: 0 auto;
  max-width: var(--max-width);
}

.tw-nav-left,
.tw-nav-right {
  display: flex;
  align-items: center;
}

/* Clean left - no wrap, no gap */
.tw-nav-left {
  gap: 0 !important;
  min-width: 0;
  flex-wrap: nowrap !important;
  height: 100%;
}

/* Right - admin buttons etc */
.tw-nav-right {
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
  z-index: 40;
  margin-left: 16px;
}

/* Nav Separator - thin muted line */
.tw-nav-sep {
  margin: 0 2px;
  color: rgba(255,255,255,0.1) !important;
  font-size: 11px;
  font-weight: 500;
  user-select: none;
  pointer-events: none;
}

/* ======= Nav items ======= */
.tw-nav-item {
  position: relative;
}

/* ======= Nav Links - FORGE clean style ======= */
.tw-nav-link {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 18px !important;
  text-decoration: none !important;
  color: #8b949e !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: visible;
  transition: color 0.2s ease;
}

/* ======= Nav Icons - no box, inline ======= */
.tw-nav-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  font-size: 12px;
  opacity: 0.6;
  box-shadow: none !important;
  flex: 0 0 auto;
  transition: opacity 0.2s, color 0.2s;
}

/* ======= Underline indicator ======= */
.tw-nav-line {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  transform: scaleX(0.3);
  background: var(--primary) !important;
  opacity: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

/* ===== Hover ===== */
.tw-nav-link:hover {
  color: #e6edf3 !important;
}

.tw-nav-link:hover .tw-nav-ico {
  color: var(--primary) !important;
  opacity: 1;
}

.tw-nav-link:hover .tw-nav-line {
  transform: scaleX(1);
  opacity: 1;
}

/* ===== Active ===== */
.tw-nav-link.active {
  color: #e6edf3 !important;
}

.tw-nav-link.active .tw-nav-ico {
  opacity: 1;
  color: var(--primary) !important;
}

.tw-nav-link.active .tw-nav-line {
  transform: scaleX(1);
  opacity: 1;
  animation: twActiveLinePulse 2.4s ease-in-out infinite;
}

/* Subtle sweep on hover */
.tw-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 33%,
    rgba(255,255,255,0.04) 50%,
    transparent 67%,
    transparent 100%
  );
  transform: translateX(-155%) skewX(-18deg);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.tw-nav-link:hover::before {
  transform: translateX(180%) skewX(-18deg);
}

/* ======= Admin buttons - clean ======= */
.tw-nav-action {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 6px 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap;
  transition: all 0.2s;
  border-radius: 0 !important;
  transform: none !important;
}

.tw-nav-action:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  transform: none !important;
}

.tw-nav-action i {
  color: var(--text-muted);
  font-size: 11px;
  transition: color 0.2s;
}

.tw-nav-action:hover i {
  color: var(--primary);
}

/* ======= Nav split - clean 1px line ======= */
.tw-nav-split {
  position: relative;
  width: 1px !important;
  height: 24px;
  flex: 0 0 1px !important;
  margin: 0 4px !important;
  padding: 0 !important;
  pointer-events: none;
}

.tw-nav-split::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  clip-path: none !important;
  box-shadow: none !important;
  border: none !important;
}

.tw-nav-split::after {
  display: none !important;
}

/* ======= Dropdowns ======= */
.tw-dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  min-width: 232px;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px) scale(0.985);
  transition: all 0.18s ease;
  z-index: 60;
}

.tw-nav-item:hover .tw-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.tw-dropdown-panel {
  border: 1px solid rgba(67,67,67,0.9);
  background: rgba(22,22,22,0.86);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-dropdown);
  padding: 8px;
}

.tw-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.11s ease;
}

.tw-dropdown-link:hover {
  background: rgba(39,150,242,0.06);
  color: var(--primary);
}

.tw-dropdown-link i {
  width: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  transition: color 0.11s ease;
}

.tw-dropdown-link:hover i {
  color: var(--primary);
}

/* ======= Animation ======= */
@keyframes twActiveLinePulse {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.85); }
}

/* ======= Badge ======= */
.tw-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  background: #ef4444;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
  line-height: 1;
}

/* ======= Responsive ======= */
@media (max-width: 900px) {
  .tw-nav {
    padding: 0 12px;
  }
  .tw-nav-link {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  .tw-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* --- navbar-styles.css --- */
.tw-navband-sticky {
  width: min(100%, 1200px);
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  box-shadow: none;
  transition: box-shadow 0.16s ease;
}

.tw-navband-wrap.is-stuck .tw-navband-sticky {
  box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}

.tw-navband-wrap {
  position: sticky;
  top: 0;
  z-index: 90;
}

.tw-navband-sticky > .flex {
  min-width: 0;
}

.tw-navband-sticky nav {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* Toggle sticky shadow only when nav is pinned to top */
.tw-navband-wrap::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Pulse animation for bullhorn icon */
.tw-pulse-icon {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1);
  }
}

/* FLASH SWEEP ANIMATION + NAV HOVER */
.flash-sweep {
  position: relative;
  overflow: hidden;
}
.flash-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 58%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform: skewX(-20deg);
  animation: flashSweep 4.8s linear infinite;
  pointer-events: none;
}
@keyframes flashSweep {
  0% { left: -120%; }
  100% { left: 160%; }
}

/* Nav link - FORGE: Roboto Bold, CAPS, vit text, underline */
.fnav-link {
  font-family: 'Roboto', 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease;
}
.fnav-link:hover {
  color: var(--primary) !important;
}
.fnav-link:hover .fnav-hover-line {
  opacity: 1 !important;
}
/* Icon - no border, no box, just icon */
.fnav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 11px;
  opacity: 0.7;
}
.fnav-link:hover .fnav-ico {
  opacity: 1;
}
.fnav-link.active .fnav-ico {
  opacity: 1;
}
.fnav-ico i {
  font-size: 11px;
}

/* Underline */
.fnav-line {
  transition: all 0.2s ease;
  box-shadow: 0 0 5px rgba(39,150,242,0.5);
}
.fnav-hover-line {
  transition: opacity 0.2s ease;
  box-shadow: 0 0 5px rgba(39,150,242,0.5);
}

/* Nav separator - thin 1px line */
.nav-sep-fg {
  display: inline-block;
  width: 1px !important;
  height: 24px;
  background: rgba(255,255,255,0.1) !important;
  flex-shrink: 0;
}

.tw-nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(220, 38, 38, 0.32);
}

.fnav-link:hover .tw-nav-count-badge {
  background: #ef4444;
}

.tw-mobile-bottom-badge-lfg {
  background: #dc2626;
  color: #ffffff;
}

.tw-nav-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--warning);
  color: #111111;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.95);
}

.unread-badge--notifications {
  background: var(--warning);
  color: #111111;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.46);
}

.unread-badge--messages {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(39, 150, 242, 0.46);
}

.unread-badge--friends {
  background: var(--success);
  color: #08150c;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.46);
}

.tw-icon-btn--notifications-active {
  color: var(--warning) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
}

.tw-icon-btn--messages-active {
  color: var(--primary) !important;
  border-color: rgba(39, 150, 242, 0.55) !important;
}

.tw-icon-btn--friends-active {
  color: var(--success) !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
}

.fnav-attention {
  position: relative;
}

.fnav-attention::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 7px;
  opacity: 0.8;
  animation: fnavPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

.fnav-attention-red::after {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), 0 0 14px rgba(239, 68, 68, 0.28);
}

.fnav-attention-blue::after {
  box-shadow: 0 0 0 1px rgba(39, 150, 242, 0.45), 0 0 14px rgba(39, 150, 242, 0.28);
}

.fnav-attention-yellow::after {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.55), 0 0 14px rgba(245, 158, 11, 0.28);
}

.fnav-attention-green::after {
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.55), 0 0 14px rgba(34, 197, 94, 0.28);
}

.messenger-dropdown-v2 .dd-row.unread-latest,
.messenger-dropdown-v2 .messenger-dropdown-item.unread-latest {
  background: rgba(39, 150, 242, 0.16) !important;
  border-left: 3px solid var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(39, 150, 242, 0.30), 0 0 16px rgba(39, 150, 242, 0.18);
}

.messenger-dropdown-v2 .dd-row.unread-latest .dd-name,
.messenger-dropdown-v2 .messenger-dropdown-item.unread-latest .dropdown-item-name {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(39, 150, 242, 0.35);
}

.tw-coffee-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid rgba(23, 143, 219, 0.85);
  background: linear-gradient(135deg, #00abe7 0%, #178fdb 100%);
  color: #ffffff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(0, 171, 231, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.tw-coffee-cta:hover {
  color: #ffffff;
  transform: translateY(-1px);
  filter: saturate(1.1);
  box-shadow: 0 9px 20px rgba(0, 171, 231, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.tw-coffee-cta-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.tw-page-messenger .tw-xp-side-ctas .tw-coffee-cta,
body.tw-page-messenger .tw-xp-side-cta.tw-coffee-cta {
  display: none !important;
}

.tw-fort-status-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #333333;
  background: #1b1b1b;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tw-fort-status-cta:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.tw-fort-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tw-fort-status-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.tw-fort-status-cta.is-up {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.18);
}

.tw-fort-status-cta.is-up .tw-fort-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: twFortUpPulse 1.6s ease-in-out infinite;
}

.tw-fort-status-cta.is-up .tw-fort-status-pill {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
}

.tw-fort-status-cta.is-down {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.18);
}

.tw-fort-status-cta.is-down .tw-fort-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
  animation: none;
}

.tw-fort-status-cta.is-down .tw-fort-status-pill {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

@keyframes twFortUpPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

.tw-cta-lift {
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.tw-cta-lift:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.28);
}

.tw-token-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid #333333;
  background: #1b1b1b;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tw-token-health-label {
  color: rgba(255, 255, 255, 0.78);
}

.tw-token-health-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}

.tw-token-health-dot.is-ok {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: twTokenLedPulse 1.6s ease-in-out infinite;
}

.tw-token-health-dot.is-down {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
  animation: none;
}

.tw-token-health-dot.is-loading {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  animation: twTokenLedPulseWarn 1.4s ease-in-out infinite;
}

.tw-token-health-text {
  color: rgba(255, 255, 255, 0.85);
  min-width: 22px;
}

@keyframes twTokenLedPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

@keyframes twTokenLedPulseWarn {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

.tw-shout-ticker-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* Left & right fade masks */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}

.tw-shout-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  /* Duplicate content so we scroll half-way and loop seamlessly */
  animation: twShoutTickerMove 52s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.tw-shout-ticker-viewport:hover .tw-shout-ticker-track {
  animation-play-state: paused;
}

/* Separator dot between shout items */
.tw-shout-ticker-item + .tw-shout-ticker-item::before {
  content: '\b7';
  padding-right: 4px;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
}

.tw-shout-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.tw-shout-ticker-item.is-auto {
  animation: twShoutAutoPulse 1.8s ease-in-out infinite;
}

.tw-shout-ticker-user {
  color: var(--primary);
  font-weight: 800;
  cursor: pointer;
}

.tw-shout-ticker-user:hover {
  color: #61c2ff;
}

.tw-shout-ticker-sep {
  color: rgba(255, 255, 255, 0.55);
}

.tw-shout-ticker-text {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.tw-shout-auto-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(97, 194, 255, 0.8);
  background: rgba(23, 143, 219, 0.22);
  color: #cdeeff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.tw-shout-dropdown-auto {
  border-left: 2px solid rgba(23, 143, 219, 0.65);
  background: rgba(23, 143, 219, 0.08);
}

.tw-shout-auto-inline {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 900;
  color: #61c2ff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tw-shout-hover-card {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  border: 1px solid rgba(67,67,67,0.92);
  border-radius: 8px;
  background: rgba(20,20,20,0.97);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.tw-shout-hover-card.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tw-shout-hover-name {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.tw-topbar-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 340px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-navbar);
  z-index: 1200;
}

.tw-topbar-search-empty {
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tw-topbar-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, border-left-color 0.12s ease;
  border-left: 3px solid transparent;
}

.tw-topbar-search-item:hover {
  background: rgba(39, 150, 242, 0.08);
  border-left-color: var(--primary);
}

.tw-topbar-search-item:last-child {
  border-bottom: 0;
}

.tw-topbar-search-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-1);
}

.tw-topbar-search-main {
  min-width: 0;
  flex: 1;
}

.tw-topbar-search-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-topbar-search-name {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-topbar-search-handle {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-topbar-search-stats {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.tw-topbar-search-stat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tw-topbar-search-stat strong {
  color: var(--primary);
  font-size: 11px;
  margin-left: 4px;
}

.tw-topbar-search-stat span {
  color: var(--text-primary);
  margin-left: 3px;
}

.tw-topbar-search-chevron {
  color: rgba(255, 255, 255, 0.26);
  font-size: 10px;
}

.tw-shout-hover-actions {
  display: flex;
  gap: 6px;
}

.tw-shout-hover-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2c2f37;
  border-radius: 6px;
  background: #22252c;
  color: #9aa3b1;
  text-decoration: none;
  transition: all 0.12s ease;
}

.tw-shout-hover-btn:hover {
  color: #ffffff;
  border-color: var(--primary);
  background: rgba(23, 143, 219, 0.32);
}

.tw-prof-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-4);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  transition: var(--transition-speed);
}

.tw-prof-settings-toggle:hover,
.tw-prof-settings-toggle.is-open {
  color: var(--primary);
  border-color: rgba(39, 150, 242, 0.45);
  box-shadow: var(--shadow-glow-blue);
}

.tw-prof-settings-toggle:focus-visible,
.tw-prof-panel button:focus-visible,
.tw-prof-panel input:focus-visible,
.tw-prof-panel textarea:focus-visible,
.tw-prof-panel select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tw-prof-panel {
  position: fixed;
  z-index: 1600;
  width: min(100vw - 24px, 460px);
  height: min(94vh, 980px);
  max-height: min(94vh, 980px);
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
  font-family: var(--font-family);
}

.tw-prof-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tw-prof-panel-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(94vh, 980px);
  max-height: min(94vh, 980px);
}

.tw-prof-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-5);
}

.tw-prof-panel-title {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.tw-prof-panel-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
}

.tw-prof-panel-close:hover {
  color: var(--danger);
  border-color: rgba(231, 76, 60, 0.45);
}

.tw-prof-panel-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 7px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}

.tw-prof-tab {
  position: relative;
  flex: 1;
  height: 30px;
  border: 1px solid var(--border-light);
  background: var(--surface-4);
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-speed);
}

.tw-prof-tab:hover {
  border-color: rgba(39, 150, 242, 0.35);
  color: var(--text-primary);
}

.tw-prof-tab.is-active {
  color: var(--primary);
  border-color: rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.12);
}

.tw-prof-tab.is-active::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
}

.tw-prof-panel-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  background: var(--surface-2);
}

.tw-prof-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.tw-prof-section-title {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tw-prof-field {
  display: block;
  margin-bottom: 4px;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.tw-prof-input {
  width: 100%;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-4);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 0 8px;
}

.tw-prof-input.is-error {
  border-color: var(--danger);
}

.tw-prof-textarea {
  min-height: 56px;
  height: 56px;
  padding-top: 6px;
  resize: vertical;
}

.tw-prof-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tw-prof-inline-grid-grow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tw-prof-charcount,
.tw-prof-hint,
.tw-prof-subtle {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.15);
  font-size: 8px;
}

.tw-prof-charcount.is-warn,
.tw-prof-save-status.is-dirty .tw-prof-save-text {
  color: var(--warning);
}

.tw-prof-charcount.is-danger,
.tw-prof-error {
  color: var(--danger);
}

.tw-prof-inline-msg {
  margin-top: 4px;
  min-height: 12px;
  font-size: 8px;
  color: var(--success);
}

.tw-prof-avatar-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tw-prof-avatar-preview {
  position: relative;
  width: 50px;
  height: 50px;
  border: 2px solid var(--border);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}

.tw-prof-avatar-preview:hover { border-color: var(--primary); }

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

.tw-prof-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: var(--transition-speed);
}

.tw-prof-avatar-preview:hover .tw-prof-avatar-overlay { opacity: 1; }

.tw-prof-avatar-actions { flex: 1; }

.tw-prof-hidden-input { display: none; }

.tw-prof-btn {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
}

.tw-prof-btn:hover { border-color: var(--primary); color: var(--primary); }

.tw-prof-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.tw-prof-btn-danger {
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.12);
  color: var(--danger);
}

.tw-prof-btn-danger:hover {
  border-color: var(--danger);
  color: #ffd8d3;
  background: rgba(231, 76, 60, 0.30);
}

.tw-prof-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

.tw-prof-btn-primary:hover {
  color: var(--text-primary);
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-glow-blue);
}

.tw-prof-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 58%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  animation: flashSweep 4.8s linear infinite;
}

.tw-prof-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tw-prof-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-4);
  color: rgba(255, 255, 255, 0.30);
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tw-prof-chip .tw-prof-dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.10);
}

.tw-prof-chip.is-on,
.tw-prof-chip[aria-selected='true'] {
  border-color: rgba(39, 150, 242, 0.4);
  background: rgba(39, 150, 242, 0.10);
  color: var(--primary);
}

.tw-prof-chip.is-on .tw-prof-dot,
.tw-prof-chip[aria-selected='true'] .tw-prof-dot {
  background: var(--success);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.40);
}

.tw-prof-drawer-toggle {
  margin-top: 8px;
  width: 100%;
  height: 26px;
  border: 1px dashed var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tw-prof-drawer-toggle:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }

.tw-prof-social-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.tw-prof-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 4px 0;
  border-top: 1px solid rgba(51, 51, 51, 0.20);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
}

.tw-prof-toggle-row:first-of-type { border-top: 0; }

.tw-prof-switch {
  width: 34px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-1);
  position: relative;
}

.tw-prof-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.25);
  transition: var(--transition-speed);
}

.tw-prof-switch.is-on {
  background: rgba(39, 150, 242, 0.12);
  border-color: rgba(39, 150, 242, 0.35);
}

.tw-prof-switch.is-on span {
  left: 20px;
  background: var(--primary);
}

.tw-prof-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}

.tw-prof-segment-btn {
  height: 26px;
  border: 0;
  border-radius: 0;
  background: var(--surface-4);
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  font-weight: 600;
}

.tw-prof-segment-btn.is-on {
  background: rgba(39, 150, 242, 0.10);
  color: var(--primary);
}

.tw-prof-lfg-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(39, 150, 242, 0.15);
  background: rgba(39, 150, 242, 0.06);
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
}

.tw-prof-live-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
  animation: twProfilePulse 2s ease-in-out infinite;
}

@keyframes twProfilePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.tw-prof-blocked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.tw-prof-blocked-avatar {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.tw-prof-name-status {
  min-height: 24px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  background: var(--surface-1);
  color: rgba(255, 255, 255, 0.30);
  font-size: 9px;
}

.tw-prof-name-label {
  color: var(--text-primary);
  font-weight: 600;
}

.tw-prof-name-id {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.tw-prof-name-status.is-pending { color: var(--warning); }
.tw-prof-name-status.is-approved { color: var(--success); }

.tw-prof-gdpr-actions { margin-top: 8px; }

.tw-prof-delete-confirm {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(231, 76, 60, 0.15);
  background: rgba(231, 76, 60, 0.06);
  animation: twSlideDown 0.2s ease;
}

.tw-prof-delete-confirm p {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.tw-prof-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 10px;
  margin: 8px 0;
}

.tw-prof-link-btn {
  display: inline-block;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 9px;
  margin-top: 4px;
}

.tw-prof-link-btn:hover { color: var(--text-secondary); }

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

.tw-prof-savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-5);
}

.tw-prof-save-status {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 14px;
}

.tw-prof-save-dot {
  width: 5px;
  height: 5px;
  background: transparent;
}

.tw-prof-save-status.is-dirty .tw-prof-save-dot {
  background: var(--warning);
}

.tw-prof-save-status.is-saving .tw-prof-save-dot {
  background: var(--primary);
  animation: twProfilePulse 1.2s ease-in-out infinite;
}

.tw-prof-save-status.is-success .tw-prof-save-dot {
  background: var(--success);
}

.tw-prof-save-status.is-error .tw-prof-save-dot {
  background: var(--danger);
}

.tw-prof-save-status.is-saving .tw-prof-save-text { color: var(--primary); }
.tw-prof-save-status.is-success .tw-prof-save-text { color: var(--success); }
.tw-prof-save-status.is-error .tw-prof-save-text { color: var(--danger); }

.tw-prof-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 1601;
}

.tw-prof-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(260px, 82vw);
  height: 100%;
  border: 1px solid var(--border);
  border-left: 0;
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 1602;
  display: flex;
  flex-direction: column;
}

.tw-prof-drawer.is-open {
  transform: translateX(0);
}

.tw-prof-drawer-header,
.tw-prof-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-5);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tw-prof-drawer-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
  justify-content: flex-end;
  margin-top: auto;
}

.tw-prof-drawer-body {
  padding: 12px;
  overflow-y: auto;
}

.tw-prof-social-edit-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 8px;
  margin-bottom: 10px;
  align-items: start;
}

.tw-prof-social-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  background: var(--surface-1);
  color: var(--text-tertiary);
  margin-top: 0;
}

.tw-prof-social-field {
  display: flex;
  flex-direction: column;
}

.tw-prof-social-field .tw-prof-input {
  height: 30px;
}

.tw-prof-social-field .tw-prof-inline-msg {
  margin-top: 2px;
  min-height: 10px;
}

.tw-prof-social-icon.is-twitch {
  background: #9146FF10;
  border-color: #9146FF33;
  color: #9146FF;
}

.tw-prof-social-icon.is-snapchat {
  background: #FFFC0010;
  border-color: #FFFC0033;
  color: #FFFC00;
}

.tw-prof-social-clear {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: var(--surface-4);
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.tw-prof-social-clear:hover {
  color: var(--danger);
  border-color: rgba(231, 76, 60, 0.45);
}

.tw-prof-oauth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tw-prof-oauth-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.tw-prof-oauth-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  box-shadow: none;
}

.tw-prof-oauth-status.is-connected {
  color: var(--success);
}

.tw-prof-oauth-status.is-connected::before {
  background: var(--success);
  box-shadow: 0 0 7px rgba(34, 197, 94, 0.55);
}

.tw-prof-oauth-status.is-disconnected {
  color: var(--text-tertiary);
}

.tw-prof-oauth-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tw-prof-oauth-actions .tw-prof-btn {
  min-width: 95px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  line-height: 1;
}

.tw-prof-section--oauth {
  padding-top: 10px;
}

@media (max-width: 768px) {
  .tw-prof-panel {
    width: calc(100vw - 16px);
    height: 88vh;
    max-height: 88vh;
    left: 8px !important;
    right: auto !important;
  }

  .tw-prof-drawer {
    position: fixed;
    right: 8px;
    top: 6vh;
    height: 82vh;
    width: calc(100vw - 16px);
    border-left: 1px solid var(--border);
  }

  .tw-prof-drawer-body {
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .tw-prof-panel {
    width: 100vw;
    left: 0 !important;
    top: 0 !important;
    max-height: 100vh;
    height: 100vh;
  }

  .tw-prof-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100vw;
    height: 72vh;
    transform: translateY(100%);
  }

  .tw-prof-drawer.is-open {
    transform: translateY(0);
  }
}

@keyframes twShoutTickerMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes twShoutAutoPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes fnavPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* ===== FORRE NAV — Bubble style ===== */
.tw-nav-wrap {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid rgba(51,51,51,0.9);
  background: #191919;
  overflow: hidden;
  min-width: 0;
}

.tw-nav-bubble-active,
.tw-nav-bubble-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 40px;
  pointer-events: none;
  z-index: 1;
}

/* Transition aktiveras efter positionering */
.tw-nav-bubble-active.transition-on,
.tw-nav-bubble-hover.transition-on {
  transition: left 0.2s ease, width 0.2s ease, opacity 0.15s ease;
}

.tw-nav-bubble-active {
  background: #242424;
  border-left: 1px solid #2b2b2b;
  border-right: 1px solid #2b2b2b;
  z-index: 1;
  opacity: 0;
}

.tw-nav-bubble-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  background: var(--primary);
  box-shadow: 0 0 5px rgba(39,150,242,0.5);
  border-radius: 0;
}

.tw-nav-bubble-hover {
  background: #1d1d1d;
  z-index: 0;
  opacity: 0;
}

.tw-forre-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 6px;
  min-width: 0;
}

.tw-forre-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  color: #d2d2d2;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tw-forre-link i {
  font-size: 11px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  text-align: center;
}

.tw-forre-link:hover {
  color: #ffffff;
}

.tw-forre-link:hover i {
  opacity: 1;
}

.tw-forre-link.active {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(74, 144, 250, 0.45);
}

.tw-forre-link.active i,
.tw-forre-link.active svg {
  opacity: 1;
  color: var(--primary);
  filter: drop-shadow(0 0 6px rgba(74, 144, 250, 0.5));
}

.tw-forre-link svg {
  transition: filter 0.15s, opacity 0.15s;
  opacity: 0.5;
}

.tw-forre-sep {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: #4f4f4f;
  font-size: 12px;
  padding: 0 2px;
  user-select: none;
}

/* --- notifications-page.css --- */
/* Notifications page: FORRE_DARK, data-dense and scan-first */
.tw-notif-page {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-notif-hero {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 10px 9px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.tw-notif-hero-copy {
  min-width: 0;
}

.tw-notif-hero-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tw-notif-hero-title i {
  color: var(--primary);
  font-size: 11px;
}

.tw-notif-hero-meta {
  margin-top: 3px;
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-notif-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-notif-pill {
  border: 1px solid rgba(39, 150, 242, 0.35);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 0;
  white-space: nowrap;
}

.tw-notif-pill.is-muted {
  border-color: var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
}

.tw-notif-list {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  overflow: hidden;
}

.tw-notif-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
  transition: background-color var(--transition-speed) ease;
}

.tw-notif-item:last-child {
  border-bottom: 0;
}

.tw-notif-item:nth-child(even) {
  background: var(--surface-3);
}

.tw-notif-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tw-notif-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: transparent;
}

.tw-notif-item.is-unread::before {
  background: rgba(39, 150, 242, 0.8);
}

.tw-notif-item.is-priority {
  background: rgba(39, 150, 242, 0.06);
}

.tw-notif-item.is-priority::before {
  background: var(--primary);
}

.tw-notif-icon {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(39, 150, 242, 0.35);
  background: rgba(39, 150, 242, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 11px;
  border-radius: 0;
}

.tw-notif-content {
  min-width: 0;
}

.tw-notif-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.tw-notif-message {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tw-notif-meta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
}

.tw-notif-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
  animation: twNotifPulse 1.5s infinite ease-in-out;
}

.tw-notif-actions {
  display: inline-flex;
  gap: 6px;
}

.tw-notif-tail {
  min-width: 44px;
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 4px;
  padding-top: 1px;
}

.tw-notif-time {
  font-size: 8px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tw-notif-unread {
  min-height: 14px;
  padding: 0 5px;
  border: 1px solid rgba(39, 150, 242, 0.35);
  background: rgba(39, 150, 242, 0.12);
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
}

.tw-notif-go {
  color: var(--text-muted);
  font-size: 10px;
}

.tw-notif-item.is-unread .tw-notif-go {
  color: var(--primary);
}

.tw-notif-review-btn {
  min-width: 64px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  transition: all var(--transition-speed) ease;
}

.tw-notif-review-btn:hover {
  color: var(--text-primary);
  border-color: rgba(39, 150, 242, 0.4);
}

.tw-notif-review-btn[data-review-decision='approve']:hover {
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--success);
}

.tw-notif-review-btn[data-review-decision='deny']:hover {
  border-color: rgba(231, 76, 60, 0.5);
  color: var(--danger);
}

.tw-notif-empty {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  text-align: center;
  padding: 34px 16px;
}

.tw-notif-empty i {
  color: rgba(39, 150, 242, 0.45);
  font-size: 22px;
}

.tw-notif-empty h2 {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

.tw-notif-empty p {
  margin: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.tw-notif-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.tw-notif-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.tw-notif-footer-link:hover {
  color: var(--primary-hover);
}

@keyframes twNotifPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (max-width: 768px) {
  .tw-notif-hero { grid-template-columns: 1fr; }

  .tw-notif-stats {
    justify-content: flex-start;
  }

  .tw-notif-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }

  .tw-notif-tail {
    grid-column: 2 / 3;
    justify-items: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
  }

  .tw-notif-time {
    font-size: 9px;
  }

  .tw-notif-actions {
    grid-column: 2 / 3;
    margin-top: 4px;
  }

  .tw-notif-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tw-notif-settings-form {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tw-notif-settings-alert {
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.tw-notif-settings-alert.is-success {
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--success);
  background: rgba(34, 197, 94, 0.08);
}

.tw-notif-settings-alert.is-error {
  border-color: rgba(231, 76, 60, 0.45);
  color: var(--danger);
  background: rgba(231, 76, 60, 0.08);
}

.tw-notif-settings-status {
  border: 1px solid rgba(51, 51, 51, 0.65);
  background: var(--surface-1);
  color: var(--text-secondary);
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.tw-notif-settings-status.is-dirty {
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
}

.tw-notif-settings-status.is-saving {
  border-color: rgba(39, 150, 242, 0.45);
  color: var(--primary);
  background: rgba(39, 150, 242, 0.1);
}

.tw-notif-settings-section {
  border: 1px solid rgba(51, 51, 51, 0.6);
  background: var(--surface-1);
  border-radius: 0;
  padding: 12px;
}

.tw-notif-settings-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.tw-notif-settings-grid {
  display: grid;
  gap: 8px;
}

.tw-notif-setting-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(51, 51, 51, 0.4);
  background: var(--surface-3);
  padding: 10px;
  cursor: pointer;
}

.tw-notif-setting-item:hover {
  border-color: rgba(39, 150, 242, 0.4);
  background: rgba(39, 150, 242, 0.06);
}

.tw-notif-setting-item input[type='checkbox'] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}

.tw-notif-setting-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tw-notif-setting-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.4px;
}

.tw-notif-setting-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.tw-notif-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.tw-notif-settings-save {
  border: 1px solid rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.14);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

.tw-notif-settings-save:hover {
  border-color: var(--primary);
  background: rgba(39, 150, 242, 0.22);
  color: var(--text-primary);
}

.tw-notif-settings-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- topbar.css --- */
/**
 * FORRE_DARK - Topbar Component
 */

.tw-site-header {
  position: relative;
  width: 100%;
  background: var(--topbar-bg);
  box-shadow: var(--shadow-topbar);
}

.tw-topbar {
  margin: 0 auto;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
}

/* Logo */
.tw-topbar-logo {
  padding-right: 8px;
}

.tw-topbar-logo a {
  display: block;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-decoration: none;
}

.tw-topbar-logo a span {
  color: var(--primary);
}

.tw-topbar-tagline {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--text-tertiary);
}

/* Topbar Center */
.tw-topbar-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Shoutbox Strip */
.tw-shout-strip {
  position: relative;
  height: 32px;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #000000;
  text-align: left;
}

.tw-shout-strip-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  height: 100%;
  width: 94px;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--border);
  background: #000000;
  padding: 0 16px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-primary);
}

.tw-shout-strip-label i {
  font-size: 11px;
  color: var(--primary);
}

.tw-shout-strip-content {
  display: flex;
  height: 100%;
  align-items: center;
  background: #0d0d0d;
  padding-left: 108px;
  padding-right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Mobile-only shout notification button is hidden by default (desktop/tablet) */
.tw-mob-shout-notif-btn,
.tw-mob-shout-notif-badge {
  display: none !important;
}

/* Topbar Tools */
.tw-topbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon Buttons */
.tw-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg-alt);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-speed);
}

.tw-icon-btn:hover {
  color: var(--text-primary);
}

.tw-icon-btn i {
  font-size: 13px;
}

/* Search */
.tw-search-wrap {
  display: none;
}

.tw-search-wrap.active {
  display: block;
}

.tw-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  padding: 0 12px;
}

.tw-search-input i {
  font-size: 12px;
  color: var(--text-muted);
}

.tw-search-input input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text-primary);
}

.tw-search-input input::placeholder {
  color: var(--text-tertiary);
}

/* Profile Badge */
.tw-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--primary);
  background: var(--card-bg-alt);
  padding: 0 12px;
  text-decoration: none;
}

.tw-profile-badge-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #242527;
  overflow: hidden;
}

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

.tw-profile-badge-info {
  line-height: 1.2;
}

.tw-profile-badge-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}

.tw-profile-badge-meta {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
}

/* Double Divider */
.tw-divider-double {
  width: 100%;
}

.tw-divider-double .tw-divider-top {
  height: 1px;
  background: #3a3a3a;
}

.tw-divider-double .tw-divider-bottom {
  height: 1px;
  background: #1f1f1f;
}

/* Icon Badge (notification count) */
.tw-icon-btn {
  position: relative;
}

.tw-icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}

.tw-icon-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 4px var(--primary);
}

/* Dropdown Styles */
.tw-dropdown {
  position: fixed;
  z-index: 1000;
}

.tw-dropdown-panel {
  border: 1px solid rgba(67,67,67,0.9);
  background: rgba(22,22,22,0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.45);
  border-radius: var(--radius);
  min-width: 260px;
  overflow: hidden;
}

.tw-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.tw-dropdown-badge {
  background: var(--primary);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.tw-dropdown-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
}

.tw-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.tw-dropdown-item:hover {
  background: rgba(39,150,242,0.08);
}

.tw-dropdown-item .tw-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: #242527;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  overflow: hidden;
}

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

.tw-dropdown-item .tw-item-content {
  flex: 1;
  min-width: 0;
}

.tw-dropdown-item .tw-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-dropdown-item .tw-item-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.tw-dropdown-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.tw-dropdown-footer a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.tw-dropdown-footer a:hover {
  text-decoration: underline;
}

.tw-dropdown-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-tertiary);
}

.tw-dropdown-empty i {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

.tw-dropdown-empty p {
  font-size: 13px;
  margin: 0;
}

/* Loading state */
.tw-loading {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Shout item animation */
.tw-shout-item {
  display: inline-block;
  animation: twShoutFade 0.3s ease;
}

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

/* Hidden class for search toggle */
.tw-shout-strip.hidden {
  display: none;
}

/* Guest State */
.tw-guest-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tw-guest-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg-alt);
  padding: 0 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* --- tracker-page.css --- */
.tw-tracker-page .tw-widget-body {
  /* Align tracker content rail with the 1200px layout + 16px side gutter used by countdown and page content */
  padding: 16px;
}

.tw-tracker-home,
.tw-tracker-stats-page {
  display: grid;
  gap: 14px;
}

.tw-tracker-status,
.tw-tracker-empty-state {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font: 600 12px var(--font-family);
}

.tw-tracker-home-search {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.tw-tracker-home-searchbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 44px;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}

.tw-tracker-platforms {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.tw-tracker-platform {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: grid;
  place-items: center;
}

.tw-tracker-platform svg {
  width: 14px;
  height: 14px;
  display: block;
}

.tw-tracker-platform.is-active {
  color: var(--primary);
  border-color: rgba(39,150,242,0.5);
  background: rgba(39,150,242,0.12);
}

.tw-tracker-home-input {
  display: flex;
  align-items: center;
}

.tw-tracker-home-input input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  padding: 0 12px;
  font: 500 14px var(--font-family);
  outline: 0;
}

.tw-tracker-home-input input::placeholder {
  color: var(--text-muted);
}

.tw-tracker-home-submit {
  width: 44px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.04);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
}

.tw-tracker-home-meta {
  padding-top: 8px;
  text-align: center;
  color: var(--text-muted);
  font: 600 11px var(--font-family);
}

.tw-tracker-home-meta strong {
  color: var(--text-secondary);
  font-weight: 800;
}

.tw-tracker-search-dropdown {
  position: absolute;
  inset: calc(100% + 6px) 0 auto 0;
  z-index: 12;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-dropdown);
}

.tw-tracker-search-dropdown[hidden] {
  display: none !important;
}

.tw-tracker-search-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--surface-3);
}

.tw-tracker-search-item.is-active,
.tw-tracker-search-item:hover {
  border-color: rgba(39,150,242,0.3);
  background: rgba(39,150,242,0.08);
}

.tw-tracker-search-avatar,
.tw-tracker-player-avatar,
.tw-tracker-profile-avatar {
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-4);
  display: grid;
  place-items: center;
}

.tw-tracker-search-avatar {
  width: 36px;
  height: 36px;
}

.tw-tracker-search-avatar img,
.tw-tracker-player-avatar img,
.tw-tracker-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tw-tracker-search-name,
.tw-tracker-player-name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
}

.tw-tracker-search-meta {
  color: var(--text-muted);
  font: 500 10px var(--font-family);
}

.tw-tracker-search-stats {
  color: var(--text-secondary);
  font: 700 10px var(--font-family);
  font-variant-numeric: tabular-nums;
}

.tw-tracker-home-filters,
.tw-tracker-stats-filters {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tw-tracker-home-filter-group {
  display: grid;
  gap: 8px;
}

.tw-tracker-home-filter-title {
  color: var(--text-muted);
  font: 700 9px var(--font-family);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-tracker-home-divider,
.tw-tracker-tabs-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.06);
}

.tw-tracker-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tw-tracker-chip,
.tw-tracker-pagechip,
.tw-tracker-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font: 600 11px var(--font-family);
}

.tw-tracker-chip.is-active,
.tw-tracker-pagechip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.tw-tracker-season-select {
  height: 34px;
  min-width: 210px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-primary);
  font: 600 12px var(--font-family);
}

.tw-tracker-home-heading {
  text-align: center;
}

.tw-tracker-home-heading h1 {
  margin: 0;
  color: var(--text-primary);
  font: 800 15px var(--font-family);
}

.tw-tracker-home-heading p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font: 600 11px var(--font-family);
}

.tw-tracker-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.tw-tracker-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.tw-tracker-table th {
  padding: 12px 10px;
  background: var(--surface-4);
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font: 700 11px var(--font-family);
}

.tw-tracker-table th:last-child,
.tw-tracker-table td:last-child {
  padding-right: 14px;
}

.tw-tracker-table th:nth-child(n+3),
.tw-tracker-table td:nth-child(n+3) {
  text-align: right;
}

.tw-tracker-row {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
}

.tw-tracker-row:hover {
  background: rgba(255,255,255,0.015);
}

.tw-tracker-row.is-me {
  background: rgba(39,150,242,0.03);
  box-shadow: inset 3px 0 0 var(--primary);
}

.tw-tracker-table td {
  padding: 10px;
  color: var(--text-secondary);
  font: 600 12px var(--font-family);
  font-variant-numeric: tabular-nums;
}

.tw-tracker-rank {
  font-weight: 900;
  color: var(--text-muted);
}

.tw-tracker-rank.is-gold { color: #FFD700; }
.tw-tracker-rank.is-silver { color: #C0C0C0; }
.tw-tracker-rank.is-bronze { color: #CD7F32; }

.tw-tracker-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tw-tracker-player-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.tw-tracker-player-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tw-tracker-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-tracker-player-flag {
  font-size: 14px;
}

.tw-tracker-num.is-primary {
  color: var(--primary);
  font-weight: 800;
}

.tw-tracker-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.tw-tracker-pagechip {
  width: 28px;
  padding: 0;
}

.tw-tracker-pagechip.is-disabled {
  opacity: 0.4;
}

.tw-tracker-profile-head,
.tw-tracker-stats-row,
.tw-tracker-panel,
.tw-tracker-doc-card {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.tw-tracker-profile-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
}

.tw-tracker-profile-main {
  display: flex;
  gap: 14px;
  min-width: 0;
}

.tw-tracker-profile-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}

.tw-tracker-profile-copy {
  min-width: 0;
}

.tw-tracker-profile-views,
.tw-tracker-profile-actions span,
.tw-tracker-profile-meta {
  color: var(--text-muted);
  font: 600 10px var(--font-family);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tw-tracker-profile-copy h1 {
  margin: 4px 0 8px;
  color: var(--text-primary);
  font: 800 20px var(--font-family);
}

.tw-tracker-profile-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tw-tracker-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: var(--surface-4);
  color: var(--text-secondary);
  font: 700 10px var(--font-family);
  text-transform: uppercase;
}

.tw-tracker-tag.is-rank {
  color: var(--primary);
  border-color: rgba(39,150,242,0.3);
}

.tw-tracker-tag.is-live {
  color: var(--success);
  border-color: rgba(34,197,94,0.3);
}

.tw-tracker-profile-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tw-tracker-profile-meta strong {
  color: var(--text-secondary);
}

.tw-tracker-profile-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.tw-tracker-secondary-btn {
  height: 30px;
  padding: 0 10px;
}

.tw-tracker-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tw-tracker-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  color: var(--text-muted);
  text-decoration: none;
  font: 600 13px var(--font-family);
  white-space: nowrap;
}

.tw-tracker-tab.is-active {
  color: var(--primary);
}

.tw-tracker-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary);
}

.tw-tracker-stats-grid {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.tw-tracker-stats-row {
  display: grid;
  grid-template-columns: 140px repeat(6, minmax(120px, 1fr));
  min-width: 860px;
}

.tw-tracker-stats-row.is-overall {
  box-shadow: inset 3px 0 0 var(--primary);
  background: rgba(39,150,242,0.02);
}

.tw-tracker-stats-mode,
.tw-tracker-stats-cell {
  padding: 12px 14px;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.tw-tracker-stats-mode {
  display: flex;
  align-items: center;
  color: var(--primary);
  font: 700 13px var(--font-family);
}

.tw-tracker-stats-cell small {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font: 700 10px var(--font-family);
  text-transform: uppercase;
}

.tw-tracker-stats-cell strong {
  color: var(--text-primary);
  font: 800 16px var(--font-family);
  font-variant-numeric: tabular-nums;
}

.tw-tracker-stats-lower {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tw-tracker-panel {
  padding: 12px;
}

.tw-tracker-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.tw-tracker-panel-head span {
  color: var(--text-primary);
  font: 700 11px var(--font-family);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tw-tracker-panel-head small {
  color: var(--text-muted);
  font: 600 10px var(--font-family);
}

.tw-tracker-rank-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.tw-tracker-rank-summary strong {
  color: var(--primary);
  font: 800 18px var(--font-family);
}

.tw-tracker-rank-summary span,
.tw-tracker-rank-row small {
  color: var(--text-secondary);
  font: 600 11px var(--font-family);
}

.tw-tracker-rank-list {
  display: grid;
  gap: 8px;
}

.tw-tracker-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border-light);
}

.tw-tracker-rank-row span {
  color: var(--text-muted);
  font: 700 10px var(--font-family);
  text-transform: uppercase;
}

.tw-tracker-rank-row strong {
  color: var(--text-primary);
  font: 700 12px var(--font-family);
}

.tw-tracker-trend {
  min-height: 56px;
}

.tw-tracker-trend svg {
  width: 100%;
  height: 56px;
  display: block;
}

.tw-tracker-session-recap {
  display: grid;
  gap: 12px;
}

.tw-tracker-session-day {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.tw-tracker-session-day-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: var(--surface-3);
}

.tw-tracker-session-day-head.is-hot {
  box-shadow: inset 3px 0 0 var(--primary);
}

.tw-tracker-session-day-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font: 700 10px var(--font-family);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-tracker-session-day-head strong {
  color: var(--text-primary);
  font: 700 14px var(--font-family);
}

.tw-tracker-session-day-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  color: var(--text-secondary);
  font: 600 11px var(--font-family);
  font-variant-numeric: tabular-nums;
}

.tw-tracker-session-list {
  display: grid;
}

.tw-tracker-session-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 88px 88px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.03);
}

.tw-tracker-session-placement strong,
.tw-tracker-session-info strong,
.tw-tracker-session-metric strong {
  display: block;
}

.tw-tracker-session-placement strong {
  font: 700 12px var(--font-family);
}

.tw-tracker-session-placement span,
.tw-tracker-session-info span,
.tw-tracker-session-metric small {
  display: block;
  color: var(--text-muted);
  font: 700 9px var(--font-family);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-tracker-session-placement span {
  margin-top: 4px;
}

.tw-tracker-session-placement.is-victory strong {
  color: var(--success);
}

.tw-tracker-session-placement.is-highlight strong {
  color: var(--warning);
}

.tw-tracker-session-placement.is-default strong {
  color: var(--text-secondary);
}

.tw-tracker-session-info strong,
.tw-tracker-session-metric strong {
  color: var(--text-primary);
  font: 700 13px var(--font-family);
  font-variant-numeric: tabular-nums;
}

.tw-tracker-session-metric strong.is-highlight {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(39,150,242,0.18);
}

@media (max-width: 900px) {
  .tw-tracker-stats-lower {
    grid-template-columns: 1fr;
  }

  .tw-tracker-profile-head {
    grid-template-columns: 1fr;
    display: grid;
  }
}

@media (max-width: 768px) {
  .tw-tracker-home-filters {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
  }

  .tw-tracker-stats-filters {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
  }

  .tw-tracker-stats-filters .tw-tracker-home-filter-group {
    min-width: 0;
  }

  .tw-tracker-home-filters .tw-tracker-home-filter-group,
  .tw-tracker-home-filters .tw-tracker-season-select {
    min-width: 0;
    width: 100%;
  }

  .tw-tracker-home-filters .tw-tracker-chip-row {
    flex-wrap: wrap;
  }

  .tw-tracker-stats-filters .tw-tracker-chip-row {
    flex-wrap: wrap;
  }

  .tw-tracker-home-divider,
  .tw-tracker-tabs-divider {
    display: none;
  }

  .tw-tracker-stats-row {
    min-width: 760px;
  }
}

@media (max-width: 600px) {
  .tw-tracker-home-searchbar {
    grid-template-columns: 1fr 44px;
    height: auto;
  }

  .tw-tracker-platforms {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding: 8px;
  }

  .tw-tracker-home-input {
    min-height: 44px;
  }

  .tw-tracker-home-search,
  .tw-tracker-home-content {
    min-width: 0;
  }

  .tw-tracker-home-heading {
    text-align: left;
  }

  .tw-tracker-profile-main {
    align-items: flex-start;
  }

  .tw-tracker-profile-copy h1 {
    font-size: 18px;
  }

  .tw-tracker-profile-meta {
    display: grid;
    gap: 4px;
  }

  .tw-tracker-stats-row {
    min-width: 680px;
  }

  .tw-tracker-stats-mode,
  .tw-tracker-stats-cell {
    padding: 10px 12px;
  }

  .tw-tracker-stats-cell strong {
    font-size: 15px;
  }

  .tw-tracker-rank-summary,
  .tw-tracker-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .tw-tracker-session-day-head,
  .tw-tracker-session-row {
    grid-template-columns: 1fr;
  }

  .tw-tracker-session-day-summary {
    justify-content: flex-start;
  }
}

/* --- widgets.css --- */
/**
 * FORRE_DARK - Widget Base Components
 */

/* Widget Base */
.tw-widget {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-dark);
  background: var(--card-bg);
  box-shadow: var(--shadow-default);
}

/* Widget Header - Accent bar + subtle tint */
.tw-widget-header {
  position: relative;
  height: var(--widget-header-height);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg-alt);
  border-left: 2px solid var(--primary);
}

.tw-widget-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tint-blue, rgba(39,150,242,0.08));
  pointer-events: none;
}

/* ===== WIDGET TINT SYSTEM =====
 * Add class to .tw-widget root element:
 * .tw-widget.tint-blue     — general/hub/social (default)
 * .tw-widget.tint-green    — live/online/lfg/stats
 * .tw-widget.tint-warning  — leaderboard/events/urgent
 * .tw-widget.tint-purple   — xp/progress/rank
 * .tw-widget.tint-danger   — errors/alerts/delete
 * The header accent bar and tint adapt automatically.
 */

.tw-widget.tint-green .tw-widget-header {
  border-left-color: var(--success);
}

.tw-widget.tint-green .tw-widget-header::before {
  background: var(--tint-green);
}

.tw-widget.tint-warning .tw-widget-header {
  border-left-color: var(--warning);
}

.tw-widget.tint-warning .tw-widget-header::before {
  background: var(--tint-warning);
}

.tw-widget.tint-purple .tw-widget-header {
  border-left-color: var(--stat-purple, #a855f7);
}

.tw-widget.tint-purple .tw-widget-header::before {
  background: var(--tint-purple);
}

.tw-widget.tint-danger .tw-widget-header {
  border-left-color: var(--danger);
}

.tw-widget.tint-danger .tw-widget-header::before {
  background: var(--tint-danger);
}

/* ===== STAT BADGES — reusable colored pills =====
 * Usage: <span class="tw-stat-badge tw-stat-badge-blue">42</span>
 * Available: blue, green, orange, red, purple
 */

.tw-stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.tw-stat-badge-blue {
  background: var(--tint-blue-strong);
  color: var(--primary);
  border: 1px solid rgba(39,150,242,0.25);
}

.tw-stat-badge-green {
  background: var(--tint-green-strong);
  color: var(--success);
  border: 1px solid rgba(34,197,94,0.25);
}

.tw-stat-badge-orange {
  background: var(--tint-warning-strong);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.25);
}

.tw-stat-badge-red {
  background: var(--tint-danger-strong);
  color: var(--danger);
  border: 1px solid rgba(231,76,60,0.25);
}

.tw-stat-badge-purple {
  background: var(--tint-purple-strong);
  color: #a855f7;
  border: 1px solid rgba(168,85,247,0.25);
}

.tw-widget-header-accent {
  position: absolute;
  inset: 0;
  background: var(--primary);
  display: none !important;
}

.tw-widget-header-overlay {
  position: absolute;
  inset: 0;
  background: #202020;
  clip-path: polygon(54% 0%, 58% 57%, 58% 27%, 62% 100%, 100% 100%, 100% 0%);
  display: none !important;
}

.tw-widget-header-fg {
  position: absolute;
  inset: 0;
  background: var(--card-bg-alt);
  clip-path: polygon(54% 0%, 58% 57%, 58% 27%, 62% 100%, 100% 100%, 100% 0%);
  display: none !important;
}

/*
 * Builder-styled headers: kill legacy accent/fg layers immediately to avoid
 * old-header flash during hard refresh before JS applies runtime styles.
 */
.tw-widget[data-builder-header-bg] .tw-widget-header-accent,
.tw-widget[data-builder-header-bg] .tw-widget-header-fg,
.tw-widget[data-builder-header-tailwind] .tw-widget-header-accent,
.tw-widget[data-builder-header-tailwind] .tw-widget-header-fg,
.widget[data-builder-header-bg] .tw-widget-header-accent,
.widget[data-builder-header-bg] .tw-widget-header-fg,
.widget[data-builder-header-tailwind] .tw-widget-header-accent,
.widget[data-builder-header-tailwind] .tw-widget-header-fg {
  display: none !important;
}

.tw-widget-header-content {
  position: relative;
  z-index: 10;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0 12px;
}

.tw-widget-title {
  display: inline-flex;
  position: relative;
  top: 1px;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.tw-widget-link {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  text-decoration: none;
}

.tw-widget-link:hover {
  text-decoration: underline;
}

/* Widget Body */
.tw-widget-body {
  padding: var(--widget-body-padding);
}

/* Widget Footer */
.tw-widget-footer {
  border-top: 1px solid var(--border-light);
  padding: var(--widget-footer-padding);
  background: rgba(0,0,0,0.15);
}

/* Widget Cards */
.tw-widget-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  padding: 12px;
  transition: background var(--transition-speed), border-color var(--transition-speed);
}

.tw-widget-card:hover {
  background: rgba(39,150,242,0.04);
  border-color: rgba(255,255,255,0.25);
}

/* Widget Avatar */
.tw-widget-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #242527;
  overflow: hidden;
}

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

.tw-widget-avatar-lg {
  width: 48px;
  height: 48px;
}

.tw-widget-avatar-sm {
  width: 32px;
  height: 32px;
}

/* Page Builder Widget Container */
.pb-widget {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.pb-widget-header {
  position: relative;
  height: 36px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg-alt);
}

.pb-widget-body {
  padding: 12px;
}

/* --- xp-row.css --- */
/**
 * FORRE_DARK - XP Hero Row
 */

.tw-xp-hero-shell {
  width: 100%;
  max-width: calc(var(--max-width) - 2px);
  margin: 0 auto;
  margin-top: 6px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.tw-xp-row {
  --tw-xp-level-rgb: 39,150,242;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 88px;
  display: flex;
  align-items: stretch;
  background: var(--surface-2);
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.02);
}

.tw-xp-cell {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: transparent;
  border: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.tw-xp-cell:hover {
  background: rgba(255,255,255,0.02);
}

.tw-xp-cell:focus-visible {
  outline: 1px solid rgba(39,150,242,0.40);
  outline-offset: -1px;
}

.tw-xp-level {
  flex: 0 0 96px;
  justify-content: center;
  padding-left: 0;
}

.tw-xp-rank,
.tw-xp-streak {
  flex: 0 1 31%;
}

.tw-xp-ach {
  flex: 0 0 174px;
  justify-content: flex-end;
  padding-right: 8px;
}

.tw-xp-divider {
  flex: 0 0 14px;
  position: relative;
}

.tw-xp-divider::before {
  content: '|';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.08);
}

.tw-xp-section-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tw-xp-top,
.tw-xp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.tw-xp-title {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.tw-xp-subvalue,
.tw-xp-meta {
  font-variant-numeric: tabular-nums;
}

.tw-xp-subvalue {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.tw-xp-meta {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.56);
}

.tw-xp-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-xp-level-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tw-xp-ring {
  position: relative;
  width: 62px;
  height: 62px;
}

.tw-xp-ring-svg {
  width: 62px;
  height: 62px;
  transform: rotate(-90deg);
  overflow: visible;
}

.tw-xp-ring-track {
  fill: none;
  stroke: rgba(39,150,242,0.08);
  stroke-width: 4;
  stroke-dasharray: 8 4;
  transform-origin: 31px 31px;
  animation: tw-xp-ring-rotate 20s linear infinite;
}

.tw-xp-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 4px rgba(39,150,242,0.30));
  transition: stroke-dashoffset 0.5s ease;
}

.tw-xp-ring-fill.is-close {
  animation: tw-xp-ring-pulse 2s ease-in-out infinite;
}

.tw-xp-ring-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tw-xp-ring-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 3px;
}

.tw-xp-ring-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.tw-xp-level-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.tw-xp-rank {
  --tw-xp-fill-color: var(--tw-xp-rank-color, var(--primary));
  --tw-xp-fill-rgb: var(--tw-xp-rank-rgb, 39,150,242);
}

.tw-xp-rank--bronze {
  --tw-xp-rank-color: #CD7F32;
  --tw-xp-rank-rgb: 205,127,50;
}

.tw-xp-rank--silver {
  --tw-xp-rank-color: #C0C0C0;
  --tw-xp-rank-rgb: 192,192,192;
}

.tw-xp-rank--gold {
  --tw-xp-rank-color: #FFD700;
  --tw-xp-rank-rgb: 255,215,0;
}

.tw-xp-rank--platinum {
  --tw-xp-rank-color: #00CCCC;
  --tw-xp-rank-rgb: 0,204,204;
}

.tw-xp-rank--diamond {
  --tw-xp-rank-color: #88DDFF;
  --tw-xp-rank-rgb: 136,221,255;
}

.tw-xp-rank--elite {
  --tw-xp-rank-color: #00D4AA;
  --tw-xp-rank-rgb: 0,212,170;
}

.tw-xp-rank--champion {
  --tw-xp-rank-color: #FF6B6B;
  --tw-xp-rank-rgb: 255,107,107;
}

.tw-xp-rank--unreal {
  --tw-xp-rank-color: #A855F7;
  --tw-xp-rank-rgb: 168,85,247;
}

.tw-xp-rank--unranked {
  --tw-xp-rank-color: var(--text-muted);
  --tw-xp-rank-rgb: 119,119,119;
}

.tw-xp-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(var(--tw-xp-fill-rgb), 0.34);
  background: rgba(var(--tw-xp-fill-rgb), 0.12);
  color: var(--tw-xp-fill-color);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tw-xp-rank.is-max .tw-xp-rank-badge {
  box-shadow: 0 0 14px rgba(var(--tw-xp-fill-rgb), 0.24);
}

.tw-xp-rank-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.tw-xp-bar {
  position: relative;
  height: 4px;
  overflow: visible;
}

.tw-xp-track,
.tw-xp-fill {
  position: absolute;
  inset: 0;
  height: 4px;
}

.tw-xp-track {
  background: rgba(var(--tw-xp-fill-rgb, 39,150,242), 0.12);
}

.tw-xp-fill {
  width: 0;
  background: rgba(var(--tw-xp-fill-rgb, 39,150,242), 0.30);
  transition: width 0.45s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tw-xp-fill::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  background: inherit;
  box-shadow: 0 0 5px rgba(var(--tw-xp-fill-rgb, 39,150,242), 0.55), 0 0 10px rgba(var(--tw-xp-fill-rgb, 39,150,242), 0.30);
  opacity: 0;
}

.tw-xp-fill.is-mid {
  background: rgba(var(--tw-xp-fill-rgb, 39,150,242), 0.60);
}

.tw-xp-fill.is-high {
  background: rgb(var(--tw-xp-fill-rgb, 39,150,242));
  box-shadow: 0 0 10px rgba(var(--tw-xp-fill-rgb, 39,150,242), 0.18);
}

.tw-xp-fill.has-edge::after {
  opacity: 1;
}

.tw-xp-streak {
  --tw-xp-fill-color: var(--success);
  --tw-xp-fill-rgb: 34,197,94;
}

.tw-xp-streak.is-warning {
  --tw-xp-fill-color: var(--warning);
  --tw-xp-fill-rgb: 245,158,11;
}

.tw-xp-streak.is-muted {
  --tw-xp-fill-color: var(--text-muted);
  --tw-xp-fill-rgb: 119,119,119;
}

.tw-xp-streak-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tw-xp-flame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--tw-xp-fill-color);
}

.tw-xp-streak.is-active .tw-xp-flame {
  text-shadow: 0 0 6px rgba(34,197,94,0.40);
}

.tw-xp-streak.is-warning .tw-xp-flame {
  animation: tw-xp-warning-pulse 1.8s ease-in-out infinite;
}

.tw-xp-streak-value,
.tw-xp-ach-counter {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

.tw-xp-ach-counter > span {
  display: inline-block;
  white-space: nowrap;
}

.tw-xp-ach-trophy {
  color: #FFD700;
  font-size: 0.82em;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255,215,0,0.35);
}

.tw-xp-zero-state {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.tw-xp-ach-inner {
  align-items: flex-end;
}

.tw-xp-ach .tw-xp-top,
.tw-xp-ach .tw-xp-meta {
  justify-content: flex-end;
}

.tw-xp-ach.is-empty .tw-xp-ach-counter {
  color: var(--text-muted);
}

.tw-xp-ach-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-xp-ach-dot {
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.08);
}

.tw-xp-ach-dot.is-filled {
  background: var(--primary);
  box-shadow: 0 0 8px rgba(39,150,242,0.20);
}

.tw-xp-ach-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.tw-xp-ach-meta.is-new {
  color: var(--primary);
}

.tw-ach-slide-panel {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid rgba(51,51,51,0.20);
  transition: max-height 0.28s ease, opacity 0.18s ease;
}

.tw-ach-slide-panel.is-open {
  opacity: 1;
  max-height: 760px;
}

.tw-ach-panel-wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--surface-2);
  border-left: 1px solid rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tw-ach-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tw-ach-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.tw-ach-panel-subtitle {
  margin: 4px 0 0;
  font-size: 10px;
  color: var(--text-tertiary);
}

.tw-ach-panel-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-secondary);
  cursor: pointer;
}

.tw-ach-panel-close:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.tw-ach-panel-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tw-ach-panel-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tw-ach-filter-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.tw-ach-filter-btn:hover {
  border-color: rgba(39,150,242,0.45);
  color: var(--text-primary);
}

.tw-ach-filter-btn.is-active {
  border-color: rgba(39,150,242,0.50);
  background: rgba(39,150,242,0.12);
  color: var(--primary);
}

.tw-ach-panel-section.is-hidden {
  display: none;
}

.tw-ach-summary-item {
  background: var(--surface-3);
  border: 1px solid rgba(51,51,51,0.70);
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tw-ach-summary-item strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.tw-ach-summary-item.is-done strong {
  color: var(--success);
}

.tw-ach-summary-item.is-open strong {
  color: var(--primary);
}

.tw-ach-summary-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.tw-ach-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tw-ach-panel-section-head h4 {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-secondary);
}

.tw-ach-panel-badges {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.tw-ach-badge-card {
  background: var(--surface-3);
  border: 1px solid rgba(39,150,242,0.30);
  padding: 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.tw-ach-badge-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39,150,242,0.45);
  background: rgba(39,150,242,0.18);
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
}

.tw-ach-badge-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-ach-badge-meta {
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-ach-panel-progress-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.tw-ach-progress-item {
  background: var(--surface-3);
  border: 1px solid rgba(51,51,51,0.70);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-ach-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tw-ach-progress-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.tw-ach-progress-value {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.tw-ach-progress-track {
  position: relative;
  height: 4px;
  background: rgba(39,150,242,0.12);
}

.tw-ach-progress-fill {
  height: 4px;
  width: 0;
  background: rgba(39,150,242,0.70);
  transition: width 0.35s ease;
}

.tw-ach-progress-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-ach-panel-status {
  font-size: 10px;
  color: var(--text-tertiary);
}

@keyframes tw-xp-ring-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes tw-xp-ring-pulse {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(39,150,242,0.30));
  }
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 8px rgba(39,150,242,0.50));
  }
}

@keyframes tw-xp-warning-pulse {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 3px rgba(245,158,11,0.22);
  }
  50% {
    opacity: 0.62;
    text-shadow: 0 0 9px rgba(245,158,11,0.36);
  }
}

@media (max-width: 1100px) {
  .tw-xp-row {
    min-height: 0;
    flex-wrap: wrap;
    padding: 8px 0;
  }

  .tw-xp-divider {
    display: none;
  }

  .tw-xp-cell,
  .tw-xp-level,
  .tw-xp-ach,
  .tw-xp-rank,
  .tw-xp-streak {
    flex: 1 1 50%;
    min-width: 0;
    padding: 8px 12px;
  }

  .tw-xp-rank,
  .tw-xp-streak {
    flex: 1 1 46%;
  }

  .tw-xp-ach {
    flex: 1 1 54%;
  }

  .tw-xp-level,
  .tw-xp-ach {
    justify-content: flex-start;
  }

  .tw-xp-ach-inner {
    align-items: flex-start;
  }

  .tw-xp-ach .tw-xp-top,
  .tw-xp-ach .tw-xp-meta {
    justify-content: space-between;
    width: 100%;
  }

  .tw-ach-panel-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tw-ach-panel-progress-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .tw-xp-hero-shell {
    position: sticky;
    top: 0;
    z-index: 34;
  }

  .tw-xp-row {
    min-height: 48px;
    max-width: 100%;
    margin-top: -8px;
    padding: 0 6px 0 0;
    cursor: pointer;
  }

  .tw-xp-cell,
  .tw-xp-level,
  .tw-xp-ach,
  .tw-xp-rank,
  .tw-xp-streak {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0 10px;
  }

  .tw-xp-rank,
  .tw-xp-streak {
    flex: 0.88 1 0;
  }

  .tw-xp-ach {
    flex: 1.24 1 0;
  }

  .tw-xp-ring,
  .tw-xp-ring-svg {
    width: 40px;
    height: 40px;
  }

  .tw-xp-ring-svg {
    transform: rotate(-90deg) scale(0.64516129);
    transform-origin: center;
  }

  .tw-xp-ring-value {
    font-size: 15px;
  }

  .tw-xp-ring-label,
  .tw-xp-level-meta,
  .tw-xp-title,
  .tw-xp-bar,
  .tw-xp-meta,
  .tw-xp-zero-state {
    display: none;
  }

  .tw-xp-rank-side,
  .tw-xp-top {
    justify-content: flex-start;
    gap: 8px;
  }

  .tw-xp-rank-badge {
    min-height: 20px;
    font-size: 9px;
  }

  .tw-xp-streak-hero,
  .tw-xp-ach .tw-xp-top {
    gap: 6px;
  }

  .tw-xp-streak-value,
  .tw-xp-ach-counter {
    font-size: 13px;
  }

  .tw-xp-ach-counter {
    font-size: 12px;
  }

  .tw-xp-ach-trophy {
    font-size: 0.78em;
  }

  .tw-xp-ach-dots {
    display: none;
  }

  .tw-xp-row.is-expanded {
    min-height: 0;
    flex-wrap: wrap;
    padding: 8px 0;
  }

  .tw-xp-row.is-expanded .tw-xp-cell,
  .tw-xp-row.is-expanded .tw-xp-level,
  .tw-xp-row.is-expanded .tw-xp-ach,
  .tw-xp-row.is-expanded .tw-xp-rank,
  .tw-xp-row.is-expanded .tw-xp-streak {
    flex: 1 1 50%;
    min-height: 0;
    padding: 8px 12px;
  }

  .tw-xp-row.is-expanded .tw-xp-ring,
  .tw-xp-row.is-expanded .tw-xp-ring-svg {
    width: 62px;
    height: 62px;
  }

  .tw-xp-row.is-expanded .tw-xp-ring-svg {
    transform: rotate(-90deg) scale(1);
  }

  .tw-xp-row.is-expanded .tw-xp-ring-value {
    font-size: 22px;
  }

  .tw-xp-row.is-expanded .tw-xp-ring-label,
  .tw-xp-row.is-expanded .tw-xp-level-meta,
  .tw-xp-row.is-expanded .tw-xp-title,
  .tw-xp-row.is-expanded .tw-xp-bar,
  .tw-xp-row.is-expanded .tw-xp-meta,
  .tw-xp-row.is-expanded .tw-xp-zero-state,
  .tw-xp-row.is-expanded .tw-xp-ach-dots {
    display: flex;
  }

  .tw-xp-row.is-expanded .tw-xp-level-meta,
  .tw-xp-row.is-expanded .tw-xp-zero-state {
    display: block;
  }

  .tw-xp-row.is-expanded .tw-xp-ach-inner {
    align-items: flex-start;
  }

  .tw-xp-row.is-expanded .tw-xp-ach .tw-xp-top,
  .tw-xp-row.is-expanded .tw-xp-ach .tw-xp-meta {
    justify-content: space-between;
    width: 100%;
  }

  .tw-ach-slide-panel.is-open {
    max-height: 860px;
  }

  .tw-ach-panel-wrap {
    max-width: 100%;
    border-left: 0;
    border-right: 0;
  }

  .tw-ach-panel-summary {
    grid-template-columns: 1fr;
  }

  .tw-ach-panel-filters {
    width: 100%;
  }

  .tw-ach-filter-btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .tw-ach-panel-badges {
    grid-template-columns: 1fr;
  }

  .tw-ach-panel-progress-list {
    grid-template-columns: 1fr;
  }
}

/* === RESPONSIVE === */
/**
 * FORRE_DARK - Responsive Breakpoints
 */

@media (max-width: 1200px) {
  .pb-col-75,
  .pb-col-66 {
    width: calc(50% - 8px);
  }
}

@media (max-width: 900px) {
  .pb-col-75,
  .pb-col-66,
  .pb-col-50 {
    width: 100%;
  }
  
  .pb-col-33,
  .pb-col-25 {
    width: calc(50% - 8px);
  }
  
  .tw-nav-split {
    display: none;
  }
}

@media (max-width: 768px) {
  .tw-topbar-center {
    display: none;
  }
  
  .tw-nav {
    flex-wrap: wrap;
  }
  
  .tw-nav-right {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  
  .pb-col-33,
  .pb-col-25 {
    width: 100%;
  }
  
  .tw-page-wrapper {
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .tw-nav-link {
    padding: 0 10px;
    font-size: 11px;
  }
  
  .tw-nav-ico {
    display: none;
  }
}
/* === PROFILE MOBILE OVERRIDES === */
/*
 * FORRE_DARK - Profile Mobile Overrides
 * Mobile bottom nav: applies on all pages for logged-in users.
 * Profile-layout overrides (widget stacking, header hiding) remain scoped to body.tw-page-profile.
 */

/* Bottom nav: hidden on desktop, visible on mobile */
.tw-mobile-bottom-nav {
  display: none;
}

/* Mobile page blocks are opt-in under 768px only */
.tw-mob-view {
  display: none;
}

.tw-mob-desktop-only {
  display: block;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide footers entirely on mobile when bottom nav is enabled */
  body.has-mobile-nav .tw-site-footer,
  body.has-mobile-nav .clean-footer,
  body.has-mobile-nav footer.clean-footer {
    display: none !important;
  }

  /* Keep shout strip visible at the very top on mobile */
  body.has-mobile-nav > header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 960;
    padding-top: env(safe-area-inset-top);
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(10px);
  }

  body.has-mobile-nav > header > div {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  body.has-mobile-nav > header [data-builder-brand="header"] {
    display: none !important;
  }

  body.has-mobile-nav > header > div > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  body.has-mobile-nav > header > div > div:nth-child(2) > div:last-child {
    display: none !important;
  }

  body.has-mobile-nav #shoutboxToggle {
    width: 100%;
    min-width: 0;
    height: 40px;
  }

  body.has-mobile-nav .tw-mob-shout-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 40px;
  }

  body.has-mobile-nav #shoutboxToggle {
    width: 100%;
  }

  body.has-mobile-nav #shoutboxToggle > div:first-child {
    width: 40px !important;
    padding: 0 !important;
    justify-content: center;
  }

  body.has-mobile-nav #shoutboxToggle > div:first-child span {
    display: none;
  }

  body.has-mobile-nav #shoutContent {
    min-width: 0;
    padding-left: 48px !important;
    padding-right: 44px !important;
    font-size: 10px !important;
  }

  body.has-mobile-nav .tw-mob-shout-notif-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-3);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    -webkit-tap-highlight-color: transparent;
  }

  body.has-mobile-nav .tw-mob-shout-notif-btn i {
    font-size: 14px;
  }

  body.has-mobile-nav .tw-mob-shout-notif-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0;
    background: var(--danger);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.has-mobile-nav #shoutContent .tw-shout-ticker-viewport {
    width: 100%;
    min-width: 0;
  }

  body.has-mobile-nav #shoutContent .tw-shout-ticker-item,
  body.has-mobile-nav #shoutContent .tw-shout-ticker-text {
    max-width: min(78vw, 460px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.has-mobile-nav #shoutboxDropdown {
    min-width: 0 !important;
    width: calc(100vw - 16px) !important;
    right: 0 !important;
    left: auto !important;
  }

  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* ── Admin edit button: hide completely on mobile ── */
  #builder-toggle,
  #admin-edit-toggle {
    display: none !important;
  }

  /* ── Messenger FAB: lift above bottom nav on all pages ── */
  body.has-mobile-nav .messenger-fab-btn,
  body.has-mobile-nav #messengerFabBtn,
  body.has-mobile-nav #messengerLauncherBtn {
    bottom: calc(56px + env(safe-area-inset-bottom) + 12px) !important;
  }

  /* Hub mobile: hide floating messenger launcher entirely. */
  body.tw-page-hub.has-mobile-nav .messenger-fab-btn,
  body.tw-page-hub.has-mobile-nav #messengerFabBtn,
  body.tw-page-hub.has-mobile-nav #messengerLauncherBtn {
    display: none !important;
  }

  /* ── General mobile content layout for ALL pages with bottom nav ── */
  body.has-mobile-nav .clean-shell {
    overflow-x: hidden;
  }

  body.has-mobile-nav .clean-content {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }

  /* Page builder column stacking for all pages */
  body.has-mobile-nav .pb-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Columns: LayoutRenderer writes inline flex/max-width — need !important to override */
  body.has-mobile-nav .pb-col,
  body.has-mobile-nav .pb-col-100,
  body.has-mobile-nav .pb-col-75,
  body.has-mobile-nav .pb-col-66,
  body.has-mobile-nav .pb-col-50,
  body.has-mobile-nav .pb-col-33,
  body.has-mobile-nav .pb-col-25,
  body.has-mobile-nav [class*="pb-col-width-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.has-mobile-nav .pb-wrapper {
    overflow-x: hidden;
    max-width: 100vw !important;
    padding: 0 !important;
  }

  body.has-mobile-nav .pb-content-area,
  body.has-mobile-nav .pb-page-background,
  body.has-mobile-nav .tw-page-content {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body.has-mobile-nav .pb-page-background {
    padding: calc(44px + env(safe-area-inset-top)) 0 8px;
    border-radius: 0;
  }

  /* Hub/Home + Messenger should start directly under shoutbox without extra empty gap. */
  body.tw-page-hub.has-mobile-nav .pb-page-background,
  body.tw-page-home.has-mobile-nav .pb-page-background,
  body.tw-page-messenger.has-mobile-nav .pb-page-background {
    padding-top: 0 !important;
  }

  body.has-mobile-nav .pb-content-area {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  body.has-mobile-nav .tw-widget {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    border-radius: 0;
  }

  /* ─ end general mobile layout ─ */

  body.tw-page-profile .pb-wrapper,
  body.tw-page-profile .pb-content-area,
  body.tw-page-profile .pb-page-background,
  body.tw-page-profile .tw-page-content {
    overflow-x: hidden;
  }

  body.tw-page-profile .pb-page-background {
    padding: 8px 12px;
  }

  body.tw-page-profile .pb-content-area {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  body.tw-page-profile .pb-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }

  body.tw-page-profile .pb-col-100,
  body.tw-page-profile .pb-col-75,
  body.tw-page-profile .pb-col-66,
  body.tw-page-profile .pb-col-50,
  body.tw-page-profile .pb-col-33,
  body.tw-page-profile .pb-col-25 {
    width: 100%;
    min-width: 0;
  }

  body.tw-page-profile .pb-wrapper .tw-widget {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  body.tw-page-profile .tw-widget,
  body.tw-page-profile .tw-widget * {
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-profile .tw-widget .tw-widget-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.tw-page-profile .tw-ministats-grid .stat-value,
  body.tw-page-profile .tw-stat-grid .stat-value,
  body.tw-page-profile .tw-profile-ministats .value {
    font-size: 15px;
  }

  body.tw-page-profile .tw-ministats-grid .stat-label,
  body.tw-page-profile .tw-stat-grid .stat-label,
  body.tw-page-profile .tw-profile-ministats .label {
    font-size: 7px;
  }

  body.tw-page-profile .tw-profile-playstyle-dna svg,
  body.tw-page-profile .tw-profile-playstyle-dna .tw-radar-svg {
    width: 100%;
    height: auto;
    filter: none;
  }

  body.tw-page-profile .tw-profile-playstyle-dna text,
  body.tw-page-profile .tw-profile-playstyle-dna .tw-radar-label {
    font-size: 9px;
  }

  body.tw-page-profile .tw-profile-widget-4 .pfw4-head {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  body.tw-page-profile .tw-profile-widget-4 .pfw4-avatar-wrap,
  body.tw-page-profile .tw-profile-widget-4 .pfw4-avatar,
  body.tw-page-profile .tw-profile-widget-4 .pfw4-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 0;
    border: 2px solid var(--primary);
  }

  body.tw-page-profile .tw-profile-widget-4 .pfw4-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
  }

  body.tw-page-profile .tw-profile-widget-4 .pfw4-socials {
    justify-content: center;
    gap: 12px;
  }

  body.tw-page-profile .tw-profile-widget-4 .pfw4-social,
  body.tw-page-profile .tw-profile-widget-4 .pfw4-social a {
    width: 36px;
    height: 36px;
  }

  body.tw-page-profile .tw-profile-widget-4 .pfw4-social i,
  body.tw-page-profile .tw-profile-widget-4 .pfw4-social svg {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  body.tw-page-profile .tw-navband-sticky,
  body.tw-page-profile > header,
  body.tw-page-profile > section {
    display: none;
  }

  /* Hide desktop navbar on all logged-in pages that have the bottom nav */
  body.has-mobile-nav > header,
  body.has-mobile-nav > section {
    display: none;
  }

  /* ============================================================
     BOTTOM NAVIGATION — redesigned per FORRE.NU Mobile spec
     ============================================================ */

  .tw-mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--surface-5);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr;
    align-items: end;
  }

  .tw-mobile-bottom-item {
    position: relative;
    min-height: 52px;
    padding: 4px 4px 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
    font-family: var(--font-family), Roboto, sans-serif;
    width: 100%;
    justify-self: center;
  }

  .tw-mobile-bottom-item i {
    font-size: 18px;
    line-height: 1;
  }

  .tw-mob-hub-btn {
    position: relative;
    inline-size: 54px;
    width: 54px;
    min-width: 54px;
    height: 54px;
    flex: 0 0 54px;
    justify-self: center;
    margin: 0 auto;
    border: 1px solid var(--primary);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
    z-index: 953;
    box-shadow: 0 8px 16px rgba(0,0,0,0.28);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .tw-mob-hub-btn .tw-mob-hub-ico {
    position: absolute;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .tw-mob-hub-btn .tw-mob-hub-ico--close {
    opacity: 0;
    transform: rotate(-90deg);
  }

  .tw-mob-hub-btn.is-open {
    background: var(--primary);
    color: #fff;
    transform: translateY(0) rotate(90deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.34);
  }

  .tw-mob-hub-btn.is-open .tw-mob-hub-ico--menu {
    opacity: 0;
  }

  .tw-mob-hub-btn.is-open .tw-mob-hub-ico--close {
    opacity: 1;
    transform: rotate(0deg);
  }

  /* Active: primary color + 2px top indicator line */
  .tw-mobile-bottom-item.is-active {
    color: var(--primary);
  }

  .tw-mobile-bottom-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--primary);
    transition: width 0.15s ease;
  }

  /* Tap feedback */
  .tw-mobile-bottom-item:active {
    opacity: 0.7;
  }

  /* Badge wrapper (for positioning dot/pill over icon) */
  .tw-mob-badge-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Small red dot badge — Chat unread */
  .tw-mob-dot-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 6px;
    height: 6px;
    background: var(--danger);
    border-radius: 50%;
    pointer-events: none;
  }

  /* Numbered pill badge — Social friend requests */
  .tw-mob-pill-badge {
    position: absolute;
    top: -4px;
    right: -7px;
    min-width: 16px;
    height: 12px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 20px;
    pointer-events: none;
    line-height: 1;
  }

  /* Avatar thumbnail in bottom nav */
  .tw-mobile-bottom-avatar {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 0;
  }

  /* Legacy classes — kept for backwards compatibility, visually suppressed */
  .tw-mobile-bottom-item-primary { color: var(--text-muted); }
  .tw-mobile-bottom-primary-icon { display: none; }
  .tw-mobile-bottom-ico-wrap     { position: relative; display: inline-flex; }
  .tw-mobile-bottom-badge        { display: none; } /* replaced by tw-mob-dot/pill-badge */

  /* ============================================================
     MOBILE APP COMPONENT SYSTEM
     All classes use tw-mob-* prefix (mobile-specific)
     ============================================================ */

  /* ── SECTION HEADER ── */
  .tw-mob-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    margin: 20px 0 10px;
  }

  .tw-mob-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-section-action {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── LIST ROW ── */
  .tw-mob-list {
    display: flex;
    flex-direction: column;
  }

  .tw-mob-list-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    min-height: 52px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: background 0.1s ease;
    text-decoration: none;
    color: inherit;
  }

  .tw-mob-list-row:active,
  .tw-mob-list-row.is-tapped {
    background: rgba(255,255,255,0.02);
  }

  .tw-mob-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 0;
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    position: relative;
  }

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

  .tw-mob-online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    border: 2px solid var(--surface-2);
    pointer-events: none;
  }

  .tw-mob-list-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tw-mob-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-list-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-list-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
  }

  .tw-mob-list-meta {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* Leaderboard variant */
  .tw-mob-list-row--lb.is-top1 { background: linear-gradient(90deg, rgba(255,215,0,0.06) 0%, transparent 100%); }
  .tw-mob-list-row--lb.is-top2 { background: linear-gradient(90deg, rgba(192,192,192,0.06) 0%, transparent 100%); }
  .tw-mob-list-row--lb.is-top3 { background: linear-gradient(90deg, rgba(205,127,50,0.06) 0%, transparent 100%); }
  .tw-mob-list-row--lb.is-mine { background: rgba(39,150,242,0.04); border-left: 3px solid var(--primary); }
  .tw-mob-list-row--lb.is-zebra-a { border-color: rgba(255,255,255,0.05); }
  .tw-mob-list-row--lb.is-zebra-b { border-color: rgba(255,255,255,0.09); }

  .tw-mob-lb-hero {
    margin: 0 14px 6px;
    padding: 14px;
    border: 1px solid rgba(39,150,242,0.25);
    background: linear-gradient(180deg, rgba(39,150,242,0.10) 0%, rgba(26,26,26,0.92) 72%);
  }

  .tw-mob-lb-hero-top,
  .tw-mob-lb-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .tw-mob-lb-hero-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-hero-title,
  .tw-mob-lb-hero-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.05;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-hero-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-hero-live.is-live {
    border-color: rgba(34,197,94,0.35);
    color: var(--success);
  }

  .tw-mob-lb-hero-main {
    margin-top: 14px;
    align-items: flex-end;
  }

  .tw-mob-lb-hero-rank {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-hero-copy {
    flex: 1;
    min-width: 0;
  }

  .tw-mob-lb-hero-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .tw-mob-lb-hero-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .tw-mob-lb-hero-metric-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-hero-metric-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-card {
    display: block;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--surface-2);
  }

  .tw-mob-lb-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .tw-mob-lb-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.12);
    background: var(--surface-3);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-list-row--lb.is-top1 .tw-mob-lb-pos {
    border-color: rgba(251,191,36,0.35);
    color: #f5cf62;
  }

  .tw-mob-list-row--lb.is-top2 .tw-mob-lb-pos {
    border-color: rgba(203,213,225,0.35);
    color: #d6dce4;
  }

  .tw-mob-list-row--lb.is-top3 .tw-mob-lb-pos {
    border-color: rgba(205,127,50,0.35);
    color: #d89a64;
  }

  .tw-mob-lb-avatar {
    position: relative;
  }

  .tw-mob-lb-head {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .tw-mob-lb-name-row,
  .tw-mob-lb-meta-row,
  .tw-mob-lb-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .tw-mob-lb-self,
  .tw-mob-lb-live-pill,
  .tw-mob-lb-mode-badge,
  .tw-mob-lb-rank-badge,
  .tw-mob-lb-foot-pill,
  .tw-mob-profile-status,
  .tw-mob-profile-season-pill,
  .tw-mob-profile-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-self,
  .tw-mob-profile-season-pill {
    color: var(--primary);
    border-color: rgba(39,150,242,0.28);
    background: rgba(39,150,242,0.10);
  }

  .tw-mob-lb-live-pill,
  .tw-mob-profile-status--online {
    color: var(--success);
    border-color: rgba(34,197,94,0.28);
    background: rgba(34,197,94,0.10);
  }

  .tw-mob-profile-status--offline {
    color: var(--text-secondary);
  }

  .tw-mob-lb-mode-badge {
    color: #9dd5ff;
    border-color: rgba(39,150,242,0.24);
    background: rgba(39,150,242,0.08);
  }

  .tw-mob-lb-rank-badge {
    color: #ffd37c;
    border-color: rgba(245,158,11,0.24);
    background: rgba(245,158,11,0.08);
  }

  .tw-mob-lb-progress,
  .tw-mob-profile-rank-track {
    margin-top: 10px;
  }

  .tw-mob-lb-progress {
    height: 5px;
    background: var(--surface-5);
    overflow: hidden;
  }

  .tw-mob-lb-progress-bar {
    display: block;
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
  }

  .tw-mob-lb-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .tw-mob-lb-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tw-mob-lb-stat-value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-my-row {
    margin-top: 10px;
  }

  /* LFG join button */
  .tw-mob-lfg-join {
    height: 28px;
    padding: 0 10px;
    background: var(--primary);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.1s;
    font-family: var(--font-family), Roboto, sans-serif;
  }
  .tw-mob-lfg-join:active { opacity: 0.8; }

  .tw-mob-lfg-join--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .tw-mob-lfg-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    background: var(--surface-2);
  }

  .tw-mob-lfg-action {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lfg-action:active {
    opacity: 0.85;
  }

  /* Accept / Decline (friend requests) */
  .tw-mob-accept-btn {
    height: 28px;
    padding: 0 10px;
    background: transparent;
    color: var(--success);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-family), Roboto, sans-serif;
  }
  .tw-mob-decline-btn {
    height: 28px;
    padding: 0 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── STATUS BAR (Home top strip) ── */
  .tw-mob-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 48px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    overflow: hidden;
  }

  .tw-mob-status-avatar {
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 1px solid var(--border);
    flex-shrink: 0;
    object-fit: cover;
  }

  .tw-mob-status-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-rank-badge {
    height: 16px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    flex-shrink: 0;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-status-level {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-home-hero {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: var(--surface-2);
  }

  .tw-mob-home-hero-body {
    padding: 10px 14px 12px;
  }

  .tw-mob-home-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  .tw-mob-home-kicker {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-home-streak {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-home-xp {
    width: 100%;
    height: 6px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.08);
  }

  .tw-mob-home-xp::-webkit-progress-bar {
    background: rgba(255,255,255,0.08);
  }

  .tw-mob-home-xp::-webkit-progress-value {
    background: var(--primary);
  }

  .tw-mob-home-xp::-moz-progress-bar {
    background: var(--primary);
  }

  .tw-mob-home-xp-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-section-header--tight {
    margin: 14px 0 8px;
  }

  .tw-mob-focus-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin: 0 14px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    background: var(--surface-3);
    text-decoration: none;
    min-height: 52px;
  }

  .tw-mob-focus-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .tw-mob-focus-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-focus-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.3;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-focus-cta {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-live-widget-stack {
    display: grid;
    gap: 8px;
    margin: 8px 14px 0;
  }

  .tw-mob-live-widget-stack .pb-widget {
    border: 1px solid var(--border);
    background: var(--surface-2);
  }

  .tw-mob-quick-grid {
    margin: 0 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tw-mob-quick-item {
    min-height: 58px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--font-family), Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  .tw-mob-quick-item:active {
    background: var(--surface-4);
    color: var(--text-primary);
  }

  .tw-mob-quick-label {
    white-space: nowrap;
  }

  /* ── COMPOSER ── */
  .tw-mob-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }

  .tw-mob-composer--stack {
    align-items: flex-start;
  }

  .tw-mob-composer-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .tw-mob-composer-avatar {
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
  }

  .tw-mob-composer-input {
    flex: 1;
    height: 36px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-family), Roboto, sans-serif;
    padding: 0 10px;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .tw-mob-composer-input::placeholder {
    color: rgba(255,255,255,0.18);
  }

  .tw-mob-composer-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(39,150,242,0.15);
  }

  .tw-mob-composer-send {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: var(--text-primary);
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .tw-mob-composer-send.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .tw-mob-composer-send i { font-size: 13px; }

  .tw-mob-composer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tw-mob-composer-camera,
  .tw-mob-composer-visibility {
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-composer-camera {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .tw-mob-composer-visibility select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-family), Roboto, sans-serif;
    outline: none;
    padding: 0;
  }

  .tw-mob-composer-preview {
    border: 1px solid var(--border);
    background: var(--surface-1);
  }

  .tw-mob-composer-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
  }

  .tw-mob-composer-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--border);
  }

  .tw-mob-composer-preview-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-composer-preview-actions select {
    min-height: 26px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-family), Roboto, sans-serif;
    padding: 0 6px;
    outline: none;
  }

  .tw-mob-composer-size {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-composer-remove {
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(231,76,60,0.45);
    background: transparent;
    color: var(--danger);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── PULSE CARDS (horizontal scroll) ── */
  .tw-mob-pulse-track {
    display: flex;
    gap: 8px;
    padding: 0 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tw-mob-pulse-track::-webkit-scrollbar { display: none; }

  .tw-mob-news-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
    padding: 0 14px 10px;
    text-decoration: none;
    color: inherit;
  }

  .tw-mob-news-media {
    width: 108px;
    height: 86px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--surface-2);
  }

  .tw-mob-news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .tw-mob-news-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
  }

  .tw-mob-news-kicker {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-news-title {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tw-mob-news-excerpt {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tw-mob-news-meta {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-pulse-card {
    flex: 0 0 110px;
    scroll-snap-align: start;
    background: var(--surface-3);
    border: 1px solid var(--border);
    padding: 10px;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: transform 0.1s ease;
  }
  .tw-mob-pulse-card:active { transform: scale(0.97); }

  .tw-mob-pulse-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
  }
  .tw-mob-pulse-card--online::before { background: var(--success); }
  .tw-mob-pulse-card--lfg::before   { background: var(--primary); }
  .tw-mob-pulse-card--warn::before  { background: var(--warning); }
  .tw-mob-pulse-card--danger::before{ background: var(--danger);  }

  .tw-mob-pulse-hero {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 4px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-pulse-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.20);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── WALL POST ── */
  .tw-mob-wall-post {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: transparent;
  }

  .tw-mob-wall-post-main {
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
    background: var(--surface-2);
  }

  .tw-mob-wall-post.is-swiped .tw-mob-wall-post-main {
    transform: translateX(-116px);
  }

  .tw-mob-wall-swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 116px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    z-index: 1;
  }

  .tw-mob-wall-swipe-btn {
    border: 0;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-height: 44px;
  }

  .tw-mob-wall-swipe-btn:last-child {
    border-bottom: 0;
  }

  .tw-mob-wall-swipe-btn:active {
    background: var(--surface-5);
  }

  .tw-mob-wall-post-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .tw-mob-wall-avatar {
    width: 32px;
    height: 32px;
    border-radius: 0;
    border: 1px solid var(--border);
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
  }

  .tw-mob-wall-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-wall-ts {
    font-size: 9px;
    color: rgba(255,255,255,0.20);
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-wall-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-wall-media {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    overflow: hidden;
  }

  .tw-mob-wall-media img {
    width: 100%;
    display: block;
    max-height: 320px;
    object-fit: cover;
  }

  .tw-mob-wall-actions {
    display: flex;
    gap: 20px;
  }

  .tw-mob-wall-action {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    font-family: var(--font-family), Roboto, sans-serif;
  }
  .tw-mob-wall-action i { font-size: 14px; }
  .tw-mob-action-count  { font-size: 11px; }
  .tw-mob-wall-action--liked { color: var(--danger); }

  /* ── INLINE TABS (Social, etc.) ── */
  .tw-mob-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tw-mob-tabs::-webkit-scrollbar { display: none; }

  .tw-mob-tab {
    flex: 0 0 auto;
    padding: 0 14px;
    height: 40px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s;
    font-family: var(--font-family), Roboto, sans-serif;
  }
  .tw-mob-tab.is-active { color: var(--primary); }
  .tw-mob-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
  }

  .tw-mob-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 12px;
    padding: 0 4px;
    background: var(--danger);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    border-radius: 20px;
    margin-left: 4px;
    vertical-align: middle;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-tabs--sticky {
    position: sticky;
    top: calc(44px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    width: 100%;
    z-index: 35;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-tab-panels {
    padding-top: 0;
    margin-top: 0;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-empty-state {
    margin-top: 0;
  }

  body.tw-page-friends .tw-mob-view--social {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-intro {
    padding: 10px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: var(--surface-2);
    display: grid;
    gap: 10px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-title i {
    color: var(--primary);
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-sub {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-stat {
    border: 1px solid var(--border);
    background: var(--surface-3);
    padding: 8px 8px 7px;
    display: grid;
    gap: 4px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-stat.is-hot {
    border-color: rgba(245,158,11,0.45);
    background: rgba(245,158,11,0.10);
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-stat.is-live {
    border-color: rgba(34,197,94,0.45);
    background: rgba(34,197,94,0.10);
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-stat-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-stat-value {
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-quick-btn {
    min-height: 38px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-quick-btn:active {
    opacity: 0.82;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-tab-badge {
    min-width: 18px;
    height: 14px;
    border-radius: 0;
    padding: 0 4px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-card {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: var(--surface-2);
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-list-row--social {
    border-bottom: 0;
    min-height: 56px;
    padding: 11px 14px 9px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 10px;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-btn {
    min-height: 36px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-btn--primary {
    border-color: rgba(39,150,242,0.48);
    background: rgba(39,150,242,0.13);
    color: var(--primary);
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-social-btn:active {
    opacity: 0.82;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-row-actions--requests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-row-actions--requests form {
    margin: 0;
  }

  body.tw-page-friends .tw-mob-view--social .tw-mob-row-actions--requests .tw-mob-accept-btn,
  body.tw-page-friends .tw-mob-view--social .tw-mob-row-actions--requests .tw-mob-decline-btn {
    width: 100%;
    min-height: 34px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  /* ── FILTER CHIPS (Leaderboard) ── */
  .tw-mob-chips {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tw-mob-chips::-webkit-scrollbar { display: none; }

  body.tw-page-leaderboard .tw-mob-view--leaderboard .tw-mob-chips {
    position: fixed;
    top: calc(44px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    width: 100%;
    z-index: 35;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  body.tw-page-leaderboard .tw-mob-view--leaderboard > .tw-mob-list {
    padding-top: 50px;
  }

  .tw-mob-chip {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 12px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, color 0.1s;
    font-family: var(--font-family), Roboto, sans-serif;
  }
  .tw-mob-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
  .tw-mob-chip--live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    border-color: rgba(34,197,94,0.35);
    color: rgba(34,197,94,0.90);
    background: rgba(34,197,94,0.10);
  }
  .tw-mob-chip--live strong {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-primary);
  }
  .tw-mob-chip--live.is-live {
    box-shadow: 0 0 0 1px rgba(34,197,94,0.16) inset;
  }
  .tw-mob-chip:active { opacity: 0.8; }

  /* ── HUB MENU (center button popup) ── */
  .tw-mob-hub-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 0;
    background: rgba(0,0,0,0.60);
    z-index: 950;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .tw-mob-hub-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .tw-mob-hub-backdrop[hidden],
  .tw-mob-hub-menu[hidden],
  .tw-mob-chat-quote-chip[hidden] {
    display: none !important;
  }

  .tw-mob-hub-menu {
    position: fixed;
    top: calc(44px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    max-height: none;
    background: var(--surface-2);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(39,150,242,0.10), 0 -12px 40px rgba(0,0,0,0.50);
    overflow-y: auto;
    z-index: 951;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    pointer-events: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tw-mob-hub-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .tw-mob-hub-menu::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), rgba(39,150,242,0.15) 60%, transparent);
    z-index: 2;
  }

  .tw-mob-hub-profile {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    color: inherit;
  }

  .tw-mob-hub-av {
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    background: var(--surface-4);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
  }

  .tw-mob-hub-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tw-mob-hub-online-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--surface-2);
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 0 10px rgba(34,197,94,0.55);
  }

  .tw-mob-hub-info {
    min-width: 0;
  }

  .tw-mob-hub-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-epic {
    margin-top: 1px;
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }

  .tw-mob-hub-tag {
    height: 18px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-tag--rank {
    color: #d9e5f0;
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }

  .tw-mob-hub-tag--level {
    color: var(--primary);
    border-color: rgba(39,150,242,0.22);
    background: rgba(39,150,242,0.12);
  }

  .tw-mob-hub-tag--streak {
    color: var(--success);
    border-color: rgba(34,197,94,0.25);
    background: rgba(34,197,94,0.10);
  }

  /* Profile border-bottom removed — streak+xp block now acts as visual divider */
  .tw-mob-hub-profile {
    border-bottom: 0;
  }

  /* ── STREAK BAR ──────────────────────────────────────────────────── */
  .tw-mob-hub-streak-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-left: 3px solid var(--border);
    background: transparent;
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--zero {
    border-left-color: var(--border);
    background: transparent;
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--low {
    border-left-color: rgba(34,197,94,0.45);
    background: rgba(34,197,94,0.04);
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--active {
    border-left-color: var(--success);
    background: rgba(34,197,94,0.06);
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--hot {
    border-left-color: var(--warning);
    background: rgba(245,158,11,0.06);
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--legend {
    border-left-color: var(--primary);
    background: rgba(39,150,242,0.06);
  }

  .tw-mob-hub-streak-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
  }

  .tw-mob-hub-streak-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .tw-mob-hub-streak-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--zero .tw-mob-hub-streak-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
  }

  .tw-mob-hub-streak-sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-streak-bar.tw-mob-hub-streak--hot .tw-mob-hub-streak-sub,
  .tw-mob-hub-streak-bar.tw-mob-hub-streak--legend .tw-mob-hub-streak-sub {
    font-weight: 700;
    color: var(--text-secondary);
  }

  /* ── XP PROGRESS BAR ─────────────────────────────────────────────── */
  .tw-mob-hub-xp-wrap {
    padding: 6px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-hub-xp-track {
    height: 3px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
    position: relative;
  }

  .tw-mob-hub-xp-fill {
    height: 100%;
    width: var(--xp-pct, 0%);
    background: var(--primary);
    position: relative;
    transition: width 0.6s ease;
  }

  .tw-mob-hub-xp-fill--glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-glow);
    filter: blur(4px);
    opacity: 0.7;
  }

  .tw-mob-hub-xp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-xp-pct {
    font-weight: 700;
    color: var(--primary);
  }

  /* ── PLAYER SEARCH ───────────────────────────────────────────────── */
  .tw-mob-hub-search {
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-hub-search-form {
    display: block;
  }

  .tw-mob-hub-search-row {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    height: 42px;
  }

  .tw-mob-hub-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
    appearance: none;
    -webkit-appearance: none;
  }

  .tw-mob-hub-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
  }

  .tw-mob-hub-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .tw-mob-hub-search-input:focus {
    outline: none;
  }

  .tw-mob-hub-search-row:focus-within {
    border-color: var(--primary);
  }

  .tw-mob-hub-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    margin: 0;
    touch-action: manipulation;
  }

  .tw-mob-hub-search-btn:active {
    background: var(--surface-4);
    color: var(--primary);
  }

  /* ── HOVER RECENTS ──────────────────────────────────────────────── */
  .tw-mob-hub-recents {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-hub-recents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .tw-mob-hub-recents-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-recents-clear {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-family: var(--font-family), Roboto, sans-serif;
    touch-action: manipulation;
  }

  .tw-mob-hub-recents-clear:active {
    color: var(--text-secondary);
  }

  .tw-mob-hub-recents-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tw-mob-hub-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family), Roboto, sans-serif;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    min-height: 38px;
    touch-action: manipulation;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tw-mob-hub-recent-item:active {
    color: var(--text-primary);
  }

  .tw-mob-hub-recent-ico {
    flex-shrink: 0;
    color: var(--text-muted);
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tw-mob-hub-recent-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tw-mob-hub-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-platform-badge {
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-4);
    color: var(--text-tertiary);
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-platform-key {
    color: var(--text-muted);
  }

  .tw-mob-platform-value {
    color: var(--text-tertiary);
  }

  .tw-mob-platform-visibility {
    height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(39,150,242,0.32);
    border-radius: 0;
    background: rgba(39,150,242,0.10);
    color: var(--primary);
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-menu.tw-mob-platform-hidden [data-platform-value="1"] {
    color: transparent;
    text-shadow: 0 0 6px rgba(255,255,255,0.45);
    user-select: none;
  }

  .tw-mob-hub-quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-hub-quick-card {
    min-height: 72px;
    padding: 10px;
    border: 1px solid rgba(39,150,242,0.22);
    background: linear-gradient(180deg, rgba(39,150,242,0.10), rgba(15,19,23,0.86));
    text-decoration: none;
    color: inherit;
    display: grid;
    align-content: space-between;
    gap: 3px;
  }

  .tw-mob-hub-quick-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-quick-value {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-quick-meta {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-me-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-hub-me-item {
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-me-item i {
    color: var(--primary);
    font-size: 11px;
  }

  .tw-mob-hub-me-item--coffee {
    position: relative;
    overflow: hidden;
    border-color: rgba(23, 143, 219, 0.85);
    background: linear-gradient(135deg, #00abe7 0%, #178fdb 100%);
    color: #ffffff;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: 0 0 0 1px rgba(0, 171, 231, 0.28), 0 0 14px rgba(0, 171, 231, 0.24);
  }

  .tw-mob-hub-me-item--coffee i,
  .tw-mob-hub-me-item--coffee span {
    color: #ffffff;
  }

  .tw-mob-hub-me-item--coffee::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -38px;
    width: 26px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(14deg);
    opacity: 0.72;
    animation: twMobCoffeeSweep 3.8s ease-in-out infinite;
    pointer-events: none;
  }

  .tw-mob-hub-me-item--coffee .tw-coffee-cta-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .tw-mob-hub-platform-empty {
    padding: 0 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .tw-mob-hub-platform-empty a {
    height: 30px;
    border: 1px solid rgba(0,171,231,0.72);
    border-radius: 0;
    background: linear-gradient(135deg, rgba(0,171,231,0.18) 0%, rgba(23,143,219,0.12) 100%);
    color: #7fd6ff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-family: var(--font-family), Roboto, sans-serif;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(0,171,231,0.12), 0 0 14px rgba(0,171,231,0.16);
  }

  .tw-mob-hub-platform-empty a:hover,
  .tw-mob-hub-platform-empty a:active {
    color: #ffffff;
    border-color: rgba(0,171,231,0.92);
    background: linear-gradient(135deg, rgba(0,171,231,0.24) 0%, rgba(23,143,219,0.18) 100%);
  }

  @keyframes twMobCoffeeSweep {
    0% { transform: translateX(0) rotate(14deg); opacity: 0; }
    14% { opacity: 0.78; }
    30% { transform: translateX(150px) rotate(14deg); opacity: 0; }
    100% { transform: translateX(150px) rotate(14deg); opacity: 0; }
  }

  .tw-mob-hub-nav {
    padding: 6px 0;
  }

  .tw-mob-hub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.1s ease;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-hub-item:active {
    background: rgba(255,255,255,0.02);
  }

  .tw-mob-hub-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .tw-mob-hub-divider {
    height: 1px;
    margin: 8px 16px;
    background: rgba(255,255,255,0.04);
  }

  .tw-mob-hub-logout {
    color: var(--danger);
  }

  .tw-mob-hub-logout .tw-mob-hub-icon {
    color: var(--danger);
  }

  .tw-mob-hub-version {
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 8px;
    color: rgba(255,255,255,0.08);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── NOTIFICATION SHEET ── */
  .tw-mob-notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 952;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .tw-mob-notif-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .tw-mob-notif-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 72vh;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-radius: 0;
    z-index: 953;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tw-mob-notif-sheet.is-open {
    transform: translateY(0);
  }

  .tw-mob-notif-handle {
    display: block;
    width: 42px;
    height: 3px;
    margin: 8px auto;
    border-radius: 0;
    background: rgba(255,255,255,0.18);
  }

  .tw-mob-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .tw-mob-notif-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-notif-mark {
    color: var(--primary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-notif-list {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .tw-mob-notif-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: inherit;
  }

  .tw-mob-notif-row.is-unread {
    background: rgba(39,150,242,0.03);
    border-left: 2px solid var(--primary);
    padding-left: 12px;
  }

  .tw-mob-notif-ico {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-3);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }

  .tw-mob-notif-copy {
    min-width: 0;
  }

  .tw-mob-notif-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-notif-sub {
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-notif-time {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-notif-empty {
    min-height: 160px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
    text-align: center;
    padding: 16px;
  }

  .tw-mob-notif-empty strong {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
  }

  .tw-mob-notif-empty span {
    font-size: 10px;
  }

  .tw-mob-copy-toast {
    position: fixed;
    left: 50%;
    bottom: calc(80px + env(safe-area-inset-bottom));
    transform: translate(-50%, 10px);
    opacity: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-3);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 9px 14px;
    z-index: 980;
    transition: opacity 0.18s ease, transform 0.2s ease;
    pointer-events: none;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-copy-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* ── BOTTOM SHEET (Quick Profile) ── */
  .tw-mob-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.50);
    z-index: 950;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .tw-mob-sheet-backdrop[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .tw-mob-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .tw-mob-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    z-index: 951;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .tw-mob-sheet[aria-hidden="true"] {
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
  }
  .tw-mob-sheet.is-open {
    transform: translateY(0);
  }

  .tw-mob-sheet-handle {
    display: block;
    width: 40px;
    height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 8px auto;
    flex-shrink: 0;
  }

  .tw-mob-sheet-accent {
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
  }

  .tw-mob-sheet-banner {
    height: 44px;
    background: var(--surface-5);
    position: relative;
  }

  .tw-mob-sheet-avatar-wrap {
    position: absolute;
    bottom: -18px;
    left: 14px;
  }

  .tw-mob-sheet-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0;
    border: 2px solid var(--surface-2);
    object-fit: cover;
  }

  .tw-mob-sheet-head {
    padding: 24px 14px 10px;
  }

  .tw-mob-sheet-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-sheet-handle-text {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    margin-bottom: 8px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-sheet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
  }

  .tw-mob-sheet-tag {
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 0;
    border-radius: 0;
    font-family: var(--font-family), Roboto, sans-serif;
  }
  .tw-mob-sheet-tag--level  { background: rgba(39,150,242,0.15); color: var(--primary); }
  .tw-mob-sheet-tag--online { background: rgba(34,197,94,0.15);  color: var(--success); }

  .tw-mob-sheet-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
  }

  .tw-mob-sheet-info-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-sheet-info-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 14px 14px;
  }

  .tw-mob-sheet-action-btn {
    height: 40px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
    border-radius: 0;
  }
  .tw-mob-sheet-action-btn:active { background: rgba(255,255,255,0.05); }
  .tw-mob-sheet-action-btn i { font-size: 12px; color: var(--primary); }
  .tw-mob-sheet-action-btn span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-sheet-footer {
    padding: 8px 14px;
    font-size: 8px;
    color: rgba(255,255,255,0.12);
    border-top: 1px solid rgba(255,255,255,0.03);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── ME-PAGE: PROFILE HEADER ── */
  .tw-mob-profile-hero-card {
    margin: 0 14px;
    padding: 14px;
    border: 1px solid rgba(39,150,242,0.24);
    background: linear-gradient(180deg, rgba(39,150,242,0.10) 0%, rgba(26,26,26,0.94) 68%);
  }

  .tw-mob-profile-head {
    padding: 20px 14px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
  }

  .tw-mob-profile-head--hero {
    padding: 0;
    align-items: center;
  }

  .tw-mob-profile-head-copy {
    min-width: 0;
    flex: 1;
  }

  .tw-mob-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 0;
    border: 2px solid var(--border);
    object-fit: cover;
    flex-shrink: 0;
  }

  .tw-mob-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-profile-handle {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-profile-status-row,
  .tw-mob-profile-quick-actions,
  .tw-mob-profile-rank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }

  .tw-mob-profile-status-row {
    margin-top: 12px;
  }

  .tw-mob-profile-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.18);
    flex-shrink: 0;
  }

  .tw-mob-profile-rank-copy,
  .tw-mob-profile-latest-meta {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-profile-quick-actions {
    margin-top: 12px;
  }

  .tw-mob-progression-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .tw-mob-progress-cell {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tw-mob-progress-cell--achievements {
    background: rgba(39,150,242,0.08);
    border-color: rgba(39,150,242,0.20);
  }

  .tw-mob-progress-cell--achievements.is-empty {
    background: var(--surface-3);
    border-color: var(--border);
  }

  .tw-mob-progress-kicker {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-progress-main {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-progress-meta {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-progress-bar {
    height: 4px;
    background: var(--surface-5);
    overflow: hidden;
  }

  .tw-mob-progress-fill {
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary-glow);
  }

  .tw-mob-progress-dots {
    display: flex;
    gap: 5px;
  }

  .tw-mob-progress-dot {
    flex: 1 1 0;
    height: 4px;
    background: rgba(255,255,255,0.10);
  }

  .tw-mob-progress-dot.is-filled {
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary-glow);
  }

  .tw-mob-profile-quick-action {
    text-decoration: none;
    flex: 1 1 calc(50% - 4px);
  }

  .tw-mob-stats-strip--season .tw-mob-stat-cell:first-child,
  .tw-mob-stats-strip--season .tw-mob-stat-cell:nth-child(2) {
    border-top-width: 1px;
  }

  .tw-mob-profile-latest-card {
    margin: 12px 14px 0;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--surface-3);
  }

  .tw-mob-profile-latest-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-profile-latest-title {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── ME-PAGE: NEXT GOAL ── */
  .tw-mob-next-goal {
    margin: 12px 14px 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    padding: 14px;
  }

  .tw-mob-goal-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-goal-bar-bg {
    height: 4px;
    background: var(--surface-5);
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
  }

  .tw-mob-goal-bar-fill {
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary-glow);
    transition: width 0.4s ease;
    min-width: 0;
    max-width: 100%;
  }

  .tw-mob-goal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tw-mob-goal-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-goal-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-goal-meta {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-achievements-panel {
    margin: 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: var(--surface-3);
  }

  .tw-mob-achievements-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  .tw-mob-achievement-stat {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(255,255,255,0.06);
    background: var(--surface-2);
  }

  .tw-mob-achievement-stat span {
    display: block;
    margin-bottom: 4px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-achievement-stat strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-achievements-list {
    display: grid;
    gap: 8px;
  }

  .tw-mob-achievement-item,
  .tw-mob-achievements-empty {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,0.06);
    background: var(--surface-2);
  }

  .tw-mob-achievement-item--locked {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.10);
  }

  .tw-mob-achievement-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39,150,242,0.12);
    color: var(--primary);
    font-size: 13px;
  }

  .tw-mob-achievement-icon--locked {
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
  }

  .tw-mob-achievement-copy {
    min-width: 0;
  }

  .tw-mob-achievement-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-achievement-meta,
  .tw-mob-achievements-empty-copy {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.35;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-achievement-state {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--success);
    white-space: nowrap;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-achievement-state--locked {
    color: var(--text-tertiary);
  }

  .tw-mob-achievements-empty {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .tw-mob-achievements-empty-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39,150,242,0.10);
    color: var(--primary);
  }

  .tw-mob-achievements-empty-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── ME-PAGE: STATS STRIP ── */
  .tw-mob-stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 14px;
  }

  .tw-mob-stat-cell {
    padding: 14px 10px;
    border: 1px solid rgba(51,51,51,0.30);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .tw-mob-stat-hero {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-stat-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.20);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  /* ── SETTINGS ROWS (Me-page) ── */
  .tw-mob-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font-family), Roboto, sans-serif;
    transition: background 0.1s;
  }
  .tw-mob-settings-row:active { background: rgba(255,255,255,0.02); }
  .tw-mob-settings-row i { font-size: 12px; color: var(--text-muted); }

  /* ── COLLAPSE SECTION ── */
  .tw-mob-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
  }

  .tw-mob-collapse-header i.tw-mob-collapse-caret {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
  }
  .tw-mob-collapse-header.is-open i.tw-mob-collapse-caret { transform: rotate(180deg); }

  .tw-mob-collapse-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
  }
  .tw-mob-collapse-body.is-open { max-height: 600px; }

  /* ── SEARCH INPUT (Chat page) ── */
  .tw-mob-search-wrap {
    padding: 10px 14px;
  }
  .tw-mob-search-wrap-inner {
    position: relative;
  }
  .tw-mob-search-input {
    width: 100%;
    height: 36px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-family), Roboto, sans-serif;
    padding: 0 10px 0 32px;
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
  }
  .tw-mob-search-wrap-inner i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
  }

  /* ── OFFLINE BAR ── */
  .tw-mob-offline-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--warning);
    color: #000;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-family), Roboto, sans-serif;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }
  .tw-mob-offline-bar.is-visible { display: flex; }

  .tw-mob-pull-refresh {
    position: fixed;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -14px) scale(0.9);
    opacity: 0;
    pointer-events: none;
    z-index: 1900;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .tw-mob-pull-refresh svg {
    width: 36px;
    height: 36px;
  }

  .tw-mob-pull-refresh.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  .tw-mob-pull-refresh.is-refreshing {
    animation: twMobPullSpin 0.9s linear infinite;
  }

  .tw-mob-pull-ring-bg,
  .tw-mob-pull-ring {
    fill: none;
    stroke-width: 2;
  }

  .tw-mob-pull-ring-bg {
    stroke: rgba(255,255,255,0.14);
  }

  .tw-mob-pull-ring {
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-dasharray: 88;
    stroke-dashoffset: 88;
    transition: stroke-dashoffset 0.08s linear;
  }

  @keyframes twMobPullSpin {
    to { transform: translate(-50%, 0) rotate(360deg); }
  }

  /* ── ANIMATIONS ── */
  @keyframes twMobLikePulse {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1.0); }
  }
  .tw-mob-like-pulse { animation: twMobLikePulse 0.15s ease-out; }

  @keyframes twMobSlideInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
  }
  .tw-mob-slide-in { animation: twMobSlideInUp 0.2s ease-out; }

  @keyframes twMobFadeSlide {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0);   }
  }
  .tw-mob-tab-content { animation: twMobFadeSlide 0.2s ease-out; }



  body.tw-page-profile .tw-prof-panel,
  body.tw-page-profile .tw-prof-drawer {
    will-change: transform;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body.tw-page-profile .tw-prof-panel {
    position: fixed;
    inset: 0;
    top: auto;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    left: 0;
    right: 0;
    z-index: 2000;
    opacity: 1;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.3s;
  }

  body.tw-page-profile .tw-prof-panel.is-open {
    visibility: visible;
    transform: translateY(0);
  }

  body.tw-page-profile .tw-prof-panel-shell {
    max-height: 100vh;
    height: 100vh;
  }

  body.tw-page-profile .tw-prof-panel-header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  body.tw-page-profile .tw-prof-panel-close {
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
  }

  body.tw-page-profile .tw-prof-panel-close::before {
    content: '<- Tillbaka';
  }

  body.tw-page-profile .tw-prof-panel-close {
    line-height: 44px;
  }

  body.tw-page-profile .tw-prof-panel-close > * {
    display: none;
  }

  body.tw-page-profile .tw-prof-panel-tabs {
    position: sticky;
    top: calc(44px + env(safe-area-inset-top));
    z-index: 2;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }

  body.tw-page-profile .tw-prof-panel-tabs::-webkit-scrollbar {
    display: none;
  }

  body.tw-page-profile .tw-prof-tab {
    flex: 0 0 auto;
    min-width: 90px;
    min-height: 44px;
    padding: 0 12px;
  }

  body.tw-page-profile .tw-prof-panel-body {
    padding: 12px;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  body.tw-page-profile .tw-prof-savebar {
    position: sticky;
    bottom: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    z-index: 4;
  }

  body.tw-page-profile .tw-prof-input,


  /* =====================================================
     MESSENGER MOBILE - REACTIONS & QUOTES
     ===================================================== */

  .tw-mob-chat-reactions-menu {
    position: fixed;
    display: flex;
    gap: 8px;
    z-index: 999;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.2s ease-out;
  }

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

  .tw-mob-reaction-btn {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .tw-mob-reaction-btn:active,
  .tw-mob-reaction-btn:focus {
    background: var(--primary);
    border-color: var(--primary);
  }

  /* Quote bar above compose - REMOVED, now inline chip */

  /* Quote chip inline in compose */
  .tw-mob-chat-quote-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 160px;
    padding: 4px 8px;
    border-left: 2px solid var(--primary);
    background: rgba(39, 150, 242, 0.08);
    border-radius: 0;
  }

  .tw-mob-chat-quote-chip-text {
    font-size: 11px;
    font-style: italic;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tw-mob-chat-quote-chip-close {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: color 0.15s ease;
    font-size: 10px;
  }

  .tw-mob-chat-quote-chip-close:active {
    color: var(--primary);
  }

  /* Quote bar above compose - REMOVED, now inline chip */

  /* Media buttons in compose */
  .tw-mob-chat-media-btn {
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .tw-mob-chat-media-btn:active,
  .tw-mob-chat-media-btn:focus {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(39, 150, 242, 0.1);
  }

  .tw-mob-chat-media-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Reaction badge on message */
  .tw-mob-chat-reaction-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    height: auto;
    padding: 0;
    margin-left: 4px;
    font-size: 10px;
    border: 0;
    background: transparent;
    border-radius: 0;
    line-height: 1;
  }

  body.tw-page-profile .tw-prof-textarea,
  body.tw-page-profile .tw-prof-btn,
  body.tw-page-profile .tw-prof-chip {
    min-height: 44px;
    font-size: 16px;
  }

  body.tw-page-profile .tw-prof-switch {
    min-width: 44px;
    min-height: 24px;
    padding: 4px;
  }

  body.tw-page-profile .tw-prof-drawer-backdrop {
    z-index: 2099;
    background: rgba(0, 0, 0, 0.40);
  }

  body.tw-page-profile .tw-prof-drawer {
    position: fixed;
    inset: 0;
    z-index: 2100;
    width: 100vw;
    height: 100vh;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    border: 0;
  }

  body.tw-page-profile .tw-prof-drawer.is-open {
    transform: translateY(0);
  }

  body.tw-page-profile .tw-prof-drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  body.tw-page-profile .tw-prof-drawer-header .tw-prof-panel-close {
    width: auto;
    min-width: 44px;
    height: 44px;
    font-size: 0;
  }

  body.tw-page-profile .tw-prof-drawer-header .tw-prof-panel-close::before {
    content: '<- Tillbaka till socials';
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
  }

  body.tw-page-profile .tw-prof-drawer-body {
    padding: 12px;
    overflow-y: auto;
  }

  body.tw-page-profile .tw-prof-social-icon {
    width: 36px;
    height: 36px;
  }

  body.tw-page-profile .tw-prof-drawer-footer {
    position: sticky;
    bottom: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  body.tw-page-profile .tw-prof-drawer-footer .tw-prof-btn-primary {
    width: 100%;
    min-height: 48px;
    font-weight: 700;
  }

  /* ── MOBILE VIEW SWITCHING ── */
  .tw-mob-view {
    display: block;
    width: 100%;
  }

  .tw-mob-desktop-only {
    display: none !important;
  }

  .tw-mob-page-block {
    margin: 12px 0;
  }

  .tw-mob-tab-panels {
    display: block;
  }

  .tw-mob-tab-panel {
    display: block;
  }

  .tw-mob-tab-panel[hidden] {
    display: none !important;
  }

  .tw-mob-row-actions {
    gap: 6px;
  }

  .tw-mob-empty-state {
    margin: 10px 14px;
    padding: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
  }

  .tw-mob-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-empty-sub {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-week-summary {
    padding: 0 14px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  .tw-mob-lb-my-row {
    position: sticky;
    bottom: calc(56px + env(safe-area-inset-bottom));
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    z-index: 5;
  }

  /* Chat page strict mobile prompt overrides */
  body.tw-page-messenger .mc-msg-bubble,
  body.tw-page-messenger .mc-message-row.incoming .mc-msg-bubble,
  body.tw-page-messenger .mc-message-row.outgoing .mc-msg-bubble {
    border-radius: 0 !important;
    max-width: 75% !important;
  }

  body.tw-page-messenger .ms-row,
  body.tw-page-messenger .ms-search-input,
  body.tw-page-messenger .mc-input,
  body.tw-page-messenger .mc-input-wrap {
    border-radius: 0 !important;
  }

  body.tw-page-messenger .mc-input-wrap {
    position: sticky;
    bottom: calc(56px + env(safe-area-inset-bottom));
    background: var(--surface-2);
    z-index: 6;
  }

  body.tw-mobile-overlay-open .tw-mobile-bottom-nav,
  body.tw-mobile-drawer-open .tw-mobile-bottom-nav,
  body.messenger-full-open .tw-mobile-bottom-nav {
    display: none;
  }

  body.tw-page-profile.messenger-v2-active .messenger-full-overlay {
    z-index: 2000;
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.40);
  }

  body.tw-page-profile.messenger-v2-active .messenger-full-panel {
    z-index: 2001;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    border-left: 0;
    border-radius: 0;
    transform: translateY(100%);
  }

  body.tw-page-profile.messenger-v2-active .messenger-full-panel.open {
    transform: translateY(0);
  }

  body.tw-page-profile.messenger-v2-active .messenger-full-toolbar {
    min-height: 52px;
    padding-top: env(safe-area-inset-top);
  }

  body.tw-page-profile .messenger-fab-btn {
    display: none !important;
  }

  body.tw-page-profile .chat-window,
  body.tw-page-profile .chat-window.minimized {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
  }

  body.tw-page-profile .chat-window-header,
  body.tw-page-profile .chat-window-input {
    min-height: 44px;
  }

  body.tw-page-profile .chat-window-input textarea,
  body.tw-page-profile .chat-window-input input {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  body.tw-page-profile .pb-page-background {
    padding: 8px;
  }

  body.tw-page-profile .tw-widget .tw-widget-title {
    font-size: 10px;
  }

  body.tw-page-profile .tw-profile-playstyle-dna text,
  body.tw-page-profile .tw-profile-playstyle-dna .tw-radar-label {
    font-size: 8px;
  }

  body.tw-page-profile .tw-ministats-grid,
  body.tw-page-profile .tw-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tw-page-profile .tw-prof-section {
    padding: 10px 8px;
  }
}

@media (max-width: 360px) {
  body.tw-page-profile .pb-page-background,
  body.tw-page-profile .tw-prof-panel-body,
  body.tw-page-profile .tw-prof-drawer-body {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.tw-page-profile .tw-prof-chip,
  body.tw-page-profile .tw-prof-btn,
  .tw-mobile-bottom-item {
    font-size: 8px;
  }

  body.tw-page-profile .tw-prof-inline-grid,
  body.tw-page-profile .tw-prof-inline-grid-grow {
    grid-template-columns: 1fr;
  }
}

/* Leaderboard fallback: force mobile view on touch devices even if viewport reports desktop width */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body.tw-page-hub .tw-news-widget-list .tw-news-card:nth-child(n + 2) {
    display: none;
  }

  body.tw-page-messenger {
    --tw-mobile-header-offset: calc(44px + env(safe-area-inset-top));
    --tw-messenger-top-height: 58px;
    --tw-messenger-tabs-height: 41px;
    --tw-messenger-request-strip-height: 0px;
  }

  body.tw-page-messenger .season-countdown-widget,
  body.tw-page-messenger .widget-season-countdown {
    display: none !important;
  }

  body.tw-page-messenger .tw-mob-chat-top {
    position: fixed !important;
    top: var(--tw-mobile-header-offset);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 92;
    background: var(--surface-3);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  body.tw-page-messenger .tw-mob-chat-tabs {
    position: fixed !important;
    top: calc(var(--tw-mobile-header-offset) + var(--tw-messenger-top-height));
    left: 0;
    right: 0;
    width: 100%;
    z-index: 91;
    margin: 0;
    background: var(--surface-2);
  }

  body.tw-page-messenger .tw-mob-chat-request-strip {
    display: none !important;
  }

  body.tw-page-messenger .tw-mob-chat-list-panel {
    padding-top: calc(var(--tw-messenger-top-height) + var(--tw-messenger-tabs-height) + 2px) !important;
  }

  body.tw-page-leaderboard .tw-mob-view--leaderboard {
    display: block;
    width: 100%;
  }

  body.tw-page-leaderboard .tw-lb-page-wrap.tw-mob-desktop-only {
    display: none !important;
  }

  /* Legacy leaderboard widget fallback (runtime tw-lb* markup) */
  body.tw-page-leaderboard .tw-lb-colh {
    display: none !important;
  }

  body.tw-page-leaderboard .tw-lb-toolbar {
    position: fixed !important;
    top: calc(44px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    width: 100%;
    z-index: 92;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 0;
    padding: 8px 10px;
  }

  body.tw-page-leaderboard .tw-lb-body {
    padding-top: 56px;
  }

  body.tw-page-leaderboard .tw-lb-toolbar .tw-lb-chip[href*='sort=wins'],
  body.tw-page-leaderboard .tw-lb-toolbar .tw-lb-chip[href*='sort=form'],
  body.tw-page-leaderboard .tw-lb-toolbar .tw-lb-chip[href*='sort=mvp'],
  body.tw-page-leaderboard .tw-lb-toolbar .tw-lb-player-count {
    display: none !important;
  }

  body.tw-page-leaderboard .tw-lb-row {
    display: block !important;
    border: 1px solid var(--border);
    background: var(--surface-2);
    padding: 10px;
    margin-bottom: 8px;
  }

  body.tw-page-leaderboard .tw-lb-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    border: 1px solid rgba(39,150,242,0.35);
  }

  body.tw-page-leaderboard .tw-lb-row.tw-lb-top1 .tw-lb-pos {
    color: #FFD700;
    border-color: rgba(255,215,0,0.45);
  }

  body.tw-page-leaderboard .tw-lb-row.tw-lb-top2 .tw-lb-pos {
    color: #C0C0C0;
    border-color: rgba(192,192,192,0.45);
  }

  body.tw-page-leaderboard .tw-lb-row.tw-lb-top3 .tw-lb-pos {
    color: #CD7F32;
    border-color: rgba(205,127,50,0.45);
  }

  body.tw-page-leaderboard .tw-lb-player {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
  }

  body.tw-page-leaderboard .tw-lb-rank-cell,
  body.tw-page-leaderboard .tw-lb-stat,
  body.tw-page-leaderboard .tw-lb-delta,
  body.tw-page-leaderboard .tw-lb-exp {
    display: inline-block;
    margin-right: 8px;
    margin-top: 4px;
    font-size: 11px;
  }

  body.tw-page-leaderboard .tw-lb-pagination {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero {
    margin: 0 0 8px;
    padding: 12px 12px 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    background: var(--surface-2);
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-kicker {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 0 7px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-live.is-live {
    border-color: rgba(34,197,94,0.35);
    color: var(--success);
    background: rgba(34,197,94,0.08);
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-main {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-title {
    margin: 0;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-sort {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-leaderboard .tw-lb-mobile-hero-meta {
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--text-secondary);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-leaderboard .tw-lb-toolbar {
    top: calc(44px + env(safe-area-inset-top));
    padding: 8px 10px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.tw-page-leaderboard .tw-lb-toolbar::-webkit-scrollbar {
    display: none;
  }

  body.tw-page-leaderboard .tw-lb-toolbar .tw-lb-chip {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  body.tw-page-leaderboard .tw-lb-body {
    padding-top: 98px;
  }

  body.tw-page-leaderboard .tw-lb-row {
    padding: 10px;
    margin-bottom: 6px;
  }

  body.tw-page-leaderboard .tw-lb-row .tw-lb-player {
    margin: 6px 0 4px;
  }

  body.tw-page-leaderboard .tw-lb-row .tw-lb-pname {
    font-size: 13px;
    line-height: 1.2;
  }

  body.tw-page-leaderboard .tw-lb-row .tw-lb-rank-cell,
  body.tw-page-leaderboard .tw-lb-row .tw-lb-stat,
  body.tw-page-leaderboard .tw-lb-row .tw-lb-delta,
  body.tw-page-leaderboard .tw-lb-row .tw-lb-exp {
    font-size: 10px;
    margin-top: 5px;
  }

  body.tw-page-leaderboard .tw-lb-row.tw-lb-top1,
  body.tw-page-leaderboard .tw-lb-row.tw-lb-top2,
  body.tw-page-leaderboard .tw-lb-row.tw-lb-top3 {
    border-left-width: 3px;
    border-left-style: solid;
  }

  body.tw-page-leaderboard .tw-lb-row.tw-lb-top1 { border-left-color: rgba(255,215,0,0.55); }
  body.tw-page-leaderboard .tw-lb-row.tw-lb-top2 { border-left-color: rgba(192,192,192,0.55); }
  body.tw-page-leaderboard .tw-lb-row.tw-lb-top3 { border-left-color: rgba(205,127,50,0.55); }

  body.tw-page-leaderboard .tw-lb-row.is-me {
    border-left-width: 3px;
  }

  /* HUB mobile runtime layout (PageBuilder widgets) */
  body.tw-page-hub.has-mobile-nav .pb-content-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 10px 10px !important;
  }

  body.tw-page-hub.has-mobile-nav .pb-content-area > .pb-row,
  body.tw-page-hub.has-mobile-nav .pb-content-area > .pb-row > .pb-col,
  body.tw-page-hub.has-mobile-nav .pb-content-area > .pb-row > .pb-col > .builder-drop-zone {
    display: contents !important;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget {
    border: 1px solid var(--border);
    background: var(--surface-2);
    margin: 0 !important;
    position: relative;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='daily-reward'] {
    order: 10;
    border-left: 3px solid var(--primary);
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='victory-vibes'] {
    order: 20;
    border-left: 3px solid rgba(245,158,11,0.7);
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='LFG:quick-dock'] {
    order: 30;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='hub-tracker-activity'] {
    order: 40;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='LFG:feed-panel'] {
    order: 50;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='hub-creators-live'] {
    order: 60;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='events:competitive-calendar'] {
    order: 70;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='news-feed'] {
    order: 80;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='wall-post'] {
    order: 90;
    max-height: 56vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='daily-reward']::before,
  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='LFG:quick-dock']::before,
  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='LFG:feed-panel']::before,
  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='hub-tracker-activity']::before,
  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='news-feed']::before {
    display: block;
    padding: 8px 10px 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-family), Roboto, sans-serif;
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='daily-reward']::before {
    content: 'Progression';
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='LFG:quick-dock']::before {
    content: 'Dagens fokus';
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='LFG:feed-panel']::before {
    content: 'Live pulse';
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='hub-tracker-activity']::before {
    content: 'Snabba vagar';
  }

  body.tw-page-hub.has-mobile-nav .pb-widget[data-widget='news-feed']::before {
    content: 'Community / senaste';
  }
}

/* Desktop guard: bottom-sheet is mobile-only and must never render on desktop. */
@media (min-width: 769px) {
  .tw-mob-sheet-backdrop,
  .tw-mob-sheet,
  .tw-mob-sheet * {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(100%) !important;
  }
}

/* === PAGE BUILDER WRAPPERS === */
/**
 * FORRE_DARK - Page Builder Wrappers
 * MÅSTE laddas FÖRE widgets.css
 * Wrapper-containers för PageBuilder 3.0
 */

/* Page Background */
.pb-page-background {
  background: #121212;
  padding: 20px 0;
}

/* Page Builder Wrapper - Container med mörk bakgrund (BAKOM widgets) */
.pb-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Widgets ligger OVANPÅ wrapper */
.pb-wrapper .tw-widget,
.pb-wrapper .widget,
.pb-wrapper .pb-widget {
  position: relative;
  z-index: 2;
}

/* Content area wrapper - samma stil som .tw-page-wrapper */
.pb-content-area {
  background: #171717;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Fallback Layout - SAMMA styling */
.pb-fallback {
  background: #171717;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
  min-height: 400px;
  margin-bottom: 20px;
}

.pb-fallback-header {
  padding: 16px;
  border-bottom: 1px solid #333333;
  background: #1b1b1b;
}

.pb-fallback-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.pb-fallback-content {
  padding: 16px;
  color: #FFFFFF;
}

/* Page Builder Rows */
.pb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.pb-row:last-child {
  margin-bottom: 0;
}

/* Page Builder Columns */
.pb-col-100 { width: 100%; }
.pb-col-75 { width: calc(75% - 8px); }
.pb-col-66 { width: calc(66.666% - 8px); }
.pb-col-50 { width: calc(50% - 8px); }
.pb-col-33 { width: calc(33.333% - 8px); }
.pb-col-25 { width: calc(25% - 8px); }

@media (max-width: 768px) {
  .pb-page-background {
    padding: 16px;
  }
}

/* Empty Column Zone - Drop target */
.pb-empty-col-zone {
  min-height: 80px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(39, 150, 242, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.pb-empty-col-zone:hover {
  border-color: var(--primary);
  background: rgba(39, 150, 242, 0.1);
}

/* Drop Zone Indicator */
.pb-drop-zone {
  position: relative;
  min-height: 60px;
  border: 2px dashed transparent;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.pb-drop-zone.drag-over {
  border-color: var(--primary);
  background: rgba(39, 150, 242, 0.1);
}

/* Column Layout Selector */
.pb-col-layout {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.pb-col-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg-alt);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pb-col-option:hover {
  border-color: var(--primary);
}

.pb-col-option.active {
  border-color: var(--primary);
  background: rgba(39, 150, 242, 0.15);
}

/* ============================================
   Normal Content Wrapper (non-edit mode)
   Används i default.php när ingen layout finns
   ============================================ */

/* Edge effects - dubbla linjer för depth */
.tw-page-divider-top {
  position: absolute;
  inset-x: 0;
  top: 0;
  height: 1px;
  background: #3a3a3a;
}

.tw-page-divider-top::after {
  content: '';
  position: absolute;
  inset-x: 0;
  top: 1px;
  height: 1px;
  background: #1f1f1f;
}

.tw-page-divider-bottom {
  position: absolute;
  inset-x: 0;
  bottom: 0;
  height: 1px;
  background: #2a2a2a;
}

/* Main content area */
.tw-page-content {
  position: relative;
  padding: 16px;
  color: #FFFFFF;
  /* min-height removed - footer stays at bottom naturally */
}

/* Shop route uses full wrapper width without extra inner rail padding */
body.tw-page-shop .tw-page-content {
  padding: 0;
}

/* Content area behöver relative för absolute dividers */
.pb-content-area {
  position: relative;
}

/* === PAGE BUILDER OVERRIDES === */
/**
 * FORRE_DARK - Page Builder 3.0 Edit Mode Overrides
 * 
 * Denna fil hanterar:
 * 1. Widget states i edit mode
 * 2. Separation mellan builder-shell och preview
 * 3. Navbar/preview isolation
 */

/* ============================================
   EDIT MODE BODY - NO TOPBAR PADDING HERE
   Padding hanteras av builder-shell.css
   ============================================ */
body.builder-edit-mode {
  overflow-x: hidden;
  /* Padding-top sätts i overlay.php inline style för att matcha pb3-topbar-h */
}

/* Prevent FOUC in edit mode: hide widget surfaces until BuilderStyles has rehydrated. */
body.builder-edit-mode.builder-style-pending .tw-widget,
body.builder-edit-mode.builder-style-pending .widget,
body.builder-edit-mode.builder-style-pending .forre-lb,
body.builder-edit-mode.builder-style-pending .pb-widget {
  visibility: hidden;
}

/* ============================================
   PREVIEW AREA - Temats navbar ska fungera normalt
   ============================================ */

/* Preview container - ingen påverkan från builder */
.builder-edit-mode .pb3-preview-frame {
  /* Preview frame är isolerad från temastilar */
}

/* Temats navbar i preview ska inte krocka med builder-topbar */
.builder-edit-mode .fnav-topbar,
.builder-edit-mode .fnav-band,
.builder-edit-mode .fnav,
.builder-edit-mode .tw-topbar,
.builder-edit-mode .tw-navband,
.builder-edit-mode .site-header,
.builder-edit-mode .navbar {
  /* Temats navbar behåller sin normala positionering */
  position: relative;
}

/* ============================================
   WIDGET STATES - Edit Mode
   ============================================ */

/* Base widget state - visible */
.tw-widget.builder-visible,
.widget.builder-visible,
.pb-widget.builder-visible,
.forre-lb.builder-visible {
  /* Normal state */
}

/* Selected widget */
.tw-widget.builder-selected,
.widget.builder-selected,
.pb-widget.builder-selected,
.forre-lb.builder-selected {
  outline: 2px solid var(--pb3-accent, #2796f2) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(39, 150, 242, 0.15) !important;
}

/* Hover state */
body.builder-edit-mode .tw-widget:hover,
body.builder-edit-mode .widget:hover,
body.builder-edit-mode .pb-widget:hover,
body.builder-edit-mode .forre-lb:hover {
  outline: 2px solid var(--pb3-accent, #2796f2);
  outline-offset: 2px;
  cursor: grab;
}

/* No transform on hover in edit mode */
body.builder-edit-mode .tw-widget:hover,
body.builder-edit-mode .widget:hover {
  transform: none;
}

/* ============================================
   BLOCK INTERACTIVE ELEMENTS IN EDIT MODE
   ============================================ */
body.builder-edit-mode .tw-widget a,
body.builder-edit-mode .tw-widget button,
body.builder-edit-mode .tw-widget input,
body.builder-edit-mode .tw-widget select,
body.builder-edit-mode .tw-widget textarea,
body.builder-edit-mode .pb-widget a,
body.builder-edit-mode .pb-widget button,
body.builder-edit-mode .pb-widget input,
body.builder-edit-mode .pb-widget select,
body.builder-edit-mode .pb-widget textarea,
body.builder-edit-mode .widget a,
body.builder-edit-mode .widget button,
body.builder-edit-mode .widget input,
body.builder-edit-mode .widget select,
body.builder-edit-mode .widget textarea,
body.builder-edit-mode .forre-lb a,
body.builder-edit-mode .forre-lb button,
body.builder-edit-mode .forre-lb input {
  pointer-events: none !important;
  cursor: default !important;
}

/* Keep post composer media controls usable in edit mode. */
body.builder-edit-mode .post-composer .composer-camera-btn,
body.builder-edit-mode .post-composer .composer-gif-btn,
body.builder-edit-mode .post-composer .composer-action-btn,
body.builder-edit-mode .post-composer .toolbar-btn,
body.builder-edit-mode .post-composer .composer-submit,
body.builder-edit-mode .post-composer .composer-file-input,
body.builder-edit-mode .post-composer .composer-editor {
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.builder-edit-mode .post-composer .composer-editor {
  cursor: text !important;
}

/* Keep admin content editor controls usable in edit mode (incl. HTML/source toggle). */
body.builder-edit-mode .tw-ce-page .tw-ce-btn,
body.builder-edit-mode .tw-ce-page .tw-ce-tool,
body.builder-edit-mode .tw-ce-page button,
body.builder-edit-mode .tw-ce-page input,
body.builder-edit-mode .tw-ce-page textarea,
body.builder-edit-mode .tw-ce-page select,
body.builder-edit-mode .tw-ce-page a,
body.builder-edit-mode .tw-ce-page [contenteditable="true"] {
  pointer-events: auto !important;
}

/* Widgets themselves are clickable */
body.builder-edit-mode .tw-widget,
body.builder-edit-mode .pb-widget,
body.builder-edit-mode .widget,
body.builder-edit-mode .forre-lb {
  pointer-events: auto !important;
  cursor: grab !important;
  outline: 1px solid transparent;
  transition: outline 0.15s ease;
}

body.builder-edit-mode .tw-widget.builder-selected,
body.builder-edit-mode .pb-widget.builder-selected,
body.builder-edit-mode .widget.builder-selected,
body.builder-edit-mode .forre-lb.builder-selected {
  cursor: grabbing !important;
}

/* ============================================
   WRAPPER CONTAINERS - Transparent to clicks
   ============================================ */
body.builder-edit-mode .pb-wrapper,
body.builder-edit-mode .pb-row,
body.builder-edit-mode .pb-col,
body.builder-edit-mode .pb-page-background,
body.builder-edit-mode .pb-widget-page-content,
body.builder-edit-mode .builder-content-wrapper,
body.builder-edit-mode .builder-drop-zone {
  pointer-events: none !important;
}

/* Sortable listens on drop-zone containers, so they must be interactive in edit mode. */
body.builder-edit-mode .builder-drop-zone {
  pointer-events: auto !important;
}

/* During drag, wrappers/columns must accept pointer events so Sortable gets valid drop targets. */
body.builder-edit-mode.builder-is-dragging .pb-wrapper,
body.builder-edit-mode.builder-is-dragging .pb-row,
body.builder-edit-mode.builder-is-dragging .pb-col,
body.builder-edit-mode.builder-is-dragging [class*="pb-col-"],
body.builder-edit-mode.builder-is-dragging .builder-drop-zone,
body.builder-edit-mode.builder-is-dragging .builder-empty-col-zone {
  pointer-events: auto !important;
}

/* But children widgets are clickable */
body.builder-edit-mode .pb-wrapper .tw-widget,
body.builder-edit-mode .pb-row .tw-widget,
body.builder-edit-mode .pb-col .tw-widget,
body.builder-edit-mode .pb-wrapper .widget,
body.builder-edit-mode .pb-row .widget,
body.builder-edit-mode .pb-col .widget {
  pointer-events: auto !important;
}

/* Hub legacy fallback feed must not sit underneath editable widgets in edit mode */
body.builder-edit-mode .tw-hub-legacy-feed {
  display: none !important;
}

/* ============================================
   WIDGET TAG (shows widget name on hover)
   ============================================ */
.builder-widget-tag {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--pb3-accent, #2796f2);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

body.builder-edit-mode .tw-widget:hover .builder-widget-tag,
body.builder-edit-mode .tw-widget.builder-selected .builder-widget-tag,
body.builder-edit-mode .pb-widget:hover .builder-widget-tag,
body.builder-edit-mode .pb-widget.builder-selected .builder-widget-tag,
body.builder-edit-mode .widget:hover .builder-widget-tag,
body.builder-edit-mode .widget.builder-selected .builder-widget-tag {
  opacity: 1;
}

/* ============================================
   WIDGET SETTINGS VISUAL INDICATORS
   ============================================ */

/* Hide header when show_header=false */
.pb-widget[data-builder-show-header="false"] .tw-widget-header,
.pb-widget[data-builder-show-header="false"] .widget-header,
.pb-widget[data-builder-show-header="false"] .forre-lb-head,
.pb-widget[data-builder-show-header="false"] [data-widget-part="header"],
.tw-widget[data-builder-show-header="false"] .tw-widget-header,
.widget[data-builder-show-header="false"] .widget-header,
.tw-widget[data-show-header="false"] .tw-widget-header {
  display: none !important;
}

/* Compact mode */
.tw-widget[data-builder-compact="true"],
.widget[data-builder-compact="true"] {
  padding: 8px !important;
}

/* Highlight current user */
.tw-widget.tw-highlight-me .current-user,
.widget.highlight-me .current-user,
.tw-widget[data-highlight-me="true"] .current-user {
  background: rgba(39, 150, 242, 0.15) !important;
  border-left: 3px solid var(--pb3-accent, #2796f2) !important;
}

/* ============================================
   DROP ZONES
   ============================================ */
body.builder-edit-mode .builder-drop-zone {
  min-height: 50px;
  transition: all 0.25s ease;
}

body.builder-edit-mode .builder-drop-zone.drag-over {
  min-height: 100px;
  border: 2px dashed var(--pb3-accent, #2796f2);
  background: rgba(39, 150, 242, 0.05);
  border-radius: 8px;
}

/* Empty column zone */
.builder-empty-col-zone {
  min-height: 100px;
  border: 2px dashed rgba(39, 150, 242, 0.3);
  border-radius: 8px;
  background: rgba(39, 150, 242, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(39, 150, 242, 0.5);
  font-size: 12px;
}

body.builder-edit-mode .builder-drop-target {
  background: rgba(39, 150, 242, 0.08) !important;
  outline: 2px dashed rgba(39, 150, 242, 0.65) !important;
  outline-offset: -2px;
}

/* ============================================
   INLINE EDITING
   ============================================ */
.builder-editable {
  cursor: text;
  outline: none;
}

.builder-editable:focus {
  background: rgba(39, 150, 242, 0.05);
  border-radius: 4px;
}

.builder-editable::selection {
  background: rgba(39, 150, 242, 0.3);
}

/* ============================================
   DRAG GHOST
   ============================================ */
.builder-drag-ghost {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.builder-ghost {
  opacity: 0.45 !important;
  border: 2px dashed rgba(39, 150, 242, 0.75) !important;
  background: rgba(39, 150, 242, 0.10) !important;
}

.builder-chosen {
  box-shadow: 0 0 0 2px rgba(39, 150, 242, 0.55), 0 14px 30px rgba(0, 0, 0, 0.35) !important;
}

.builder-drag {
  opacity: 0.9;
}

/* ============================================
   DROP INDICATOR
   ============================================ */
.builder-drop-indicator {
  position: absolute;
  background: var(--pb3-accent, #2796f2);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1000;
}

.builder-drop-indicator.horizontal {
  height: 4px;
  left: 0;
  right: 0;
  box-shadow: 0 0 0 1px rgba(39, 150, 242, 0.32), 0 0 12px rgba(39, 150, 242, 0.78);
}

.builder-drop-indicator.vertical {
  width: 3px;
  top: 0;
  bottom: 0;
}

/* ============================================
   LEGACY SUPPORT
   ============================================ */

/* Old class names that JS might still reference */
#builder-topbar { 
  position: fixed !important; 
  top: 0 !important; 
  transform: none !important; 
}

#builder-add-panel.open { 
  transform: translateY(0) !important; 
  pointer-events: auto !important; 
}

#builder-widget-sidebar { 
  pointer-events: auto !important; 
}

#builder-widget-sidebar * { 
  pointer-events: auto !important; 
  user-select: auto !important; 
}

#builder-inspector { 
  pointer-events: auto !important; 
}

/* Old sidebar classes */
.sidebar-open {
  transform: translateX(0) !important;
}

/* Old inspector classes */
.inspector-open {
  transform: translateX(0) !important;
}
/**
 * FORRE_DARK — Widget Header Effects
 * Advanced styling for builder_style_templates.php header variants.
 * Each class matches a tailwind field in the template config.
 *
 * Load this file in the theme: themes/FORRE_DARK/css/widget-header-effects.css
 */


/* ═══════════════════════════════════════
   1. PULSE WIRE — tw-h-pulse-wire
   Horisontell linje genom headern med
   en ljuspunkt som sakta sveper.
   ═══════════════════════════════════════ */

.tw-h-pulse-wire {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.tw-h-pulse-wire::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.tw-h-pulse-wire::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: -10%;
    width: 30px;
    height: 3px;
    background: radial-gradient(ellipse, rgba(39,150,242,0.50) 0%, transparent 70%);
    animation: tw-h-pw-scan 4s linear infinite;
    pointer-events: none;
}

@keyframes tw-h-pw-scan {
    0% { left: -10%; }
    100% { left: 110%; }
}


/* ═══════════════════════════════════════
   2. DOT STACK — tw-h-dot-stack
   3 vertikala dots som identitetsmarkör.
   Dots skapas via box-shadow på ::before.
   ═══════════════════════════════════════ */

.tw-h-dot-stack {
    position: relative;
}

.tw-h-dot-stack::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background: var(--primary);
    box-shadow:
        0 6px 0 rgba(39,150,242,0.50),
        0 12px 0 rgba(39,150,242,0.20);
}


/* ═══════════════════════════════════════
   3. BOTTOM LOAD — tw-h-bottom-load
   Tung accent-bar i botten med glow uppåt.
   ═══════════════════════════════════════ */

.tw-h-bottom-load {
    position: relative;
}

.tw-h-bottom-load::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    box-shadow: 0 -4px 12px rgba(39,150,242,0.12);
}


/* ═══════════════════════════════════════
   4. CORNER BRACKETS — tw-h-corner-brackets
   L-brackets i diagonalt motsatta hörn.
   ═══════════════════════════════════════ */

.tw-h-corner-brackets {
    position: relative;
}

.tw-h-corner-brackets::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(39,150,242,0.40);
    border-left: 2px solid rgba(39,150,242,0.40);
    pointer-events: none;
}

.tw-h-corner-brackets::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid rgba(39,150,242,0.40);
    border-right: 2px solid rgba(39,150,242,0.40);
    pointer-events: none;
}


/* ═══════════════════════════════════════
   5. SPLIT TONE — tw-h-split-tone
   Högra 40% mörkare bakgrund.
   ═══════════════════════════════════════ */

.tw-h-split-tone {
    position: relative;
    overflow: hidden;
}

.tw-h-split-tone::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: var(--surface-5);
    border-left: 1px solid rgba(51,51,51,0.30);
    pointer-events: none;
}

/* Ensure content sits above the split */
.tw-h-split-tone > * {
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════
   6. UNDERMARK — tw-h-undermark
   Accent gradient under titeltexten.
   Applied to the first text child.
   ═══════════════════════════════════════ */

.tw-h-undermark {
    position: relative;
}

.tw-h-undermark::after {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 16px;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, rgba(39,150,242,0.20) 60%, transparent 100%);
    pointer-events: none;
}


/* ═══════════════════════════════════════
   7. HASH MARK — tw-h-hash-mark
   # prefix via ::before. Terminal/kod-estetik.
   ═══════════════════════════════════════ */

.tw-h-hash-mark {
    position: relative;
}

.tw-h-hash-mark::before {
    content: '#';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 900;
    color: var(--primary);
    pointer-events: none;
}


/* ═══════════════════════════════════════
   8. DOUBLE LINE — tw-h-double-line
   Två parallella vertikala accent-linjer.
   ═══════════════════════════════════════ */

.tw-h-double-line {
    position: relative;
}

.tw-h-double-line::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--primary);
    pointer-events: none;
}

.tw-h-double-line::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(39,150,242,0.25);
    pointer-events: none;
}


/* ═══════════════════════════════════════
   9. FADE TITLE — tw-h-fade-title
   Gradient text från accent till vit.
   ═══════════════════════════════════════ */

.tw-h-fade-title .tw-widget-title,
.tw-h-fade-title > span:first-child {
    background: linear-gradient(90deg, var(--primary) 0%, var(--text-primary) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Keep icons solid accent */
.tw-h-fade-title .tw-widget-title i,
.tw-h-fade-title > span:first-child i {
    -webkit-text-fill-color: var(--primary);
}


/* ═══════════════════════════════════════
   10. MICRO BAR — tw-h-micro-bar
   Liten accent-rektangel med glow indragen
   från vänsterkanten.
   ═══════════════════════════════════════ */

.tw-h-micro-bar {
    position: relative;
}

.tw-h-micro-bar::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: var(--primary);
    box-shadow: 0 0 6px rgba(39,150,242,0.20);
    pointer-events: none;
}


/* ═══════════════════════════════════════
   11. HORIZON — tw-h-horizon
   Horisontell accent-linje vid 65% höjd.
   Titel ovanför, metadata under.
   ═══════════════════════════════════════ */

.tw-h-horizon {
    position: relative;
    display: flex;
    flex-direction: column;
}

.tw-h-horizon::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 12px;
    top: 65%;
    height: 1px;
    background: linear-gradient(90deg, rgba(39,150,242,0.30), rgba(39,150,242,0.05) 70%, transparent);
    pointer-events: none;
}


/* ═══════════════════════════════════════
   12. CROSSBAR — tw-h-crossbar
   Kors-markör till vänster: horisontell +
   vertikal accent-linje.
   ═══════════════════════════════════════ */

.tw-h-crossbar {
    position: relative;
}

.tw-h-crossbar::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 2px;
    background: var(--primary);
    pointer-events: none;
}

.tw-h-crossbar::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 10px;
    background: rgba(39,150,242,0.40);
    pointer-events: none;
}

  /*
   * Safety guard for builder header effects:
   * - keep pseudo effects behind real header content
   * - prevent accidental overlays when tw-h-* class ends up on widget root
   */
  .tw-widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar),
  .widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar) {
    isolation: isolate;
  }

  .tw-widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::before,
  .tw-widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::after,
  .widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::before,
  .widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::after {
    z-index: 0;
  }

  .tw-widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar) .tw-widget-header-content,
  .widget-header:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar) .tw-widget-header-content {
    position: relative;
    z-index: 1;
  }

  .tw-widget:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::before,
  .tw-widget:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::after,
  .widget:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::before,
  .widget:is(.tw-h-pulse-wire, .tw-h-dot-stack, .tw-h-bottom-load, .tw-h-corner-brackets, .tw-h-split-tone, .tw-h-undermark, .tw-h-hash-mark, .tw-h-double-line, .tw-h-fade-title, .tw-h-micro-bar, .tw-h-horizon, .tw-h-crossbar)::after {
    content: none !important;
  }

  /* Generic fallback for any current/future tw-h-* classes on header nodes. */
  .tw-widget-header[class*="tw-h-"],
  .widget-header[class*="tw-h-"] {
    isolation: isolate;
  }

  .tw-widget-header[class*="tw-h-"]::before,
  .tw-widget-header[class*="tw-h-"]::after,
  .widget-header[class*="tw-h-"]::before,
  .widget-header[class*="tw-h-"]::after {
    z-index: 0;
    pointer-events: none;
  }

  .tw-widget-header[class*="tw-h-"] .tw-widget-header-content,
  .widget-header[class*="tw-h-"] .tw-widget-header-content {
    position: relative;
    z-index: 2;
  }
/* === FORTNITE SHOP === */
/**
 * FORRE_DARK - Fortnite Shop Widget CSS
 * Load: themes/FORRE_DARK/css/fortnite-shop.css
 *
 * Prefix: tw-fn-*
 * Design: 0px border-radius, CSS variables only, Roboto
 * Layout: Nytt i shoppen hero -> Serie-grupper -> Forsvinner = orange left-border
 * Cards: Rarity gradient bg + overlay + hover scale expansion
 * Jam Tracks: Separate tab view
 */

/* WIDGET SHELL */
.tw-fn-shop { font-family: var(--font-family); overflow: visible; }
.tw-fn-shop .tw-widget-body { padding: 0; }

/* HEADER EXTRAS */
.tw-fn-date {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-left: 6px;
}

.tw-fn-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-4);
    padding: 2px 8px;
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.tw-fn-source {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    color: var(--text-tertiary);
    background: var(--surface-3);
    text-transform: uppercase;
    white-space: nowrap;
}

.tw-fn-source-live {
    color: var(--success);
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.08);
}

.tw-fn-source-cache {
    color: var(--warning);
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.08);
}

.tw-fn-source-fallback {
    color: var(--danger);
    border-color: rgba(231,76,60,0.35);
    background: rgba(231,76,60,0.08);
}

.tw-fn-btn-icon {
    width: 24px; height: 24px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all var(--transition-speed);
}
.tw-fn-btn-icon:hover { color: var(--primary); border-color: var(--primary); }
.tw-fn-btn-icon.is-spinning i { animation: tw-fn-spin 0.8s linear infinite; }
@keyframes tw-fn-spin { to { transform: rotate(360deg); } }

/* FILTER BAR */
.tw-fn-filters {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
}
.tw-fn-filters::-webkit-scrollbar { display: none; }

.tw-fn-chip {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-speed);
}
.tw-fn-chip:hover { color: var(--text-secondary); border-color: #444; }
.tw-fn-chip.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Status toggle: Nytt idag */
.tw-fn-chip.is-new-toggle.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Status toggle: Forsvinner */
.tw-fn-chip.is-leaving-toggle { color: var(--warning); }
.tw-fn-chip.is-leaving-toggle.is-active {
    background: var(--warning);
    color: #000;
    border-color: var(--warning);
}

/* Jam Tracks tab button */
.tw-fn-chip.is-tracks-tab {
    color: var(--text-tertiary);
    border-style: dashed;
}
.tw-fn-chip.is-tracks-tab.is-active {
    background: rgba(39,150,242,0.10);
    color: var(--primary);
    border-color: rgba(39,150,242,0.40);
    border-style: solid;
}
.tw-fn-chip.is-tracks-tab i { margin-right: 4px; font-size: 9px; }

.tw-fn-divider {
    width: 1px; height: 16px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

.tw-fn-more {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-speed);
}
.tw-fn-more:hover { color: var(--text-secondary); border-color: #444; }
.tw-fn-more.is-open { border-style: solid; color: var(--primary); border-color: var(--primary); }
.tw-fn-more i { font-size: 9px; margin-right: 4px; }

.tw-fn-hidden-btn {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 600;
    color: var(--danger);
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.2);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
    transition: all var(--transition-speed);
}
.tw-fn-hidden-btn:hover { background: rgba(231,76,60,0.15); }

/* EXPANDED FILTERS */
.tw-fn-filters-expanded {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tw-fn-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tw-fn-filter-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tw-fn-filter-label i { color: var(--primary); font-size: 9px; }
.tw-fn-filter-chips { display: flex; flex-wrap: wrap; gap: 2px; }

/* STATES (loading, error, empty) */
.tw-fn-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}
.tw-fn-state i { font-size: 24px; opacity: 0.4; }
.tw-fn-state p { margin: 0; }
.tw-fn-state-error { color: var(--danger); }
.tw-fn-state-error i { opacity: 0.7; }

.tw-fn-spinner {
    width: 24px; height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: tw-fn-spin 0.7s linear infinite;
}

.tw-fn-retry {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.tw-fn-retry:hover { background: var(--primary-hover); }

/* SECTIONS */
.tw-fn-section { padding: 0 12px; }
.tw-fn-section + .tw-fn-section { border-top: 1px solid var(--border-light); }

.tw-fn-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 8px;
}

/* Enhetlig gradientbakgrund for alla kategorisektioner */
.tw-fn-section-category {
    position: relative;
    padding: 0 12px 12px;
    margin-top: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-light);
}

.tw-fn-section-category .tw-fn-section-head {
    background: var(--surface-3);
    padding: 12px 10px 8px;
    margin: 0 -12px 0;
    border-bottom: 1px solid var(--border-light);
}

.tw-fn-section-category .tw-fn-grid {
    padding: 10px 0 0;
}

.tw-fn-section-category + .tw-fn-section-category {
    border-top: none;
}
.tw-fn-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.tw-fn-section-title i { margin-right: 2px; }
.tw-fn-section-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-4);
    padding: 1px 6px;
    border: 1px solid var(--border);
}
.tw-fn-section-timer {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.tw-fn-section-timer i { font-size: 9px; }
.tw-fn-section-timer.is-urgent { color: var(--warning); }
.tw-fn-section-timer.is-urgent i { animation: tw-fn-pulse 1.5s ease infinite; }
@keyframes tw-fn-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* NYTT I SHOPPEN - HERO SECTION */
.tw-fn-section-hero {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-light);
}
.tw-fn-section-hero .tw-fn-section-title { color: var(--primary); }
.tw-fn-section-hero .tw-fn-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.tw-fn-section-hero .tw-fn-card { border-color: rgba(39,150,242,0.2); }
.tw-fn-section-hero .tw-fn-card:hover { border-color: rgba(39,150,242,0.4); }

/* I BUTIKEN - MERGED SMASERIER */
.tw-fn-inline-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--border);
    position: relative;
    margin: 6px 0 2px;
}
.tw-fn-inline-divider::after {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 600;
    color: rgba(255,255,255,0.18);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--surface-2);
    padding: 0 8px 0 0;
}

/* ITEM GRID */
.tw-fn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    padding-bottom: 12px;
}

/* ITEM CARD - rarity gradient bg + overlay */
.tw-fn-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    aspect-ratio: 1/1.15;
}

.tw-fn-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.tw-fn-card:hover .tw-fn-card-img { transform: scale(1.05); }

.tw-fn-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tw-fn-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s ease;
}

.tw-fn-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 28px 8px 8px;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}

.tw-fn-card-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tw-fn-card-price {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
}
.tw-fn-card-price img { width: 12px; height: 12px; object-fit: contain; }

.tw-fn-card-price-old {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    text-decoration: line-through;
    font-weight: 500;
}

.tw-fn-badge-new {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--primary);
    color: #fff;
}

.tw-fn-card-rarity {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    z-index: 3;
}

.tw-fn-card-hide {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 4;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s;
}
.tw-fn-card:hover .tw-fn-card-hide { opacity: 1; }
.tw-fn-card-hide:hover {
    color: var(--danger);
    border-color: rgba(231,76,60,0.3);
    background: rgba(231,76,60,0.15);
}

.tw-fn-card-gift {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 3;
    font-size: 9px;
    color: rgba(255,255,255,0.3);
}
.tw-fn-card:hover .tw-fn-card-gift { display: none; }

/* FORSVINNER - ORANGE LEFT BORDER */
.tw-fn-card.is-leaving {
    border-left: 3px solid var(--warning);
}

.tw-fn-leaving-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    color: var(--warning);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.tw-fn-leaving-tag i { font-size: 8px; }

/* HOVER EXPANSION */
.tw-fn-card.is-expanded {
    transform: scale(1.7);
    z-index: 20;
    box-shadow: 0 20px 50px rgba(0,0,0,0.65);
    border-color: rgba(255,255,255,0.2);
}
.tw-fn-card.is-expanded .tw-fn-card-img { transform: none; }

.tw-fn-card-expand-info {
    display: none;
    font-size: 8px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-top: 1px;
}
.tw-fn-card.is-expanded .tw-fn-card-expand-info { display: block; }

.tw-fn-origin-left   { transform-origin: left center; }
.tw-fn-origin-right  { transform-origin: right center; }
.tw-fn-origin-center { transform-origin: center center; }
.tw-fn-origin-tl     { transform-origin: left top; }
.tw-fn-origin-tr     { transform-origin: right top; }
.tw-fn-origin-bl     { transform-origin: left bottom; }
.tw-fn-origin-br     { transform-origin: right bottom; }

/* JAM TRACK CARD */
.tw-fn-card.is-track {
    aspect-ratio: auto;
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-3);
    border: 1px solid var(--border);
}
.tw-fn-card.is-track:hover {
    background: var(--surface-4);
    transform: none;
    box-shadow: none;
}

.tw-fn-track-art {
    width: 48px; height: 48px;
    object-fit: cover;
    flex-shrink: 0;
}
.tw-fn-track-info { flex: 1; min-width: 0; }
.tw-fn-track-title {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.tw-fn-track-artist {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}
.tw-fn-track-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}
.tw-fn-track-badge-new {
    font-size: 8px;
    font-weight: 700;
    color: var(--primary);
    border: 1px solid rgba(39,150,242,0.25);
    padding: 1px 5px;
    margin-left: 6px;
}

.tw-fn-tracks-view { display: none; }
.tw-fn-tracks-view.is-visible { display: block; }
.tw-fn-tracks-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

/* HIDDEN PANEL */
.tw-fn-hidden-panel {
    border-top: 1px solid var(--border);
    background: var(--surface-3);
    padding: 12px;
}
.tw-fn-hidden-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.tw-fn-hidden-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-fn-hidden-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-4);
    border: 1px solid var(--border);
    padding: 4px 8px 4px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.tw-fn-hidden-item img { width: 24px; height: 24px; object-fit: cover; }
.tw-fn-hidden-item button {
    background: none; border: none;
    color: var(--success);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    margin-left: 4px;
}
.tw-fn-hidden-item button:hover { color: #16a34a; }

/* MODAL */
.tw-fn-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tw-fn-modal {
    background: var(--surface-2);
    border: 1px solid var(--border);
    max-width: 420px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tw-fn-modal-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 28px; height: 28px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}
.tw-fn-modal-close:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

.tw-fn-modal-img {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}
.tw-fn-modal-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 16px;
}
.tw-fn-modal-img-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(0deg, var(--surface-2) 0%, transparent 100%);
}
.tw-fn-modal-rarity-badge {
    position: absolute;
    top: 10px; left: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    color: #fff;
}

.tw-fn-modal-body { padding: 16px; }
.tw-fn-modal-title { font-size: 18px; font-weight: 700; margin-bottom: 2px; color: var(--text-primary); }
.tw-fn-modal-type { font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 10px; }
.tw-fn-modal-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }

.tw-fn-modal-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tw-fn-modal-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid var(--border);
    background: var(--surface-4);
    color: var(--text-secondary);
}
.tw-fn-modal-tag i { color: var(--primary); margin-right: 4px; }

.tw-fn-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.tw-fn-modal-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.tw-fn-modal-price img { width: 18px; height: 18px; }
.tw-fn-modal-out { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.tw-fn-modal-out.is-leaving { color: var(--warning); font-weight: 600; }

.tw-fn-modal-hide {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid rgba(231,76,60,0.3);
    background: rgba(231,76,60,0.08);
    color: var(--danger);
    cursor: pointer;
    transition: all 0.15s;
}
.tw-fn-modal-hide:hover { background: rgba(231,76,60,0.15); }

/* Track difficulty in modal */
.tw-fn-modal-diff {
    background: var(--surface-4);
    padding: 10px;
    margin-bottom: 12px;
}
.tw-fn-modal-diff-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tw-fn-modal-diff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.tw-fn-modal-diff-item { font-size: 10px; color: var(--text-muted); }
.tw-fn-modal-diff-dots { display: flex; gap: 2px; margin-top: 2px; }
.tw-fn-modal-diff-dot { width: 8px; height: 8px; background: var(--border); }
.tw-fn-modal-diff-dot.is-filled { background: var(--primary); }

/* SCROLLBAR */
.tw-fn-shop ::-webkit-scrollbar { width: 4px; height: 4px; }
.tw-fn-shop ::-webkit-scrollbar-thumb { background: var(--border); }
.tw-fn-shop ::-webkit-scrollbar-track { background: transparent; }

/* RESPONSIVE */
@media (max-width: 600px) {
    .tw-fn-shop .tw-widget-header-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
        align-items: center;
    }

    .tw-fn-shop .tw-widget-title {
        font-size: 11px !important;
        letter-spacing: 0.06em;
    }

    .tw-fn-shop .tw-fn-date {
        grid-column: 1 / 2;
        margin-left: 0;
        font-size: 9px;
        color: var(--text-muted);
    }

    .tw-fn-shop .tw-widget-header-content > div {
        margin-left: 0 !important;
        gap: 4px !important;
    }

    .tw-fn-filters {
        padding: 6px 8px;
        gap: 3px;
    }

    .tw-fn-chip,
    .tw-fn-more,
    .tw-fn-hidden-btn {
        font-size: 10px;
        padding: 4px 8px;
        min-height: 30px;
    }

    .tw-fn-section,
    .tw-fn-section-category {
        padding-left: 8px;
        padding-right: 8px;
    }

    .tw-fn-section-head,
    .tw-fn-section-category .tw-fn-section-head {
        padding: 8px 0 6px;
        margin: 0;
        background: transparent;
        border-bottom: 0;
        gap: 6px;
    }

    .tw-fn-section-title {
        font-size: 11px;
    }

    .tw-fn-section-count,
    .tw-fn-section-timer {
        font-size: 9px;
    }

    .tw-fn-section-hero {
        border-bottom: 0;
        background: transparent;
    }

    .tw-fn-section-hero .tw-fn-section-head {
        display: none;
    }

    .tw-fn-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding-bottom: 8px;
    }

    .tw-fn-section-hero .tw-fn-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tw-fn-card {
        aspect-ratio: 1 / 1.02;
    }

    .tw-fn-card-overlay {
        padding: 20px 7px 6px;
    }

    .tw-fn-card-name {
        font-size: 10px;
    }

    .tw-fn-card-price {
        font-size: 11px;
        margin-top: 1px;
    }

    .tw-fn-card-price img {
        width: 11px;
        height: 11px;
    }

    .tw-fn-leaving-tag,
    .tw-fn-card-expand-info {
        font-size: 8px;
    }

    .tw-fn-card-hide {
        opacity: 1;
        width: 18px;
        height: 18px;
        top: 4px;
        right: 4px;
    }

    .tw-fn-card.is-track { grid-column: span 1; }
    .tw-fn-card.is-expanded { transform: none; }

    .tw-fn-hidden-panel {
        padding: 8px;
    }

    .tw-fn-modal {
        max-width: 360px;
    }
}

/* ===== Profile Dropdown ===== */
.tw-prof-dropdown-wrap { position: relative; }
.tw-prof-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 260px;
  background: #161616;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 9000;
  padding: 12px;
  display: none;
  animation: profDdIn 0.2s ease-out;
}
@keyframes profDdIn { from { opacity:0;transform:translateY(-6px) } to { opacity:1;transform:translateY(0) } }
.tw-prof-dropdown-open { display: block; }
.tw-prof-header { display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid #2a2a2a;margin-bottom:10px }
.tw-prof-avatar-wrap { flex-shrink:0 }
.tw-prof-avatar { width:40px;height:40px;border-radius:4px;border:1px solid #333;object-fit:cover }
.tw-prof-avatar-placeholder { width:40px;height:40px;border-radius:4px;border:1px solid #333;background:#242527;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#777 }
.tw-prof-info { flex:1;min-width:0 }
.tw-prof-name { font-size:13px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.tw-prof-epic-name { font-size:10px;color:#999;margin-top:1px }
.tw-prof-tags { display:flex;gap:4px;margin-top:3px }
.tw-prof-tag { font-size:9px;font-weight:700;padding:1px 5px;border-radius:2px;text-transform:uppercase }
.tw-prof-tag--rank { background:var(--primary);color:#fff }
.tw-prof-tag--level { background:#2a2a2a;color:#ccc }
.tw-prof-xp-bar { margin-bottom:8px }
.tw-prof-xp-bar-track { height:4px;background:#2a2a2a;border-radius:2px;overflow:hidden }
.tw-prof-xp-bar-fill { height:100%;background:var(--primary);border-radius:2px;transition:width 0.3s ease }
.tw-prof-xp-label { display:flex;justify-content:space-between;font-size:9px;color:#888;margin-top:3px }
.tw-prof-streak { display:flex;align-items:center;gap:4px;font-size:10px;color:#f59e0b;padding:4px 6px;background:rgba(245,158,11,0.08);border-radius:3px;margin-bottom:8px }
.tw-prof-platforms { display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap }
.tw-prof-platform-badge { font-size:9px;padding:2px 6px;background:#1f1f1f;border:1px solid #2a2a2a;border-radius:2px;color:#bbb }
.tw-prof-menu { display:flex;flex-direction:column;gap:2px;border-top:1px solid #2a2a2a;padding-top:8px;position:relative;overflow:hidden }
.tw-prof-menu-item { display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:3px;color:#ccc;text-decoration:none;font-size:12px;transition:background 0.15s,color 0.15s;z-index:1;position:relative }
.tw-prof-menu-item:hover { background:#1f1f1f;color:#fff }
.tw-prof-menu--primary { color:var(--primary);font-weight:700 }
.tw-prof-menu--primary:hover { background:rgba(39,150,242,0.1);color:var(--primary-hover) }
.tw-prof-menu--danger { color:#e74c3c }
.tw-prof-menu--danger:hover { background:rgba(231,76,60,0.1);color:#ff6b57 }
.tw-prof-menu--admin { color:#9b59b6 }
.tw-prof-menu--admin:hover { background:rgba(155,89,182,0.1);color:#af7ac5 }
.tw-prof-menu-item i { font-size:12px;width:14px;text-align:center }