/* === ICON SYSTEM (SVG mask-image, inherits color & scales with font-size) === */
.ic{display:inline-flex;width:1em;height:1em;vertical-align:-.15em;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex-shrink:0;}
.ic-clipboard{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 16H5V5h2v3h10V5h2v14z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-people{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-chart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-gamepad{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.58 16.09l-1.09-7.66C20.21 6.46 18.52 5 16.53 5H7.47C5.48 5 3.79 6.46 3.51 8.43l-1.09 7.66C2.2 17.63 3.39 19 4.94 19c.68 0 1.32-.27 1.8-.75L9 16h6l2.25 2.25c.48.48 1.13.75 1.8.75 1.56 0 2.75-1.37 2.53-2.91zM11 11H9v2H8v-2H6v-1h2V8h1v2h2v1zm4 2c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2-3c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-tv{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-graduation{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-gear{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-feed{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.18 15.64a2.18 2.18 0 010 4.36 2.18 2.18 0 010-4.36zM4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44zm0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-person{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-wheel{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-11V5h-2v4H7v2h4v4h2v-4h4V9h-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-sprout{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.787 7.531H5.393c.26 6.727 5.07 9.26 7.96 9.969-.514-2.076-.4-4.617.434-6.5h2l-1 3c-.5 1.5-.5 3-.5 3.5 0 .5 1.63.43 4.213-3.5 1.5-2.283 1.5-4.5 1.5-6.469h-4.213z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-trending{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-folder{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-wrench{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-warning{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-wifi-off{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zM3.41 1.31L2 2.72l2.05 2.05C1.91 5.76.59 6.82.36 7L12 21.5l3.91-4.87 3.32 3.32 1.41-1.41L3.41 1.31z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-moon{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 01-4.4 2.26 5.403 5.403 0 01-3.14-9.8c-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-bell{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-bell-off{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 18.69L7.84 6.14 5.27 3.49 4 4.76l2.8 2.8v.01c-.52.99-.8 2.16-.8 3.42v5l-2 2v1h13.73l2 2L21 19.72l-1-1.03zM12 22c1.11 0 2-.89 2-2h-4c0 1.11.89 2 2 2zm6-7.32V11c0-3.08-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.15.03-.29.08-.42.12-.1.03-.2.07-.3.11h-.01c-.01 0-.01 0-.02.01-.23.09-.46.2-.68.31 0 0-.01 0-.01.01L18 14.68z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-headphone{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-coffee{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-gem{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2l-4 6 10 14L22 8l-4-6H6zm.13 2h2.5L7.05 7H4.13l2-3zm9.34 5l-3.47 8.5L8.53 9h6.94zM10.5 9h3l-1.5 4.5L10.5 9zm5.37-2l-1.58-3h2.58l2 3h-3zm-1.96 0H10.1l1.58-3h.64l1.58 3zM4.5 9h2.94l2.5 6.5L4.5 9zm10.06 6.5L17.06 9H20l-5.44 6.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-flask{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2v6l5 8v2H6v-2l5-8V2h2zm1-2H10v1h1v7L6 16v4c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-4l-5-8V1h1V0z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-bulb{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-target{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-fire{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-coin{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.94s4.18 1.36 4.18 3.85c0 1.89-1.44 2.99-3.12 3.19z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-bolt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 21h-1l1-7H7.5c-.88 0-.33-.75-.31-.78C8.48 10.94 10.42 7.54 13.01 3h1l-1 7h3.51c.4 0 .62.19.4.66C12.97 17.55 11 21 11 21z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-trophy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-gift{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 00-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 12 7.4l3.38 4.6L17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-calendar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-close{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-plus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-trash{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-strength{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-celebrate{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-dot{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-card{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-palette{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1-.01-.83.67-1.5 1.49-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-chess{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 22H5v-2h14v2M17.16 8.26A4.96 4.96 0 0013 3.05V1h-2v2.05A4.96 4.96 0 006.84 8.26l-1.59 8.74h13.5l-1.59-8.74z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-memo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 000-1.42l-2.34-2.34a1.003 1.003 0 00-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-rocket{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5s4.5 2.04 4.5 10.5c0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-globe{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-thumbsup{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-menu{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
/* Shop-rewrite 2026-05-19: ic-* fra mockup public/concepts/shop.html */
.ic-arrow{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6l-1.4 1.4L18.2 11H4v2h14.2l-3.6 3.6L16 18l6-6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-arrow-r{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 16.6 13.2 12 8.6 7.4 10 6l6 6-6 6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-arrow-l{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 16.6 10.8 12l4.6-4.6L14 6l-6 6 6 6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-shop{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-7-3a3 3 0 0 1 3 3H9a3 3 0 0 1 3-3zm7 17H5V8h2v2a1 1 0 0 0 2 0V8h6v2a1 1 0 0 0 2 0V8h2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-snow{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L15.83 13H22z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-crown{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm0 3h14v2H5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-grid{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h7V4H4zm0 9h7v-7H4zm9 0h7v-7h-7zm0-16v7h7V4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-receipt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2zM19 19.09H5V4.91h14zM6 15h12v2H6zm0-4h12v2H6zm0-4h12v2H6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-ticket{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 10V6a2 2 0 0 0-2-2H4c-1.1 0-2 .9-2 2v4a2 2 0 0 1 0 4v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 1 0-4zm-9 7.5h-2v-2h2zm0-4.5h-2v-2h2zm0-4.5h-2v-2h2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-mask{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7 2 3 6 3 11c0 4 3 8 7 10 1-.5 2-1 2-1s1 .5 2 1c4-2 7-6 7-10 0-5-4-9-9-9zM9 11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm6 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-frame{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v18h18V3H3zm16 16H5V5h14v14zM7 7v10h10V7H7zm8 8H9V9h6v6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-rank{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-2V1H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V17H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 10.63 21 8.55 21 6V5c0-1.1-.9-2-2-2zM5 6V5h2v3.82C5.84 8.4 5 7.3 5 6zm14 0c0 1.3-.84 2.4-2 2.82V5h2v1zM3 21h18v2H3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-sparkles{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L13.6 9 L21 10.5 L13.6 12 L12 22 L10.4 12 L3 10.5 L10.4 9 Z M19 3 L19.6 5.4 L22 6 L19.6 6.6 L19 9 L18.4 6.6 L16 6 L18.4 5.4 Z M5 14 L5.6 16 L7.6 16.5 L5.6 17 L5 19 L4.4 17 L2.4 16.5 L4.4 16 Z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-phone{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-image{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}
.ic-warn{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m);}

/* ═══════════════════════════════════════════════════════════════════
   BØRNS VILKÅR · GLASSMORPHIC CRM DASHBOARD
   iOS 26 inspired · Deep translucency · Vivid color blobs
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface system (theme-switchable) ── */
  --bg:            #0a0f1c;              /* dyb midnight m. subtil blå */
  --app-bg:        rgba(14,20,34,0.88);  /* tæt veil - kun subtil glød slipper igennem */
  --sidebar-bg:    rgba(16,22,38,0.92);  /* læsbar, lidt translucent */
  --topbar-bg:     rgba(14,20,34,0.85);  /* tydelig topbar */
  --card-bg:       rgba(30,38,56,0.82);
  --card:          rgba(30,38,56,0.82);
  --card-hover-bg: rgba(38,48,70,0.90);
  --card-solid:    rgba(22,30,48,0.98);
  --surface:       rgba(255,255,255,0.06);
  --surface-hover: rgba(255,255,255,0.10);
  --border:        rgba(255,255,255,0.09);
  --border-md:     rgba(255,255,255,0.14);
  --border-focus:  rgba(var(--accent-rgb),0.35);
  --input-bg:      rgba(255,255,255,0.06);
  --scrollbar-thumb:rgba(255,255,255,0.12);
  --grid-line:     rgba(255,255,255,0.03);
  --glow-green:    rgba(var(--accent-rgb),0.08);
  --glow-blue:     rgba(51,154,240,0.07);
  --glow-purple:   rgba(132,94,247,0.06);
  /* ── Text ── */
  --text-1:        #edf2fa;
  --text-2:        #9ba5b8;
  --text-3:        var(--bh-ink-3, #7a849a);
  --text-muted:    var(--text-3);
  --text-primary:  var(--text-1);
  --text-secondary:var(--text-2);
  /* ── Accents ── */
  /* Brand-tokens (--accent/--green/--amber/--red/--teal/--yellow/--grad-green)
     fjernet 2026-06-03 — single source er nu bauhaus-skin.css §1 (loades sidst)
     med neutral foundation i design-tokens.css. Tidligere pegede de på var(--bh-*)
     UDEN fallback → uden skin = unset (ikke neutral). workspace-inline.css holder
     KUN layout/surface-tokens. */
  --accent-inv:    #ffffff;
  --green-light:   var(--accent-light);
  --blue:          #339af0;
  --blue-light:    rgba(51,154,240,0.10);
  --purple:        #845ef7;
  --cyan:          #22b8cf;
  /* ── Shadows ── */
  --sh-xs:         0 1px 2px rgba(0,0,0,0.4);
  --sh-sm:         0 2px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --sh-md:         0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  --sh-lg:         0 16px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
  --sh-app:        0 0 0 1px rgba(255,255,255,0.04), 0 24px 64px -12px rgba(0,0,0,0.6);
  --sh-inner:      inset 0 1px 2px rgba(0,0,0,0.3);
  --sh-glow:       0 0 40px rgba(var(--accent-rgb),0.06);
  --sh-card-hover: 0 12px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  /* ── Glassmorphism ── */
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);
  --glass-blur:    12px;
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.25);
  /* ── Typography ──
   * KUN Inter + SF Pro (2026-06-20). --bh-display = -apple-system,BlinkMacSystemFont,'Inter',… (SF Pro på Apple, Inter ellers).
   */
  --font-brand:    var(--bh-display);
  --font-body:     var(--bh-body);
  --font-mono:     var(--bh-mono);
  /* ── Radii ── (--r-sm/--r-md/--r consolidated to design-tokens.css, audit #25) */
  --r-xs:          6px;
  /* ── Z-index scale ── */
  --z-base:        1;
  --z-sticky:      100;
  --z-sidebar:     200;
  --z-dropdown:    300;
  --z-modal:       1000;
  --z-toast:       2000;
  --z-tooltip:     3000;
  --z-fullscreen:  9000;
  --z-login:       10000;
  --z-tour:        99000;
  --z-critical:    100000;
  /* --r-p consolidated to design-tokens.css (audit #25) */
  /* ── Text sizes ── (--text-xs/sm/md/lg consolidated to design-tokens.css, audit #25) */
  /* ── Layout ── */
  --sw:            240px;
  --sw-x:          72px;
  --th:            56px;
  /* Legacy aliases (use canonical names above instead) */
  --bg-surface:    var(--surface);
  --bg-20:         var(--surface);
  --bg-30:         rgba(255,255,255,0.05);
  /* --radius-sm consolidated to design-tokens.css (audit #25) - was var(--r-sm), now uses canonical 10px */
  /* ── Gradient accents ── */
  /* --grad-green fjernet 2026-06-03 → bauhaus-skin.css §1 (single source). */
  --grad-blue:     linear-gradient(135deg, #339af0, #22b8cf);
  --grad-purple:   linear-gradient(135deg, #845ef7, #da77f2);
  --grad-amber:    linear-gradient(135deg, #fcc419, #ff922b);
  --grad-red:      linear-gradient(135deg, #ff6b6b, #f06595);
  /* ── Chart colors (for JS access) ── */
  --chart-grid:    rgba(255,255,255,0.04);
  --chart-text:    #6b7589;
  --chart-tooltip-bg:   rgba(14,18,28,0.95);
  --chart-tooltip-text: #eaf0f9;
  --chart-tooltip-body: #8b95a8;
  --chart-tooltip-border: rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:            #fafbff;                 /* cool airy off-white m. periwinkle */
  --app-bg:        rgba(243,245,251,0.95);
  --sidebar-bg:    rgba(237,240,248,0.96);
  --topbar-bg:     rgba(248,250,254,0.88);
  --card-bg:       #ffffff;
  --card:          #ffffff;
  --card-hover-bg: #ffffff;
  --card-solid:    #ffffff;
  --surface:       rgba(0,0,0,0.04);
  --surface-hover: rgba(0,0,0,0.06);
  --border:        rgba(0,0,0,0.09);
  --border-md:     rgba(0,0,0,0.14);
  --border-focus:  rgba(var(--accent-rgb),0.50);
  --input-bg:      rgba(0,0,0,0.03);
  --scrollbar-thumb:rgba(0,0,0,0.14);
  --grid-line:     rgba(0,0,0,0.04);
  --glow-green:    rgba(var(--accent-rgb),0.12);
  --glow-blue:     rgba(43,125,233,0.10);
  --glow-purple:   rgba(112,72,214,0.08);
  /* ── Glassmorphism ── */
  --glass-bg:      rgba(255,255,255,0.70);
  --glass-border:  rgba(0,0,0,0.08);
  --glass-blur:    16px;
  --glass-shadow:  0 4px 20px rgba(0,0,0,0.06);
  --text-1:        #1a1d26;
  --text-2:        #4b5563;
  --text-3:        var(--bh-ink-3, #6b7280);
  --text-muted:    #6b7280;
  --text-primary:  #1a1d26;
  --text-secondary:#4b5563;
  /* Brand-tokens (--accent/--green/--amber/--red/--teal/--yellow/--grad-green)
     fjernet 2026-06-03 — single source = bauhaus-skin.css §1 (loades sidst).
     Behold kun accent-light/green-light (self-resolving rgba, ej --bh-*-uden-fallback). */
  --accent-light:  rgba(var(--accent-rgb),0.10);
  --accent-inv:    #ffffff;
  --green-light:   rgba(var(--accent-rgb),0.10);
  --blue:          #2b7de9;
  --blue-light:    rgba(43,125,233,0.10);
  --purple:        #6c42d0;
  --cyan:          #0e9ab5;
  --sh-xs:         0 1px 3px rgba(0,0,0,0.05);
  --sh-sm:         0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:         0 8px 28px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-lg:         0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --sh-app:        0 0 0 1px rgba(0,0,0,0.06), 0 24px 64px -12px rgba(0,0,0,0.10);
  --sh-inner:      inset 0 1px 3px rgba(0,0,0,0.04);
  --sh-glow:       0 0 40px rgba(var(--accent-rgb),0.06);
  --sh-card-hover: 0 12px 36px rgba(0,0,0,0.10), 0 0 0 1px rgba(var(--accent-rgb),0.12);
  /* --grad-green fjernet 2026-06-03 → bauhaus-skin.css §1 (single source). */
  --grad-blue:     linear-gradient(135deg, #2b7de9, #0ea5c0);
  --grad-purple:   linear-gradient(135deg, #7048d6, #c06adb);
  --grad-amber:    linear-gradient(135deg, #e09400, #e07020);
  --grad-red:      linear-gradient(135deg, #e5484d, #d6508f);
  --chart-grid:    rgba(0,0,0,0.06);
  --chart-text:    #6b7280;
  --chart-tooltip-bg:   rgba(255,255,255,0.97);
  --chart-tooltip-text: #1a1d26;
  --chart-tooltip-body: #4b5563;
  --chart-tooltip-border: rgba(0,0,0,0.10);
  /* Semantic colors for light theme.
     Guld/coin/medalje-overrides er FLYTTET til design/themes.css (delt lag) så
     alle 4 produkter får dæmpet guld i light mode - definér dem ikke her igen. */
  --color-on-accent: #fff;
  --color-on-dark: #fff;
  --color-streak: #c76a00;
  --color-danger-text: #dc3d42;
  --color-overlay: rgba(0,0,0,.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
  font-variant-ligatures: contextual;
  letter-spacing: -0.005em;
  position: relative;
}
/* Globale type-tweaks: tightere overskrifter, klarere body */
h1, h2, h3, h4, h5, .v4-headline, .v4-title, .glass-card-title, .login-title, .section-title, .emp-hero-name, .campaign-name, .app-modal-title {
  letter-spacing: -0.02em;
  font-feature-settings: "ss01", "cv11", "kern";
}
input, textarea, select, button { font-family: inherit; }
.font-mono, [class*="mono"], code, pre, kbd, samp { font-feature-settings: "tnum", "zero"; }

/* ── SUBTIL BG-TINT - kun 2 svage gradient-pletter, ingen animation ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(var(--accent-rgb),0.04) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 85%, rgba(var(--pop-rgb),0.03) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
body::after { content: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-md); }
::selection { background: rgba(var(--accent-rgb),0.20); }

/* A11Y: Genetabler focus-ring på interaktive elementer der har outline:none.
   Audit 2026-05-01 fandt 12+ steder med 'outline:none' (login-felt, søg,
   quick-note, modals, profile-select etc.) - keyboard-brugere mistede al
   visuel feedback. focus-visible matcher KUN keyboard-fokus (ikke mus-klik),
   så accent-ringen kommer kun frem ved Tab-navigation - ingen visuel
   regression for mus-brugere. WCAG 2.4.7. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, [role="button"]:focus-visible { outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* ── APP CONTAINER ──────────────────────────────────────────── */
#app-root {
  display: flex !important;
  width: calc(100vw - 16px);
  height: calc(100vh - 16px);
  max-width: 100%;
  background: var(--app-bg);
  border-radius: 16px;
  box-shadow: var(--sh-app);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
/* Ingen ambient blobs - data-dashboards har brug for stabilitet */
#app-root::before { content: none; }
#app-root::after { content: none; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sw);
  min-width: var(--sw);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: var(--sidebar-bg);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  transition: none;
  flex-shrink: 0;
}
@media (min-width: 769px) and (max-width: 1100px) {
  .sidebar { width: 68px !important; min-width: 68px !important; padding: 12px 6px; }
  .sidebar .nav-item-label, .sidebar .nav-section-label, .sidebar .brand-text { font-size: 0; overflow: hidden; width: 0; height: 0; opacity: 0; }
  .sidebar .nav-btn { justify-content: center; padding: 10px 0; }
  .sidebar .sidebar-header { justify-content: center; }
  .sidebar .sidebar-header .brand-name, .sidebar .sidebar-header .brand-sub { display: none; }
}
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 0 2px; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.sidebar-bottom { flex-shrink: 0; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
/* ── Collapsed state ── */
.sidebar.collapsed { width: var(--sw-x); min-width: var(--sw-x); padding: 12px 8px; }
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .sidebar-header { justify-content: center; gap: 0; padding: 4px 0; position: relative; }
.sidebar.collapsed .brand-icon { margin: 0; font-size: 1.05rem; }
.sidebar.collapsed .sidebar-toggle { position: absolute; right: -14px; top: 6px; width: 24px; height: 24px; border-radius: 50%; z-index: 10; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: var(--card-solid); border: 1px solid var(--border); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .nav-btn { justify-content: center; padding: 8px 0; gap: 0; border-radius: 8px; }
.sidebar.collapsed .nav-btn .nav-item-icon { margin: 0; }
.sidebar.collapsed .nav-folder { display: none; }
.sidebar.collapsed .sidebar-bottom { border-top: none; padding-top: 4px; margin-top: 2px; }
.sidebar.collapsed .sidebar-bottom .nav-btn { justify-content: center; padding: 8px 0; gap: 0; }
.sidebar.collapsed #view-mode-toggle { display: none !important; }
.sidebar.collapsed #sidebar-privacy-badge { padding: 2px 0; }
.sidebar.collapsed #sidebar-privacy-badge > div,
.sidebar.collapsed #sidebar-privacy-badge > span { padding: 6px; justify-content: center; }
.sidebar.collapsed #sidebar-privacy-badge .nav-item-label { display: none; }

/* ── Hover-expand: slide out over content when collapsed ── */
.sidebar.collapsed:hover {
  width: var(--sw); padding: 16px 10px;
  position: absolute; top: 0; left: 0; bottom: 0; height: 100%;
  z-index: 200; box-shadow: 4px 0 24px rgba(0,0,0,.18);
  background: var(--sidebar-bg);
}
.sidebar.collapsed:hover .nav-item-label,
.sidebar.collapsed:hover .nav-section-label,
.sidebar.collapsed:hover .brand-text { display: block; }
.sidebar.collapsed:hover .sidebar-header { justify-content: flex-start; gap: 10px; padding: 2px 6px; }
.sidebar.collapsed:hover .nav-btn { justify-content: flex-start; padding: 7px 10px; gap: 10px; }
.sidebar.collapsed:hover .nav-folder { display: block; }
.sidebar.collapsed:hover .sidebar-bottom { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.sidebar.collapsed:hover .sidebar-bottom .nav-btn { justify-content: flex-start; padding: 7px 10px; gap: 10px; }
.sidebar.collapsed:hover #view-mode-toggle { display: block !important; }
.sidebar.collapsed:hover #sidebar-privacy-badge { padding: 4px 10px; }
.sidebar.collapsed:hover #sidebar-privacy-badge > div,
.sidebar.collapsed:hover #sidebar-privacy-badge > span { padding: 6px 10px; justify-content: flex-start; }
.sidebar.collapsed:hover #sidebar-privacy-badge .nav-item-label { display: inline; }
.sidebar.collapsed:hover .sidebar-toggle { position: static; width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.sidebar.collapsed:hover .sidebar-toggle svg { transform: rotate(0deg); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 14px 4px 18px;
  margin-bottom: 20px;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; }
.brand-icon {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--bh-body);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-1);
  text-transform: lowercase;
  flex-shrink: 0;
  padding: 0;
  text-decoration: none;
}
.brand-icon .dot {
  width: 0.16em; height: 0.16em;
  margin-left: 0.04em;
  transform: translateY(0);
}
.brand-icon .dot {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 0.04em;
  vertical-align: baseline;
  transform: translateY(0);
}
/* Tenant override: when a custom logo image is injected, restore tile dimensions */
.brand-icon img {
  width: 34px; height: 34px;
  border-radius: 10px;
  object-fit: contain;
}
/* brand-text (app name + org name + BETA badge) hidden by design.
   The ccm. wordmark IS the brand. Markup kept so JS can still populate
   values without errors. */
.brand-text { display: none; }

.sidebar-toggle {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-3); width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.7rem; margin-left: auto;
  transition: all 0.15s;
}
.sidebar-toggle:hover { background: var(--scrollbar-thumb); color: var(--text-1); }

.nav-section-label {
  font-size: 0.55rem; font-weight: 700; color: var(--text-3);
  padding: 2px 12px 4px; text-transform: uppercase; letter-spacing: 0.8px;
  margin-top: 10px;
}
.nav-section-label:first-child { margin-top: 2px; }

.sidebar .nav-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px;
  background: transparent; border: none;
  color: var(--text-2);
  font-family: var(--font-brand); font-size: 0.78rem; font-weight: 500;
  cursor: pointer; border-radius: 8px; margin-bottom: 1px;
  transition: background .15s, color .15s; text-align: left;
  position: relative;
}
.nav-item-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-3); transition: color .15s; }
.nav-item-icon svg { width: 15px; height: 15px; }
.sidebar .nav-btn:hover .nav-item-icon, .sidebar .nav-btn.active .nav-item-icon { color: var(--accent); }
.sidebar .nav-btn.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 600;
}
/* Subtil left-indicator i stedet for fuldt udfyldt pill - Linear-style */
.sidebar .nav-btn.active::before {
  content: "";
  position: absolute;
  left: -2px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.sidebar .nav-btn:hover:not(.active) {
  background: var(--surface);
  color: var(--text-1);
}
/* Override style.css/improvements.css focus-ring der overlapper active-state */
.sidebar .nav-btn:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 1px;
}

/* ── NAV FOLDER / SUBMENU SYSTEM ───────────────────────────── */
.nav-folder { margin-bottom: 2px; }
.nav-folder-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 6px 10px;
  background: transparent; border: none;
  color: var(--text-3);
  font-family: var(--font-brand); font-size: 0.62rem; font-weight: 700;
  cursor: pointer; border-radius: 6px;
  transition: color .15s; text-align: left;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.nav-folder.open > .nav-folder-toggle { color: var(--text-2); }
.nav-folder-toggle:hover { color: var(--text-1); }
.nav-folder-chevron {
  width: 12px; height: 12px; flex-shrink: 0; color: var(--text-3);
  transition: transform 0.2s ease;
}
.nav-folder.open .nav-folder-chevron { transform: rotate(90deg); color: var(--accent); }
.nav-folder-items {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.25s ease, opacity 0.15s ease;
  margin-top: 1px; padding-left: 6px;
}
.nav-folder.open .nav-folder-items { max-height: 500px; opacity: 1; }
.nav-btn.nav-sub { padding: 7px 12px 7px 18px; font-size: 0.78rem; font-weight: 500; }
.nav-btn.nav-sub .nav-item-icon { width: 16px; height: 16px; }
.nav-btn.nav-sub .nav-item-icon svg { width: 14px; height: 14px; }
.nav-btn.nav-sub.active { font-weight: 600; }
.sidebar.collapsed .nav-folder-items { display: none; }
.sidebar.collapsed .nav-folder-toggle .nav-item-label,
.sidebar.collapsed .nav-folder-chevron { display: none; }

/* ── MAIN AREA ──────────────────────────────────────────────── */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  height: var(--th); min-height: var(--th);
  padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: var(--z-sticky, 100);
  gap: 12px;
}
.topbar-brand {
  display: none;
  font-family: var(--bh-body);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-1);
  text-transform: lowercase;
  align-items: baseline;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0 2px;
}
.topbar-brand .dot {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 0.04em;
  vertical-align: baseline;
  transform: translateY(0);
}
/* Show topbar-brand when sidebar is collapsed (icon-rail) so logo always visible */
.sidebar.collapsed ~ .main-area .topbar-brand { display: inline-flex; }
@media (max-width: 768px) {
  .topbar-brand { display: inline-flex; }
}
.topbar-title {
  font-family: var(--font-brand); font-size: 1.25rem; font-weight: 700;
  color: var(--text-1); letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 0; flex-wrap: wrap;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.widget-actions { display: flex; gap: 6px; }
.widget-action-btn {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--font-brand); font-size: 0.75rem; font-weight: 600;
  color: var(--text-2); cursor: pointer; transition: all 0.2s;
}
.widget-action-btn:hover { background: rgba(var(--accent-rgb),0.08); border-color: rgba(var(--accent-rgb),0.2); color: var(--accent); }

.user-pill {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 12px 4px 6px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; transition: all 0.2s;
}
.user-pill:hover { background: var(--bh-chrome-fill-hover); }
.user-avatar { width: 28px; height: 28px; background: rgba(var(--accent-rgb),0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.user-name { font-family: var(--font-brand); font-weight: 600; font-size: 0.78rem; color: var(--text-1); }

/* ── CONTENT ────────────────────────────────────────────────── */
.content-wrapper { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 24px 32px; background: transparent !important; max-width: 100%; }
.content-wrapper > .view { max-width: 1600px; margin: 0 auto; }
.view { display: none; animation: viewIn 0.35s ease; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── CARD UNIVERSAL - Solid, readable ─────────────────────── */
.kpi-card, .widget-card, .glass-card, .emp-card, .campaign-card,
.upload-box, .spectrum-chart-card, .campaign-overview-card,
.goal-card, .spectrum-legend-card, .coaching-card, .onboarding-tracker, .campaign-hour-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-xs);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  position: relative;
}
.kpi-card::before, .widget-card::before, .glass-card::before,
.emp-card::before, .campaign-card::before, .upload-box::before {
  content: none;
}
.kpi-card:hover, .widget-card:hover, .glass-card:hover,
.emp-card:hover, .campaign-card:hover, .upload-box:hover, .campaign-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--border-md);
}

/* ── KPI GRID ───────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card { padding: 16px 16px; position: relative; overflow: hidden; border-top: 3px solid var(--accent); }
.kpi-card:nth-child(2) { border-top-color: var(--blue); }
.kpi-card:nth-child(3) { border-top-color: var(--purple); }
.kpi-card:nth-child(4) { border-top-color: var(--amber); }
.kpi-card:nth-child(5) { border-top-color: var(--teal); }
.kpi-card:nth-child(6) { border-top-color: var(--red); }
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 var(--r) 0 80px;
  background: rgba(var(--accent-rgb),0.04);
  pointer-events: none;
}
.kpi-card:nth-child(2)::after { background: rgba(51,154,240,0.04); }
.kpi-card:nth-child(3)::after { background: rgba(132,94,247,0.04); }
.kpi-card:nth-child(4)::after { background: rgba(var(--pop-rgb),0.04); }
.kpi-card .kpi-label, .kpi-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 4px;
}
.kpi-card .kpi-value, .kpi-value {
  font-family: var(--font-brand); font-size: 1.4rem; font-weight: 800;
  color: var(--text-1); letter-spacing: -0.02em;
}
.kpi-value.green { color: var(--green); }
.kpi-value.amber { color: var(--amber); }
.kpi-value.blue  { color: var(--blue); }
.kpi-value.purple{ color: var(--purple); }
.kpi-card .kpi-sub, .kpi-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 6px; }

/* ── DASHBOARD GRID ─────────────────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.glass-card { overflow: hidden; }
.glass-card-header { padding: 12px 16px 10px; border-bottom: 2px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--surface); }
.glass-card-title { font-family: var(--font-brand); font-size: 0.95rem; font-weight: 700; color: var(--text-1); letter-spacing: -.01em; }
.glass-card-body { padding: 4px 16px 14px; }

/* ── DATA TABLES ────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
  text-align: left; padding: 10px 12px; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
  border-bottom: 2px solid var(--accent); cursor: pointer; user-select: none;
  transition: color 0.12s; background: var(--surface); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.data-table th:hover { color: var(--accent); }
.data-table th.sort-asc::after { content: ' \u25b2'; color: var(--accent); font-size: .55rem; }
.data-table th.sort-desc::after { content: ' \u25bc'; color: var(--accent); font-size: .55rem; }
.data-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-size: 0.9rem; color: var(--text-2);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr { cursor: pointer; transition: background 0.12s ease; }
.data-table tr:hover { background: var(--accent-light); }
.data-table tbody tr:nth-child(even) { background: var(--surface); }
.data-table tbody tr:nth-child(even):hover { background: var(--accent-light); }
.data-table .mono, .data-table td[class="mono"] { text-align: right; font-family: var(--font-mono);font-variant-numeric:tabular-nums; }
.mono { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.82rem; }

/* ── TAGS ───────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.tag-green { background: rgba(var(--accent-rgb),0.10); color: var(--green); border-color: rgba(var(--accent-rgb),0.15); }
.tag-amber { background: rgba(var(--pop-rgb),0.10); color: var(--amber); }
.tag-blue  { background: var(--blue-light); color: var(--blue); }
.tag-purple{ background: rgba(132,94,247,0.10); color: var(--purple); }
.tag-red   { background: rgba(var(--danger-rgb),0.10); color: var(--red); }
.tag-gray  { background: rgba(0,0,0,0.04); color: var(--text-3); }
.type-badge { display: inline-flex; font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.04em; }
.badge-fuldtid { background: var(--blue-light); color: var(--blue); }
.badge-deltid  { background: rgba(132,94,247,0.10); color: var(--purple); }

/* ── PROGRESS BARS ──────────────────────────────────────────── */
.goal-bar-wrap { margin: 6px 0; }
.goal-bar-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.goal-bar-track { height: 6px; background: rgba(0,0,0,0.06); border-radius: 10px; overflow: hidden; }
.goal-bar-fill { height: 100%; border-radius: 10px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.goal-bar-mini { height: 4px; background: var(--border); border-radius: var(--r-p); overflow: hidden; }
.mini-bar-wrap { display: flex; align-items: center; gap: 8px; }
.mini-bar-track { flex: 1; height: 5px; background: rgba(0,0,0,0.05); border-radius: 10px; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 10px; transition: width 0.4s ease; }
.mini-bar-val { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }

/* ── UPLOAD ─────────────────────────────────────────────────── */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.upload-box { text-align: center; cursor: pointer; padding: 28px 20px; }
.upload-box h3 { font-family: var(--font-brand); font-weight: 700; color: var(--text-1); margin: 10px 0 4px; font-size: 0.9rem; }
.upload-box p { font-size: 0.72rem; color: var(--text-3); }

/* ── CAMPAIGNS ──────────────────────────────────────────────── */
.campaign-card { padding: 20px; cursor: pointer; }
.campaign-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.campaign-name { font-family: var(--font-brand); font-weight: 700; font-size: 0.95rem; color: var(--text-1); }
.campaign-card-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.campaign-card-footer { margin-top: 6px; }
.campaign-meta { font-size: 0.78rem; color: var(--text-3); }
.campaign-coach-msg { font-size: 0.82rem; color: var(--text-2); line-height: 1.45; padding: 8px 10px; background: var(--surface); border-radius: var(--r-xs); }

/* ── STAT ITEMS ─────────────────────────────────────────────── */
.stat-item { text-align: center; }
.stat-label { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.stat-value { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
.stat-value.green { color: var(--green); } .stat-value.amber { color: var(--amber); } .stat-value.purple { color: var(--purple); }

/* ── EMPLOYEES ──────────────────────────────────────────────── */
.employees-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.emp-card { padding: 18px 20px; cursor: pointer; }
.emp-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.emp-card-name { font-family: var(--font-brand); font-weight: 700; font-size: 0.9rem; color: var(--text-1); }
.emp-card-type { font-size: 0.7rem; color: var(--text-3); }
.emp-card-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.emp-stat-label { font-size: 0.6rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.emp-stat-val { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.85rem; font-weight: 600; }
.emp-card-adv { font-size: 0.7rem; color: var(--blue); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.emp-name { font-weight: 600; color: var(--text-1); cursor: pointer; }
.emp-name:hover { color: var(--accent); }
.emp-hero-name { font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; letter-spacing: -.02em; }
.emp-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── SECTIONS ───────────────────────────────────────────────── */
.section-card { border: 1px solid var(--glass-border); border-radius: var(--r); margin-bottom: 14px; overflow: hidden; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transition: border-color 0.2s ease; }
.section-card.open { border-left: 3px solid var(--accent); box-shadow: var(--glass-shadow); }
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; cursor: pointer; user-select: none; transition: background 0.15s ease; border-bottom: 1px solid transparent; }
.section-card.open > .section-header { border-bottom-color: var(--border); }
.section-header:hover { background: var(--surface); }
.section-title-row { display: flex; align-items: center; gap: 10px; }
.section-icon { font-size: 0.9rem; }
.section-title { font-family: var(--font-brand); font-weight: 700; font-size: 1.05rem; color: var(--text-1); letter-spacing: -.01em; }
.section-badge { font-size: 0.72rem; font-weight: 700; background: var(--accent-light); color: var(--accent); padding: 2px 8px; border-radius: var(--r-p); }
.section-chevron { font-size: 0.75rem; color: var(--text-3); transition: transform 0.25s ease; }
.section-card.open .section-chevron { transform: rotate(180deg); }
.section-body { padding: 0 20px 18px; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease; }
.section-card:not(.open) .section-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.section-card.open .section-body { max-height: 5000px; opacity: 1; }

/* ── LOGIN ──────────────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(var(--accent-rgb),0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(var(--accent-rgb),0.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(var(--pop-rgb),0.03) 0%, transparent 50%),
    linear-gradient(135deg, #060810, #0d1018 30%, #060810);
}
/* ── LOGIN: Subtle entrance ── */
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-card, .role-picker-card {
  background: var(--card-solid);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--bh-edge);
  border-radius: 16px; padding: 44px; width: 420px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: loginCardIn 0.6s cubic-bezier(.4,0,.2,1) both;
}
.login-bg-glow {
  position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.login-bg-glow--green {
  width: 300px; height: 300px; background: rgba(var(--accent-rgb),.08);
  top: 10%; left: 15%; animation: loginGlowFloat 8s ease-in-out infinite alternate;
}
.login-bg-glow--blue {
  width: 250px; height: 250px; background: rgba(51,154,240,.06);
  bottom: 15%; right: 10%; animation: loginGlowFloat 10s ease-in-out infinite alternate-reverse;
}
@keyframes loginGlowFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.1); }
  100% { transform: translate(-15px, 20px) scale(.95); }
}
/* Conversational register animations */
@keyframes regBubbleIn { from { opacity:0; transform:translateY(10px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes regDot { from { opacity:.2; transform:scale(.7); } to { opacity:.8; transform:scale(1); } }
#reg-chat { display:flex; flex-direction:column; }
/* Onboarding wizard */
@keyframes obFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes obFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes obCardIn { from { opacity:0; transform:translateY(24px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes obIconBounce { 0% { transform:scale(0) rotate(-10deg); } 60% { transform:scale(1.2) rotate(5deg); } 100% { transform:scale(1) rotate(0); } }
/* Tour */
@keyframes tourHighlight { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes tourTooltipIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.login-title { font-family: var(--font-brand); font-size: 1.8rem; font-weight: 900; text-align: center; color: var(--text-1); letter-spacing: -0.02em; }
.login-subtitle { font-size: 0.82rem; color: var(--text-3); text-align: center; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 0.68rem; font-weight: 700; color: var(--text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.login-field input { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-family: var(--font-body); font-size: 0.88rem; color: var(--text-1); outline: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; box-sizing: border-box; }
.login-field input:focus { border-color: var(--accent); box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.08); transform: translateY(-1px); }
.login-error { color: var(--red); font-size: 0.78rem; text-align: center; margin-bottom: 10px; min-height: 1.2em; }
.login-btn { display: block; width: 100%; background: linear-gradient(135deg, var(--accent), var(--accent)); color: white; border: none; border-radius: 8px; padding: 14px; font-family: var(--font-brand); font-weight: 800; font-size: 0.92rem; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.20); letter-spacing: 0.01em; position: relative; overflow: hidden; }
.login-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transition: left .5s; }
.login-btn:hover::after { left: 100%; }
.login-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 28px rgba(var(--accent-rgb),0.35); }
.login-btn:active { transform: scale(0.98); }
.login-footer { margin-top: 24px; text-align: center; font-size: 0.68rem; color: var(--text-3); opacity: 0.6; }
.login-logo { text-align: center; margin-bottom: 12px; }
#login-card-main > div:first-child { }

/* ── UPLOAD: Drag-and-drop styled cards ── */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.upload-box { position: relative; background: var(--card-solid); border: 2px dashed var(--border); border-radius: 16px; padding: 24px 20px; cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1); text-align: center; overflow: hidden; }
.upload-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb),0.06), transparent 70%); opacity: 0; transition: opacity 0.3s; }
.upload-box:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.upload-box:hover::before { opacity: 1; }
.upload-box.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb),0.04); transform: scale(1.02); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); }
.upload-box h3 { font-family: var(--font-brand); font-size: 0.88rem; font-weight: 700; color: var(--text-1); margin: 10px 0 6px; }
.upload-box p { font-size: 0.68rem; color: var(--text-3); line-height: 1.4; margin: 0; }
.upload-box > div:first-child { font-size: 2.2rem; transition: transform 0.3s; }
.upload-box:hover > div:first-child { transform: scale(1.15) rotate(-5deg); }

/* ── TABLES: Sticky headers, zebra, polish ── */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
table thead th { position: sticky; top: 0; z-index: 5; background: var(--card-solid); backdrop-filter: blur(8px); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); padding: 10px 12px; border-bottom: 2px solid var(--border); white-space: nowrap; }
table tbody tr { transition: background 0.12s ease; }
table tbody tr:nth-child(even) { background: rgba(255,255,255,0.01); }
table tbody tr:hover { background: rgba(var(--accent-rgb),0.04) !important; }
table tbody td { padding: 8px 12px; font-size: 0.78rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
[data-theme="light"] table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
[data-theme="light"] table tbody tr:hover { background: rgba(var(--accent-rgb),0.05) !important; }
[data-theme="light"] table tbody td { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] table thead th { background: var(--card-solid); border-bottom-color: rgba(0,0,0,0.1); }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 30000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--card-solid); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--r-sm); padding: 14px 18px; box-shadow: var(--sh-md); font-size: 0.82rem; font-weight: 600; font-family: var(--font-brand); display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); transform: translateX(120%); opacity: 0; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }
.toast-success { border-left: 4px solid var(--green); }
.toast-error   { border-left: 4px solid var(--red); }
.toast-info    { border-left: 4px solid var(--blue); }
.toast-warning { border-left: 4px solid var(--amber); }

/* ── MODALS ──────────────────────────────────────────────────── */
.app-modal { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
.app-modal.open { display: flex; }
.app-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app-modal-container { position: relative; z-index: 1; background: var(--card-solid); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-radius: 16px; box-shadow: var(--sh-lg); width: 90%; max-width: 800px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); animation: viewIn 0.3s ease; }
.app-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.app-modal-title { font-family: var(--font-brand); font-size: 1.25rem; font-weight: 700; color: var(--text-1); letter-spacing: -.015em; }
.app-modal-close { background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); font-weight: bold; transition: all 0.15s; }
.app-modal-close:hover { background: rgba(var(--danger-rgb),0.08); color: var(--red); }
.app-modal-body { padding: 24px; overflow-y: auto; flex: 1; }

/* ── SPECTRUM ───────────────────────────────────────────────── */
#spectrum-content { padding: 0; }
.spectrum-header { margin-bottom: 20px; }
.spectrum-title { font-family: var(--font-brand); font-size: 1.1rem; font-weight: 800; color: var(--text-1); margin-bottom: 14px; }
.spectrum-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spectrum-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.spectrum-camp-tab { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-p); padding: 6px 14px; font-size: 0.76rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all 0.15s; }
.spectrum-camp-tab.active { background: var(--accent-light); border-color: rgba(var(--accent-rgb),0.2); color: var(--accent); }
.spectrum-camp-tab:hover:not(.active) { background: var(--surface-hover); }
.spectrum-type-toggle { display: flex; gap: 4px; }
.spectrum-type-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-p); padding: 5px 12px; font-size: 0.72rem; font-weight: 600; cursor: pointer; color: var(--text-2); transition: all 0.12s; }
.spectrum-type-btn.active { background: var(--accent-light); border-color: rgba(var(--accent-rgb),0.2); color: var(--accent); }
.spectrum-type-btn:hover:not(.active) { background: var(--surface-hover); }
.spectrum-helper { font-size: 0.68rem; color: var(--text-3); }
.spectrum-canvas-wrap canvas { transition: filter 0.2s; }
.spectrum-canvas-wrap canvas:hover { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.3)); }
.legend-cards-horizontal { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.legend-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.legend-card-header { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.legend-card-body { padding: 10px 14px; font-size: 0.73rem; line-height: 1.5; }

/* ── FUT ────────────────────────────────────────────────────── */
.fut-planner-container { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.fut-bench { padding: 16px; max-height: 70vh; overflow-y: auto; }
.fut-bench h3 { font-family: var(--font-brand); font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; color: var(--text-1); }
.fut-bench-hint { font-size: 0.7rem; color: var(--text-3); margin-bottom: 14px; }
.fut-player { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 10px 14px; margin-bottom: 6px; cursor: grab; transition: all 0.15s; user-select: none; }
.fut-player:active { cursor: grabbing; }
.fut-player:hover { background: var(--surface-hover); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.fut-player .p-name { font-family: var(--font-brand); font-weight: 600; font-size: 0.82rem; color: var(--text-1); }
.fut-player .p-stat { font-size: 0.7rem; color: var(--text-3); margin-top: 3px; }
.fut-pitch-wrapper { display: flex; flex-direction: column; gap: 12px; }
.fut-scoreboard { display: flex; gap: 24px; padding: 16px 20px; }
.score-box .label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 4px; }
.score-box .value { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 1.3rem; font-weight: 700; color: var(--text-1); }
.score-box .value.highlight { color: var(--green); }
.fut-pitch { min-height: 300px; display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; align-content: flex-start; border: 2px dashed var(--border); border-radius: var(--r); transition: border-color 0.15s, background 0.15s; }
.fut-pitch.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb),0.03); }
.fut-pitch-empty { width: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 0.8rem; }

/* ── COACHING ───────────────────────────────────────────────── */
.coaching-card { margin-bottom: 12px; overflow: hidden; }
.coaching-card-header { transition: background 0.12s; }
.coaching-card-header:hover { background: rgba(0,0,0,0.01); }
.coaching-card-detail { padding: 20px 24px; }
.coach-model-box { background: var(--surface); border-radius: var(--r-sm); padding: 16px; margin-bottom: 12px; border-left: 4px solid var(--blue); }
.coach-model-title { font-family: var(--font-brand); font-weight: 700; font-size: 0.9rem; color: var(--text-1); margin-bottom: 10px; }
.coach-model-content { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; }
.coach-model-content p { margin-bottom: 8px; }
.coach-model-content ul, .coach-model-content ol { padding-left: 18px; margin-bottom: 8px; }
.coach-model-content li { margin-bottom: 4px; }

/* ── ONBOARDING ─────────────────────────────────────────────── */
.ob-header { display:flex; justify-content:space-between; align-items:flex-start; padding:14px 18px; border-bottom:1px solid var(--border); }
.ob-title { font-family:var(--font-brand); font-size:.87rem; font-weight:700; color:var(--text-1); }
.ob-subtitle { font-size:.65rem; color:var(--text-3); margin-top:2px; }
.ob-score-val { font-family:var(--font-mono);font-variant-numeric:tabular-nums; font-size:1.2rem; font-weight:600; text-align:right; }
.ob-score-label { font-size:.6rem; color:var(--text-3); margin-top:1px; text-align:right; }
.ob-body { padding:14px 18px; }
.ob-timeline { display:flex; margin-bottom:14px; position:relative; }
.ob-timeline::before { content:''; position:absolute; left:0; right:0; top:22px; height:2px; background:var(--surface); border-radius:2px; z-index:0; }
.ob-month { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; z-index:1; }
.ob-dot { width:9px; height:9px; border-radius:50%; border:2px solid var(--border-md); background:var(--surface-hover); flex-shrink:0; transition:all .25s; }
.ob-dot.active,.ob-dot.above { border-color:var(--green); background:var(--green); box-shadow:0 0 8px rgba(var(--accent-rgb),.25); }
.ob-dot.below { border-color:var(--amber); background:var(--amber); }
.ob-month-label { font-size:.57rem; color:var(--text-3); text-align:center; }
.ob-month-val { font-family:var(--font-mono);font-variant-numeric:tabular-nums; font-size:.65rem; font-weight:600; text-align:center; }
.ob-month-val.above{color:var(--green)} .ob-month-val.below{color:var(--amber)} .ob-month-val.empty{color:var(--text-3)}
.ob-chart-wrap { height:130px; position:relative; margin-bottom:10px; }
.ob-legend { display:flex; gap:14px; font-size:.66rem; color:var(--text-3); flex-wrap:wrap; }
.ob-legend-item { display:flex; align-items:center; gap:4px; }
.ob-legend-line { width:18px; height:2px; border-radius:1px; }
.ob-legend-line.emp { background:var(--blue); } .ob-legend-line.baseline { background:var(--text-3); }
.ob-verdict { background:var(--surface); border-radius:var(--r-xs); padding:10px 14px; font-size:.76rem; line-height:1.5; color:var(--text-2); margin-top:11px; border-left:3px solid var(--green); }
.ob-verdict.negative{border-color:var(--amber)} .ob-verdict.neutral{border-color:var(--text-3)}

/* ── WIDGET SYSTEM ──────────────────────────────────────────── */
#widget-grid { min-height: 80px; }
.widget-card { position: relative; cursor: default; overflow: hidden; }
.widget-card[draggable="true"] { user-select: none; }
.widget-card.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.widget-body { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.widget-body::-webkit-scrollbar { width: 3px; }
.widget-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }

/* ── SEARCH ─────────────────────────────────────────────────── */
.global-search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-input, #global-search { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; padding-right: 42px; font-size: 0.76rem; font-family: var(--font-body); color: var(--text-1); outline: none; transition: all 0.25s; width: 200px; }
#global-search:focus, .search-input:focus { width: 280px; border-color: rgba(var(--accent-rgb),0.3); }
#global-search:focus + .search-kbd { opacity: 0; }
.search-kbd { position: absolute; right: 8px; pointer-events: none; font-size: .55rem; font-family: var(--font-mono);font-variant-numeric:tabular-nums; padding: 2px 6px; border-radius: 4px; background: var(--border); color: var(--text-3); border: 1px solid var(--bh-line); transition: opacity .15s; opacity: .7; }
.global-search-results { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-lg); max-height: 400px; overflow-y: auto; z-index: 1000; display: none; }
.search-result-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; }
.search-result-item:hover, .search-result-item.active { background: rgba(var(--accent-rgb),.06); }
.search-result-item.active { outline: none; }
.search-group-label { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 8px 12px 4px; }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; color: var(--text-3); }
.es-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: 12px; }
.es-title { font-family: var(--font-brand); font-weight: 700; font-size: 0.95rem; color: var(--text-2); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn { font-family: var(--font-brand); font-size: var(--text-sm, .78rem); font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all 0.2s; }  /* knap-størrelse ENS på alle 4 (8px14px/--text-sm) */
.btn:hover { background: var(--scrollbar-thumb); border-color: var(--border-md); }
.btn-primary { background: var(--grad-green); border: none; color: white; box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.2); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.3); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 12px; font-size: 0.74rem; }
.btn-back { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-family: var(--font-brand); font-weight: 600; font-size: 0.82rem; color: var(--text-2); transition: all 0.15s; }
.btn-back:hover { background: var(--surface-hover); }
.btn-mode { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; font-family: var(--font-brand); font-size: 0.76rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all 0.15s; }
.btn-mode.active, .btn-mode:hover { background: rgba(var(--accent-rgb),0.08); border-color: rgba(var(--accent-rgb),0.18); color: var(--accent); }

/* ── MISC ───────────────────────────────────────────────────── */
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--text-3); cursor: help; margin-left: 6px; transition: all 0.12s; }
.help-icon:hover { background: var(--accent); color: white; border-color: var(--accent); transform: scale(1.1); }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.goal-card { padding: 14px 16px; cursor: pointer; }
.goal-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.goal-name { font-family: var(--font-brand); font-weight: 700; font-size: .84rem; color: var(--text-1); }
.goal-card-metric { font-size: .75rem; color: var(--text-2); margin-bottom: 8px; }
.campaign-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.campaign-overview-card { padding: 14px 16px; cursor: pointer; }
.campaign-overview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.campaign-overview-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.campaign-overview-footer { font-size: .68rem; color: var(--text-3); margin-top: 6px; }
.detail-tabs { display: flex; border-bottom: 1px solid var(--border); gap: 4px; }
.detail-tab { background: transparent; border: none; padding: 10px 14px; color: var(--text-3); font-size: 0.8rem; font-family: var(--font-body); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.13s; font-weight: 600; }
.detail-tab.active { color: var(--accent); border-color: var(--accent); }
.detail-tab:hover { color: var(--text-1); }
.page-header { padding: 0 0 8px; }
.page-header h2 { display: none; }
.page-sub { font-size: .72rem; color: var(--text-3); }
.daily-brief { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.daily-brief-date { font-size: .68rem; color: var(--text-3); text-transform: capitalize; margin-bottom: 4px; }
.daily-brief-title { font-family: var(--font-brand); font-size: .95rem; font-weight: 700; margin-bottom: 5px; color: var(--text-1); }
.daily-brief-content { font-size: .78rem; color: var(--text-2); line-height: 1.6; }
#dashboard-inner { padding: 0; }
.filter-bar { padding-top: 0; }
.drag-over { outline: 2px dashed var(--accent) !important; outline-offset: 2px; background: rgba(var(--accent-rgb),0.02) !important; }
.fade-in { animation: viewIn 0.3s ease; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#widget-picker-overlay { animation: fadeIn 0.18s ease-out; }
.picker-category-header { transition: background 0.1s; }
.picker-category-header:hover { background: var(--surface); }
.loading-overlay, #loading-overlay { display: none; position: fixed; inset: 0; background: rgba(242,240,235,0.5); backdrop-filter: blur(6px); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
.loading-overlay.active, #loading-overlay.active { display: flex; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
#role-picker-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(200,195,185,0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.top-nav { display: none !important; }
.advice-icon { transition: all 0.2s; }
.advice-icon:hover { transform: scale(1.15); }

/* ── COACHING PAGE ──────────────────────────────────────────── */
.coaching-page-header { margin-bottom: 24px; }
.coaching-page-header h2 { font-family: var(--font-brand); font-size: 1.4rem; font-weight: 800; color: var(--text-1); margin-bottom: 4px; }
.coaching-page-header p { color: var(--text-3); font-size: 0.82rem; }
.coaching-cards-container { display: flex; flex-direction: column; gap: 0; }
.coaching-expand { font-size: 1rem; color: var(--text-3); transition: transform 0.2s; }
.coaching-widget-list { display: flex; flex-direction: column; gap: 8px; }
.coaching-widget-item { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.coach-model-mini { font-size: 0.78rem; color: var(--text-2); padding: 8px; background: var(--surface); border-radius: var(--r-xs); }

/* ── EMPLOYEE HERO ──────────────────────────────────────────── */
.emp-hero { padding: 20px 24px; }
.emp-hero-avatar { flex-shrink: 0; }
.emp-hero-info { flex: 1; }
.emp-hero-campaigns { margin-top: 16px; }
.emp-hero-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; }

/* ── MODAL STATS ────────────────────────────────────────────── */
.modal-stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 3px; }
.modal-stat-val { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 1.1rem; font-weight: 600; color: var(--text-1); }

/* ── NOTIFICATIONS ──────────────────────────────────────────── */
.notif-icon { font-size: 1.2rem; flex-shrink: 0; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-weight: 700; font-size: 0.82rem; color: var(--text-1); margin-bottom: 2px; }
.notif-text { font-size: 0.75rem; color: var(--text-2); }
.notif-action-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-p); padding: 4px 12px; font-size: 0.7rem; font-weight: 600; cursor: pointer; color: var(--text-2); transition: all 0.15s; }
.notif-action-btn:hover { background: var(--surface-hover); color: var(--accent); }

/* ── QUICK NOTES ────────────────────────────────────────────── */
.quick-notes-wrapper { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.quick-notes-header { font-family: var(--font-brand); font-weight: 700; font-size: 0.85rem; margin-bottom: 12px; color: var(--text-1); }
.quick-notes-list { font-size: 0.8rem; color: var(--text-2); max-height: 200px; overflow-y: auto; }
.quick-note-input-row { display: flex; gap: 8px; margin-top: 12px; }
.quick-note-btn { background: var(--accent); border: none; border-radius: var(--r-p); padding: 8px 18px; font-weight: 600; font-size: 0.75rem; color: white; cursor: pointer; transition: all 0.15s; }
.quick-note-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.2); }

/* ── SPECTRUM INNER ─────────────────────────────────────────── */
.spectrum-inner { }
.spectrum-chart-container { margin-bottom: 16px; }
.spectrum-stats { font-size: 0.7rem; color: var(--text-3); text-align: center; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 16px; }

/* ── FORECAST ───────────────────────────────────────────────── */
.forecast-explanation { font-size: 0.78rem; color: var(--text-2); line-height: 1.5; padding: 12px 16px; background: var(--surface); border-radius: var(--r-xs); margin-top: 12px; }

/* ── WIDGET CONTROLS ────────────────────────────────────────── */
.widget-remove-btn { background: rgba(var(--danger-rgb),0.08); border: 1px solid rgba(var(--danger-rgb),0.15); border-radius: 6px; padding: 2px 8px; font-size: 0.68rem; cursor: pointer; color: var(--red); transition: all 0.12s; }
.widget-remove-btn:hover { background: rgba(var(--danger-rgb),0.15); }
.picker-category-content { padding: 4px 0; }

/* ── HERO STATS & MISC ──────────────────────────────────────── */
.hs { display: flex; align-items: baseline; gap: 6px; }
.hs-label { font-size: 0.65rem; color: var(--text-3); text-transform: uppercase; }
.hs-val { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
.es-desc { font-size: 0.78rem; color: var(--text-3); margin-top: 6px; max-width: 340px; line-height: 1.5; }
.page-header-left { display: flex; flex-direction: column; }
.quick-note-input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-p); padding: 8px 14px; font-size: 0.8rem; color: var(--text-1); outline: none; transition: border-color 0.18s; }
.quick-note-input:focus { border-color: var(--accent); }

/* ── COACHING WIDGET-BUILDER ────────────────────────────────── */
.coach-main { padding: 16px; }
.coach-sidebar { padding: 16px; border-right: 1px solid var(--border); }
.coach-details-inner { padding: 16px; }
.coach-section-title { font-family: var(--font-brand); font-weight: 700; font-size: 1rem; color: var(--text-1); margin-bottom: 10px; letter-spacing: -.01em; }
.coach-models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.coach-campaigns-list { display: flex; flex-direction: column; gap: 6px; }
.coach-advice-summary { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; padding: 12px; background: var(--surface); border-radius: var(--r-xs); }

/* ── DISC SELECTOR ──────────────────────────────────────────── */
.disc-selector { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.disc-label { font-size: 0.72rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.profile-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 6px 10px; font-size: 0.78rem; font-family: var(--font-body); color: var(--text-1); outline: none; cursor: pointer; }

/* ── GAMIFICATION ───────────────────────────────────────────── */
.game-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; box-shadow: var(--sh-sm); }

/* ── FORM INPUTS ────────────────────────────────────────────── */
.input-field { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font-body); font-size: 0.82rem; color: var(--text-1); outline: none; transition: border-color 0.18s; }
.input-field:focus { border-color: var(--accent); }

/* ── PICKER CATEGORIES ──────────────────────────────────────── */
.picker-category { margin-bottom: 4px; }

/* ── LOGIN BG (dynamic fallback) ────────────────────────────── */
.login-bg { position: absolute; inset: 0; z-index: -1; }
.login-bg-glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.3; }
.login-bg-glow--green { width: 400px; height: 400px; top: 10%; left: 10%; background: rgba(var(--accent-rgb),0.3); }
.login-bg-glow--blue { width: 350px; height: 350px; bottom: 10%; right: 10%; background: rgba(59,130,246,0.2); }
.login-grid { display: none; }
.search-category { padding: 6px 12px; font-size: 0.7rem; font-weight: 700; color: var(--text-3); background: var(--surface); border-bottom: 1px solid var(--border); }
.search-result { padding: 8px 12px; cursor: pointer; font-size: 0.78rem; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.search-result:hover { background: var(--surface); }

@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2,1fr); } .legend-cards-horizontal { grid-template-columns: repeat(2,1fr); } }

/* ── MOBILE BOTTOM TABS ─────────────────────────────────────── */
.mobile-tabs { display: none; }

/* ── TOPBAR-CLUTTER BREAKPOINT (audit 2026-06): topbaren samler titel + periode-select
   + Datoer + lokationsfilter + søg + XP + tema/quiet/focus + notif uden mobil-fallback.
   Under 900px tillader vi topbaren at wrappe pænt (periode/lokation falder ned på en
   sekundær linje), og de mindst kritiske kontroller (XP-dag, stille-, fokus-tilstand)
   skjules så søgefeltet ikke sprænger og rækken ikke clipper. 768px-blokken nedenfor
   tager over for ægte mobil (skjuler søg/tema/loc helt + viser bottom-tabs). ── */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 16px; min-height: var(--th); height: auto; }
  /* Linje 1: titel + lokationsfilter. Linje 2: handlinger (periode/søg/ikoner).
     .topbar-actions er ÉT flex-item med 8 børn — det SKAL selv have flex-wrap,
     ellers overflyder de 1058px uanset at .topbar wrapper (wrap gælder kun
     direkte børn). flex:1 1 100% giver actions en hel egen linje. */
  .topbar-title { order: 1; flex: 1 1 auto; min-width: 0; }
  #global-loc-filter { order: 2; flex: 0 0 auto; margin: 0 !important; }
  .topbar-actions { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end;
    margin-left: 0; row-gap: 6px; min-width: 0; }
  .topbar-actions .tb-period-host { order: -1; }  /* periode først på handlings-linjen */
  /* Mindre kritiske kontroller skjules for plads (XP-widget er 228px — den
     egentlige skyldige, ikke #topbar-xp-today der er 0px). søg/periode prioriteres. */
  .topbar-actions #topbar-xp-today,
  .topbar-actions .xp-topbar-widget,
  .topbar-actions #quiet-mode-btn,
  .topbar-actions #focus-mode-btn { display: none !important; }
  /* Søgefeltet må ikke sprænge rækken */
  .topbar-actions .global-search-wrap { flex: 0 1 auto; min-width: 0; }
  .topbar-actions .global-search-wrap .search-input,
  .topbar-actions .global-search-wrap #global-search { min-width: 0; width: 100%; }
}

@media (max-width: 768px) {
  #app-root { width: 100vw; height: 100vh; border-radius: 0; }
  /* Mobile sidebar slide is owned by improvements.css (transform-based). Here we keep only the base layout props. (audit #42) */
  .sidebar { position: fixed; z-index: 200; background: var(--card-solid); box-shadow: var(--sh-lg); height: 100vh; top: 0; width: var(--sw) !important; }
  .sidebar.collapsed:hover { position: fixed; width: var(--sw) !important; box-shadow: none; }
  .content-wrapper { padding: 12px 14px 80px !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .fut-planner-container { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .bv-dash { grid-template-columns: 1fr !important; }
  .bv-dash-2 { grid-template-columns: 1fr !important; }
  .topbar { padding: 0 12px; }
  .topbar-title { font-size: 1rem; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .global-search-wrap { display: none; }
  .topbar-actions .theme-toggle { display: none; }
  #global-loc-filter { display: none !important; }
  .mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--card-solid); border-top: 1px solid var(--border); padding: 4px 0; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .mobile-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: none; border: none; color: var(--text-3); font-size: .65rem; font-family: var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 48px; justify-content: center; }
  .mobile-tab.active { color: var(--accent); }
  .mobile-tab svg { width: 22px; height: 22px; }
  .leaderboard-row { padding: 10px 12px !important; min-height: 48px; }
  .nav-btn { min-height: 44px; padding: 10px 12px !important; }
  .spectrum-camp-tab { min-height: 40px; padding: 8px 14px !important; font-size: 0.75rem !important; }
}
@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .bv-dash[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE (default - :root already dark, minimal overrides)
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .kpi-value.green { text-shadow: 0 0 20px rgba(var(--accent-rgb),0.2); }
[data-theme="dark"] .kpi-value.blue { text-shadow: 0 0 20px rgba(51,154,240,0.2); }
[data-theme="dark"] .kpi-value.purple { text-shadow: 0 0 20px rgba(132,94,247,0.2); }
[data-theme="dark"] .kpi-value.amber { text-shadow: 0 0 20px rgba(var(--pop-rgb),0.2); }
/* table hover handled in data-table base rules */
[data-theme="dark"] #global-search:focus { border-color: var(--accent); }
[data-theme="dark"] .leaderboard-rank.gold { text-shadow: 0 0 12px rgba(var(--pop-rgb),0.4); }
[data-theme="dark"] .leaderboard-rank.silver { text-shadow: 0 0 12px rgba(148,163,184,0.4); }
[data-theme="dark"] .leaderboard-rank.bronze { text-shadow: 0 0 12px rgba(217,119,6,0.4); }
[data-theme="dark"] .global-filter-bar input[type="date"] { color-scheme: dark; }
[data-theme="dark"] #login-screen { background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(var(--accent-rgb),0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 20%, rgba(var(--pop-rgb),0.05) 0%, transparent 55%), linear-gradient(135deg, #111825, #161b26 30%, #111825); }
[data-theme="dark"] .loading-overlay, [data-theme="dark"] #loading-overlay { background: rgba(16,20,30,0.85); }
[data-theme="dark"] #role-picker-overlay { background: rgba(16,20,30,0.85); }
[data-theme="dark"] .app-modal-backdrop { background: rgba(0,0,0,0.65); }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 60% 50% at 10% 15%, rgba(var(--accent-rgb),0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 90% 10%, rgba(var(--accent-rgb),0.04) 0%, transparent 50%),
    radial-gradient(ellipse 55% 50% at 50% 90%, rgba(var(--pop-rgb),0.03) 0%, transparent 50%);
}
[data-theme="light"] body::after { content: none; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
[data-theme="light"] #app-root { background: var(--app-bg); border-color: var(--border); }
[data-theme="light"] #app-root::before, [data-theme="light"] #app-root::after { display: none; }

/* Sidebar - subtle green-to-blue gradient */
[data-theme="light"] .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); }
[data-theme="light"] .sidebar .nav-btn.active {
  background: rgba(var(--accent-rgb),0.08);
}
[data-theme="light"] .sidebar .nav-btn:hover:not(.active) { background: rgba(0,0,0,0.03); }
[data-theme="light"] .brand-icon img { box-shadow: 0 2px 12px rgba(var(--accent-rgb),0.2); }

/* Topbar - frosted glass */
[data-theme="light"] .topbar {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

/* Cards - soft tinted backgrounds with colored shadows */
[data-theme="light"] .kpi-card, [data-theme="light"] .widget-card, [data-theme="light"] .glass-card,
[data-theme="light"] .emp-card, [data-theme="light"] .campaign-card, [data-theme="light"] .upload-box,
[data-theme="light"] .spectrum-chart-card, [data-theme="light"] .campaign-overview-card,
[data-theme="light"] .goal-card, [data-theme="light"] .coaching-card, [data-theme="light"] .campaign-hour-card,
[data-theme="light"] .section-card, [data-theme="light"] .static-widget-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .kpi-card::before, [data-theme="light"] .glass-card::before,
[data-theme="light"] .emp-card::before, [data-theme="light"] .campaign-card::before {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.02), rgba(43,125,233,0.02));
}
[data-theme="light"] .kpi-card:hover, [data-theme="light"] .glass-card:hover,
[data-theme="light"] .emp-card:hover, [data-theme="light"] .campaign-card:hover,
[data-theme="light"] .static-widget-card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--border-md);
  transform: translateY(-1px);
}

/* KPI cards - subtle colored top border */
[data-theme="light"] .kpi-card {
  border-top: 3px solid var(--accent);
}

/* Section cards - colored left accent */
[data-theme="light"] .section-card {
  background: rgba(255,255,255,0.75);
  border-left: 3px solid rgba(var(--accent-rgb),0.2);
}

/* Glass card headers */
[data-theme="light"] .glass-card-header {
  background: var(--surface);
}
[data-theme="light"] .glass-card-header::after { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.10), transparent); }

/* BV mini cards (phoner stats) */
[data-theme="light"] .bv-mini-card {
  background: rgba(255,255,255,0.70);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
}

/* Inputs */
[data-theme="light"] .search-input, [data-theme="light"] #global-search,
[data-theme="light"] .input-field, [data-theme="light"] .quick-note-input,
[data-theme="light"] .profile-select, [data-theme="light"] select {
  background: var(--input-bg); border-color: var(--border); color: var(--text-1);
}
[data-theme="light"] #global-search:focus, [data-theme="light"] .search-input:focus {
  border-color: var(--border-focus);
}

/* Modals - frosted glass */
[data-theme="light"] .login-card, [data-theme="light"] .app-modal-container {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="light"] .toast { background: rgba(255,255,255,0.92); border-color: var(--border); box-shadow: var(--sh-md); }
[data-theme="light"] .goal-bar-track, [data-theme="light"] .mini-bar-track { background: rgba(0,0,0,0.05); }
[data-theme="light"] .global-filter-bar input[type="date"] { color-scheme: light; }
[data-theme="light"] .global-search-results, [data-theme="light"] .notif-panel { background: rgba(255,255,255,0.95); border-color: var(--border); backdrop-filter: blur(16px); }
[data-theme="light"] .login-field input { background: var(--input-bg); border-color: var(--border); }
[data-theme="light"] #login-screen {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(var(--accent-rgb),0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(43,125,233,0.05) 0%, transparent 55%),
    linear-gradient(145deg, #f2f3f5, #f5f6f8 40%, #f4f5f7);
}
[data-theme="light"] .loading-overlay, [data-theme="light"] #loading-overlay { background: rgba(240,244,248,0.88); backdrop-filter: blur(8px); }
[data-theme="light"] #role-picker-overlay { background: rgba(240,244,248,0.88); backdrop-filter: blur(8px); }
[data-theme="light"] .app-modal-backdrop { background: rgba(0,30,20,0.20); backdrop-filter: blur(4px); }
[data-theme="light"] .ob-dot { background: white; box-shadow: 0 1px 3px rgba(0,40,80,0.10); }

/* Leaderboard - colored row backgrounds */
[data-theme="light"] .leaderboard-row:nth-child(1) { background: linear-gradient(90deg, rgba(var(--pop-rgb),0.10), transparent 60%); }
[data-theme="light"] .leaderboard-row:nth-child(2) { background: linear-gradient(90deg, rgba(148,163,184,0.10), transparent 60%); }
[data-theme="light"] .leaderboard-row:nth-child(3) { background: linear-gradient(90deg, rgba(217,119,6,0.08), transparent 60%); }
[data-theme="light"] .leaderboard-row:hover { background: rgba(var(--accent-rgb),0.06); }

/* Tags & badges - more vivid */
[data-theme="light"] .tag-green { background: rgba(var(--accent-rgb),0.12); color: var(--green); }
[data-theme="light"] .tag-blue { background: rgba(43,125,233,0.12); color: #1a5cb8; }
[data-theme="light"] .tag-amber { background: rgba(224,148,0,0.12); color: #9a6500; }
[data-theme="light"] .tag-red { background: rgba(229,72,77,0.12); color: #c13236; }

/* Data tables - alternating tinted rows */
[data-theme="light"] .data-table tbody tr:nth-child(even) { background: rgba(0,60,40,0.02); }
[data-theme="light"] .data-table tbody tr:hover { background: rgba(var(--accent-rgb),0.06); }

/* Period filter buttons */
[data-theme="light"] .spectrum-camp-tab { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .spectrum-camp-tab.active { 
  background: rgba(var(--accent-rgb),0.10); 
  border-color: rgba(var(--accent-rgb),0.25); 
  color: #007a52;
  box-shadow: 0 2px 6px rgba(var(--accent-rgb),0.10);
}

/* Mission impact card - warm tint */
[data-theme="light"] [style*="rgba(228,0,43"] {
  background: linear-gradient(135deg, rgba(228,0,43,0.06), rgba(255,184,28,0.04)) !important;
}


/* ── DARK MODE TOGGLE ──────────────────────────────────────── */
.theme-toggle {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem;
  color: var(--text-2); transition: all 0.2s;
}
.theme-toggle:hover { background: var(--surface-hover); color: var(--text-1); }

/* ── NOTIFICATION BELL + CENTER (redesign 2026-05-06) ──────────────────
   Paradigm-flip: panel er ikke en flad event-log, men et action-center der
   kategoriserer i KRÆVER HANDLING / AKTIVITET / SYSTEM. Items er CSS-classes
   (ingen inline-style fra JS), templates lever i <template>-elementer.
   ────────────────────────────────────────────────────────────────────── */
.notif-bell { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; color: var(--text-2); }
.notif-bell:hover { background: var(--surface-hover); }
.notif-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: white; font-size: 0.6rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card-solid); }

/* ── Panel shell ──────────────────────────────────────────────── */
.notif-panel {
  position: fixed; top: calc(var(--th, 72px) + 8px); right: 16px;
  width: 400px; max-width: calc(100vw - 24px);
  max-height: min(640px, calc(100vh - var(--th, 72px) - 32px));
  background: var(--card-solid); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--sh-lg);
  z-index: 999999; overflow: hidden;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  animation: nc-panel-in .18s cubic-bezier(.2,.8,.3,1)
}
/* HTML5 hidden-attribut SKAL respekteres - uden denne override vandt
   display:flex over hidden-attributtens default display:none, så panelet
   forblev synligt efter _toggleNotifPanel(false). Bug fundet 2026-05-07. */
.notif-panel[hidden] { display: none !important; }
@keyframes nc-panel-in { from { opacity:0; transform: translateY(-6px) } to { opacity:1; transform: translateY(0) } }

/* ── Header ───────────────────────────────────────────────────── */
.nc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0
}
.nc-head-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .88rem; color: var(--text-1)
}
.nc-head-title .ic { font-size: 1rem; color: var(--text-2) }
.nc-head-count {
  font-size: .68rem; color: var(--text-3); font-weight: 500;
  padding: 2px 8px; background: var(--surface);
  border-radius: 100px; margin-left: 4px
}
.nc-head-actions { display: flex; gap: 6px; flex-shrink: 0 }
.nc-head-btn {
  font-size: .65rem; font-weight: 600;
  color: var(--text-2); background: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
  transition: all .12s;
  display: inline-flex; align-items: center; gap: 4px
}
.nc-head-btn:hover { color: var(--text-1); border-color: var(--accent); background: rgba(var(--accent-rgb),0.06) }
.nc-head-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ── Body (scroll-area) ───────────────────────────────────────── */
.nc-body { overflow-y: auto; flex: 1; min-height: 0; padding: 4px 0 8px }
.nc-body::-webkit-scrollbar { width: 8px }
.nc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px }

/* ── Section ──────────────────────────────────────────────────── */
.nc-section { padding: 6px 0 4px }
.nc-section-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px 4px;
  font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3)
}
.nc-section-head .ic { font-size: .82rem }
.nc-section-head .nc-section-count {
  margin-left: auto; font-weight: 700;
  color: var(--text-3); letter-spacing: 0
}
.nc-section[data-cat="action"] .nc-section-head { color: var(--accent) }
.nc-section[data-cat="action"] .nc-section-head .ic { color: var(--accent) }

/* ── Item ─────────────────────────────────────────────────────── */
.nc-item {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .12s
}
.nc-item:last-child { border-bottom: none }
.nc-item:hover { background: var(--surface) }
.nc-item.unread { background: rgba(var(--accent-rgb),0.05) }
.nc-item.unread:hover { background: rgba(var(--accent-rgb),0.09) }

.nc-item-av {
  position: relative; width: 36px; height: 36px;
  border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800;
  color: var(--color-on-accent, #000);
  background: linear-gradient(135deg, var(--accent), var(--color-info, #3b9eff));
  overflow: hidden
}
.nc-item-av img { width: 100%; height: 100%; object-fit: cover }
.nc-item-av-icon {
  /* Type-badge bottom-right på avatar */
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--card-solid); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: .55rem; color: var(--text-2)
}
.nc-item-av-icon .ic { font-size: .65rem }

.nc-item-body { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.nc-item-msg {
  font-size: .78rem; color: var(--text-1); line-height: 1.4;
  word-wrap: break-word; overflow-wrap: anywhere
}
.nc-item-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: .6rem; color: var(--text-3)
}
.nc-item-meta .ic { font-size: .65rem }

.nc-item-actions {
  display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap
}
.nc-item-actions button {
  padding: 4px 10px; font-size: .68rem; font-weight: 700;
  border-radius: 6px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-1); transition: all .12s;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap
}
.nc-item-actions button:hover { border-color: var(--text-2) }
.nc-item-actions button.primary {
  background: var(--accent); color: var(--color-on-accent, #000);
  border-color: var(--accent)
}
.nc-item-actions button.primary:hover { filter: brightness(1.08) }
.nc-item-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.nc-item-mark {
  background: none; border: none; cursor: pointer;
  font-size: .58rem; color: var(--text-3);
  padding: 4px 6px; border-radius: 4px;
  align-self: flex-start; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 3px;
  transition: color .12s, background .12s
}
.nc-item-mark:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.08) }
.nc-item-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }

/* ── "Vis flere" ──────────────────────────────────────────────── */
.nc-more-btn {
  display: block; width: calc(100% - 32px); margin: 6px 16px 0;
  padding: 6px; background: none; border: 1px dashed var(--border);
  border-radius: 6px; color: var(--text-3);
  font-size: .68rem; font-weight: 600; cursor: pointer;
  transition: all .12s
}
.nc-more-btn:hover { color: var(--text-1); border-color: var(--text-2); border-style: solid }

/* ── Empty state ──────────────────────────────────────────────── */
.nc-empty {
  padding: 32px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px
}
.nc-empty-icon { font-size: 2rem; color: var(--text-3); opacity: .5 }
.nc-empty-icon .ic { font-size: 2rem }
.nc-empty-title { font-weight: 700; font-size: .85rem; color: var(--text-1) }
.nc-empty-sub { font-size: .72rem; color: var(--text-3); max-width: 240px; line-height: 1.4 }

/* ── Loading + error ──────────────────────────────────────────── */
.nc-loading, .nc-error {
  padding: 32px 16px; text-align: center;
  font-size: .8rem; color: var(--text-3)
}

/* ── Mobile responsive (drop separate ms-notif-* impl ad-hoc) ─── */
@media (max-width: 640px) {
  .notif-panel {
    top: var(--th, 60px); right: 0; left: 0;
    width: 100%; max-width: 100%;
    max-height: calc(100vh - var(--th, 60px));
    border-radius: 16px 16px 0 0;
    border-left: none; border-right: none
  }
  .nc-item { grid-template-columns: 32px 1fr auto; padding: 12px 14px }
  .nc-item-av { width: 32px; height: 32px; font-size: .8rem }
}

/* ── INFO TOOLTIP ──────────────────────────────────────────── */
.info-tip { position: relative; display: inline-flex; cursor: help; margin-left: 4px; z-index: 100; }
.info-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--card-solid); color: var(--text-2); padding: 10px 14px; border-radius: 10px; font-size: 0.72rem; line-height: 1.55; width: max-content; max-width: 300px; box-shadow: var(--sh-lg); border: 1px solid var(--border); pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 99999; white-space: normal; font-weight: 400; }
.info-tip:hover::after { opacity: 1; }
.info-tip-icon { font-size: 0.72rem; opacity: 0.4; transition: opacity 0.15s; }
.info-tip:hover .info-tip-icon { opacity: 0.8; }
/* Allow tooltips to overflow widget boundaries - but keep kpi-card clipped */
.widget-card, .glass-card { overflow: visible !important; }
.kpi-card { overflow: hidden !important; }
.kpi-card .kpi-label { overflow: visible !important; position: relative; z-index: 10; }

/* ── WALLBOARD ─────────────────────────────────────────────── */
.wallboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.wallboard-card { padding: 16px; text-align: center; border-radius: var(--r); }
.wallboard-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
/* RUDE PERF-FIX 2026-06: 'pulse-green' animerede box-shadow INFINITE på hver aktiv
   wallboard-status-dot (mange dots på wallboard) = repaint hvert frame. Animation fjernet,
   statisk glød bevaret (samme tilgang som sidebar activeGlow-fixet). */
.wallboard-status-dot.active { background: var(--green); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.4); animation: none; }
.wallboard-status-dot.pause { background: var(--amber); }
.wallboard-status-dot.break { background: #f97316; }
.wallboard-status-dot.offline { background: var(--text-3); }
.wallboard-status-dot.meeting { background: var(--purple); }
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 4px rgba(var(--accent-rgb),0.3); } 50% { box-shadow: 0 0 12px rgba(var(--accent-rgb),0.6); } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse-red 1.5s infinite; margin-right: 6px; }
@keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* RUDE PERF-FIX 2026-06: 'pulse-live-glow' animerede box-shadow INFINITE = repaint hvert
   frame. Animation fjernet; statisk glød bevaret. */
.pulse-live { animation: none; box-shadow: 0 0 5px rgba(16,185,129,0.45); }
@keyframes pulse-live-glow { 0%, 100% { box-shadow: 0 0 3px rgba(16,185,129,0.3); } 50% { box-shadow: 0 0 8px rgba(16,185,129,0.6); } }
/* Live-board attention-puls (app-pages.js: rød wellbeing-prik + grøn 'aktiv nu'-prik
   brugte `animation:pulse-live` men keyframet fandtes KUN i public/concepts/*.html
   (ikke indlæst) → prikken stod helt stille. Defineret her med opacity+transform =
   compositor-only, ingen per-frame repaint (jf. RUDE PERF-FIX ovenfor). */
@keyframes pulse-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { [style*="pulse-live"] { animation: none !important; } }

/* ── LIVE TIMELINE ─────────────────────────────────────────── */
.live-agent-row:hover .live-block { opacity: 0.85; }
.live-agent-row:hover .live-block:hover { opacity: 1; }
.live-block { box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.live-time-header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ── SCHEDULE TABLE ────────────────────────────────────────── */
.schedule-table { width: 100%; border-collapse: collapse; }
.schedule-table th { padding: 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); border-bottom: 1px solid var(--border); text-align: center; }
.schedule-table td { padding: 8px 10px; text-align: center; font-size: 0.8rem; border-bottom: 1px solid var(--border); }
.schedule-table td.shift-fri { color: var(--text-3); font-style: italic; }
.schedule-table td.shift-work { color: var(--text-1); font-weight: 600; }

/* ── LEADERBOARD ───────────────────────────────────────────── */
.leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: all 0.2s var(--ease-out-back); cursor: pointer; }
.leaderboard-row:hover { background: var(--accent-light); transform: translateX(4px); }
.leaderboard-row:nth-child(1) { background: linear-gradient(90deg, rgba(var(--pop-rgb),0.06), transparent 60%); }
.leaderboard-row:nth-child(2) { background: linear-gradient(90deg, rgba(148,163,184,0.06), transparent 60%); }
.leaderboard-row:nth-child(3) { background: linear-gradient(90deg, rgba(217,119,6,0.06), transparent 60%); }
.leaderboard-rank { font-family: var(--font-brand); font-size: 1.1rem; font-weight: 800; width: 32px; text-align: center; }
.leaderboard-rank.gold { color: var(--amber); }
.leaderboard-rank.silver { color: #94a3b8; }
.leaderboard-rank.bronze { color: #d97706; }

/* ── PERIOD COMPARISON ─────────────────────────────────────── */
.comparison-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comparison-bar-this { height: 6px; border-radius: 4px; background: var(--accent); }
.comparison-bar-prev { height: 6px; border-radius: 4px; background: var(--text-3); opacity: 0.4; }

/* ── ENHANCED ANIMATIONS & EFFECTS ─────────────────────────── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes slideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 8px rgba(var(--accent-rgb),0.15); } 50% { box-shadow: 0 0 20px rgba(var(--accent-rgb),0.3); } }

/* Staggered view entry animation */
.view.active .kpi-card, .view.active .glass-card, .view.active .widget-card, 
.view.active .emp-card, .view.active .campaign-card, .view.active .section-card {
  animation: slideUp 0.35s ease both;
}
.view.active .kpi-card:nth-child(1) { animation-delay: 0s; }
.view.active .kpi-card:nth-child(2) { animation-delay: 0.05s; }
.view.active .kpi-card:nth-child(3) { animation-delay: 0.1s; }
.view.active .kpi-card:nth-child(4) { animation-delay: 0.15s; }
.view.active .kpi-card:nth-child(5) { animation-delay: 0.2s; }

/* Active nav glow */
[data-theme="dark"] .sidebar .nav-btn.active {
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.08);
}

/* Button press effect */
.btn:active, .widget-action-btn:active, .spectrum-camp-tab:active { transform: scale(0.97); }

/* RUDE 2026-06-04: regnbue-venstrekant fjernet — ikke i mockuppen (uniforme hvide
   KPI-kort med accent-tonet .chip-ikon). Skin §5 giver kortet uniform 1px var(--bh-line). */

/* Subtle glow on KPI values */
[data-theme="dark"] .kpi-value.green { text-shadow: 0 0 24px rgba(var(--accent-rgb),0.25); }
[data-theme="dark"] .kpi-value.blue { text-shadow: 0 0 24px rgba(51,154,240,0.25); }
[data-theme="dark"] .kpi-value.amber { text-shadow: 0 0 24px rgba(var(--pop-rgb),0.25); }
[data-theme="dark"] .kpi-value.purple { text-shadow: 0 0 24px rgba(132,94,247,0.25); }

/* Sidebar nav sweep */
.sidebar .nav-btn { position: relative; overflow: hidden; }
.sidebar .nav-btn::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.06), transparent); transition: width 0.25s ease; pointer-events: none; }
.sidebar .nav-btn.active::after { width: 100%; }

/* Enhanced hover for cards */
[data-theme="dark"] .kpi-card:hover, [data-theme="dark"] .glass-card:hover, 
[data-theme="dark"] .campaign-card:hover, [data-theme="dark"] .emp-card:hover {
  border-color: rgba(var(--accent-rgb),0.12) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* Widget card clickable cursor hint */
.widget-card[data-module] { cursor: pointer; }

/* Global filter bar styles */
.global-filter-bar { display: flex; align-items: center; gap: 6px; padding: 0; flex-wrap: nowrap; }
.global-filter-bar select, .global-filter-bar input[type="date"] { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: .65rem; font-family: var(--font-brand); font-weight: 600; color: var(--text-1); cursor: pointer; outline: none; }
.global-filter-bar input[type="date"] { width: 120px; color-scheme: light; }
[data-theme="dark"] .global-filter-bar input[type="date"] { color-scheme: dark; }
[data-theme="dark"] select, [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="text"], [data-theme="dark"] textarea { color-scheme: dark; }
[data-theme="dark"] select option { background: var(--card); color: var(--text-1); }
.global-filter-bar input[type="date"]:focus, .global-filter-bar select:focus { border-color: var(--accent); }
.global-filter-bar .gf-label { font-size: .68rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* Onboarding checklist */
.ob-checklist { display: flex; flex-direction: column; gap: 6px; }
.ob-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); transition: all 0.2s; }
.ob-step.completed { background: rgba(var(--success-rgb),0.06); border-color: rgba(var(--success-rgb),0.15); }
.ob-step.current { background: rgba(51,154,240,0.06); border-color: rgba(51,154,240,0.2); box-shadow: 0 0 12px rgba(51,154,240,0.08); }
.ob-step-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0; transition: all 0.2s; }
.ob-step.completed .ob-step-check { background: var(--green); border-color: var(--green); color: white; }
.ob-step.current .ob-step-check { border-color: var(--blue); background: rgba(51,154,240,0.1); }
.ob-step.overdue { background: rgba(226,75,74,0.06); border-color: rgba(226,75,74,0.2); animation: pulse-subtle 2s ease infinite; }
.ob-step.overdue .ob-step-check { border-color: var(--red); background: rgba(226,75,74,0.1); color: var(--red); font-weight: 800; }
@keyframes pulse-subtle { 0%,100% { opacity: 1; } 50% { opacity: .85; } }
.ob-step-info { flex: 1; }
.ob-step-title { font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.ob-step-desc { font-size: 0.68rem; color: var(--text-3); margin-top: 1px; }
.ob-step-timing { font-size: 0.65rem; color: var(--text-3); font-family: var(--font-mono);font-variant-numeric:tabular-nums; white-space: nowrap; }

/* Situational Leadership S1-S4 colors */
.sl-s1 { color: var(--red); } .sl-s1-bg { background: rgba(var(--danger-rgb),0.12); border-color: rgba(var(--danger-rgb),0.2); }
.sl-s2 { color: var(--amber); } .sl-s2-bg { background: rgba(var(--pop-rgb),0.12); border-color: rgba(var(--pop-rgb),0.2); }
.sl-s3 { color: var(--accent); } .sl-s3-bg { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.2); }
.sl-s4 { color: var(--green); } .sl-s4-bg { background: rgba(var(--success-rgb),0.12); border-color: rgba(var(--success-rgb),0.2); }

/* Coaching suggestion card */
.coach-suggestion { padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 10px; border-left: 4px solid var(--blue); background: var(--surface); }
.coach-suggestion.priority-high { border-left-color: var(--red); background: rgba(248,81,73,0.04); }
.coach-suggestion.priority-medium { border-left-color: var(--amber); background: rgba(var(--pop-rgb),0.04); }
.coach-suggestion.priority-low { border-left-color: var(--green); background: rgba(var(--accent-rgb),0.04); }

/* Records category tabs */
.records-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.records-tab { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-p); padding: 6px 14px; font-size: 0.76rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all 0.15s; }
.records-tab.active { background: var(--accent-light); border-color: rgba(var(--accent-rgb),0.2); color: var(--accent); }

/* Schedule shift type badges */
.shift-badge { display: inline-flex; font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.04em; }
.shift-dag { background: rgba(51,154,240,0.12); color: var(--blue); }
.shift-aften { background: rgba(132,94,247,0.12); color: var(--purple); }

/* ── STATIC WIDGET GRID ────────────────────────────────────── */
.static-widget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.static-widget-grid .span-2 { grid-column: span 2; }
.static-widget-grid > .section-card { margin-bottom: 0; background: var(--card-bg); }
.static-widget-grid > .section-card > .section-body { padding: 0; }
.static-widget-grid > .section-card > .section-body > .wg-inner { padding: 0; }
/* Compact widget bodies: max-height with smooth scroll */
.wg-body { max-height: 500px; overflow-y: auto; scrollbar-width: thin; }
.wg-body::-webkit-scrollbar { width: 3px; }
.wg-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
/* Full-width widgets get more space */
.span-2 .wg-body { max-height: 600px; }
.static-widget-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.static-widget-card:hover, .static-widget-grid > .section-card:hover {
  box-shadow: var(--sh-card-hover);
}
@media (max-width: 700px) { .static-widget-grid { grid-template-columns: 1fr; } .static-widget-grid .span-2 { grid-column: span 1; } }
@media (min-width: 1600px) { .static-widget-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Spectrum chart responsive */
.spectrum-canvas-wrap { width: 100%; position: relative; }
.spectrum-canvas-wrap canvas { width: 100% !important; }
.legend-cards-horizontal { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

@media (min-width: 1600px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* Widget inner - stretch to fill */
.wg-inner { overflow: auto; display: flex; flex-direction: column; }
.wg-inner > .glass-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wg-inner > .glass-card > .glass-card-body,
.wg-inner > .glass-card > div:not(.glass-card-header):last-child { flex: 1; min-height: 0; overflow: auto; }
.wg-inner canvas { width: 100% !important; }
.wg-inner > div { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wg-inner [style*="position:relative"] { flex: 1; min-height: 120px; }

/* ── SORT INDICATORS (handled in data-table base rules) ─── */
/* ── ACHIEVEMENT BADGES - Clean pill design ────────────────── */
.achievement-row { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }

/* ── VISUAL POP - gradient accents, depth, color ──────────── */
.section-card > .section-header { background: linear-gradient(135deg, transparent 0%, var(--surface) 100%); }
.section-card.open > .section-header { background: linear-gradient(135deg, var(--surface) 0%, transparent 100%); }
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, var(--glow-green) 0%, transparent 70%); opacity: 0.4; pointer-events: none; }
.kpi-card:nth-child(2)::after { background: radial-gradient(circle, var(--glow-blue) 0%, transparent 70%); }
.kpi-card:nth-child(3)::after { background: radial-gradient(circle, var(--glow-purple) 0%, transparent 70%); }

/* Accent stripe on section headers */
.section-card.open > .section-header::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; }
.section-card > .section-header { position: relative; }

/* zebra striping handled in data-table base rules */
.data-table tbody tr:hover { background: var(--accent-light) !important; }

/* Table inside sections: add outer frame */
.section-body .data-table { border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; }
.section-body .data-table th:first-child { border-radius: var(--r-xs) 0 0 0; }
.section-body .data-table th:last-child { border-radius: 0 var(--r-xs) 0 0; }

/* Table scrollable wrapper */
.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* Better tag colors with gradients */
.tag-green { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.15)); }
.tag-amber { background: linear-gradient(135deg, rgba(var(--pop-rgb),0.08), rgba(var(--pop-rgb),0.15)); }
.tag-red { background: linear-gradient(135deg, rgba(255,107,107,0.08), rgba(255,107,107,0.15)); }
.tag-blue { background: linear-gradient(135deg, rgba(51,154,240,0.08), rgba(51,154,240,0.15)); }

/* Nav folder active indicator: brug den fælles flush 3px-bar fra .sidebar .nav-btn.active::before (ovenfor) - ingen konkurrerende inset-bar her. */

/* ═══════════════════════════════════════════════════════════════
   MOTION DESIGN SYSTEM - "Controlled Energy"
   Hierarchy: Navigation (calm) → Data (responsive) → Achievements (explosive)
═══════════════════════════════════════════════════════════════ */

/* ── Motion Tokens ─────────────────────────────────────────── */
:root {
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:        0.15s;
  --dur-normal:      0.25s;
  --dur-slow:        0.45s;
  --dur-dramatic:    0.7s;
}

/* ── TIER 1: Navigation - Calm, Confident ──────────────────── */
.sidebar .nav-btn {
  transition: all var(--dur-normal) var(--ease-smooth);
}
.sidebar .nav-btn .nav-item-icon {
  transition: transform var(--dur-normal) var(--ease-out-back);
}
.sidebar .nav-btn.active .nav-item-icon { color: var(--accent); }
.sidebar .nav-btn:hover .nav-item-icon { color: var(--text-1); transform: scale(1.1); }
.nav-folder-toggle {
  transition: all var(--dur-normal) var(--ease-smooth);
}
.nav-folder-toggle:hover .nav-item-icon { transform: scale(1.1); }
.nav-folder-chevron { transition: transform var(--dur-slow) var(--ease-out-spring); }

/* Topbar elements */
.theme-toggle, .notif-bell, .widget-action-btn, .spectrum-camp-tab {
  transition: all var(--dur-normal) var(--ease-out-expo);
}
.theme-toggle:active, .notif-bell:active { transform: scale(0.92); }

/* ── TIER 2: Data Cards - Responsive, Staggered ───────────── */
/* Staggered entry for cards */
@keyframes cardEntry {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kpi-card, .section-card, .static-widget-grid > .section-card,
.emp-card, .campaign-card, .glass-card, .leaderboard-row {
  animation: cardEntry var(--dur-slow) var(--ease-out-expo) both;
}
.kpi-card:nth-child(1) { animation-delay: 0.03s; }
.kpi-card:nth-child(2) { animation-delay: 0.06s; }
.kpi-card:nth-child(3) { animation-delay: 0.09s; }
.kpi-card:nth-child(4) { animation-delay: 0.12s; }
.kpi-card:nth-child(5) { animation-delay: 0.15s; }
.kpi-card:nth-child(6) { animation-delay: 0.18s; }
.section-card:nth-child(1) { animation-delay: 0.05s; }
.section-card:nth-child(2) { animation-delay: 0.10s; }
.section-card:nth-child(3) { animation-delay: 0.15s; }
.section-card:nth-child(4) { animation-delay: 0.20s; }
.leaderboard-row:nth-child(n) { animation-delay: calc(0.03s * var(--i, 1)); }

/* Card hover: lift + glow */
.kpi-card, .emp-card, .campaign-card, .glass-card {
  transition: transform var(--dur-normal) var(--ease-out-back),
              box-shadow var(--dur-slow) var(--ease-smooth),
              border-color var(--dur-normal) ease;
}
.kpi-card:hover, .emp-card:hover, .campaign-card:hover {
  transform: translateY(-3px) scale(1.01) !important;
}
.kpi-card:active, .emp-card:active, .campaign-card:active {
  transform: translateY(0px) scale(0.98) !important;
  transition-duration: var(--dur-fast);
}

/* Section card open/close with spring */
.section-body {
  transition: max-height var(--dur-slow) var(--ease-out-expo),
              opacity var(--dur-normal) ease,
              padding var(--dur-normal) ease;
}

/* Tags - micro-bounce on hover */
.tag {
  transition: all var(--dur-normal) var(--ease-out-back);
}
.tag:hover { transform: translateY(-2px) scale(1.05); }

/* Upload boxes - breathe on hover */
.upload-box {
  transition: all var(--dur-slow) var(--ease-out-expo) !important;
}
.upload-box:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 40px rgba(var(--accent-rgb),0.08), 0 0 0 1px rgba(var(--accent-rgb),0.15) !important;
}
.upload-box:hover h3 { color: var(--accent); }

/* Data table rows - slide highlight */
.data-table tr { transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }

/* Goal bars - satisfying fill */
.goal-bar-fill, .mini-bar-fill {
  transition: width 1s var(--ease-out-expo) !important;
}

/* Toast - slide in with overshoot */
.toast { animation: toastSpring 0.5s var(--ease-out-spring); }
@keyframes toastSpring {
  from { transform: translateX(120%) scale(0.9); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}

/* ── TIER 3: Achievements - Polished, Satisfying ───────────── */
.achievement-row span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .7rem; line-height: 1;
  transition: all 0.25s var(--ease-out-back);
  cursor: help;
}
.achievement-row span:hover {
  transform: translateY(-3px) scale(1.15);
  background: var(--accent-light); border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.2);
}

/* Leaderboard medals - shimmer.
   RUDE PERF-FIX 2026-06: 'medalShimmer' animerede 'filter: brightness()' INFINITE på
   hver guld/sølv/bronze-rang (typisk 3 synlige pr. leaderboard, ofte flere leaderboards
   på samme view) → filter-animation tvinger repaint hvert frame = kontinuerlig CPU. Samme
   klasse som body::before-background-position-fixet. Animation fjernet; statisk look bevaret. */
.leaderboard-rank.gold, .leaderboard-rank.silver, .leaderboard-rank.bronze {
  animation: none;
}
@keyframes medalShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

/* KPI value counting feel */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.kpi-value, .kpi-card [style*="font-size:1."] {
  animation: countUp var(--dur-slow) var(--ease-out-expo) both;
}

/* ── TIER 4: Atmospheric Life ──────────────────────────────── */
/* RUDE PERF-FIX 2026-06: meshDrift FJERNET (var root-cause for ~240% idle-CPU). Den animerede
   background-position på body::before (full-viewport, 200% mesh) → kontinuerlig REPAINT hvert
   frame (background-position er IKKE GPU-composited, så translateZ hjælper ikke). Sammen med
   chrome-backdrop-filter pinnede den CPU/GPU på en STILLESTÅENDE dashboard-fane. Rude-skinnets
   aura (body::before) er nu STATISK (ingen drift, intet repaint). */

/* Notification badge pulse - energetic */
/* BATTERI-FIX 2026-06-06: var 'infinite' (uendelig bounce = compositor altid vågen).
   3 bounces drager opmærksomhed og falder så til ro; gen-bouncer ved ny notifikation (re-render). */
.notif-badge { animation: badgeBounce 2s var(--ease-out-spring) 3; }
@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

/* Coach suggestion urgent - gentle breathe.
   RUDE PERF-FIX 2026-06: 'breathe' animerede box-shadow INFINITE = repaint hvert frame.
   Animation fjernet; statisk urgent-ramme bevaret så prioriteten stadig er visuelt markeret. */
.coach-suggestion.priority-high { animation: none; box-shadow: inset 0 0 0 1px rgba(248,81,73,0.12), 0 0 20px rgba(248,81,73,0.04); }
@keyframes breathe {
  0%, 100% { box-shadow: none; transform: scale(1); }
  50% { box-shadow: inset 0 0 0 1px rgba(248,81,73,0.12), 0 0 20px rgba(248,81,73,0.04); transform: scale(1.003); }
}

/* Sidebar active glow — RUDE PERF-FIX 2026-06: pulsende activeGlow-animation FJERNET
   (animerede box-shadow = repaint hvert frame, kontinuerlig CPU). Statisk glød bevaret. */
.sidebar .nav-btn.active::before {
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.4);
}

