body{margin:0;padding:0;min-height:100vh;background:#0f0f0f;background-image:radial-gradient(circle at 20% 80%,rgba(255,68,68,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,107,107,.1) 0%,transparent 50%);font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#fff;overflow-x:hidden}.glass-effect{background:linear-gradient(145deg,#1a1a1a,#161616);border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff0d}.card-hover{transition:all .3s cubic-bezier(.4,0,.2,1)}.card-hover:hover{transform:translateY(-4px);border-color:#f44;box-shadow:0 12px 40px #00000080,0 0 0 1px #ff44444d,inset 0 1px #ffffff1a}.dark-card{background:linear-gradient(145deg,#1a1a1a,#161616);border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff0d;transition:all .3s cubic-bezier(.4,0,.2,1)}.dark-card:hover{transform:translateY(-4px);border-color:#f44;box-shadow:0 12px 40px #00000080,0 0 0 1px #ff44444d,inset 0 1px #ffffff1a}.live-indicator{position:relative;display:inline-block}.live-indicator:before{content:"";position:absolute;top:50%;left:-20px;transform:translateY(-50%);width:8px;height:8px;background:#f44;border-radius:50%;animation:live-pulse 1.5s infinite}@keyframes live-pulse{0%,to{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.6;transform:translateY(-50%) scale(1.2)}}.slider{appearance:none;width:100%;height:6px;background:#2a2a2a;border-radius:3px;outline:none;transition:all .3s ease}.slider:hover{background:#333}.slider::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background:linear-gradient(135deg,#f44,#ff6b6b);cursor:pointer;border:2px solid #1a1a1a;box-shadow:0 2px 8px #ff44444d;transition:all .3s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 16px #ff444480}.slider::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:linear-gradient(135deg,#f44,#ff6b6b);cursor:pointer;border:2px solid #1a1a1a;box-shadow:0 2px 8px #ff44444d;transition:all .3s ease}.status-active{color:#f44;font-weight:600}.status-inactive{color:#666}.status-pending{color:orange}h1,h2,h3,h4,h5,h6{color:#fff;font-weight:700;letter-spacing:-.02em}p,span,div{color:#ccc;line-height:1.6}.input-field{background:#1a1a1a;border:2px solid #2a2a2a;border-radius:8px;padding:12px 16px;color:#fff;font-size:16px;transition:all .3s ease}.input-field:focus{outline:none;border-color:#f44;box-shadow:0 0 0 3px #ff44441a}.input-field::placeholder{color:#666}@keyframes subtle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.floating-element{animation:subtle-float 4s ease-in-out infinite}@media (max-width: 768px){body{padding:1rem}.dark-card{border-radius:12px}.slider::-webkit-slider-thumb{height:24px;width:24px}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s ease}.logo:hover{filter:drop-shadow(0 0 2em #ff4444aa)}.logo.react:hover{filter:drop-shadow(0 0 2em #ff6b6baa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px #ff44444d}50%{box-shadow:0 0 20px #f449}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2rem;background:#1a1a1a;border:1px solid #333;border-radius:12px;transition:all .3s ease;box-shadow:0 4px 16px #0000004d}.card:hover{transform:translateY(-3px);border-color:#f44;box-shadow:0 8px 24px #0006,0 0 0 1px #f443}.card.live{border-color:#f44;animation:pulse-glow 2s infinite}.read-the-docs{color:#888;transition:color .3s ease}.read-the-docs:hover{color:#ccc}.btn-primary{background:linear-gradient(135deg,#f44,#ff6b6b);border:none;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f446}.btn-secondary{background:transparent;border:2px solid #444;color:#ccc;padding:10px 22px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-secondary:hover{border-color:#f44;color:#f44;transform:translateY(-1px)}
