IdoBarakk/lasso-orbital-command

1/* Lasso Orbital Command - Global Styles */2 3:root {4    --lasso-primary: #00e6d0;5    --lasso-secondary: #00b8a8;6    --lasso-dark: #001a17;7    --lasso-glow: rgba(0, 230, 208, 0.15);8    --slate-deep: #020617;9    --slate-card: #0f172a;10    --glass-bg: rgba(15, 23, 42, 0.7);11    --glass-border: rgba(0, 230, 208, 0.1);12}13 14* {15    scrollbar-width: thin;16    scrollbar-color: rgba(0, 230, 208, 0.3) transparent;17}18 19*::-webkit-scrollbar {20    width: 8px;21    height: 8px;22}23 24*::-webkit-scrollbar-track {25    background: transparent;26}27 28*::-webkit-scrollbar-thumb {29    background-color: rgba(0, 230, 208, 0.3);30    border-radius: 4px;31}32 33*::-webkit-scrollbar-thumb:hover {34    background-color: rgba(0, 230, 208, 0.5);35}36 37body {38    background-color: var(--slate-deep);39    color: #e2e8f0;40    font-feature-settings: "cv02", "cv03", "cv04", "cv11";41}42 43/* Glassmorphism Utilities */44.glass {45    background: var(--glass-bg);46    backdrop-filter: blur(12px);47    -webkit-backdrop-filter: blur(12px);48    border: 1px solid var(--glass-border);49}50 51.glass-strong {52    background: rgba(15, 23, 42, 0.9);53    backdrop-filter: blur(16px);54    -webkit-backdrop-filter: blur(16px);55    border: 1px solid rgba(0, 230, 208, 0.15);56}57 58/* Lasso Gradient Text */59.text-lasso-gradient {60    background: linear-gradient(135deg, #00e6d0 0%, #00b8a8 50%, #0891b2 100%);61    -webkit-background-clip: text;62    -webkit-text-fill-color: transparent;63    background-clip: text;64}65 66/* Glow Effects */67.glow-lasso {68    box-shadow: 0 0 20px rgba(0, 230, 208, 0.15), 0 0 40px rgba(0, 230, 208, 0.05);69}70 71.glow-lasso-strong {72    box-shadow: 0 0 30px rgba(0, 230, 208, 0.3), 0 0 60px rgba(0, 230, 208, 0.1);73}74 75/* Status Indicators */76.status-enabled {77    background: rgba(34, 197, 94, 0.1);78    color: #4ade80;79    border: 1px solid rgba(34, 197, 94, 0.2);80}81 82.status-warning {83    background: rgba(245, 158, 11, 0.1);84    color: #fbbf24;85    border: 1px solid rgba(245, 158, 11, 0.2);86}87 88.status-error {89    background: rgba(239, 68, 68, 0.1);90    color: #f87171;91    border: 1px solid rgba(239, 68, 68, 0.2);92}93 94.status-info {95    background: rgba(0, 230, 208, 0.1);96    color: #00e6d0;97    border: 1px solid rgba(0, 230, 208, 0.2);98}99 100/* Form Elements */101input, select, textarea {102    transition: all 0.2s ease;103}104 105input:focus, select:focus, textarea:focus {106    box-shadow: 0 0 0 3px rgba(0, 230, 208, 0.1);107}108 109/* Animations */110@keyframes float {111    0%, 100% { transform: translateY(0px); }112    50% { transform: translateY(-5px); }113}114 115.animate-float {116    animation: float 3s ease-in-out infinite;117}118 119/* Shimmer Loading Effect */120.shimmer {121    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);122    background-size: 200% 100%;123    animation: shimmer 2s infinite;124}125 126/* Tab Transitions */127.tab-content {128    transition: opacity 0.3s ease, transform 0.3s ease;129}130 131.tab-content.active {132    opacity: 1;133    transform: translateY(0);134}135 136/* Custom Checkbox */137.custom-checkbox {138    appearance: none;139    width: 1.25rem;140    height: 1.25rem;141    border: 2px solid rgba(0, 230, 208, 0.3);142    border-radius: 4px;143    background: transparent;144    cursor: pointer;145    position: relative;146    transition: all 0.2s;147}148 149.custom-checkbox:checked {150    background: rgba(0, 230, 208, 0.2);151    border-color: #00e6d0;152}153 154.custom-checkbox:checked::after {155    content: '';156    position: absolute;157    left: 4px;158    top: 1px;159    width: 6px;160    height: 10px;161    border: solid #00e6d0;162    border-width: 0 2px 2px 0;163    transform: rotate(45deg);164}165 166/* Multi-select Tags */167.tag {168    display: inline-flex;169    align-items: center;170    gap: 4px;171    padding: 2px 8px;172    background: rgba(0, 230, 208, 0.1);173    border: 1px solid rgba(0, 230, 208, 0.2);174    border-radius: 4px;175    font-size: 0.75rem;176    color: #00e6d0;177}178 179.tag button {180    opacity: 0.6;181    transition: opacity 0.2s;182}183 184.tag button:hover {185    opacity: 1;186}187 188/* Progress Steps */189.progress-step {190    position: relative;191    padding-left: 2rem;192}193 194.progress-step::before {195    content: '';196    position: absolute;197    left: 0;198    top: 0.5rem;199    width: 0.75rem;200    height: 0.75rem;201    border-radius: 50%;202    background: #1e293b;203    border: 2px solid #334155;204    transition: all 0.3s;205}206 207.progress-step.active::before {208    background: #00e6d0;209    border-color: #00e6d0;210    box-shadow: 0 0 10px rgba(0, 230, 208, 0.5);211}212 213.progress-step.completed::before {214    background: #00e6d0;215    border-color: #00e6d0;216}217 218.progress-step::after {219    content: '';220    position: absolute;221    left: 0.35rem;222    top: 1.25rem;223    width: 2px;224    height: calc(100% - 1rem);225    background: #334155;226}227 228.progress-step:last-child::after {229    display: none;230}231 232.progress-step.completed::after {233    background: #00e6d0;234}235 236/* Mismatch Warning */237.mismatch-badge {238    position: relative;239    overflow: hidden;240}241 242.mismatch-badge::after {243    content: '';244    position: absolute;245    top: -50%;246    left: -50%;247    width: 200%;248    height: 200%;249    background: linear-gradient(45deg, transparent, rgba(245, 158, 11, 0.1), transparent);250    animation: shimmer 3s infinite;251}252 253/* Code Blocks */254.code-block {255    font-family: 'JetBrains Mono', monospace;256    background: rgba(2, 6, 23, 0.8);257    border: 1px solid rgba(0, 230, 208, 0.1);258    border-radius: 6px;259    padding: 1rem;260    font-size: 0.875rem;261    color: #94a3b8;262    overflow-x: auto;263}264 265/* Toast Notifications */266.toast {267    transform: translateX(100%);268    animation: slideInRight 0.3s forwards;269}270 271@keyframes slideInRight {272    to {273        transform: translateX(0);274    }275}276 277.toast-exit {278    animation: slideOutRight 0.3s forwards;279}280 281@keyframes slideOutRight {282    to {283        transform: translateX(120%);284        opacity: 0;285    }286}287 288/* Responsive Grid for Forms */289.form-grid {290    display: grid;291    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));292    gap: 1.5rem;293}294 295/* Hover Card Effect */296.hover-card {297    transition: all 0.3s ease;298}299 300.hover-card:hover {301    transform: translateY(-2px);302    box-shadow: 0 10px 40px -10px rgba(0, 230, 208, 0.1);303    border-color: rgba(0, 230, 208, 0.3);304}305 306/* Confirmation Dialog */307.confirm-dialog-backdrop {308    background: rgba(2, 6, 23, 0.8);309    backdrop-filter: blur(4px);310}311 312/* Feature Flag States */313.ff-state {314    display: inline-flex;315    align-items: center;316    gap: 0.5rem;317    padding: 0.25rem 0.75rem;318    border-radius: 9999px;319    font-size: 0.75rem;320    font-weight: 500;321}322 323.ff-enabled {324    background: rgba(34, 197, 94, 0.1);325    color: #4ade80;326    border: 1px solid rgba(34, 197, 94, 0.2);327}328 329.ff-ld-only {330    background: rgba(245, 158, 11, 0.1);331    color: #fbbf24;332    border: 1px solid rgba(245, 158, 11, 0.2);333}334 335.ff-server-only {336    background: rgba(59, 130, 246, 0.1);337    color: #60a5fa;338    border: 1px solid rgba(59, 130, 246, 0.2);339}340 341.ff-disabled {342    background: rgba(100, 116, 139, 0.1);343    color: #94a3b8;344    border: 1px solid rgba(100, 116, 139, 0.2);345}