/* Smooth page transitions */
.content-wrapper { scroll-behavior: smooth; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.view.active { animation: viewIn var(--dur-slow) var(--ease-out-expo); }

/* ── MICRO-CELEBRATIONS ────────────────────────────────────── */
/* Click ripple effect on interactive elements */
.nav-btn::after, .widget-action-btn::after, .spectrum-camp-tab::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--click-x, 50%) var(--click-y, 50%), var(--accent-light) 0%, transparent 60%);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.nav-btn:active::after, .widget-action-btn:active::after, .spectrum-camp-tab:active::after {
  opacity: 1; transition-duration: 0s;
}

/* Search focus: expanding glow ring */
#global-search {
  transition: all var(--dur-slow) var(--ease-out-expo);
}
#global-search:focus {
  box-shadow: 0 0 40px rgba(var(--accent-rgb),0.04);
  transform: scale(1.02);
}

/* ── PERFORMANCE - GPU hints ──────────────────────────────── */
.kpi-card, .section-card, .emp-card, .campaign-card, .glass-card,
.sidebar .nav-btn, .achievement-row span, .leaderboard-row {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── KPI accent bar on left side ──────────────────────────── */
[data-theme="dark"] .kpi-card { position: relative; overflow: hidden; }
[data-theme="dark"] .kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb),0.3)); border-radius: 0 2px 2px 0; opacity: 0.6; }
[data-theme="dark"] .kpi-card:nth-child(2)::before { background: linear-gradient(180deg, var(--blue), rgba(51,154,240,0.3)); }
[data-theme="dark"] .kpi-card:nth-child(3)::before { background: linear-gradient(180deg, var(--purple), rgba(132,94,247,0.3)); }
[data-theme="dark"] .kpi-card:nth-child(4)::before { background: linear-gradient(180deg, var(--amber), rgba(var(--pop-rgb),0.3)); }

