:root{--surface-0:#09090b;--surface-1:#111113;--surface-2:#18181b;--surface-3:#27272a;--surface-4:#3f3f46;--gold-300:#E8CC6E;--gold-400:#D4AF37;--gold-500:#B8941F;--gold-600:#9A7B18;--gold-bg:rgba(212,175,55,0.10);--gold-border:rgba(212,175,55,0.20);--neon-amber:#FFBB00;--neon-cyan:#00E6FF;--neon-green:#00FF87;--neon-red:#FF4141;--neon-violet:#A778FF;--neon-pink:#FF3CAC;--neon-orange:#FF7832;--neon-teal:#00E6C8;--neon-indigo:#7864FF;--neon-rose:#FF6EB4;--module-login:#D4AF37;--module-teamchat:#00E6FF;--module-finance:#00FF87;--module-uren:#FFBB00;--module-bon:#A778FF;--module-kassa:#FF3CAC;--module-keuken:#FF7832;--module-controle:#00E6C8;--module-afhaal:#FF4141;--module-taken:#7864FF;--module-verzoeken:#FF6EB4;--module-rooster:#38BDF8;--module-login-rgb:212,175,55;--module-teamchat-rgb:0,230,255;--module-finance-rgb:0,255,135;--module-uren-rgb:255,187,0;--module-bon-rgb:167,120,255;--module-kassa-rgb:255,60,172;--module-keuken-rgb:255,120,50;--module-controle-rgb:0,230,200;--module-afhaal-rgb:255,65,65;--module-taken-rgb:120,100,255;--module-verzoeken-rgb:255,110,180;--module-rooster-rgb:56,189,248;--module-accent:var(--gold-400);--module-accent-rgb:212,175,55;--text-primary:#fafafa;--text-secondary:#a1a1aa;--text-muted:#71717a;--text-faint:#52525b;--border-subtle:rgba(255,255,255,0.04);--border-default:rgba(255,255,255,0.06);--border-strong:rgba(255,255,255,0.10);--border-hover:rgba(255,255,255,0.12);--shadow-sm:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);--shadow-xl:0 8px 32px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.2);--shadow-3d:0 8px 32px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.05);--shadow-3d-hover:0 16px 48px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.08);--shadow-glow-gold:0 0 20px rgba(212,175,55,0.3);--shadow-glow-cyan:0 0 20px rgba(0,230,255,0.3);--shadow-neon:0 0 20px rgba(var(--module-accent-rgb),0.3);--shadow-accent-glow:0 0 20px rgba(var(--module-accent-rgb),0.3),0 0 40px rgba(var(--module-accent-rgb),0.1);--shadow-depth:0 0 0 1px rgba(0,0,0,0.3),0 2px 4px rgba(0,0,0,0.2),0 12px 24px rgba(0,0,0,0.2);--shadow-depth-hover:0 0 0 1px rgba(0,0,0,0.3),0 4px 8px rgba(0,0,0,0.3),0 24px 48px rgba(0,0,0,0.25);--shadow-bevel:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.2);--shadow-3d-deep:0 8px 32px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06),inset 1px 0 0 rgba(255,255,255,0.03),inset 0 -1px 0 rgba(0,0,0,0.2);--gradient-border-subtle:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,rgba(255,255,255,0.08));--gradient-border-gold:linear-gradient(135deg,rgba(212,175,55,0.3) 0%,rgba(255,255,255,0.05) 50%,rgba(var(--module-accent-rgb),0.2) 100%);--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace;--heading-tracking:-0.02em;--body-tracking:-0.01em;--label-tracking:0.05em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--spacing-xs:var(--space-1);--spacing-sm:var(--space-2);--spacing-md:var(--space-4);--spacing-lg:var(--space-6);--spacing-xl:var(--space-8);--spacing-2xl:48px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:14px;--radius-full:9999px;--z-base:1;--z-header:100;--z-sidebar:150;--z-nav:200;--z-modal:300;--z-admin:400;--z-chat-overlay:500;--z-toast:9999;--focus-ring:0 0 0 2px var(--surface-0),0 0 0 4px var(--gold-400);--transition-fast:100ms ease;--transition-base:150ms ease;--transition-slow:250ms ease;--transition-spring:500ms cubic-bezier(0.34,1.56,0.64,1);--perspective-card:1000px;--frosted-bg:rgba(17,17,19,0.75);--frosted-blur:blur(20px) saturate(180%)}html{scroll-behavior:smooth;overscroll-behavior-y:contain}body{background-color:var(--surface-0);color:var(--text-primary);font-family:var(--font-sans);letter-spacing:var(--body-tracking);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface-1)}::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gold-500)}::selection{background:rgba(212,175,55,.3);color:var(--text-primary)}:focus-visible{outline:none;box-shadow:var(--focus-ring)}@keyframes ambient-shift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}body:before{background:radial-gradient(ellipse 80% 60% at 20% 80%,rgba(var(--module-accent-rgb),.03) 0,transparent 70%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(var(--module-accent-rgb),.025) 0,transparent 70%),radial-gradient(ellipse 70% 50% at 50% 50%,rgba(212,175,55,.015) 0,transparent 60%),linear-gradient(135deg,#09090b 0,#0d0d10 25%,#0a0b0f 50%,#0c0a0e 75%,#09090b 100%);background-size:100% 100%,100% 100%,100% 100%,400% 400%;animation:ambient-shift 30s ease-in-out infinite}body:after,body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}body:after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.025;mix-blend-mode:overlay}.bg-dot-pattern{background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 0);background-size:24px 24px}.bg-mesh-gradient{position:relative}.bg-mesh-gradient:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 50% at 25% 25%,rgba(var(--module-accent-rgb),.06) 0,transparent 70%),radial-gradient(ellipse 50% 50% at 75% 75%,rgba(212,175,55,.04) 0,transparent 70%),radial-gradient(ellipse 40% 60% at 60% 30%,rgba(var(--module-accent-rgb),.03) 0,transparent 60%);border-radius:inherit;pointer-events:none}[role=button],button{cursor:pointer}.surface-card{background:var(--surface-1);border-top:1px solid var(--border-default);border:1px solid var(--border-default);border-top:1px solid rgba(255,255,255,.04);border-radius:var(--radius-md)}.surface-elevated{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:var(--shadow-3d)}.surface-elevated,.surface-interactive{background:var(--surface-1);border-top:1px solid var(--border-default);border:1px solid var(--border-default);border-top:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md)}.surface-interactive{box-shadow:var(--shadow-xl);transition:transform .3s ease-out,box-shadow .3s ease-out,border-color var(--transition-fast)}.surface-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-3d-hover);border-color:var(--border-hover)}.surface-interactive:active{transform:translateY(0) scale(.98)}.card-3d{transform-style:preserve-3d;will-change:transform}.card-3d:hover{transform:perspective(var(--perspective-card)) rotateX(1deg) rotateY(-1deg) translateY(-2px)}.card-3d:active{transform:perspective(var(--perspective-card)) rotateX(0) rotateY(0) scale(.98)}.surface-frosted{background:var(--frosted-bg);backdrop-filter:var(--frosted-blur);-webkit-backdrop-filter:var(--frosted-blur);border:1px solid var(--border-subtle)}.surface-glow{background:var(--surface-1);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:box-shadow .3s ease-out,border-color .3s ease-out}.surface-glow:hover{box-shadow:var(--shadow-accent-glow);border-color:rgba(var(--module-accent-rgb),.15)}.surface-gradient{border:1px solid transparent;background:linear-gradient(var(--surface-1),var(--surface-1)) padding-box,var(--gradient-border-subtle) border-box;border-radius:var(--radius-md);box-shadow:var(--shadow-depth);transition:box-shadow .2s ease,background .2s ease}.surface-gradient:hover{background:linear-gradient(var(--surface-1),var(--surface-1)) padding-box,var(--gradient-border-gold) border-box;box-shadow:var(--shadow-depth-hover)}.surface-beveled{background:var(--surface-1);border-left:1px solid var(--border-default);border-right:1px solid var(--border-default);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(0,0,0,.3);border-radius:var(--radius-md);box-shadow:var(--shadow-bevel),var(--shadow-md)}.surface-active{background:var(--surface-1);border:1px solid rgba(var(--module-accent-rgb),.15);border-radius:var(--radius-md);box-shadow:inset 0 0 20px rgba(var(--module-accent-rgb),.05),0 0 20px rgba(var(--module-accent-rgb),.08)}.surface-deep{background:var(--surface-1);border-top:1px solid var(--border-default);border:1px solid var(--border-default);border-top:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);box-shadow:var(--shadow-3d-deep);transition:box-shadow .3s ease-out,border-color .2s ease}.surface-deep:hover{border-color:var(--border-hover);box-shadow:var(--shadow-depth-hover),inset 0 1px 0 rgba(255,255,255,.08)}.neon-glow{text-shadow:0 0 20px rgba(var(--module-accent-rgb),.6),0 0 40px rgba(var(--module-accent-rgb),.2)}.neon-border{border-color:rgba(var(--module-accent-rgb),.15)}.neon-bg{background:rgba(var(--module-accent-rgb),.08)}.glass{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.glass,.glass-heavy{background:var(--surface-1);border:1px solid var(--border-default)}.glass-heavy{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.glass-gold{background:var(--surface-1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--gold-border)}.glass-button{background:var(--surface-2);border:1px solid var(--border-default);transition:all var(--transition-fast)}.glass-button:hover{background:var(--surface-3);border-color:var(--border-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.glass-button:active{transform:translateY(0) scale(.98);box-shadow:none}.glass-accent{background:var(--surface-1);border:1px solid var(--border-default);transition:all var(--transition-fast)}.glass-accent:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}.glass-button-gold{background:var(--surface-2);border:1px solid var(--gold-border);box-shadow:var(--shadow-sm)}.glass-button-gold:hover{background:var(--surface-3);border-color:rgba(212,175,55,.35);box-shadow:var(--shadow-md),0 0 20px rgba(212,175,55,.15)}.glass-admin{background:var(--surface-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-left:1px solid var(--border-default)}.glow-cyan{box-shadow:0 0 20px rgba(0,230,255,.3)}.glow-green{box-shadow:0 0 20px rgba(0,255,135,.3)}.glow-amber{box-shadow:0 0 20px rgba(255,187,0,.3)}.glow-red{box-shadow:0 0 20px rgba(255,65,65,.3)}.glow-violet{box-shadow:0 0 20px rgba(167,120,255,.3)}.glow-gold{box-shadow:var(--shadow-glow-gold)}.accent-glow{box-shadow:var(--shadow-accent-glow)}.accent-glow-hover{transition:box-shadow .3s ease-out}.accent-glow-hover:hover{box-shadow:var(--shadow-accent-glow)}.glow-login{box-shadow:0 0 20px rgba(212,175,55,.25),0 0 40px rgba(212,175,55,.08)}.glow-teamchat{box-shadow:0 0 20px rgba(0,230,255,.25),0 0 40px rgba(0,230,255,.08)}.glow-finance{box-shadow:0 0 20px rgba(0,255,135,.25),0 0 40px rgba(0,255,135,.08)}.glow-uren{box-shadow:0 0 20px rgba(255,187,0,.25),0 0 40px rgba(255,187,0,.08)}.glow-bon{box-shadow:0 0 20px rgba(167,120,255,.25),0 0 40px rgba(167,120,255,.08)}.glow-kassa{box-shadow:0 0 20px rgba(255,60,172,.25),0 0 40px rgba(255,60,172,.08)}.glow-keuken{box-shadow:0 0 20px rgba(255,120,50,.25),0 0 40px rgba(255,120,50,.08)}.glow-controle{box-shadow:0 0 20px rgba(0,230,200,.25),0 0 40px rgba(0,230,200,.08)}.glow-afhaal{box-shadow:0 0 20px rgba(255,65,65,.25),0 0 40px rgba(255,65,65,.08)}.glow-taken{box-shadow:0 0 20px rgba(120,100,255,.25),0 0 40px rgba(120,100,255,.08)}.glow-verzoeken{box-shadow:0 0 20px rgba(255,110,180,.25),0 0 40px rgba(255,110,180,.08)}@keyframes slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-down{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-in-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes status-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}@keyframes badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes float-slow{0%,to{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-8px) rotate(1deg)}66%{transform:translateY(4px) rotate(-1deg)}}@keyframes gold-float{0%,to{transform:translate(0) scale(1);opacity:.4}25%{transform:translate(10px,-20px) scale(1.1);opacity:.6}50%{transform:translate(-5px,-35px) scale(.95);opacity:.3}75%{transform:translate(15px,-15px) scale(1.05);opacity:.5}}@keyframes slide-down-expand{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}@keyframes focus-expand{0%{box-shadow:0 0 0 0 rgba(212,175,55,.4)}to{box-shadow:0 0 0 3px rgba(212,175,55,.3)}}.animate-slide-up{animation:slide-up .2s ease-out}.animate-slide-down{animation:slide-down .2s ease-out}.animate-slide-in-right{animation:slide-in-right .2s ease-out}.animate-fade-in{animation:fade-in .15s ease-out}.animate-scale-in{animation:scale-in .15s var(--transition-spring)}.animate-status-pulse{animation:status-pulse 2s ease-in-out infinite}.animate-badge-pulse{animation:badge-pulse 2s ease-in-out infinite}.animate-shimmer{animation:shimmer 1.5s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-float-slow{animation:float-slow 20s ease-in-out infinite}.animate-gold-float{animation:gold-float 12s ease-in-out infinite;will-change:transform,opacity}.animate-slide-down-expand{animation:slide-down-expand .2s ease-out forwards;overflow:hidden}.animate-focus-expand:focus{animation:focus-expand .2s ease-out forwards}.animate-skeleton{background:linear-gradient(105deg,var(--surface-2) 0,var(--surface-2) 35%,rgba(255,255,255,.04) 45%,var(--surface-3) 50%,rgba(255,255,255,.04) 55%,var(--surface-2) 65%,var(--surface-2) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.8s ease-in-out infinite}.btn-3d{transform-style:preserve-3d}.btn-3d:active{box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)!important}@keyframes gradient-shift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.animate-gradient-shift{background-size:200% 200%;animation:gradient-shift 8s ease-in-out infinite}.press-scale{transition:transform var(--transition-fast)}.press-scale:active{transform:scale(.97)}.hover-lift{transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.hover-lift:active{transform:translateY(0)}.hover-glow{transition:box-shadow var(--transition-base)}.hover-glow:hover{box-shadow:0 0 20px rgba(var(--module-accent-rgb),.15)}.tab-indicator{position:relative}.tab-indicator:after{content:"";position:absolute;bottom:-1px;left:50%;width:0;height:2px;background:var(--module-accent,var(--gold-400));border-radius:var(--radius-full);transition:width var(--transition-fast),left var(--transition-fast)}.tab-indicator:hover:after,.tab-indicator[aria-current=page]:after,.tab-indicator[aria-selected=true]:after{width:60%;left:20%}@keyframes count-bump{0%{transform:scale(1)}40%{transform:scale(1.2)}to{transform:scale(1)}}.animate-count-bump{animation:count-bump .3s ease-out}@media (prefers-reduced-motion:reduce){.animate-badge-pulse,.animate-float-slow,.animate-gold-float,.animate-gradient-shift,.animate-scale-in,.animate-shimmer,.animate-skeleton,.animate-slide-down,.animate-slide-in-right,.animate-slide-up,.animate-status-pulse,body:after,body:before{animation:none}.btn-3d:hover,.card-3d:hover,.hover-lift:hover{transform:none}}