:root{--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .15), 0 6px 10px rgba(0, 0, 0, .08);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, .1);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .06);--color-primary: hsl(210, 60%, 50%);--color-primary-dark: hsl(210, 65%, 35%);--color-primary-light: hsl(210, 55%, 65%);--color-accent: hsl(180, 50%, 45%);--color-accent-dark: hsl(180, 55%, 30%);--color-accent-light: hsl(180, 45%, 60%);--color-surface: hsl(220, 15%, 8%);--color-surface-elevated: hsl(220, 15%, 12%);--color-surface-overlay: hsla(220, 15%, 10%, .85);--alpha-5: .05;--alpha-8: .08;--alpha-16: .16;--alpha-24: .24;--alpha-48: .48;--alpha-64: .64;--alpha-85: .85;--font-size-xs: 11px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 40px;--line-height-tight: 1.2;--line-height-base: 1.5;--line-height-relaxed: 1.7;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .02em;--letter-spacing-wider: .04em;--letter-spacing-widest: .08em;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--transition-slower: .5s ease;--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-popover: 500;--z-tooltip: 600;--z-notification: 700}.skeleton{background:linear-gradient(90deg,var(--color-surface) 0%,var(--color-surface-elevated) 50%,var(--color-surface) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.globe-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.globe-loading-spinner{width:64px;height:64px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-accent);border-radius:50%;animation:spinner-rotate 1s linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.globe-loading-text{margin-top:var(--spacing-md);font-size:var(--font-size-sm);color:#fff9;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}.fade-in{animation:fadeIn var(--transition-slower) ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--transition-slow) ease-out}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-right{animation:slideInRight var(--transition-slow) ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.scale-in{animation:scaleIn var(--transition-base) ease-out}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.stagger-in>*{animation:fadeIn var(--transition-base) ease-out both}.stagger-in>*:nth-child(1){animation-delay:50ms}.stagger-in>*:nth-child(2){animation-delay:.1s}.stagger-in>*:nth-child(3){animation-delay:.15s}.stagger-in>*:nth-child(4){animation-delay:.2s}.stagger-in>*:nth-child(5){animation-delay:.25s}.glass{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg)}.glass-dark{background:#0006;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}.glass-light{background:#ffffff14;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15)}.interactive{transition:all var(--transition-fast);cursor:pointer}.interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.interactive:active{transform:scale(.98);transition:transform .1s ease}.btn-press{position:relative;overflow:hidden;transition:all var(--transition-fast)}.btn-press:active{transform:scale(.98)}.btn-press:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-press:active:after{width:300px;height:300px}.hover-glow{transition:all var(--transition-base);position:relative}.hover-glow:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--color-accent),var(--color-primary));border-radius:inherit;opacity:0;transition:opacity var(--transition-base);z-index:-1;filter:blur(8px)}.hover-glow:hover:before{opacity:.5}.heading-primary{font-size:var(--font-size-2xl);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);font-weight:700}.heading-secondary{font-size:var(--font-size-xl);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);font-weight:600}.heading-tertiary{font-size:var(--font-size-lg);line-height:var(--line-height-base);font-weight:600}.text-label{font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-widest);text-transform:uppercase;font-weight:600;opacity:.7}.text-mono{font-family:SF Mono,Monaco,Inconsolata,Fira Code,monospace;font-feature-settings:"tnum" on,"lnum" on}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);padding:var(--spacing-xs) var(--spacing-sm);background:#000000e6;color:#fff;font-size:var(--font-size-sm);white-space:nowrap;border-radius:4px;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);z-index:var(--z-tooltip)}.tooltip:hover:after{opacity:1}.performance-overlay{position:fixed;top:var(--spacing-md);right:var(--spacing-md);padding:var(--spacing-sm);background:#000c;border-radius:4px;font-family:var(--font-mono);font-size:var(--font-size-xs);color:#0f0;z-index:var(--z-overlay);pointer-events:none}.fps-counter{display:flex;align-items:center;gap:var(--spacing-xs)}.fps-value{color:#0f0;font-weight:700}.fps-low{color:#ff0}.fps-critical{color:red}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-xl);text-align:center}.empty-state-icon{width:120px;height:120px;margin-bottom:var(--spacing-lg);opacity:.3}.empty-state-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-sm);opacity:.8}.empty-state-description{font-size:var(--font-size-base);opacity:.6;max-width:400px}.focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}*:focus{outline:none}*:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (max-width: 768px){:root{--font-size-base: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 22px;--font-size-2xl: 28px}.hide-mobile{display:none!important}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;border-radius:12px;background:#ffffff1a;color:#fffc}.badge-success{background:#22c55e33;color:#22c55e}.badge-warning{background:#fbbf2433;color:#fbbf24}.badge-error{background:#ef444433;color:#ef4444}.number-transition{display:inline-block;transition:all var(--transition-base)}.number-transition.changing{transform:scale(1.1);color:var(--color-accent)}.cursor-grab{cursor:grab}.cursor-grab:active{cursor:grabbing}.cursor-zoom-in{cursor:zoom-in}.cursor-zoom-out{cursor:zoom-out}.cursor-move{cursor:move}.btn-animate{transition:all .2s ease-out;transform:translateY(0)}.btn-animate:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0ff3}.btn-animate:active{transform:translateY(0);transition-duration:.1s}.card-hover{transition:all .3s ease-out;transform:translateY(0)}.card-hover:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.scale-hover{transition:transform .2s ease-out}.scale-hover:hover{transform:scale(1.05)}.scale-hover:active{transform:scale(.98);transition-duration:.1s}.glow-hover{transition:all .3s ease-out;box-shadow:0 0 #06b6d400}.glow-hover:hover{box-shadow:0 0 20px #06b6d44d}.pulse-slow{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.bounce-subtle{animation:bounce-subtle 1s ease-in-out infinite}@keyframes bounce-subtle{0%,to{transform:translateY(0);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(-3px);animation-timing-function:cubic-bezier(0,0,.2,1)}}.fade-in{animation:fade-in .3s ease-out forwards}.fade-in-up{animation:fade-in-up .4s ease-out forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-in-right{animation:slide-in-right .3s ease-out forwards}.slide-in-left{animation:slide-in-left .3s ease-out forwards}@keyframes slide-in-right{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.stagger-item{opacity:0;animation:fade-in-up .4s ease-out forwards}.stagger-item:nth-child(1){animation-delay:.05s}.stagger-item:nth-child(2){animation-delay:.1s}.stagger-item:nth-child(3){animation-delay:.15s}.stagger-item:nth-child(4){animation-delay:.2s}.stagger-item:nth-child(5){animation-delay:.25s}.stagger-item:nth-child(6){animation-delay:.3s}.stagger-item:nth-child(7){animation-delay:.35s}.stagger-item:nth-child(8){animation-delay:.4s}.stagger-item:nth-child(9){animation-delay:.45s}.stagger-item:nth-child(10){animation-delay:.5s}.icon-spin-slow{animation:spin 3s linear infinite}.icon-bounce{animation:bounce-subtle .6s ease-in-out}.progress-bar{background:linear-gradient(90deg,#0891b2,#06b6d4,#0891b2);background-size:200% 100%;animation:progress-shimmer 2s ease-in-out infinite}@keyframes progress-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.notification-enter{animation:notification-enter .4s cubic-bezier(.68,-.55,.265,1.55)}.notification-exit{animation:notification-exit .3s ease-in forwards}@keyframes notification-enter{0%{opacity:0;transform:translateY(-100%) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes notification-exit{to{opacity:0;transform:translateY(-100%) scale(.9)}}.modal-overlay{animation:fade-in .2s ease-out}.modal-content{animation:modal-enter .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modal-enter{0%{opacity:0;transform:scale(.9) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.ripple{position:relative;overflow:hidden}.ripple:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.ripple:active:before{width:300px;height:300px}.float{animation:float 6s ease-in-out infinite}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}.success-pulse{animation:success-pulse .6s ease-out}.error-shake{animation:error-shake .5s ease-in-out}@keyframes success-pulse{0%{box-shadow:0 0 #22c55eb3}70%{box-shadow:0 0 0 10px #22c55e00}to{box-shadow:0 0 #22c55e00}}@keyframes error-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}