/* Number glow on KPI values */
[data-theme="dark"] .kpi-value { transition: text-shadow 0.3s ease; }
[data-theme="dark"] .kpi-value.green { text-shadow: 0 0 20px rgba(var(--accent-rgb),0.2); }
[data-theme="dark"] .kpi-value.blue { text-shadow: 0 0 20px rgba(51,154,240,0.2); }
[data-theme="dark"] .kpi-value.purple { text-shadow: 0 0 20px rgba(132,94,247,0.2); }
[data-theme="dark"] .kpi-value.amber { text-shadow: 0 0 20px rgba(var(--pop-rgb),0.2); }
[data-theme="dark"] .kpi-value.red { text-shadow: 0 0 20px rgba(248,81,73,0.2); }

/* Glass card header gradient accent line */
.glass-card-header { position: relative; }
.glass-card-header::after { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.12), transparent); }

/* Brief card special treatment */
.brief-card { border: 1px solid rgba(var(--accent-rgb),0.06) !important; }
[data-theme="dark"] .brief-card { box-shadow: 0 4px 32px rgba(0,0,0,0.35), 0 0 48px rgba(var(--accent-rgb),0.02) !important; }

/* Campaign card radial hover glow */
.campaign-card { position: relative; overflow: hidden; transition: all 0.2s ease; }
.campaign-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),0.06), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.campaign-card:hover::after { opacity: 1; }

