solforge 0.2.3 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +323 -364
  3. package/cli.cjs +126 -69
  4. package/package.json +1 -1
  5. package/scripts/install.sh +112 -0
  6. package/scripts/postinstall.cjs +66 -58
  7. package/server/methods/program/get-token-accounts-by-owner.ts +7 -2
  8. package/server/ws-server.ts +4 -1
  9. package/src/api-server-entry.ts +91 -91
  10. package/src/cli/commands/rpc-start.ts +4 -1
  11. package/src/cli/main.ts +39 -14
  12. package/src/cli/run-solforge.ts +20 -6
  13. package/src/commands/add-program.ts +324 -328
  14. package/src/commands/init.ts +106 -106
  15. package/src/commands/list.ts +125 -125
  16. package/src/commands/mint.ts +246 -246
  17. package/src/commands/start.ts +834 -831
  18. package/src/commands/status.ts +80 -80
  19. package/src/commands/stop.ts +381 -382
  20. package/src/config/manager.ts +149 -149
  21. package/src/gui/public/app.css +1556 -1
  22. package/src/gui/public/build/main.css +1569 -1
  23. package/src/gui/server.ts +20 -21
  24. package/src/gui/src/app.tsx +56 -37
  25. package/src/gui/src/components/airdrop-mint-form.tsx +17 -11
  26. package/src/gui/src/components/clone-program-modal.tsx +6 -6
  27. package/src/gui/src/components/clone-token-modal.tsx +7 -7
  28. package/src/gui/src/components/modal.tsx +13 -11
  29. package/src/gui/src/components/programs-panel.tsx +27 -15
  30. package/src/gui/src/components/status-panel.tsx +31 -17
  31. package/src/gui/src/components/tokens-panel.tsx +25 -19
  32. package/src/gui/src/index.css +491 -463
  33. package/src/index.ts +161 -146
  34. package/src/rpc/start.ts +1 -1
  35. package/src/services/api-server.ts +470 -473
  36. package/src/services/port-manager.ts +167 -167
  37. package/src/services/process-registry.ts +143 -143
  38. package/src/services/program-cloner.ts +312 -312
  39. package/src/services/token-cloner.ts +799 -797
  40. package/src/services/validator.ts +288 -288
  41. package/src/types/config.ts +71 -71
  42. package/src/utils/shell.ts +75 -75
  43. package/src/utils/token-loader.ts +77 -77
