:root{--primary:#ff00ff;--primary-dark:#c700c7;--secondary:#00ffff;--dark-bg:#110014;--panel-bg:#1a0029;--panel-bg-light:#2a0040;--text:#ffffff;--text-muted:#b19cd9;--gradient-1:linear-gradient(135deg, #4b0082, #9400d3);--gradient-2:linear-gradient(135deg, #9400d3, #ff00ff);--gradient-3:linear-gradient(180deg, #2a002a, #1a0029);--shadow-glow:0 0 15px rgba(255, 0, 255, 0.6);--shadow-strong:0 5px 15px rgba(255, 0, 255, 0.7)}@font-face{font-family:"Cyber";src:url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Courier New",monospace;background-color:var(--dark-bg);color:var(--text);line-height:1.6;overflow-x:hidden}#matrix-canvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1}.main-container{max-width:500px;margin:20px auto;padding:20px;background-color:rgb(26 0 41 / .85);border-radius:15px;border:1px solid var(--primary);box-shadow:var(--shadow-glow);position:relative;overflow:hidden;backdrop-filter:blur(10px)}.header{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;position:relative}.logo-container{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:rgb(16 0 25 / .7);padding:15px;border-radius:12px;box-shadow:0 0 10px rgb(255 0 255 / .4);margin-bottom:15px}.logo-section{display:flex;align-items:center}.logo{width:80px;height:80px;border-radius:50%;object-fit:cover;box-shadow:0 0 20px var(--primary);border:2px solid var(--primary);transition:all 0.3s ease;animation:pulse 2s infinite}.logo:hover{transform:scale(1.05);box-shadow:0 0 30px var(--primary)}.title-section{margin-left:15px}.title-section h1{font-size:1.3rem;color:var(--primary);text-shadow:0 0 10px var(--primary);margin:0;letter-spacing:1px}.title-section p{font-size:.8rem;color:var(--text-muted);margin-top:5px}.status-indicator{display:flex;align-items:center;background:rgb(10 0 15 / .8);padding:7px 12px;border-radius:20px;box-shadow:0 0 10px rgb(255 0 255 / .4)}.ping-circle{width:12px;height:12px;background-color:var(--primary);border-radius:50%;animation:blink 1.5s infinite;margin-right:8px}.status-indicator span{font-size:.8rem;font-weight:700;color:var(--text)}.clock-container{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:15px}.hijau{color:var(--secondary)}.merah{color:red}.clock{font-size:1rem;color:var(--secondary);text-shadow:0 0 5px var(--secondary);background:rgb(10 0 15 / .6);padding:5px 15px;border-radius:20px;border:1px solid var(--secondary)}.server-status{display:flex;align-items:center;font-size:.8rem}.server-status .dot{width:8px;height:8px;background-color:lime;border-radius:50%;margin-right:5px;box-shadow:0 0 5px lime;animation:blink 2s infinite}.content{background-color:rgb(26 0 41 / .5);padding:20px;border-radius:12px;border:1px solid rgb(255 0 255 / .3);position:relative}.content::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:12px;padding:1px;background:linear-gradient(45deg,var(--primary),transparent,var(--primary));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.content-header{text-align:center;margin-bottom:20px}.headline-title{font-size:1.2rem;font-weight:700;color:var(--primary);text-shadow:0 0 10px var(--primary);letter-spacing:1px;margin-bottom:5px}.headline-subtitle{font-size:.85rem;color:var(--text-muted)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:700;color:var(--text)}.target-box{background-color:var(--panel-bg-light);padding:12px;border-radius:8px;cursor:pointer;border:1px solid var(--primary);text-align:center;box-shadow:0 0 10px rgb(255 0 255 / .4);transition:all 0.3s ease;position:relative;overflow:hidden}.target-box::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 0 255 / .2),transparent);transition:0.5s}.target-box:hover::before{left:100%}.target-box:hover{background-color:#3c0066;box-shadow:0 0 20px rgb(255 0 255 / .6);transform:translateY(-2px)}.input-field{width:100%;padding:12px;border:1px solid var(--primary-dark);border-radius:8px;background-color:rgb(42 0 64 / .7);color:var(--text);font-size:14px;font-family:"Courier New",monospace;transition:all 0.3s ease}.input-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 10px rgb(255 0 255 / .5)}.input-field::placeholder{color:rgb(177 156 217 / .6)}.note-text{font-size:12px;color:var(--text-muted);margin-top:5px}.select-field{width:100%;padding:12px;border:1px solid var(--primary-dark);border-radius:8px;background-color:rgb(42 0 64 / .7);color:var(--text);font-size:14px;font-family:"Courier New",monospace;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff00ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}.select-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 10px rgb(255 0 255 / .5)}.checkbox-section{margin:20px 0}.checkbox-container{display:flex;align-items:flex-start;margin-bottom:12px;padding:10px;background-color:rgb(20 0 30 / .5);border-radius:8px;transition:background-color 0.3s}.checkbox-container:hover{background-color:rgb(60 0 90 / .7)}.checkbox-input{appearance:none;width:18px;height:18px;background-color:var(--panel-bg);border:1px solid var(--primary);border-radius:4px;margin-right:10px;position:relative;cursor:pointer;flex-shrink:0;margin-top:3px}.checkbox-input:checked{background-color:var(--primary)}.checkbox-input:checked::after{content:"✓";position:absolute;color:var(--text);font-size:14px;left:3px;top:-2px}.checkbox-label{font-size:.9rem;user-select:none}.button-container{display:flex;justify-content:center;margin-top:30px}.action-button{padding:14px 30px;background:var(--gradient-1);color:var(--text);font-size:1rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 10px rgb(255 0 255 / .4);font-family:"Courier New",monospace;letter-spacing:2px;position:relative;overflow:hidden}.action-button::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:0.5s}.action-button:hover::before{left:100%}.action-button:hover:not(:disabled){background:var(--gradient-2);transform:translateY(-3px);box-shadow:0 6px 15px rgb(255 0 255 / .6)}.action-button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 8px rgb(255 0 255 / .5)}.action-button:disabled{background:linear-gradient(90deg,#333,#444);cursor:not-allowed;color:#888;box-shadow:none}.activity-container{margin-top:30px;padding:15px;background:rgb(26 0 41 / .7);border-radius:12px;border:1px solid rgb(255 0 255 / .3);box-shadow:0 0 15px rgb(255 0 255 / .3)}.activity-container h2{font-size:1rem;color:var(--primary);text-shadow:0 0 7px var(--primary);margin-bottom:15px;text-align:center;letter-spacing:1px}.activity-table{width:100%;border-collapse:collapse}.activity-table tr{transition:background-color 0.3s}.activity-table tr:hover{background-color:rgb(60 0 90 / .3)}.activity-table td{padding:10px;border-bottom:1px solid rgb(75 0 130 / .5);font-size:.85rem}.activity-status{color:var(--primary);font-weight:700;text-align:right}footer{text-align:center;padding:15px;margin-top:20px;font-size:.8rem;color:var(--text-muted);border-top:1px solid rgb(255 0 255 / .2)}.overlay-regis{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .8);justify-content:center;align-items:center;z-index:1000}.popup-regis{background:var(--gradient-3);color:var(--text);padding:25px;border-radius:15px;border:1px solid var(--primary);box-shadow:0 0 25px rgba(0, 119, 255, 0.6);transition:all 0.5s cubic-bezier(.23,1,.32,1);text-align:center}.popup-button{margin:10px;padding:10px 20px;border:none;background:#007bff;color:#fff;border-radius:5px;cursor:pointer}.popup-button:hover{background:#0056b3}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .8);backdrop-filter:blur(5px);z-index:999;opacity:0;visibility:hidden;transition:opacity 0.5s ease,visibility 0.5s ease}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:90%;max-width:450px;background:var(--gradient-3);color:var(--text);padding:25px;border-radius:15px;border:1px solid var(--primary);box-shadow:0 0 25px rgb(255 0 255 / .6);z-index:1000;opacity:0;visibility:hidden;transition:all 0.5s cubic-bezier(.23,1,.32,1)}.overlay.show,.popup.show{opacity:1;visibility:visible}.popup.show{transform:translate(-50%,-50%) scale(1)}.popup-content{text-align:center}.popup-content h2{margin-bottom:20px;color:var(--primary);text-shadow:0 0 10px var(--primary);letter-spacing:1px}.popup-content p{margin-bottom:20px;color:var(--text);line-height:1.6}.popup-table{width:100%;margin:20px 0;border-collapse:collapse}.popup-table td{padding:10px;border-bottom:1px solid rgb(75 0 130 / .5)}.popup-table td:first-child{font-weight:700;color:var(--text-muted);text-align:left;width:40%}.popup-button{display:inline-block;padding:12px 25px;margin-top:20px;background:var(--gradient-1);color:var(--text);font-weight:700;text-align:center;border:none;border-radius:8px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgb(148 0 211 / .6);font-family:"Courier New",monospace;letter-spacing:1px}.popup-button:hover{background:var(--gradient-2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(80, 147, 247, 0.7)}.circle-container{position:relative;width:120px;height:120px;margin:30px auto;display:flex;justify-content:center;align-items:center}.circle-container span{font-size:.85rem;color:var(--primary);font-weight:700;text-shadow:0 0 5px var(--primary);text-align:center;z-index:1}.rotating-circle{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:3px solid rgb(255 255 255 / .1);border-top:3px solid var(--primary);animation:rotate 2s linear infinite;box-shadow:0 0 15px rgb(148 0 211 / .5)}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:flex-start;z-index:10;pointer-events:none}.popup-chat{background:linear-gradient(180deg,rgb(42 0 42 / .7),rgb(26 0 41 / .9));color:#fff;padding:15px 25px;border-radius:8px;border:1px solid var(--primary);box-shadow:0 5px 15px rgb(255 0 255 / .6);font-size:16px;text-shadow:0 0 10px rgb(0 0 0 / .5);text-align:center;position:relative;top:120px;opacity:0;transform:scale(.8);transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:auto;z-index:9999;max-width:80%}.popup-chat.show{opacity:1;transform:scale(1)}.highlight{font-weight:700;color:var(--primary);padding:2px 6px;border-radius:3px;background-color:rgb(40 0 40 / .5)}@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 8px var(--primary)}50%{opacity:.5;box-shadow:0 0 15px var(--primary)}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(255 0 255 / .7)}70%{box-shadow:0 0 0 10px #fff0}100%{box-shadow:0 0 0 0 #fff0}}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes scan{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}@media (max-width:768px){.main-container{margin:10px;padding:15px}.logo{width:60px;height:60px}.title-section h1{font-size:1.1rem}}@media (max-width:480px){.main-container{padding:10px}.logo-container{flex-direction:column;gap:15px;align-items:center;padding:10px}.logo-section{flex-direction:column;text-align:center}.title-section{margin-left:0;margin-top:10px;text-align:center}.title-section h1{font-size:1rem}.content{padding:15px}.headline-title{font-size:1rem}.action-button{padding:12px 20px;font-size:.9rem}}.terminal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .9);z-index:1001;display:flex;justify-content:center;align-items:center;flex-direction:column;color:lime;font-family:"Courier New",monospace;font-size:14px;overflow:auto}.terminal-content{width:80%;max-height:80%;overflow-y:auto;padding:20px;border:1px solid lime;border-radius:8px;box-shadow:0 0 20px rgb(0 255 0 / .5);background-color:rgb(0 0 0 / .8)}.terminal-line{white-space:pre-wrap}