/* Employee card subtle radial */
.emp-card { position: relative; transition: all 0.2s ease; }
.emp-card:hover { transform: translateY(-2px); }

/* Goal bar fill glow */
[data-theme="dark"] .goal-bar-fill, [data-theme="dark"] .mini-bar-fill { box-shadow: 0 0 8px rgba(var(--accent-rgb),0.15); }

/* Leaderboard row hover slide */
.leaderboard-row { transition: all 0.15s ease; }
.leaderboard-row:hover { transform: translateX(4px); }

/* Coach suggestion hover */
.coach-suggestion { transition: all 0.2s ease; }
.coach-suggestion:hover { transform: translateX(4px); }

/* Onboarding step hover */
.ob-step { transition: all 0.15s ease; }
.ob-step:hover { transform: translateX(4px); background: var(--surface); }

/* Upload box animated border */
.upload-box { position: relative; transition: all 0.2s ease; }
.upload-box:hover { transform: translateY(-2px); }
.upload-box::after { content: ''; position: absolute; inset: -1px; border-radius: var(--r); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), transparent, rgba(51,154,240,0.10)); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: -1; }
.upload-box:hover::after { opacity: 1; }

/* Button micro-interaction */
.btn, .widget-action-btn, .login-btn, .spectrum-camp-tab { transition: all 0.15s ease !important; }
.btn:active, .widget-action-btn:active, .login-btn:active { transform: scale(0.97); }