@@ -1 +1,1569 @@
1
- *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button{-webkit-appearance:button;background-color:#0000;background-image:none}input:where([type=button]){-webkit-appearance:button;background-color:#0000;background-image:none}input:where([type=reset]){-webkit-appearance:button;background-color:#0000;background-image:none}input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre,fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.glass-panel{border-width:1px;border-color:var(--color-border-default);backdrop-filter:blur(20px);box-shadow:var(--shadow-xl),inset 0 1px 0 0 #ffffff0d;transition:var(--transition-base);background:linear-gradient(135deg,#ffffff08,#ffffff03);border-radius:1rem}.glass-panel:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-2xl),var(--shadow-glow),inset 0 1px 0 0 #ffffff14}.card{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);transition:var(--transition-smooth);animation:fadeIn .5s ease-out;border-radius:.75rem;padding:1.5rem}.card:hover{background:var(--color-bg-elevated);border-color:var(--color-border-default);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary{display:inline-flex;transition:var(--transition-base);position:relative;overflow:hidden;text-transform:none;letter-spacing:.01em;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:#fff;border-radius:.75rem;justify-content:center;align-items: center;gap:.5rem;padding:.625rem 1.25rem;font-weight:500;box-shadow:0 4px 15px #8b5cf64d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px #8b5cf680}.btn-primary:active{transform:translateY(0)}.btn-secondary{display:inline-flex;transition:var(--transition-base);position:relative;overflow:hidden;text-transform:none;letter-spacing:.01em;background:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:.75rem;justify-content:center;align-items: center;gap:.5rem;padding:.625rem 1.25rem;font-weight:500}.btn-secondary:hover{background:var(--color-bg-hover);border-color:var(--color-accent-primary);box-shadow:inset 0 0 0 1px var(--color-accent-primary)}.btn-icon{display:inline-flex;background:var(--color-bg-elevated);border:1px solid var(--color-border-subtle);color:var(--color-text-secondary);transition:var(--transition-base);border-radius:12px;justify-content:center;align-items: center;width:40px;height:40px}.btn-icon:hover{background:var(--color-bg-hover);color:var(--color-accent-primary);border-color:var(--color-accent-primary);transform:scale(1.05)}.\!input,.input{border-radius:.75rem;width:100%;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem}.\!input{background:var(--color-bg-surface)!important;border:1px solid var(--color-border-subtle)!important;color:var(--color-text-primary)!important;transition:var(--transition-base)!important;font-family:Inter,sans-serif!important}.input{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);transition:var(--transition-base);font-family:Inter,sans-serif}.\!input:hover{background:var(--color-bg-elevated)!important;border-color:var(--color-border-default)!important}.input:hover{background:var(--color-bg-elevated);border-color:var(--color-border-default)}.\!input:focus{outline:none!important;border-color:var(--color-accent-primary)!important;box-shadow:0 0 0 3px var(--color-accent-glow)!important;background:var(--color-bg-elevated)!important}.input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px var(--color-accent-glow);background:var(--color-bg-elevated)}.\!input::-moz-placeholder{color:var(--color-text-muted)!important}.\!input::placeholder{color:var(--color-text-muted)!important}.input::-moz-placeholder{color:var(--color-text-muted)}.input::placeholder{color:var(--color-text-muted)}.select{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);transition:var(--transition-base);border-radius:.75rem;width:100%;padding:.75rem 1rem;font-family:Inter,sans-serif;font-size:.875rem;line-height:1.25rem}.select:hover{border-color:var(--color-border-default)}.select:focus,.select:hover{background:var(--color-bg-elevated)}.select:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 3px var(--color-accent-glow)}.select::-moz-placeholder{color:var(--color-text-muted)}.select::placeholder{color:var(--color-text-muted)}.select{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%239ca3af' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:20px;padding-right:40px}.checkbox{background:var(--color-bg-surface);border:1px solid var(--color-border-default);cursor:pointer;transition:var(--transition-base);border-radius:.375rem;width:1.25rem;height:1.25rem}.checkbox:checked{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));border-color:var(--color-accent-primary)}.checkbox:focus{outline:none;box-shadow:0 0 0 3px var(--color-accent-glow)}.table-modern{border-collapse:separate;border-spacing:0;width:100%}.table-modern thead{background:var(--color-bg-surface)}.table-modern th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-tertiary);font-size:.75rem;font-weight:600;line-height:1rem}.table-modern td,.table-modern th{border-bottom:1px solid var(--color-border-subtle);padding:.75rem 1rem}.table-modern td{color:var(--color-text-primary);font-size:.875rem;line-height:1.25rem}.table-modern tbody tr{transition:var(--transition-base)}.badge,.table-modern tbody tr:hover{background:var(--color-bg-elevated)}.badge{display:inline-flex;color:var(--color-text-secondary);border:1px solid var(--color-border-subtle);border-radius:9999px;align-items: center;gap:.375rem;padding:.25rem .75rem;font-size:.75rem;font-weight:500;line-height:1rem}.badge-success{color:#10b981;background:#10b9811a;border-color:#10b98133}.badge-warning{color:#f59e0b;background:#f59e0b1a;border-color:#f59e0b33}.badge-info{color:#3b82f6;background:#3b82f61a;border-color:#3b82f633}.spinner{border:3px solid var(--color-border-subtle);border-top-color:var(--color-accent-primary);animation:spin 1s linear infinite;border-radius:50%;width:20px;height:20px}.tooltip.show{opacity:1}.status-dot{display:inline-block;animation:pulse 2s infinite;border-radius:9999px;width:.5rem;height:.5rem}.status-dot.online{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.status-dot.offline{background:var(--color-text-muted)}.status-dot.error{background:var(--color-error);box-shadow:0 0 8px var(--color-error)}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-0{left:0}.left-3{left:.75rem}.left-4{left:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-8{margin-left:2rem}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-full{height:100%}.max-h-\[60vh\]{max-height:60vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-5{width:1.25rem}.w-72{width:18rem}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.flex-1{flex:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.scroll-mt-24{scroll-margin-top:6rem}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items: flex-start}.items-center{align-items: center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-green-500\/30{border-color:#22c55e4d}.border-purple-500\/30{border-color:#a855f74d}.border-red-500\/30{border-color:#ef44444d}.border-white\/10{border-color:#ffffff1a}.border-white\/20{border-color:#fff3}.border-white\/5{border-color:#ffffff0d}.bg-black\/50{background-color:#00000080}.bg-black\/80{background-color:#000c}.bg-gray-900\/95{background-color:#111827f2}.bg-green-500\/10{background-color:#22c55e1a}.bg-red-500\/10{background-color:#ef44441a}.bg-white\/5{background-color:#ffffff0d}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-500\/20{--tw-gradient-from:#f59e0b33 var(--tw-gradient-from-position);--tw-gradient-to:#f59e0b00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-amber-600\/20{--tw-gradient-from:#d9770633 var(--tw-gradient-from-position);--tw-gradient-to:#d9770600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-500\/20{--tw-gradient-from:#3b82f633 var(--tw-gradient-from-position);--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-blue-600\/20{--tw-gradient-from:#2563eb33 var(--tw-gradient-from-position);--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-600\/20{--tw-gradient-from:#4b556333 var(--tw-gradient-from-position);--tw-gradient-to:#4b556300 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500\/20{--tw-gradient-from:#22c55e33 var(--tw-gradient-from-position);--tw-gradient-to:#22c55e00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-400{--tw-gradient-from:#c084fc var(--tw-gradient-from-position);--tw-gradient-to:#c084fc00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-500\/20{--tw-gradient-from:#a855f733 var(--tw-gradient-from-position);--tw-gradient-to:#a855f700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:#9333ea00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-purple-600\/20{--tw-gradient-from:#9333ea33 var(--tw-gradient-from-position);--tw-gradient-to:#9333ea00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500\/10{--tw-gradient-from:#ef44441a var(--tw-gradient-from-position);--tw-gradient-to:#ef444400 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-violet-500\/20{--tw-gradient-from:#8b5cf633 var(--tw-gradient-from-position);--tw-gradient-to:#8b5cf600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-white\/5{--tw-gradient-from:#ffffff0d var(--tw-gradient-from-position);--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-500\/20{--tw-gradient-to:#06b6d433 var(--tw-gradient-to-position)}.to-cyan-600\/20{--tw-gradient-to:#0891b233 var(--tw-gradient-to-position)}.to-emerald-500\/20{--tw-gradient-to:#10b98133 var(--tw-gradient-to-position)}.to-gray-700\/20{--tw-gradient-to:#37415133 var(--tw-gradient-to-position)}.to-orange-500\/20{--tw-gradient-to:#f9731633 var(--tw-gradient-to-position)}.to-orange-600\/20{--tw-gradient-to:#ea580c33 var(--tw-gradient-to-position)}.to-pink-500\/10{--tw-gradient-to:#ec48991a var(--tw-gradient-to-position)}.to-purple-500\/20{--tw-gradient-to:#a855f733 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-violet-400{--tw-gradient-to:#a78bfa var(--tw-gradient-to-position)}.to-violet-500\/20{--tw-gradient-to:#8b5cf633 var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to:#7c3aed var(--tw-gradient-to-position)}.to-violet-600\/20{--tw-gradient-to:#7c3aed33 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-0{padding:0}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-10{padding-left:2.5rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-transparent{color:#0000}.text-violet-300{--tw-text-opacity:1;color:rgb(196 181 253/var(--tw-text-opacity,1))}.text-violet-400{--tw-text-opacity:1;color:rgb(167 139 250/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-50{opacity:.5}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}:root{--buncss-light: ;--buncss-dark:initial;color-scheme:dark;--color-bg-base:#0a0a0f;--color-bg-surface:#12121a;--color-bg-elevated:#1a1a24;--color-bg-hover:#22222e;--color-bg-active:#2a2a38;--color-accent-primary:#8b5cf6;--color-accent-secondary:#a78bfa;--color-accent-tertiary:#c4b5fd;--color-accent-glow:#8b5cf666;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#3b82f6;--color-text-primary:#f3f4f6;--color-text-secondary:#9ca3af;--color-text-tertiary:#6b7280;--color-text-muted:#4b5563;--color-border-subtle:#ffffff0f;--color-border-default:#ffffff1a;--color-border-strong:#ffffff26;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-glow:0 0 50px #8b5cf64d;--transition-base:all .2s cubic-bezier(.4,0,.2,1);--transition-smooth:all .3s cubic-bezier(.4,0,.2,1);--transition-spring:all .5s cubic-bezier(.68,-.55,.265,1.55)}*{box-sizing:border-box;margin:0;padding:0}html{font-feature-settings:"cv11","ss01";font-variation-settings:"opsz" 32;scroll-behavior:smooth;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg-base);color:var(--color-text-primary);position:relative;overflow-x:hidden;min-height:100vh}body:before{content:"";position:fixed;pointer-events:none;z-index:0;background:radial-gradient(at 0 0,#8b5cf626 0,#0000 50%),radial-gradient(at 100% 100%,#a78bfa1a 0,#0000 50%);inset:0}#root{position:relative;z-index:1}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--color-bg-surface);border-radius:6px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-accent-primary),var(--color-accent-secondary));border:2px solid var(--color-bg-surface);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--color-accent-secondary),var(--color-accent-tertiary))}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes glow{0%,to{box-shadow:0 0 20px #8b5cf680,inset 0 0 20px #8b5cf61a}50%{box-shadow:0 0 40px #8b5cf6cc,inset 0 0 30px #8b5cf633}}.text-mono{font-family:JetBrains Mono,monospace}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}::selection{background:var(--color-accent-primary);color:#fff}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.hover\:border-red-500\/30:hover{border-color:#ef44444d}.hover\:bg-red-500\/20:hover{background-color:#ef444433}.hover\:bg-white\/5:hover{background-color:#ffffff0d}.hover\:text-red-300:hover{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.hover\:text-red-400:hover{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:flex-initial{flex:0 auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items: center}}@media (min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:flex-row{flex-direction:row}.md\:items-center{align-items: center}.md\:justify-between{justify-content:space-between}.md\:p-8{padding:2rem}}@media (min-width:1024px){.lg\:ml-72{margin-left:18rem}.lg\:hidden{display:none}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items: center}}
1
+ *,
2
+ :after,
3
+ :before {
4
+ --tw-border-spacing-x: 0;
5
+ --tw-border-spacing-y: 0;
6
+ --tw-translate-x: 0;
7
+ --tw-translate-y: 0;
8
+ --tw-rotate: 0;
9
+ --tw-skew-x: 0;
10
+ --tw-skew-y: 0;
11
+ --tw-scale-x: 1;
12
+ --tw-scale-y: 1;
13
+ --tw-pan-x: ;
14
+ --tw-pan-y: ;
15
+ --tw-pinch-zoom: ;
16
+ --tw-scroll-snap-strictness: proximity;
17
+ --tw-gradient-from-position: ;
18
+ --tw-gradient-via-position: ;
19
+ --tw-gradient-to-position: ;
20
+ --tw-ordinal: ;
21
+ --tw-slashed-zero: ;
22
+ --tw-numeric-figure: ;
23
+ --tw-numeric-spacing: ;
24
+ --tw-numeric-fraction: ;
25
+ --tw-ring-inset: ;
26
+ --tw-ring-offset-width: 0px;
27
+ --tw-ring-offset-color: #fff;
28
+ --tw-ring-color: #3b82f680;
29
+ --tw-ring-offset-shadow: 0 0 #0000;
30
+ --tw-ring-shadow: 0 0 #0000;
31
+ --tw-shadow: 0 0 #0000;
32
+ --tw-shadow-colored: 0 0 #0000;
33
+ --tw-blur: ;
34
+ --tw-brightness: ;
35
+ --tw-contrast: ;
36
+ --tw-grayscale: ;
37
+ --tw-hue-rotate: ;
38
+ --tw-invert: ;
39
+ --tw-saturate: ;
40
+ --tw-sepia: ;
41
+ --tw-drop-shadow: ;
42
+ --tw-backdrop-blur: ;
43
+ --tw-backdrop-brightness: ;
44
+ --tw-backdrop-contrast: ;
45
+ --tw-backdrop-grayscale: ;
46
+ --tw-backdrop-hue-rotate: ;
47
+ --tw-backdrop-invert: ;
48
+ --tw-backdrop-opacity: ;
49
+ --tw-backdrop-saturate: ;
50
+ --tw-backdrop-sepia: ;
51
+ --tw-contain-size: ;
52
+ --tw-contain-layout: ;
53
+ --tw-contain-paint: ;
54
+ --tw-contain-style: ;
55
+ }
56
+ ::backdrop {
57
+ --tw-border-spacing-x: 0;
58
+ --tw-border-spacing-y: 0;
59
+ --tw-translate-x: 0;
60
+ --tw-translate-y: 0;
61
+ --tw-rotate: 0;
62
+ --tw-skew-x: 0;
63
+ --tw-skew-y: 0;
64
+ --tw-scale-x: 1;
65
+ --tw-scale-y: 1;
66
+ --tw-pan-x: ;
67
+ --tw-pan-y: ;
68
+ --tw-pinch-zoom: ;
69
+ --tw-scroll-snap-strictness: proximity;
70
+ --tw-gradient-from-position: ;
71
+ --tw-gradient-via-position: ;
72
+ --tw-gradient-to-position: ;
73
+ --tw-ordinal: ;
74
+ --tw-slashed-zero: ;
75
+ --tw-numeric-figure: ;
76
+ --tw-numeric-spacing: ;
77
+ --tw-numeric-fraction: ;
78
+ --tw-ring-inset: ;
79
+ --tw-ring-offset-width: 0px;
80
+ --tw-ring-offset-color: #fff;
81
+ --tw-ring-color: #3b82f680;
82
+ --tw-ring-offset-shadow: 0 0 #0000;
83
+ --tw-ring-shadow: 0 0 #0000;
84
+ --tw-shadow: 0 0 #0000;
85
+ --tw-shadow-colored: 0 0 #0000;
86
+ --tw-blur: ;
87
+ --tw-brightness: ;
88
+ --tw-contrast: ;
89
+ --tw-grayscale: ;
90
+ --tw-hue-rotate: ;
91
+ --tw-invert: ;
92
+ --tw-saturate: ;
93
+ --tw-sepia: ;
94
+ --tw-drop-shadow: ;
95
+ --tw-backdrop-blur: ;
96
+ --tw-backdrop-brightness: ;
97
+ --tw-backdrop-contrast: ;
98
+ --tw-backdrop-grayscale: ;
99
+ --tw-backdrop-hue-rotate: ;
100
+ --tw-backdrop-invert: ;
101
+ --tw-backdrop-opacity: ;
102
+ --tw-backdrop-saturate: ;
103
+ --tw-backdrop-sepia: ;
104
+ --tw-contain-size: ;
105
+ --tw-contain-layout: ;
106
+ --tw-contain-paint: ;
107
+ --tw-contain-style: ;
108
+ }
109
+ *,
110
+ :after,
111
+ :before {
112
+ box-sizing: border-box;
113
+ border: 0 solid #e5e7eb;
114
+ }
115
+ :after,
116
+ :before {
117
+ --tw-content: "";
118
+ }
119
+ :host,
120
+ html {
121
+ -webkit-text-size-adjust: 100%;
122
+ -moz-tab-size: 4;
123
+ -o-tab-size: 4;
124
+ tab-size: 4;
125
+ font-feature-settings: normal;
126
+ font-variation-settings: normal;
127
+ -webkit-tap-highlight-color: transparent;
128
+ font-family:
129
+ ui-sans-serif,
130
+ system-ui,
131
+ -apple-system,
132
+ BlinkMacSystemFont,
133
+ Segoe UI,
134
+ Roboto,
135
+ Noto Sans,
136
+ Ubuntu,
137
+ Cantarell,
138
+ Helvetica Neue,
139
+ sans-serif,
140
+ Apple Color Emoji,
141
+ Segoe UI Emoji,
142
+ Segoe UI Symbol,
143
+ Noto Color Emoji;
144
+ line-height: 1.5;
145
+ }
146
+ body {
147
+ line-height: inherit;
148
+ margin: 0;
149
+ }
150
+ hr {
151
+ color: inherit;
152
+ border-top-width: 1px;
153
+ height: 0;
154
+ }
155
+ abbr:where([title]) {
156
+ -webkit-text-decoration: underline dotted;
157
+ text-decoration: underline dotted;
158
+ }
159
+ h1,
160
+ h2,
161
+ h3,
162
+ h4,
163
+ h5,
164
+ h6 {
165
+ font-size: inherit;
166
+ font-weight: inherit;
167
+ }
168
+ a {
169
+ color: inherit;
170
+ text-decoration: inherit;
171
+ }
172
+ b,
173
+ strong {
174
+ font-weight: bolder;
175
+ }
176
+ code,
177
+ kbd,
178
+ pre,
179
+ samp {
180
+ font-feature-settings: normal;
181
+ font-variation-settings: normal;
182
+ font-family:
183
+ ui-monospace,
184
+ SFMono-Regular,
185
+ Menlo,
186
+ Monaco,
187
+ Consolas,
188
+ Liberation Mono,
189
+ Courier New,
190
+ monospace;
191
+ font-size: 1em;
192
+ }
193
+ small {
194
+ font-size: 80%;
195
+ }
196
+ sub,
197
+ sup {
198
+ position: relative;
199
+ vertical-align: baseline;
200
+ font-size: 75%;
201
+ line-height: 0;
202
+ }
203
+ sub {
204
+ bottom: -0.25em;
205
+ }
206
+ sup {
207
+ top: -0.5em;
208
+ }
209
+ table {
210
+ text-indent: 0;
211
+ border-color: inherit;
212
+ border-collapse: collapse;
213
+ }
214
+ button,
215
+ input,
216
+ optgroup,
217
+ select,
218
+ textarea {
219
+ font-feature-settings: inherit;
220
+ font-variation-settings: inherit;
221
+ font-family: inherit;
222
+ font-size: 100%;
223
+ font-weight: inherit;
224
+ line-height: inherit;
225
+ letter-spacing: inherit;
226
+ color: inherit;
227
+ margin: 0;
228
+ padding: 0;
229
+ }
230
+ button,
231
+ select {
232
+ text-transform: none;
233
+ }
234
+ button {
235
+ -webkit-appearance: button;
236
+ background-color: #0000;
237
+ background-image: none;
238
+ }
239
+ input:where([type="button"]) {
240
+ -webkit-appearance: button;
241
+ background-color: #0000;
242
+ background-image: none;
243
+ }
244
+ input:where([type="reset"]) {
245
+ -webkit-appearance: button;
246
+ background-color: #0000;
247
+ background-image: none;
248
+ }
249
+ input:where([type="submit"]) {
250
+ -webkit-appearance: button;
251
+ background-color: #0000;
252
+ background-image: none;
253
+ }
254
+ :-moz-focusring {
255
+ outline: auto;
256
+ }
257
+ :-moz-ui-invalid {
258
+ box-shadow: none;
259
+ }
260
+ progress {
261
+ vertical-align: baseline;
262
+ }
263
+ ::-webkit-inner-spin-button {
264
+ height: auto;
265
+ }
266
+ ::-webkit-outer-spin-button {
267
+ height: auto;
268
+ }
269
+ [type="search"] {
270
+ -webkit-appearance: textfield;
271
+ outline-offset: -2px;
272
+ }
273
+ ::-webkit-search-decoration {
274
+ -webkit-appearance: none;
275
+ }
276
+ ::-webkit-file-upload-button {
277
+ -webkit-appearance: button;
278
+ font: inherit;
279
+ }
280
+ summary {
281
+ display: list-item;
282
+ }
283
+ blockquote,
284
+ dd,
285
+ dl,
286
+ figure,
287
+ h1,
288
+ h2,
289
+ h3,
290
+ h4,
291
+ h5,
292
+ h6,
293
+ hr,
294
+ p,
295
+ pre,
296
+ fieldset {
297
+ margin: 0;
298
+ }
299
+ fieldset,
300
+ legend {
301
+ padding: 0;
302
+ }
303
+ menu,
304
+ ol,
305
+ ul {
306
+ list-style: none;
307
+ margin: 0;
308
+ padding: 0;
309
+ }
310
+ dialog {
311
+ padding: 0;
312
+ }
313
+ textarea {
314
+ resize: vertical;
315
+ }
316
+ input::-moz-placeholder {
317
+ opacity: 1;
318
+ color: #9ca3af;
319
+ }
320
+ textarea::-moz-placeholder {
321
+ opacity: 1;
322
+ color: #9ca3af;
323
+ }
324
+ input::placeholder,
325
+ textarea::placeholder {
326
+ opacity: 1;
327
+ color: #9ca3af;
328
+ }
329
+ [role="button"],
330
+ button {
331
+ cursor: pointer;
332
+ }
333
+ :disabled {
334
+ cursor: default;
335
+ }
336
+ audio,
337
+ canvas,
338
+ embed,
339
+ iframe,
340
+ img,
341
+ object,
342
+ svg,
343
+ video {
344
+ display: block;
345
+ vertical-align: middle;
346
+ }
347
+ img,
348
+ video {
349
+ max-width: 100%;
350
+ height: auto;
351
+ }
352
+ [hidden]:where(:not([hidden="until-found"])) {
353
+ display: none;
354
+ }
355
+ .glass-panel {
356
+ border-width: 1px;
357
+ border-color: var(--color-border-default);
358
+ backdrop-filter: blur(20px);
359
+ box-shadow:
360
+ var(--shadow-xl),
361
+ inset 0 1px 0 0 #ffffff0d;
362
+ transition: var(--transition-base);
363
+ background: linear-gradient(135deg, #ffffff08, #ffffff03);
364
+ border-radius: 1rem;
365
+ }
366
+ .glass-panel:hover {
367
+ border-color: var(--color-border-strong);
368
+ box-shadow:
369
+ var(--shadow-2xl),
370
+ var(--shadow-glow),
371
+ inset 0 1px 0 0 #ffffff14;
372
+ }
373
+ .card {
374
+ background: var(--color-bg-surface);
375
+ border: 1px solid var(--color-border-subtle);
376
+ transition: var(--transition-smooth);
377
+ animation: fadeIn 0.5s ease-out;
378
+ border-radius: 0.75rem;
379
+ padding: 1.5rem;
380
+ }
381
+ .card:hover {
382
+ background: var(--color-bg-elevated);
383
+ border-color: var(--color-border-default);
384
+ box-shadow: var(--shadow-lg);
385
+ transform: translateY(-2px);
386
+ }
387
+ .btn-primary {
388
+ display: inline-flex;
389
+ transition: var(--transition-base);
390
+ position: relative;
391
+ overflow: hidden;
392
+ text-transform: none;
393
+ letter-spacing: 0.01em;
394
+ background: linear-gradient(
395
+ 135deg,
396
+ var(--color-accent-primary),
397
+ var(--color-accent-secondary)
398
+ );
399
+ color: #fff;
400
+ border-radius: 0.75rem;
401
+ justify-content: center;
402
+ align-items: center;
403
+ gap: 0.5rem;
404
+ padding: 0.625rem 1.25rem;
405
+ font-weight: 500;
406
+ box-shadow: 0 4px 15px #8b5cf64d;
407
+ }
408
+ .btn-primary:hover {
409
+ transform: translateY(-2px);
410
+ box-shadow: 0 6px 25px #8b5cf680;
411
+ }
412
+ .btn-primary:active {
413
+ transform: translateY(0);
414
+ }
415
+ .btn-secondary {
416
+ display: inline-flex;
417
+ transition: var(--transition-base);
418
+ position: relative;
419
+ overflow: hidden;
420
+ text-transform: none;
421
+ letter-spacing: 0.01em;
422
+ background: var(--color-bg-elevated);
423
+ color: var(--color-text-primary);
424
+ border: 1px solid var(--color-border-default);
425
+ border-radius: 0.75rem;
426
+ justify-content: center;
427
+ align-items: center;
428
+ gap: 0.5rem;
429
+ padding: 0.625rem 1.25rem;
430
+ font-weight: 500;
431
+ }
432
+ .btn-secondary:hover {
433
+ background: var(--color-bg-hover);
434
+ border-color: var(--color-accent-primary);
435
+ box-shadow: inset 0 0 0 1px var(--color-accent-primary);
436
+ }
437
+ .btn-icon {
438
+ display: inline-flex;
439
+ background: var(--color-bg-elevated);
440
+ border: 1px solid var(--color-border-subtle);
441
+ color: var(--color-text-secondary);
442
+ transition: var(--transition-base);
443
+ border-radius: 12px;
444
+ justify-content: center;
445
+ align-items: center;
446
+ width: 40px;
447
+ height: 40px;
448
+ }
449
+ .btn-icon:hover {
450
+ background: var(--color-bg-hover);
451
+ color: var(--color-accent-primary);
452
+ border-color: var(--color-accent-primary);
453
+ transform: scale(1.05);
454
+ }
455
+ .\!input,
456
+ .input {
457
+ border-radius: 0.75rem;
458
+ width: 100%;
459
+ padding: 0.75rem 1rem;
460
+ font-size: 0.875rem;
461
+ line-height: 1.25rem;
462
+ }
463
+ .\!input {
464
+ background: var(--color-bg-surface) !important;
465
+ border: 1px solid var(--color-border-subtle) !important;
466
+ color: var(--color-text-primary) !important;
467
+ transition: var(--transition-base) !important;
468
+ font-family: Inter, sans-serif !important;
469
+ }
470
+ .input {
471
+ background: var(--color-bg-surface);
472
+ border: 1px solid var(--color-border-subtle);
473
+ color: var(--color-text-primary);
474
+ transition: var(--transition-base);
475
+ font-family: Inter, sans-serif;
476
+ }
477
+ .\!input:hover {
478
+ background: var(--color-bg-elevated) !important;
479
+ border-color: var(--color-border-default) !important;
480
+ }
481
+ .input:hover {
482
+ background: var(--color-bg-elevated);
483
+ border-color: var(--color-border-default);
484
+ }
485
+ .\!input:focus {
486
+ outline: none !important;
487
+ border-color: var(--color-accent-primary) !important;
488
+ box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
489
+ background: var(--color-bg-elevated) !important;
490
+ }
491
+ .input:focus {
492
+ outline: none;
493
+ border-color: var(--color-accent-primary);
494
+ box-shadow: 0 0 0 3px var(--color-accent-glow);
495
+ background: var(--color-bg-elevated);
496
+ }
497
+ .\!input::-moz-placeholder {
498
+ color: var(--color-text-muted) !important;
499
+ }
500
+ .\!input::placeholder {
501
+ color: var(--color-text-muted) !important;
502
+ }
503
+ .input::-moz-placeholder {
504
+ color: var(--color-text-muted);
505
+ }
506
+ .input::placeholder {
507
+ color: var(--color-text-muted);
508
+ }
509
+ .select {
510
+ background: var(--color-bg-surface);
511
+ border: 1px solid var(--color-border-subtle);
512
+ color: var(--color-text-primary);
513
+ transition: var(--transition-base);
514
+ border-radius: 0.75rem;
515
+ width: 100%;
516
+ padding: 0.75rem 1rem;
517
+ font-family: Inter, sans-serif;
518
+ font-size: 0.875rem;
519
+ line-height: 1.25rem;
520
+ }
521
+ .select:hover {
522
+ border-color: var(--color-border-default);
523
+ }
524
+ .select:focus,
525
+ .select:hover {
526
+ background: var(--color-bg-elevated);
527
+ }
528
+ .select:focus {
529
+ outline: none;
530
+ border-color: var(--color-accent-primary);
531
+ box-shadow: 0 0 0 3px var(--color-accent-glow);
532
+ }
533
+ .select::-moz-placeholder {
534
+ color: var(--color-text-muted);
535
+ }
536
+ .select::placeholder {
537
+ color: var(--color-text-muted);
538
+ }
539
+ .select {
540
+ cursor: pointer;
541
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%239ca3af' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3E%3C/svg%3E");
542
+ background-position: right 12px center;
543
+ background-repeat: no-repeat;
544
+ background-size: 20px;
545
+ padding-right: 40px;
546
+ }
547
+ .checkbox {
548
+ background: var(--color-bg-surface);
549
+ border: 1px solid var(--color-border-default);
550
+ cursor: pointer;
551
+ transition: var(--transition-base);
552
+ border-radius: 0.375rem;
553
+ width: 1.25rem;
554
+ height: 1.25rem;
555
+ }
556
+ .checkbox:checked {
557
+ background: linear-gradient(
558
+ 135deg,
559
+ var(--color-accent-primary),
560
+ var(--color-accent-secondary)
561
+ );
562
+ border-color: var(--color-accent-primary);
563
+ }
564
+ .checkbox:focus {
565
+ outline: none;
566
+ box-shadow: 0 0 0 3px var(--color-accent-glow);
567
+ }
568
+ .table-modern {
569
+ border-collapse: separate;
570
+ border-spacing: 0;
571
+ width: 100%;
572
+ }
573
+ .table-modern thead {
574
+ background: var(--color-bg-surface);
575
+ }
576
+ .table-modern th {
577
+ text-align: left;
578
+ text-transform: uppercase;
579
+ letter-spacing: 0.05em;
580
+ color: var(--color-text-tertiary);
581
+ font-size: 0.75rem;
582
+ font-weight: 600;
583
+ line-height: 1rem;
584
+ }
585
+ .table-modern td,
586
+ .table-modern th {
587
+ border-bottom: 1px solid var(--color-border-subtle);
588
+ padding: 0.75rem 1rem;
589
+ }
590
+ .table-modern td {
591
+ color: var(--color-text-primary);
592
+ font-size: 0.875rem;
593
+ line-height: 1.25rem;
594
+ }
595
+ .table-modern tbody tr {
596
+ transition: var(--transition-base);
597
+ }
598
+ .badge,
599
+ .table-modern tbody tr:hover {
600
+ background: var(--color-bg-elevated);
601
+ }
602
+ .badge {
603
+ display: inline-flex;
604
+ color: var(--color-text-secondary);
605
+ border: 1px solid var(--color-border-subtle);
606
+ border-radius: 9999px;
607
+ align-items: center;
608
+ gap: 0.375rem;
609
+ padding: 0.25rem 0.75rem;
610
+ font-size: 0.75rem;
611
+ font-weight: 500;
612
+ line-height: 1rem;
613
+ }
614
+ .badge-success {
615
+ color: #10b981;
616
+ background: #10b9811a;
617
+ border-color: #10b98133;
618
+ }
619
+ .badge-warning {
620
+ color: #f59e0b;
621
+ background: #f59e0b1a;
622
+ border-color: #f59e0b33;
623
+ }
624
+ .badge-info {
625
+ color: #3b82f6;
626
+ background: #3b82f61a;
627
+ border-color: #3b82f633;
628
+ }
629
+ .spinner {
630
+ border: 3px solid var(--color-border-subtle);
631
+ border-top-color: var(--color-accent-primary);
632
+ animation: spin 1s linear infinite;
633
+ border-radius: 50%;
634
+ width: 20px;
635
+ height: 20px;
636
+ }
637
+ .tooltip.show {
638
+ opacity: 1;
639
+ }
640
+ .status-dot {
641
+ display: inline-block;
642
+ animation: pulse 2s infinite;
643
+ border-radius: 9999px;
644
+ width: 0.5rem;
645
+ height: 0.5rem;
646
+ }
647
+ .status-dot.online {
648
+ background: var(--color-success);
649
+ box-shadow: 0 0 8px var(--color-success);
650
+ }
651
+ .status-dot.offline {
652
+ background: var(--color-text-muted);
653
+ }
654
+ .status-dot.error {
655
+ background: var(--color-error);
656
+ box-shadow: 0 0 8px var(--color-error);
657
+ }
658
+ .fixed {
659
+ position: fixed;
660
+ }
661
+ .absolute {
662
+ position: absolute;
663
+ }
664
+ .relative {
665
+ position: relative;
666
+ }
667
+ .inset-0 {
668
+ inset: 0;
669
+ }
670
+ .left-0 {
671
+ left: 0;
672
+ }
673
+ .left-3 {
674
+ left: 0.75rem;
675
+ }
676
+ .left-4 {
677
+ left: 1rem;
678
+ }
679
+ .top-0 {
680
+ top: 0;
681
+ }
682
+ .top-1\/2 {
683
+ top: 50%;
684
+ }
685
+ .top-4 {
686
+ top: 1rem;
687
+ }
688
+ .z-30 {
689
+ z-index: 30;
690
+ }
691
+ .z-40 {
692
+ z-index: 40;
693
+ }
694
+ .z-50 {
695
+ z-index: 50;
696
+ }
697
+ .mx-auto {
698
+ margin-left: auto;
699
+ margin-right: auto;
700
+ }
701
+ .mb-1 {
702
+ margin-bottom: 0.25rem;
703
+ }
704
+ .mb-2 {
705
+ margin-bottom: 0.5rem;
706
+ }
707
+ .mb-3 {
708
+ margin-bottom: 0.75rem;
709
+ }
710
+ .mb-4 {
711
+ margin-bottom: 1rem;
712
+ }
713
+ .mb-6 {
714
+ margin-bottom: 1.5rem;
715
+ }
716
+ .ml-8 {
717
+ margin-left: 2rem;
718
+ }
719
+ .mr-1 {
720
+ margin-right: 0.25rem;
721
+ }
722
+ .mt-0\.5 {
723
+ margin-top: 0.125rem;
724
+ }
725
+ .mt-1 {
726
+ margin-top: 0.25rem;
727
+ }
728
+ .mt-2 {
729
+ margin-top: 0.5rem;
730
+ }
731
+ .mt-6 {
732
+ margin-top: 1.5rem;
733
+ }
734
+ .block {
735
+ display: block;
736
+ }
737
+ .flex {
738
+ display: flex;
739
+ }
740
+ .table {
741
+ display: table;
742
+ }
743
+ .grid {
744
+ display: grid;
745
+ }
746
+ .hidden {
747
+ display: none;
748
+ }
749
+ .h-10 {
750
+ height: 2.5rem;
751
+ }
752
+ .h-12 {
753
+ height: 3rem;
754
+ }
755
+ .h-16 {
756
+ height: 4rem;
757
+ }
758
+ .h-full {
759
+ height: 100%;
760
+ }
761
+ .max-h-\[60vh\] {
762
+ max-height: 60vh;
763
+ }
764
+ .min-h-screen {
765
+ min-height: 100vh;
766
+ }
767
+ .w-10 {
768
+ width: 2.5rem;
769
+ }
770
+ .w-12 {
771
+ width: 3rem;
772
+ }
773
+ .w-16 {
774
+ width: 4rem;
775
+ }
776
+ .w-5 {
777
+ width: 1.25rem;
778
+ }
779
+ .w-72 {
780
+ width: 18rem;
781
+ }
782
+ .w-full {
783
+ width: 100%;
784
+ }
785
+ .max-w-7xl {
786
+ max-width: 80rem;
787
+ }
788
+ .max-w-lg {
789
+ max-width: 32rem;
790
+ }
791
+ .flex-1 {
792
+ flex: 1;
793
+ }
794
+ .-translate-x-full {
795
+ --tw-translate-x: -100%;
796
+ }
797
+ .-translate-x-full,
798
+ .-translate-y-1\/2 {
799
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
800
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
801
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
802
+ }
803
+ .-translate-y-1\/2 {
804
+ --tw-translate-y: -50%;
805
+ }
806
+ .translate-x-0 {
807
+ --tw-translate-x: 0px;
808
+ }
809
+ .transform,
810
+ .translate-x-0 {
811
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
812
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
813
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
814
+ }
815
+ @keyframes spin {
816
+ to {
817
+ transform: rotate(1turn);
818
+ }
819
+ }
820
+ .animate-spin {
821
+ animation: spin 1s linear infinite;
822
+ }
823
+ .cursor-not-allowed {
824
+ cursor: not-allowed;
825
+ }
826
+ .cursor-pointer {
827
+ cursor: pointer;
828
+ }
829
+ .scroll-mt-24 {
830
+ scroll-margin-top: 6rem;
831
+ }
832
+ .appearance-none {
833
+ -webkit-appearance: none;
834
+ -moz-appearance: none;
835
+ appearance: none;
836
+ }
837
+ .flex-col {
838
+ flex-direction: column;
839
+ }
840
+ .flex-wrap {
841
+ flex-wrap: wrap;
842
+ }
843
+ .items-start {
844
+ align-items: flex-start;
845
+ }
846
+ .items-center {
847
+ align-items: center;
848
+ }
849
+ .items-stretch {
850
+ align-items: stretch;
851
+ }
852
+ .justify-center {
853
+ justify-content: center;
854
+ }
855
+ .justify-between {
856
+ justify-content: space-between;
857
+ }
858
+ .gap-2 {
859
+ gap: 0.5rem;
860
+ }
861
+ .gap-3 {
862
+ gap: 0.75rem;
863
+ }
864
+ .gap-4 {
865
+ gap: 1rem;
866
+ }
867
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
868
+ --tw-space-y-reverse: 0;
869
+ margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
870
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
871
+ }
872
+ .space-y-3 > :not([hidden]) ~ :not([hidden]) {
873
+ --tw-space-y-reverse: 0;
874
+ margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
875
+ margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
876
+ }
877
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
878
+ --tw-space-y-reverse: 0;
879
+ margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
880
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
881
+ }
882
+ .space-y-5 > :not([hidden]) ~ :not([hidden]) {
883
+ --tw-space-y-reverse: 0;
884
+ margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
885
+ margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
886
+ }
887
+ .space-y-6 > :not([hidden]) ~ :not([hidden]) {
888
+ --tw-space-y-reverse: 0;
889
+ margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
890
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
891
+ }
892
+ .space-y-8 > :not([hidden]) ~ :not([hidden]) {
893
+ --tw-space-y-reverse: 0;
894
+ margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
895
+ margin-bottom: calc(2rem * var(--tw-space-y-reverse));
896
+ }
897
+ .overflow-hidden {
898
+ overflow: hidden;
899
+ }
900
+ .overflow-x-auto {
901
+ overflow-x: auto;
902
+ }
903
+ .overflow-y-auto {
904
+ overflow-y: auto;
905
+ }
906
+ .truncate {
907
+ overflow: hidden;
908
+ text-overflow: ellipsis;
909
+ white-space: nowrap;
910
+ }
911
+ .break-all {
912
+ word-break: break-all;
913
+ }
914
+ .rounded-2xl {
915
+ border-radius: 1rem;
916
+ }
917
+ .rounded-full {
918
+ border-radius: 9999px;
919
+ }
920
+ .rounded-lg {
921
+ border-radius: 0.5rem;
922
+ }
923
+ .rounded-none {
924
+ border-radius: 0;
925
+ }
926
+ .rounded-xl {
927
+ border-radius: 0.75rem;
928
+ }
929
+ .border {
930
+ border-width: 1px;
931
+ }
932
+ .border-b {
933
+ border-bottom-width: 1px;
934
+ }
935
+ .border-r {
936
+ border-right-width: 1px;
937
+ }
938
+ .border-t {
939
+ border-top-width: 1px;
940
+ }
941
+ .border-green-500\/30 {
942
+ border-color: #22c55e4d;
943
+ }
944
+ .border-purple-500\/30 {
945
+ border-color: #a855f74d;
946
+ }
947
+ .border-red-500\/30 {
948
+ border-color: #ef44444d;
949
+ }
950
+ .border-white\/10 {
951
+ border-color: #ffffff1a;
952
+ }
953
+ .border-white\/20 {
954
+ border-color: #fff3;
955
+ }
956
+ .border-white\/5 {
957
+ border-color: #ffffff0d;
958
+ }
959
+ .bg-black\/50 {
960
+ background-color: #00000080;
961
+ }
962
+ .bg-black\/80 {
963
+ background-color: #000c;
964
+ }
965
+ .bg-gray-900\/95 {
966
+ background-color: #111827f2;
967
+ }
968
+ .bg-green-500\/10 {
969
+ background-color: #22c55e1a;
970
+ }
971
+ .bg-red-500\/10 {
972
+ background-color: #ef44441a;
973
+ }
974
+ .bg-white\/5 {
975
+ background-color: #ffffff0d;
976
+ }
977
+ .bg-gradient-to-br {
978
+ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
979
+ }
980
+ .bg-gradient-to-r {
981
+ background-image: linear-gradient(to right, var(--tw-gradient-stops));
982
+ }
983
+ .from-amber-500\/20 {
984
+ --tw-gradient-from: #f59e0b33 var(--tw-gradient-from-position);
985
+ --tw-gradient-to: #f59e0b00 var(--tw-gradient-to-position);
986
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
987
+ }
988
+ .from-amber-600\/20 {
989
+ --tw-gradient-from: #d9770633 var(--tw-gradient-from-position);
990
+ --tw-gradient-to: #d9770600 var(--tw-gradient-to-position);
991
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
992
+ }
993
+ .from-blue-500\/20 {
994
+ --tw-gradient-from: #3b82f633 var(--tw-gradient-from-position);
995
+ --tw-gradient-to: #3b82f600 var(--tw-gradient-to-position);
996
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
997
+ }
998
+ .from-blue-600\/20 {
999
+ --tw-gradient-from: #2563eb33 var(--tw-gradient-from-position);
1000
+ --tw-gradient-to: #2563eb00 var(--tw-gradient-to-position);
1001
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1002
+ }
1003
+ .from-gray-600\/20 {
1004
+ --tw-gradient-from: #4b556333 var(--tw-gradient-from-position);
1005
+ --tw-gradient-to: #4b556300 var(--tw-gradient-to-position);
1006
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1007
+ }
1008
+ .from-green-500\/20 {
1009
+ --tw-gradient-from: #22c55e33 var(--tw-gradient-from-position);
1010
+ --tw-gradient-to: #22c55e00 var(--tw-gradient-to-position);
1011
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1012
+ }
1013
+ .from-purple-400 {
1014
+ --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
1015
+ --tw-gradient-to: #c084fc00 var(--tw-gradient-to-position);
1016
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1017
+ }
1018
+ .from-purple-500\/20 {
1019
+ --tw-gradient-from: #a855f733 var(--tw-gradient-from-position);
1020
+ --tw-gradient-to: #a855f700 var(--tw-gradient-to-position);
1021
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1022
+ }
1023
+ .from-purple-600 {
1024
+ --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
1025
+ --tw-gradient-to: #9333ea00 var(--tw-gradient-to-position);
1026
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1027
+ }
1028
+ .from-purple-600\/20 {
1029
+ --tw-gradient-from: #9333ea33 var(--tw-gradient-from-position);
1030
+ --tw-gradient-to: #9333ea00 var(--tw-gradient-to-position);
1031
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1032
+ }
1033
+ .from-red-500\/10 {
1034
+ --tw-gradient-from: #ef44441a var(--tw-gradient-from-position);
1035
+ --tw-gradient-to: #ef444400 var(--tw-gradient-to-position);
1036
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1037
+ }
1038
+ .from-violet-500\/20 {
1039
+ --tw-gradient-from: #8b5cf633 var(--tw-gradient-from-position);
1040
+ --tw-gradient-to: #8b5cf600 var(--tw-gradient-to-position);
1041
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1042
+ }
1043
+ .from-white\/5 {
1044
+ --tw-gradient-from: #ffffff0d var(--tw-gradient-from-position);
1045
+ --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
1046
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1047
+ }
1048
+ .to-cyan-500\/20 {
1049
+ --tw-gradient-to: #06b6d433 var(--tw-gradient-to-position);
1050
+ }
1051
+ .to-cyan-600\/20 {
1052
+ --tw-gradient-to: #0891b233 var(--tw-gradient-to-position);
1053
+ }
1054
+ .to-emerald-500\/20 {
1055
+ --tw-gradient-to: #10b98133 var(--tw-gradient-to-position);
1056
+ }
1057
+ .to-gray-700\/20 {
1058
+ --tw-gradient-to: #37415133 var(--tw-gradient-to-position);
1059
+ }
1060
+ .to-orange-500\/20 {
1061
+ --tw-gradient-to: #f9731633 var(--tw-gradient-to-position);
1062
+ }
1063
+ .to-orange-600\/20 {
1064
+ --tw-gradient-to: #ea580c33 var(--tw-gradient-to-position);
1065
+ }
1066
+ .to-pink-500\/10 {
1067
+ --tw-gradient-to: #ec48991a var(--tw-gradient-to-position);
1068
+ }
1069
+ .to-purple-500\/20 {
1070
+ --tw-gradient-to: #a855f733 var(--tw-gradient-to-position);
1071
+ }
1072
+ .to-transparent {
1073
+ --tw-gradient-to: transparent var(--tw-gradient-to-position);
1074
+ }
1075
+ .to-violet-400 {
1076
+ --tw-gradient-to: #a78bfa var(--tw-gradient-to-position);
1077
+ }
1078
+ .to-violet-500\/20 {
1079
+ --tw-gradient-to: #8b5cf633 var(--tw-gradient-to-position);
1080
+ }
1081
+ .to-violet-600 {
1082
+ --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
1083
+ }
1084
+ .to-violet-600\/20 {
1085
+ --tw-gradient-to: #7c3aed33 var(--tw-gradient-to-position);
1086
+ }
1087
+ .bg-clip-text {
1088
+ -webkit-background-clip: text;
1089
+ background-clip: text;
1090
+ }
1091
+ .p-0 {
1092
+ padding: 0;
1093
+ }
1094
+ .p-3 {
1095
+ padding: 0.75rem;
1096
+ }
1097
+ .p-4 {
1098
+ padding: 1rem;
1099
+ }
1100
+ .p-6 {
1101
+ padding: 1.5rem;
1102
+ }
1103
+ .px-4 {
1104
+ padding-left: 1rem;
1105
+ padding-right: 1rem;
1106
+ }
1107
+ .py-12 {
1108
+ padding-top: 3rem;
1109
+ padding-bottom: 3rem;
1110
+ }
1111
+ .py-3 {
1112
+ padding-top: 0.75rem;
1113
+ padding-bottom: 0.75rem;
1114
+ }
1115
+ .pl-10 {
1116
+ padding-left: 2.5rem;
1117
+ }
1118
+ .pt-2 {
1119
+ padding-top: 0.5rem;
1120
+ }
1121
+ .pt-3 {
1122
+ padding-top: 0.75rem;
1123
+ }
1124
+ .text-left {
1125
+ text-align: left;
1126
+ }
1127
+ .text-center {
1128
+ text-align: center;
1129
+ }
1130
+ .font-mono {
1131
+ font-family:
1132
+ ui-monospace,
1133
+ SFMono-Regular,
1134
+ Menlo,
1135
+ Monaco,
1136
+ Consolas,
1137
+ Liberation Mono,
1138
+ Courier New,
1139
+ monospace;
1140
+ }
1141
+ .text-2xl {
1142
+ font-size: 1.5rem;
1143
+ line-height: 2rem;
1144
+ }
1145
+ .text-3xl {
1146
+ font-size: 1.875rem;
1147
+ line-height: 2.25rem;
1148
+ }
1149
+ .text-sm {
1150
+ font-size: 0.875rem;
1151
+ line-height: 1.25rem;
1152
+ }
1153
+ .text-xl {
1154
+ font-size: 1.25rem;
1155
+ line-height: 1.75rem;
1156
+ }
1157
+ .text-xs {
1158
+ font-size: 0.75rem;
1159
+ line-height: 1rem;
1160
+ }
1161
+ .font-bold {
1162
+ font-weight: 700;
1163
+ }
1164
+ .font-medium {
1165
+ font-weight: 500;
1166
+ }
1167
+ .font-semibold {
1168
+ font-weight: 600;
1169
+ }
1170
+ .uppercase {
1171
+ text-transform: uppercase;
1172
+ }
1173
+ .tracking-wider {
1174
+ letter-spacing: 0.05em;
1175
+ }
1176
+ .text-amber-300 {
1177
+ --tw-text-opacity: 1;
1178
+ color: rgb(252 211 77 / var(--tw-text-opacity, 1));
1179
+ }
1180
+ .text-amber-400 {
1181
+ --tw-text-opacity: 1;
1182
+ color: rgb(251 191 36 / var(--tw-text-opacity, 1));
1183
+ }
1184
+ .text-amber-500 {
1185
+ --tw-text-opacity: 1;
1186
+ color: rgb(245 158 11 / var(--tw-text-opacity, 1));
1187
+ }
1188
+ .text-blue-300 {
1189
+ --tw-text-opacity: 1;
1190
+ color: rgb(147 197 253 / var(--tw-text-opacity, 1));
1191
+ }
1192
+ .text-blue-400 {
1193
+ --tw-text-opacity: 1;
1194
+ color: rgb(96 165 250 / var(--tw-text-opacity, 1));
1195
+ }
1196
+ .text-blue-500 {
1197
+ --tw-text-opacity: 1;
1198
+ color: rgb(59 130 246 / var(--tw-text-opacity, 1));
1199
+ }
1200
+ .text-gray-300 {
1201
+ --tw-text-opacity: 1;
1202
+ color: rgb(209 213 219 / var(--tw-text-opacity, 1));
1203
+ }
1204
+ .text-gray-400 {
1205
+ --tw-text-opacity: 1;
1206
+ color: rgb(156 163 175 / var(--tw-text-opacity, 1));
1207
+ }
1208
+ .text-gray-500 {
1209
+ --tw-text-opacity: 1;
1210
+ color: rgb(107 114 128 / var(--tw-text-opacity, 1));
1211
+ }
1212
+ .text-green-300 {
1213
+ --tw-text-opacity: 1;
1214
+ color: rgb(134 239 172 / var(--tw-text-opacity, 1));
1215
+ }
1216
+ .text-green-400 {
1217
+ --tw-text-opacity: 1;
1218
+ color: rgb(74 222 128 / var(--tw-text-opacity, 1));
1219
+ }
1220
+ .text-purple-300 {
1221
+ --tw-text-opacity: 1;
1222
+ color: rgb(216 180 254 / var(--tw-text-opacity, 1));
1223
+ }
1224
+ .text-purple-400 {
1225
+ --tw-text-opacity: 1;
1226
+ color: rgb(192 132 252 / var(--tw-text-opacity, 1));
1227
+ }
1228
+ .text-red-300 {
1229
+ --tw-text-opacity: 1;
1230
+ color: rgb(252 165 165 / var(--tw-text-opacity, 1));
1231
+ }
1232
+ .text-red-400 {
1233
+ --tw-text-opacity: 1;
1234
+ color: rgb(248 113 113 / var(--tw-text-opacity, 1));
1235
+ }
1236
+ .text-transparent {
1237
+ color: #0000;
1238
+ }
1239
+ .text-violet-300 {
1240
+ --tw-text-opacity: 1;
1241
+ color: rgb(196 181 253 / var(--tw-text-opacity, 1));
1242
+ }
1243
+ .text-violet-400 {
1244
+ --tw-text-opacity: 1;
1245
+ color: rgb(167 139 250 / var(--tw-text-opacity, 1));
1246
+ }
1247
+ .text-white {
1248
+ --tw-text-opacity: 1;
1249
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1250
+ }
1251
+ .opacity-50 {
1252
+ opacity: 0.5;
1253
+ }
1254
+ .shadow-2xl {
1255
+ --tw-shadow: 0 25px 50px -12px #00000040;
1256
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1257
+ }
1258
+ .shadow-2xl,
1259
+ .shadow-lg {
1260
+ box-shadow:
1261
+ var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
1262
+ var(--tw-shadow);
1263
+ }
1264
+ .shadow-lg {
1265
+ --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
1266
+ --tw-shadow-colored:
1267
+ 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px
1268
+ var(--tw-shadow-color);
1269
+ }
1270
+ .backdrop-blur-sm {
1271
+ --tw-backdrop-blur: blur(4px);
1272
+ }
1273
+ .backdrop-blur-sm,
1274
+ .backdrop-blur-xl {
1275
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
1276
+ var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
1277
+ var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1278
+ var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
1279
+ var(--tw-backdrop-sepia);
1280
+ }
1281
+ .backdrop-blur-xl {
1282
+ --tw-backdrop-blur: blur(24px);
1283
+ }
1284
+ .transition-all {
1285
+ transition-property: all;
1286
+ transition-duration: 0.15s;
1287
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1288
+ }
1289
+ .transition-colors {
1290
+ transition-property:
1291
+ color, background-color, border-color, text-decoration-color, fill, stroke;
1292
+ transition-duration: 0.15s;
1293
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1294
+ }
1295
+ .transition-transform {
1296
+ transition-property: transform;
1297
+ transition-duration: 0.15s;
1298
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1299
+ }
1300
+ .duration-200 {
1301
+ transition-duration: 0.2s;
1302
+ }
1303
+ .duration-300 {
1304
+ transition-duration: 0.3s;
1305
+ }
1306
+ .ease-out {
1307
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1308
+ }
1309
+ :root {
1310
+ --buncss-light: ;
1311
+ --buncss-dark: initial;
1312
+ color-scheme: dark;
1313
+ --color-bg-base: #0a0a0f;
1314
+ --color-bg-surface: #12121a;
1315
+ --color-bg-elevated: #1a1a24;
1316
+ --color-bg-hover: #22222e;
1317
+ --color-bg-active: #2a2a38;
1318
+ --color-accent-primary: #8b5cf6;
1319
+ --color-accent-secondary: #a78bfa;
1320
+ --color-accent-tertiary: #c4b5fd;
1321
+ --color-accent-glow: #8b5cf666;
1322
+ --color-success: #10b981;
1323
+ --color-warning: #f59e0b;
1324
+ --color-error: #ef4444;
1325
+ --color-info: #3b82f6;
1326
+ --color-text-primary: #f3f4f6;
1327
+ --color-text-secondary: #9ca3af;
1328
+ --color-text-tertiary: #6b7280;
1329
+ --color-text-muted: #4b5563;
1330
+ --color-border-subtle: #ffffff0f;
1331
+ --color-border-default: #ffffff1a;
1332
+ --color-border-strong: #ffffff26;
1333
+ --shadow-sm: 0 1px 2px 0 #0000000d;
1334
+ --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
1335
+ --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
1336
+ --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
1337
+ --shadow-2xl: 0 25px 50px -12px #00000040;
1338
+ --shadow-glow: 0 0 50px #8b5cf64d;
1339
+ --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1340
+ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1341
+ --transition-spring: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1342
+ }
1343
+ * {
1344
+ box-sizing: border-box;
1345
+ margin: 0;
1346
+ padding: 0;
1347
+ }
1348
+ html {
1349
+ font-feature-settings: "cv11", "ss01";
1350
+ font-variation-settings: "opsz" 32;
1351
+ scroll-behavior: smooth;
1352
+ font-family:
1353
+ Inter,
1354
+ system-ui,
1355
+ -apple-system,
1356
+ BlinkMacSystemFont,
1357
+ Segoe UI,
1358
+ Roboto,
1359
+ Noto Sans,
1360
+ Ubuntu,
1361
+ Cantarell,
1362
+ Helvetica Neue,
1363
+ sans-serif;
1364
+ }
1365
+ body {
1366
+ -webkit-font-smoothing: antialiased;
1367
+ -moz-osx-font-smoothing: grayscale;
1368
+ background: var(--color-bg-base);
1369
+ color: var(--color-text-primary);
1370
+ position: relative;
1371
+ overflow-x: hidden;
1372
+ min-height: 100vh;
1373
+ }
1374
+ body:before {
1375
+ content: "";
1376
+ position: fixed;
1377
+ pointer-events: none;
1378
+ z-index: 0;
1379
+ background:
1380
+ radial-gradient(at 0 0, #8b5cf626 0, #0000 50%),
1381
+ radial-gradient(at 100% 100%, #a78bfa1a 0, #0000 50%);
1382
+ inset: 0;
1383
+ }
1384
+ #root {
1385
+ position: relative;
1386
+ z-index: 1;
1387
+ }
1388
+ ::-webkit-scrollbar {
1389
+ width: 12px;
1390
+ height: 12px;
1391
+ }
1392
+ ::-webkit-scrollbar-track {
1393
+ background: var(--color-bg-surface);
1394
+ border-radius: 6px;
1395
+ }
1396
+ ::-webkit-scrollbar-thumb {
1397
+ background: linear-gradient(
1398
+ 180deg,
1399
+ var(--color-accent-primary),
1400
+ var(--color-accent-secondary)
1401
+ );
1402
+ border: 2px solid var(--color-bg-surface);
1403
+ border-radius: 6px;
1404
+ }
1405
+ ::-webkit-scrollbar-thumb:hover {
1406
+ background: linear-gradient(
1407
+ 180deg,
1408
+ var(--color-accent-secondary),
1409
+ var(--color-accent-tertiary)
1410
+ );
1411
+ }
1412
+ @keyframes fadeIn {
1413
+ 0% {
1414
+ opacity: 0;
1415
+ transform: translateY(10px);
1416
+ }
1417
+ to {
1418
+ opacity: 1;
1419
+ transform: translateY(0);
1420
+ }
1421
+ }
1422
+ @keyframes slideIn {
1423
+ 0% {
1424
+ opacity: 0;
1425
+ transform: translate(-20px);
1426
+ }
1427
+ to {
1428
+ opacity: 1;
1429
+ transform: translate(0);
1430
+ }
1431
+ }
1432
+ @keyframes pulse {
1433
+ 0%,
1434
+ to {
1435
+ opacity: 1;
1436
+ }
1437
+ 50% {
1438
+ opacity: 0.5;
1439
+ }
1440
+ }
1441
+ @keyframes shimmer {
1442
+ 0% {
1443
+ background-position: -1000px 0;
1444
+ }
1445
+ to {
1446
+ background-position: 1000px 0;
1447
+ }
1448
+ }
1449
+ @keyframes glow {
1450
+ 0%,
1451
+ to {
1452
+ box-shadow:
1453
+ 0 0 20px #8b5cf680,
1454
+ inset 0 0 20px #8b5cf61a;
1455
+ }
1456
+ 50% {
1457
+ box-shadow:
1458
+ 0 0 40px #8b5cf6cc,
1459
+ inset 0 0 30px #8b5cf633;
1460
+ }
1461
+ }
1462
+ .text-mono {
1463
+ font-family:
1464
+ JetBrains Mono,
1465
+ monospace;
1466
+ }
1467
+ :focus-visible {
1468
+ outline: 2px solid var(--color-accent-primary);
1469
+ outline-offset: 2px;
1470
+ }
1471
+ ::selection {
1472
+ background: var(--color-accent-primary);
1473
+ color: #fff;
1474
+ }
1475
+ .hover\:scale-\[1\.02\]:hover {
1476
+ --tw-scale-x: 1.02;
1477
+ --tw-scale-y: 1.02;
1478
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
1479
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
1480
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1481
+ }
1482
+ .hover\:border-red-500\/30:hover {
1483
+ border-color: #ef44444d;
1484
+ }
1485
+ .hover\:bg-red-500\/20:hover {
1486
+ background-color: #ef444433;
1487
+ }
1488
+ .hover\:bg-white\/5:hover {
1489
+ background-color: #ffffff0d;
1490
+ }
1491
+ .hover\:text-red-300:hover {
1492
+ --tw-text-opacity: 1;
1493
+ color: rgb(252 165 165 / var(--tw-text-opacity, 1));
1494
+ }
1495
+ .hover\:text-red-400:hover {
1496
+ --tw-text-opacity: 1;
1497
+ color: rgb(248 113 113 / var(--tw-text-opacity, 1));
1498
+ }
1499
+ .group:hover .group-hover\:scale-110 {
1500
+ --tw-scale-x: 1.1;
1501
+ --tw-scale-y: 1.1;
1502
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
1503
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
1504
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1505
+ }
1506
+ .group:hover .group-hover\:text-purple-300 {
1507
+ --tw-text-opacity: 1;
1508
+ color: rgb(216 180 254 / var(--tw-text-opacity, 1));
1509
+ }
1510
+ @media (min-width: 640px) {
1511
+ .sm\:flex-initial {
1512
+ flex: 0 auto;
1513
+ }
1514
+ .sm\:grid-cols-2 {
1515
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1516
+ }
1517
+ .sm\:flex-row {
1518
+ flex-direction: row;
1519
+ }
1520
+ .sm\:items-center {
1521
+ align-items: center;
1522
+ }
1523
+ }
1524
+ @media (min-width: 768px) {
1525
+ .md\:block {
1526
+ display: block;
1527
+ }
1528
+ .md\:hidden {
1529
+ display: none;
1530
+ }
1531
+ .md\:flex-row {
1532
+ flex-direction: row;
1533
+ }
1534
+ .md\:items-center {
1535
+ align-items: center;
1536
+ }
1537
+ .md\:justify-between {
1538
+ justify-content: space-between;
1539
+ }
1540
+ .md\:p-8 {
1541
+ padding: 2rem;
1542
+ }
1543
+ }
1544
+ @media (min-width: 1024px) {
1545
+ .lg\:ml-72 {
1546
+ margin-left: 18rem;
1547
+ }
1548
+ .lg\:hidden {
1549
+ display: none;
1550
+ }
1551
+ .lg\:translate-x-0 {
1552
+ --tw-translate-x: 0px;
1553
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
1554
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
1555
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1556
+ }
1557
+ .lg\:grid-cols-3 {
1558
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1559
+ }
1560
+ .lg\:grid-cols-4 {
1561
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1562
+ }
1563
+ .lg\:flex-row {
1564
+ flex-direction: row;
1565
+ }
1566
+ .lg\:items-center {
1567
+ align-items: center;
1568
+ }
1569
+ }