:root{--primary-color: #00f3ff;--secondary-color: #9d00ff;--bg-color: #0a0a0a;--text-color: #ffffff;--card-bg: rgba(255, 255, 255, .03);--card-border: rgba(255, 255, 255, .1);--success: #00ff88;--warning: #ffd700;--error: #ff0055}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.server-card{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:1.5rem}.server-card:hover{transform:translateY(-5px);border-color:var(--primary-color);box-shadow:0 5px 20px #00f3ff1a}.card-header{display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:1rem}.server-icon{color:var(--primary-color);background:#00f3ff1a;padding:.5rem;border-radius:8px}.server-info h3{margin:0;font-size:1.1rem;font-weight:600}.server-type{display:block;font-size:.8rem;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}.server-specs{font-size:.7rem;color:var(--primary-color);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.status-indicator{margin-left:auto;font-size:.75rem;padding:.25rem .75rem;border-radius:20px;text-transform:uppercase;font-weight:700;letter-spacing:.1em}.status-indicator.online{background:#00ff881a;color:#0f8;border:1px solid rgba(0,255,136,.2)}.status-indicator.offline{background:#ff00551a;color:#f05;border:1px solid rgba(255,0,85,.2)}.card-body{display:flex;flex-direction:column;gap:1rem}.metric{display:flex;align-items:center;gap:1rem}.metric-header{display:flex;align-items:center;gap:.5rem;width:80px;color:#ffffffb3;font-size:.9rem}.metric-bar-container{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.metric-bar{height:100%;border-radius:3px;transition:width .5s ease,background-color .5s ease}.metric-value{width:40px;text-align:right;font-family:monospace;font-size:.9rem;color:#fffc}.metric-value-text{margin-left:auto;font-family:monospace;font-size:.9rem;color:#fffc}.metric-group{display:flex;flex-direction:column;gap:.25rem}.metric-details{display:flex;justify-content:space-between;padding-left:95px;font-size:.7rem;color:#fff6;font-family:monospace}.spec-row{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub-spec{font-size:.65rem;opacity:.7}.hero-section{padding:2rem 0;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;z-index:1}.hero-content{display:flex;flex-direction:column;align-items:center;gap:.75rem}.hero-title{font-size:4rem;font-weight:900;letter-spacing:.1em;color:#fff;text-shadow:0 0 20px rgba(0,243,255,.5);position:relative;margin:0}.hero-subtitle{font-size:1rem;letter-spacing:.3em;color:var(--primary-color);text-transform:uppercase;opacity:.8}.glitch{position:relative}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}.glitch:before{left:2px;text-shadow:-1px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim 5s infinite linear alternate-reverse}.glitch:after{left:-2px;text-shadow:-1px 0 #00fff9;clip:rect(44px,450px,56px,0);animation:glitch-anim2 5s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(32px,9999px,88px,0)}5%{clip:rect(89px,9999px,96px,0)}10%{clip:rect(6px,9999px,32px,0)}15%{clip:rect(55px,9999px,14px,0)}20%{clip:rect(2px,9999px,64px,0)}25%{clip:rect(46px,9999px,7px,0)}30%{clip:rect(29px,9999px,86px,0)}35%{clip:rect(10px,9999px,2px,0)}40%{clip:rect(98px,9999px,5px,0)}45%{clip:rect(12px,9999px,76px,0)}50%{clip:rect(43px,9999px,31px,0)}55%{clip:rect(65px,9999px,89px,0)}60%{clip:rect(4px,9999px,67px,0)}65%{clip:rect(87px,9999px,3px,0)}70%{clip:rect(11px,9999px,23px,0)}75%{clip:rect(54px,9999px,45px,0)}80%{clip:rect(25px,9999px,88px,0)}85%{clip:rect(76px,9999px,11px,0)}90%{clip:rect(30px,9999px,65px,0)}95%{clip:rect(40px,9999px,20px,0)}to{clip:rect(38px,9999px,62px,0)}}@keyframes glitch-anim2{0%{clip:rect(12px,9999px,58px,0)}5%{clip:rect(19px,9999px,96px,0)}10%{clip:rect(36px,9999px,32px,0)}15%{clip:rect(25px,9999px,14px,0)}20%{clip:rect(52px,9999px,64px,0)}25%{clip:rect(16px,9999px,7px,0)}30%{clip:rect(69px,9999px,86px,0)}35%{clip:rect(10px,9999px,2px,0)}40%{clip:rect(18px,9999px,5px,0)}45%{clip:rect(92px,9999px,76px,0)}50%{clip:rect(43px,9999px,31px,0)}55%{clip:rect(65px,9999px,89px,0)}60%{clip:rect(4px,9999px,67px,0)}65%{clip:rect(87px,9999px,3px,0)}70%{clip:rect(11px,9999px,23px,0)}75%{clip:rect(54px,9999px,45px,0)}80%{clip:rect(25px,9999px,88px,0)}85%{clip:rect(76px,9999px,11px,0)}90%{clip:rect(30px,9999px,65px,0)}95%{clip:rect(40px,9999px,20px,0)}to{clip:rect(38px,9999px,62px,0)}}@media(max-width:768px){.hero-title{font-size:2.5rem}}.system-status-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 0 2rem;width:100%}.system-status-content{display:flex;gap:2rem;font-family:monospace;font-size:1rem;color:#ffffff80;border-top:1px solid rgba(0,243,255,.1);padding-top:1rem}.status-online{color:#0f8;text-shadow:0 0 5px #00ff88}.status-warning{color:gold;text-shadow:0 0 5px #ffd700}.status-offline{color:#f05;text-shadow:0 0 5px #ff0055}.last-updated{font-family:monospace;font-size:.8rem;color:#ffffff4d}.dashboard-container{max-width:1200px;margin:0 auto;padding:0 2rem 4rem}.servers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.no-data{text-align:center;color:#ffffff4d;padding:4rem;font-family:monospace}.admin-login-container{height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1a1a1a,#000)}.login-box{background:#ffffff0d;padding:3rem;border-radius:12px;border:1px solid rgba(0,243,255,.2);text-align:center;width:100%;max-width:400px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-icon{color:var(--primary-color);margin-bottom:1rem}.login-box h2{color:#fff;margin-bottom:2rem;font-size:1.2rem;letter-spacing:.2em}.login-box input{width:100%;padding:1rem;background:#0000004d;border:1px solid rgba(255,255,255,.1);color:#fff;margin-bottom:1rem;border-radius:4px;font-family:monospace;text-align:center}.login-box input:focus{outline:none;border-color:var(--primary-color)}.login-box button{width:100%;padding:1rem;background:var(--primary-color);border:none;color:#000;font-weight:900;letter-spacing:.1em;cursor:pointer;border-radius:4px;transition:all .2s}.login-box button:hover{background:#fff;box-shadow:0 0 15px var(--primary-color)}.admin-dashboard{padding:2rem;max-width:1200px;margin:0 auto}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1rem}.admin-header h1{font-size:1.5rem;letter-spacing:.1em}.header-actions{display:flex;gap:1rem}.password-btn{background:transparent;border:1px solid var(--primary-color);color:var(--primary-color);padding:.5rem 1rem;cursor:pointer;font-family:monospace;display:flex;align-items:center;gap:.5rem;transition:all .2s}.password-btn:hover{background:#00f3ff1a}.logout-btn{background:transparent;border:1px solid rgba(255,85,85,.5);color:#f55;padding:.5rem 1rem;cursor:pointer;font-family:monospace}.logout-btn:hover{background:#ff55551a}.password-change-panel{background:#ffffff05;padding:2rem;border-radius:12px;border:1px solid rgba(0,243,255,.2);margin-bottom:2rem}.password-change-panel h3{margin-top:0;color:var(--primary-color);font-size:1rem;margin-bottom:1.5rem;letter-spacing:.1em}.form-actions{display:flex;gap:1rem;margin-top:1rem}.save-btn{flex:1;padding:.8rem;background:var(--primary-color);border:none;color:#000;font-weight:900;cursor:pointer;transition:all .2s}.save-btn:hover{background:#fff;box-shadow:0 0 15px var(--primary-color)}.cancel-btn{flex:1;padding:.8rem;background:transparent;border:1px solid rgba(255,255,255,.2);color:#ffffffb3;cursor:pointer;transition:all .2s}.cancel-btn:hover{background:#ffffff0d}.admin-content{display:grid;grid-template-columns:1fr 2fr;gap:3rem}@media(max-width:768px){.admin-content{grid-template-columns:1fr}}.add-server-panel,.server-list-panel{background:#ffffff05;padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,.05)}h3{margin-top:0;color:var(--primary-color);font-size:1rem;margin-bottom:1.5rem;letter-spacing:.1em}.form-group{margin-bottom:1rem}.form-group input,.form-group select{width:100%;padding:.8rem;background:#0000004d;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:4px}.checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;color:#ffffffb3}.add-btn{width:100%;padding:.8rem;background:transparent;border:1px solid var(--primary-color);color:var(--primary-color);display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;margin-top:1rem;transition:all .2s}.add-btn:hover{background:#00f3ff1a}.server-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff08;margin-bottom:.5rem;border-radius:4px;border-left:2px solid transparent}.server-item:hover{border-left-color:var(--primary-color);background:#ffffff0d}.server-details{display:flex;flex-direction:column;gap:.25rem}.server-ip{font-family:monospace;font-size:.8rem;color:#ffffff80}.server-badge{font-size:.7rem;background:#ffffff1a;padding:2px 6px;border-radius:4px;width:fit-content}.server-actions{display:flex;align-items:center;gap:1rem}.delete-btn{background:transparent;border:none;color:#f55;cursor:pointer;opacity:.5;transition:opacity .2s}.delete-btn:hover{opacity:1}.background-animation{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:float 20s infinite ease-in-out}.orb-1{width:400px;height:400px;background:var(--primary-color);top:-100px;left:-100px;animation:float 20s infinite ease-in-out;transform:translate(calc(var(--mouse-x, 0) * -30px),calc(var(--mouse-y, 0) * -30px));transition:transform .2s ease-out}.orb-2{width:300px;height:300px;background:var(--secondary-color);bottom:-50px;right:-50px;animation:float 25s infinite ease-in-out reverse;transform:translate(calc(var(--mouse-x, 0) * 30px),calc(var(--mouse-y, 0) * 30px));transition:transform .2s ease-out}.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle at center,black 40%,transparent 100%);-webkit-mask-image:radial-gradient(circle at center,black 40%,transparent 100%)}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(30px,50px)}}.app-container{min-height:100vh;position:relative;width:100%}.footer{text-align:center;padding:2rem;border-top:1px solid rgba(255,255,255,.05);margin-top:auto;color:#ffffff4d;font-size:.8rem;letter-spacing:.1em;display:flex;flex-direction:column;gap:1rem}.footer-links{opacity:0;transition:opacity .3s}.footer:hover .footer-links{opacity:1}.admin-link{color:#ffffff1a;text-decoration:none;font-size:.7rem}.admin-link:hover{color:var(--primary-color)}