/* Sidebar nav smooth hover */
.sidebar .nav-btn { transition: all 0.18s ease, background 0.18s ease; }
.sidebar .nav-btn:hover { transform: translateX(2px); }
.sidebar .nav-btn.active { transform: translateX(0); }

/* Tag hover glow */
.tag:hover { filter: brightness(1.1); }

/* Search input focus glow */
[data-theme="dark"] .search-input:focus, [data-theme="dark"] .input-field:focus { border-color: rgba(var(--accent-rgb),0.25); box-shadow: 0 0 16px rgba(var(--accent-rgb),0.06); }

/* Modal backdrop blur */
.app-modal-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Toast entrance */
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast { animation: toastIn 0.3s ease; }

/* Data table row hover */
.data-table tr { transition: background 0.1s ease; }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(var(--accent-rgb),0.02) !important; }

/* Spectrum dot pulse */
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.2); } 50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0); } }

/* Content area fade in */
@keyframes contentFadeIn { from { opacity: 0; } to { opacity: 1; } }
.view { animation: contentFadeIn 0.3s ease; }

/* ── SCROLLBAR REFINEMENT ──────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--surface-hover); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.10); }

/* ── RESPONSIVE TYPOGRAPHY ──────────────────────────────────── */
.topbar-title { font-family: var(--font-brand); font-weight: 800; letter-spacing: -0.03em; }
.glass-card-title { font-family: var(--font-brand); font-weight: 700; letter-spacing: -0.01em; }
.stat-value { font-family: var(--font-mono);font-variant-numeric:tabular-nums; font-weight: 700; }

