:root {
              --bg-color: #0a0a0a;
              --text-color: #00ff41;
              --primary-color: linear-gradient(135deg, #00ff41, #00d4ff, #ff0080);
              --primary-hover: linear-gradient(135deg, #00d4ff, #ff0080, #00ff41);
              --input-bg: rgba(0, 255, 65, 0.1);
              --border-color: #00ff41;
              --status-color: #00d4ff;
              --success-color: #00ff41;
              --glow-color: #00ff41;
              --shadow-glow: 0 0 30px rgba(0, 255, 65, 0.8);
              --cyber-green: #00ff41;
              --cyber-blue: #00d4ff;
              --cyber-pink: #ff0080;
              --cyber-purple: #9d00ff;
              --cyber-red: #ff073a;
          }
          
          * {
              box-sizing: border-box;
          }
          
          body {
              font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
              background: 
                  linear-gradient(45deg, #000 25%, #0a0a0a 25%, #0a0a0a 50%, #000 50%, #000 75%, #0a0a0a 75%);
              background-size: 40px 40px;
              background-attachment: fixed;
              color: var(--text-color);
              margin: 0;
              padding: 20px;
              min-height: 100vh;
              overflow-x: hidden;
              position: relative;
              text-shadow: 0 0 5px currentColor;
          }
          
          @keyframes cyberGlitch {
              0%, 100% { 
                  filter: hue-rotate(0deg) contrast(1.2) brightness(1);
                  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
              }
              20% { 
                  filter: hue-rotate(10deg) contrast(1.4) brightness(1.1);
                  background-position: 1% 1%, 2% 0%, 1% 0%, 1% 0%;
              }
              40% { 
                  filter: hue-rotate(-5deg) contrast(1.1) brightness(0.9);
                  background-position: 0% 2%, 1% 1%, 0% 1%, 0% 1%;
              }
              60% { 
                  filter: hue-rotate(15deg) contrast(1.3) brightness(1.2);
                  background-position: 2% 0%, 0% 2%, 2% 0%, 2% 0%;
              }
              80% { 
                  filter: hue-rotate(-10deg) contrast(1.0) brightness(0.8);
                  background-position: 1% 1%, 1% 0%, 1% 2%, 1% 1%;
              }
          }
          
          .particles {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
              z-index: 1;
          }
          
          .particle {
              position: absolute;
              background: linear-gradient(45deg, var(--cyber-green), var(--cyber-blue), var(--cyber-pink));
              border-radius: 2px;
              opacity: 0.6;
              animation: dataStream 4s linear infinite, cyberPulse 2s ease-in-out infinite;
              box-shadow: 
                  0 0 8px var(--cyber-green),
                  0 0 16px var(--cyber-green),
                  inset 0 0 8px rgba(0, 255, 65, 0.2);
          }
          
          @keyframes dataStream {
              0% { 
                  transform: translateY(100vh) translateX(0px) rotate(0deg) scale(1); 
                  opacity: 0;
              }
              10% { opacity: 0.6; }
              50% { 
                  transform: translateY(50vh) translateX(10px) rotate(45deg) scale(1.1);
                  opacity: 0.8;
              }
              90% { opacity: 0.4; }
              100% { 
                  transform: translateY(-10vh) translateX(-5px) rotate(90deg) scale(0.8); 
                  opacity: 0;
              }
          }
          
          @keyframes cyberPulse {
              0%, 100% { 
                  box-shadow: 0 0 8px var(--cyber-green), 0 0 16px var(--cyber-green);
                  filter: brightness(1);
              }
              50% { 
                  box-shadow: 0 0 12px var(--cyber-blue), 0 0 24px var(--cyber-blue);
                  filter: brightness(1.3);
              }
          }
          
          @keyframes magicFloat {
              0% { 
                  transform: translateY(100vh) scale(0) rotate(0deg);
                  opacity: 0;
              }
              10% {
                  opacity: 1;
              }
              90% {
                  opacity: 1;
              }
              100% { 
                  transform: translateY(-100px) scale(1.5) rotate(720deg);
                  opacity: 0;
              }
          }
          
          @keyframes clickBoom {
              0% { 
                  transform: scale(0) rotate(0deg);
                  opacity: 1;
              }
              50% { 
                  transform: scale(1.5) rotate(180deg);
                  opacity: 0.8;
              }
              100% { 
                  transform: scale(3) rotate(360deg);
                  opacity: 0;
              }
          }
          
          .main-content {
              position: relative;
              z-index: 10;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100vh;
          }
          
          .container {
              width: 100%;
              max-width: 900px;
              background: rgba(0, 0, 0, 0.8);
              border: 2px solid;
              border-image: linear-gradient(135deg, var(--cyber-green), var(--cyber-blue), var(--cyber-pink)) 1;
              border-radius: 8px;
              padding: 40px;
              box-shadow: 
                  0 0 30px rgba(0, 255, 65, 0.3),
                  0 0 50px rgba(0, 212, 255, 0.2),
                  inset 0 0 30px rgba(0, 0, 0, 0.5);
              position: relative;
              overflow: hidden;
              animation: none;
              transform: none;
              transition: transform 0.3s ease;
          }
          
          .container:hover {
              transform: scale(1.02);
              animation-play-state: paused;
          }
          
          @keyframes cyberContainerGlow {
              0%, 100% { 
                  box-shadow: 
                      0 0 30px rgba(0, 255, 65, 0.3),
                      0 0 50px rgba(0, 212, 255, 0.2),
                      inset 0 0 30px rgba(0, 0, 0, 0.5);
                  border-image: linear-gradient(135deg, var(--cyber-green), var(--cyber-blue), var(--cyber-pink)) 1;
              }
              33% { 
                  box-shadow: 
                      0 0 40px rgba(0, 212, 255, 0.4),
                      0 0 60px rgba(255, 0, 128, 0.3),
                      inset 0 0 35px rgba(0, 0, 0, 0.6);
                  border-image: linear-gradient(225deg, var(--cyber-blue), var(--cyber-pink), var(--cyber-green)) 1;
              }
              66% { 
                  box-shadow: 
                      0 0 35px rgba(255, 0, 128, 0.3),
                      0 0 55px rgba(0, 255, 65, 0.4),
                      inset 0 0 40px rgba(0, 0, 0, 0.4);
                  border-image: linear-gradient(315deg, var(--cyber-pink), var(--cyber-green), var(--cyber-blue)) 1;
              }
          }
          
          .container::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 1px;
              background: linear-gradient(90deg, transparent, var(--glow-color), transparent);
          }
          
          h1 {
              text-align: center;
              color: var(--text-color);
              margin-bottom: 40px;
              font-size: 2.8rem;
              font-weight: 700;
              background: linear-gradient(135deg, var(--cyber-green), var(--cyber-blue), var(--cyber-pink));
              background-size: 200% 200%;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-shadow: 
                  0 0 15px rgba(0, 255, 65, 0.6);
              position: relative;
              animation: none;
              transform: none;
              letter-spacing: 2px;
              font-family: 'Courier New', monospace;
              text-transform: uppercase;
          }
          
          @keyframes cyberTextGlow {
              0% { 
                  text-shadow: 
                      0 0 20px rgba(0, 255, 65, 0.8),
                      0 0 40px rgba(0, 212, 255, 0.6);
                  filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.5));
              }
              50% { 
                  text-shadow: 
                      0 0 30px rgba(0, 212, 255, 0.9),
                      0 0 50px rgba(255, 0, 128, 0.7),
                      0 0 70px rgba(0, 255, 65, 0.5);
                  filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.7));
              }
              100% { 
                  text-shadow: 
                      0 0 20px rgba(0, 255, 65, 0.8),
                      0 0 40px rgba(0, 212, 255, 0.6);
                  filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.5));
              }
          }
          
          @keyframes gradientMove {
              0% { background-position: 0% 50%; }
              50% { background-position: 100% 50%; }
              100% { background-position: 0% 50%; }
          }
          
          .title-decoration {
              display: inline-block;
              animation: sparkle 1.5s ease-in-out infinite alternate;
              margin: 0 10px;
              font-size: 0.8em;
          }
          
          @keyframes sparkle {
              0% { 
                  transform: scale(1) rotate(0deg);
                  text-shadow: 0 0 10px var(--neon-yellow);
              }
              100% { 
                  transform: scale(1.2) rotate(360deg);
                  text-shadow: 0 0 20px var(--neon-pink), 0 0 30px var(--neon-cyan);
              }
          }
          
          h1::after {
              content: '▲ ◆ ▼ ◆ ▲';
              position: absolute;
              bottom: -30px;
              left: 50%;
              transform: translateX(-50%);
              font-size: 1.2rem;
              color: var(--cyber-green);
              animation: none;
              letter-spacing: 8px;
          }
          
          @keyframes cyberSymbolGlow {
              0% { 
                  transform: translateX(-50%) scale(1);
                  color: var(--cyber-green);
                  text-shadow: 0 0 10px var(--cyber-green);
              }
              33% { 
                  transform: translateX(-50%) scale(1.1);
                  color: var(--cyber-blue);
                  text-shadow: 0 0 15px var(--cyber-blue);
              }
              66% { 
                  transform: translateX(-50%) scale(1.05);
                  color: var(--cyber-pink);
                  text-shadow: 0 0 12px var(--cyber-pink);
              }
              100% { 
                  transform: translateX(-50%) scale(1);
                  color: var(--cyber-green);
                  text-shadow: 0 0 10px var(--cyber-green);
              }
          }
          
          .form-group {
              margin-bottom: 30px;
          }
          
          label {
              display: block;
              margin-bottom: 12px;
              font-weight: 700;
              color: #ffffff;
              font-size: 1.4rem;
              text-shadow: 
                  2px 2px 4px rgba(0, 0, 0, 1),
                  0 0 15px var(--neon-cyan);
              background: rgba(0, 0, 0, 0.8);
              padding: 8px 15px;
              border-radius: 10px;
              display: inline-block;
          }
          
          input[type="text"], input[type="number"] {
              width: 100%;
              padding: 16px 20px;
              background: rgba(0, 0, 0, 0.9);
              border: 2px solid var(--cyber-green);
              border-radius: 4px;
              color: #ffffff;
              font-size: 16px;
              font-weight: normal;
              font-family: 'Courier New', monospace;
              transition: all 0.3s ease;
              outline: none;
              box-shadow: 
                  0 0 10px rgba(0, 255, 65, 0.3);
          }
          
          @keyframes inputGlow {
              0%, 100% { box-shadow: 0 0 15px rgba(255, 20, 147, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.3); }
              50% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), inset 0 0 15px rgba(255, 20, 147, 0.5); }
          }
          
          select {
              width: 100%;
              padding: 16px 20px;
              background: rgba(0, 0, 0, 0.9);
              border: 2px solid var(--cyber-green);
              border-radius: 4px;
              color: #ffffff;
              font-size: 16px;
              font-weight: normal;
              font-family: 'Courier New', monospace;
              transition: all 0.3s ease;
              outline: none;
              cursor: pointer;
              box-shadow: 
                  0 0 10px rgba(0, 255, 65, 0.3);
          }
          
          select option {
              background: #000000;
              color: #ffffff;
              padding: 10px;
              font-weight: bold;
          }
          
          input[type="text"]:focus, input[type="number"]:focus, select:focus {
              border-color: var(--cyber-blue);
              box-shadow: 
                  0 0 15px rgba(0, 212, 255, 0.5);
          }
          
          input[type="text"]::placeholder, input[type="number"]::placeholder {
              color: rgba(255, 255, 255, 0.5);
          }
          
          button {
              width: 100%;
              padding: 20px;
              background: 
                  linear-gradient(45deg, var(--neon-pink), var(--neon-cyan), var(--neon-green), var(--neon-yellow)),
                  repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px);
              background-size: 400% 400%, 10px 10px;
              border: 3px solid;
              border-image: linear-gradient(45deg, var(--neon-purple), var(--neon-pink), var(--neon-cyan)) 1;
              border-radius: 20px;
              color: #000;
              font-size: 20px;
              font-weight: 900;
              font-family: 'Impact', 'Arial Black', sans-serif;
              text-transform: uppercase;
              letter-spacing: 2px;
              cursor: pointer;
              transition: all 0.3s ease;
              box-shadow: 
                  0 0 20px var(--neon-pink),
                  0 0 30px var(--neon-cyan),
                  0 8px 25px rgba(0, 0, 0, 0.3);
              position: relative;
              overflow: hidden;
              animation: buttonPulse 3s ease-in-out infinite, gradientMove 2s ease infinite;
              text-shadow: 
                  0 0 10px rgba(255, 255, 255, 0.8),
                  0 0 20px rgba(255, 255, 255, 0.6);
              transform: none;
          }
          
          @keyframes buttonPulse {
              0%, 100% { 
                  box-shadow: 
                      0 0 20px var(--neon-pink),
                      0 0 30px var(--neon-cyan),
                      0 8px 25px rgba(0, 0, 0, 0.3);
              }
              50% { 
                  box-shadow: 
                      0 0 30px var(--neon-cyan),
                      0 0 40px var(--neon-green),
                      0 12px 35px rgba(0, 0, 0, 0.4);
              }
          }
          
          button::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
              transition: left 0.5s;
              z-index: 1;
          }
          
          button:hover::before {
              left: 100%;
          }
          
          button:hover {
              background: 
                  linear-gradient(45deg, var(--neon-cyan), var(--neon-green), var(--neon-yellow), var(--neon-purple)),
                  repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px);
              background-size: 400% 400%, 5px 5px;
              transform: translateY(-5px) scale(1.05);
              box-shadow: 
                  0 0 40px var(--neon-cyan),
                  0 0 60px var(--neon-green),
                  0 15px 40px rgba(0, 0, 0, 0.5);
              animation-duration: 1s;
          }
          
          button.copy-btn {
              width: auto;
              padding: 12px 24px;
              font-size: 14px;
              margin-bottom: 15px;
              background: linear-gradient(135deg, #00d4aa 0%, #667eea 100%);
          }
          
          button.copy-btn:hover {
              background: linear-gradient(135deg, #00c497 0%, #5a6fd8 100%);
          }
          
          button:disabled {
              background: rgba(255, 255, 255, 0.1);
              cursor: not-allowed;
              transform: none;
              box-shadow: none;
          }
          
          #status {
              text-align: center;
              margin-top: 25px;
              color: #ffffff;
              min-height: 24px;
              font-size: 16px;
              font-weight: 600;
              text-shadow: 
                  2px 2px 4px rgba(0, 0, 0, 0.8),
                  0 0 10px var(--neon-cyan);
              background: rgba(0, 0, 0, 0.6);
              padding: 10px;
              border-radius: 10px;
              border: 2px solid var(--neon-cyan);
          }
          
          .progress-container {
              margin-top: 20px;
              margin-bottom: 20px;
              opacity: 0;
              visibility: hidden;
              transition: all 0.3s ease;
          }
          
          .progress-container.show {
              opacity: 1;
              visibility: visible;
          }
          
          .progress-bar {
              width: 100%;
              height: 8px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 4px;
              overflow: hidden;
              position: relative;
              box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
          }
          
          .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #00d4aa 100%);
              border-radius: 4px;
              transition: width 0.3s ease;
              position: relative;
              box-shadow: 0 0 10px rgba(0, 212, 170, 0.5);
          }
          
          .progress-fill::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
              animation: shimmer 2s infinite;
          }
          
          @keyframes shimmer {
              0% { left: -100%; }
              100% { left: 100%; }
          }
          
          .progress-text {
              margin-top: 10px;
              font-size: 14px;
              color: var(--status-color);
              text-align: center;
              text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
          }
          
          .results-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 15px;
          }
          
          .results-header label {
              margin-bottom: 0;
              font-size: 1.2rem;
          }
          
          textarea {
              width: 100%;
              height: 320px;
              background: rgba(0, 0, 0, 0.95);
              backdrop-filter: none;
              border: 3px solid;
              border-image: linear-gradient(45deg, var(--neon-pink), var(--neon-cyan), var(--neon-green)) 1;
              border-radius: 15px;
              color: #ffffff;
              font-family: 'Consolas', 'Courier New', monospace;
              font-size: 16px;
              font-weight: normal;
              padding: 20px;
              resize: vertical;
              transition: all 0.3s ease;
              outline: none;
              box-shadow: 
                  0 0 20px rgba(255, 20, 147, 0.3),
                  inset 0 0 20px rgba(0, 0, 0, 0.5);
              animation: textareaGlow 4s ease-in-out infinite;
              text-shadow: 
                  2px 2px 4px rgba(0, 0, 0, 1),
                  0 0 6px rgba(255, 255, 255, 0.4);
              line-height: 1.6;
          }
          
          @keyframes textareaGlow {
              0%, 100% { box-shadow: 0 0 20px rgba(255, 20, 147, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1); }
              50% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.5), inset 0 0 30px rgba(255, 20, 147, 0.2); }
          }
          
          textarea:focus {
              border-image: linear-gradient(45deg, var(--neon-green), var(--neon-yellow), var(--neon-purple)) 1;
              box-shadow: 
                  0 0 40px var(--neon-green),
                  0 0 60px var(--neon-yellow),
                  inset 0 0 30px rgba(255, 255, 255, 0.1);
              transform: scale(1.02);
              animation-play-state: paused;
          }
          
          .protocol-selection {
              margin-bottom: 30px;
              padding: 20px;
              background: rgba(255, 255, 255, 0.05);
              border-radius: 12px;
              border: 1px solid var(--border-color);
          }
          
          .protocol-title {
              color: var(--status-color);
              font-size: 1.1rem;
              font-weight: 600;
              margin-bottom: 15px;
              text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
          }
          
          .checkbox-group {
              display: flex;
              gap: 30px;
              flex-wrap: wrap;
          }
          
          .checkbox-item {
              display: flex;
              align-items: center;
              gap: 10px;
              cursor: pointer;
              transition: all 0.3s ease;
          }
          
          .checkbox-item:hover {
              transform: translateY(-2px);
          }
          
          .checkbox-item input[type="checkbox"] {
              appearance: none;
              width: 20px;
              height: 20px;
              border: 2px solid var(--border-color);
              border-radius: 4px;
              position: relative;
              cursor: pointer;
              transition: all 0.3s ease;
          }
          
          .checkbox-item input[type="checkbox"]:checked {
              background: var(--glow-color);
              border-color: var(--glow-color);
              box-shadow: 0 0 10px rgba(0, 212, 170, 0.5);
          }
          
          .checkbox-item input[type="checkbox"]:checked::before {
              content: '✓';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #000;
              font-weight: bold;
              font-size: 14px;
          }
          
          .checkbox-item input[type="checkbox"]:disabled {
              opacity: 0.7;
              cursor: not-allowed;
          }
          
          .checkbox-item input[type="checkbox"]:disabled + label {
              opacity: 0.8;
              cursor: not-allowed;
          }
          
          #customCountGroup {
              transition: all 0.3s ease;
              opacity: 0;
              max-height: 0;
              overflow: hidden;
          }
          
          #customCountGroup.show {
              opacity: 1;
              max-height: 100px;
          }
          
          .checkbox-item label {
              color: var(--text-color);
              font-size: 16px;
              font-weight: 500;
              cursor: pointer;
              margin-bottom: 0;
              text-shadow: none;
          }
          
          @media (max-width: 768px) {
              .container {
                  margin: 10px;
                  padding: 25px;
              }
              
              h1 {
                  font-size: 2rem;
              }
              
              .results-header {
                  flex-direction: column;
                  align-items: flex-start;
                  gap: 10px;
              }
              
              button.copy-btn {
                  align-self: flex-end;
              }
              
              .checkbox-group {
                  gap: 20px;
              }
          }