/* ══ ANIMATED PROFILE FRAMES ══ */
@keyframes frame-fire { 0%{box-shadow:0 0 8px #ff4500,0 0 16px #ff6347,0 0 24px #ff4500} 50%{box-shadow:0 0 12px #ff6347,0 0 24px #ff4500,0 0 36px #ff8c00} 100%{box-shadow:0 0 8px #ff4500,0 0 16px #ff6347,0 0 24px #ff4500} }
@keyframes frame-rainbow { 0%{border-color:#ff0000} 16%{border-color:#ff8800} 33%{border-color:#ffff00} 50%{border-color:#00ff00} 66%{border-color:#0088ff} 83%{border-color:#8800ff} 100%{border-color:#ff0000} }
@keyframes frame-diamond { 0%{box-shadow:0 0 10px #00bfff,0 0 20px rgba(0,191,255,.3)} 50%{box-shadow:0 0 20px #00ffff,0 0 40px rgba(0,255,255,.4)} 100%{box-shadow:0 0 10px #00bfff,0 0 20px rgba(0,191,255,.3)} }
@keyframes frame-gold { 0%{box-shadow:0 0 10px #ffd700,0 0 20px rgba(255,215,0,.3)} 50%{box-shadow:0 0 20px #ffcc00,0 0 40px rgba(255,204,0,.4)} 100%{box-shadow:0 0 10px #ffd700,0 0 20px rgba(255,215,0,.3)} }
@keyframes frame-neon { 0%{box-shadow:0 0 5px #0ff,0 0 10px #0ff,0 0 20px #0ff} 50%{box-shadow:0 0 10px #f0f,0 0 20px #f0f,0 0 40px #f0f} 100%{box-shadow:0 0 5px #0ff,0 0 10px #0ff,0 0 20px #0ff} }
@keyframes frame-matrix { 0%{box-shadow:0 0 8px #00ff41,0 0 16px rgba(0,255,65,.3)} 50%{box-shadow:0 0 16px #00ff41,0 0 32px rgba(0,255,65,.5)} 100%{box-shadow:0 0 8px #00ff41,0 0 16px rgba(0,255,65,.3)} }
@keyframes frame-galaxy { 0%{border-color:#6366f1;box-shadow:0 0 15px rgba(99,102,241,.4)} 33%{border-color:#a855f7;box-shadow:0 0 15px rgba(168,85,247,.4)} 66%{border-color:#ec4899;box-shadow:0 0 15px rgba(236,72,153,.4)} 100%{border-color:#6366f1;box-shadow:0 0 15px rgba(99,102,241,.4)} }
@keyframes frame-frost { 0%{box-shadow:0 0 10px #87ceeb,0 0 20px rgba(135,206,235,.3)} 50%{box-shadow:0 0 20px #b0e0e6,0 0 40px rgba(173,216,230,.4)} 100%{box-shadow:0 0 10px #87ceeb,0 0 20px rgba(135,206,235,.3)} }
@keyframes frame-spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.pf-frame { border-radius:50%; position:relative; display:inline-block; }
.pf-frame img, .pf-frame > div { border-radius:50%; }
.pf-frame-fire { border:3px solid #ff4500; animation: frame-fire 1.5s ease-in-out infinite; }
.pf-frame-rainbow { border:3px solid #ff0000; animation: frame-rainbow 3s linear infinite; }
.pf-frame-diamond { border:3px solid #00bfff; animation: frame-diamond 2s ease-in-out infinite; }
.pf-frame-agf { border:3px solid #fff; box-shadow: 0 0 0 3px #5b2d8e, 0 0 12px rgba(91,45,142,.4), 0 0 24px rgba(91,45,142,.2); }
.pf-frame-barbie { border:3px solid #ff69b4; animation: frame-gold 2s ease-in-out infinite; box-shadow: 0 0 12px rgba(255,105,180,.5); }
.pf-frame-gold { border:3px solid #ffd700; animation: frame-gold 2s ease-in-out infinite; }
.pf-frame-matrix { border:3px solid #00ff41; animation: frame-matrix 1.5s ease-in-out infinite; }
.pf-frame-galaxy { border:3px solid #6366f1; animation: frame-galaxy 4s ease-in-out infinite; }
.pf-frame-neon { border:3px solid #0ff; animation: frame-neon 2s ease-in-out infinite; }
.pf-frame-frost { border:3px solid #87ceeb; animation: frame-frost 2.5s ease-in-out infinite; }

/* ── WORKDESK ── */
.wd-card { transition: transform .15s ease, box-shadow .15s ease; }
.wd-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
@media (max-width: 768px) {
    #workdesk-content [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   POLISH-PACK (porteret fra canvas-concept.html): smooth value-changes,
   skeleton-loaders, click-press microinteractions, save-pulse, konfetti.
   Ingen breaking changes - kun additive CSS + non-overriding helpers.
   ════════════════════════════════════════════════════════════════════════ */

/* CountUp: tabular-nums + flash-effekt når value animerer */
.kpi-value, .stat-value, [data-fld="value"], .big-num, .bignum {
  font-variant-numeric: tabular-nums;
  transition: color .25s;
}
.kpi-value.cu-flash, .stat-value.cu-flash, [data-fld="value"].cu-flash, .bignum.cu-flash {
  animation: app-cu-flash .6s ease-out;
}
@keyframes app-cu-flash {
  0%   { filter: drop-shadow(0 0 6px var(--accent)); transform: scale(1.04); }
  100% { filter: none; transform: scale(1); }
}

/* Skeleton-loader: shimmer placeholder mens data hentes */
@keyframes app-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.is-loading .kpi-value,
.is-loading .stat-value,
.is-loading [data-fld="value"],
.is-loading .skel {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--surface, #12161f) 100%, transparent),
    color-mix(in srgb, var(--card-2, #1a2030) 80%, var(--accent) 8%),
    color-mix(in srgb, var(--surface, #12161f) 100%, transparent)) !important;
  background-size: 200% 100% !important;
  animation: app-skel-shimmer 1.6s ease-in-out infinite !important;
  color: transparent !important;
  border-radius: 4px;
}

/* Microinteractions: click-press på kpi-cards og buttons */
.kpi-card, button, .btn { transition: transform .14s ease-out, background .15s, border-color .15s, box-shadow .2s; }
.kpi-card:active:not(.no-press) { transform: scale(.985); }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(.96); }

/* Save-success pulse - fyrer på .saved-pulse class */
@keyframes app-save-success-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
  100% { transform: scale(1); }
}
.saved-pulse,
.saved-pulse .ic,
.saved-pulse .span,
button.saved-pulse {
  animation: app-save-success-pulse .65s cubic-bezier(.34,1.56,.64,1);
}

/* Konfetti-burst: CSS-only, pure SVG-particles */
.confetti-host { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece {
  position: absolute; width: 8px; height: 14px; border-radius: 2px;
  animation: app-confetti-fall var(--cf-dur, 2.6s) cubic-bezier(.4,.6,.6,1) forwards;
  will-change: transform, opacity;
}
@keyframes app-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(.7); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate3d(var(--cf-x, 0), 100vh, 0) rotate(var(--cf-r, 720deg)) scale(1); opacity: 0; }
}