:root{--bg-color: #0f111a;--text-primary: #ffffff;--text-secondary: #94a3b8;--glass-bg: rgba(30, 41, 59, .4);--glass-border: rgba(255, 255, 255, .08);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--accent-blue: #3b82f6;--accent-green: #10b981;--accent-red: #ef4444;--accent-orange: #f59e0b;--accent-purple: #8b5cf6;--bar-bg: rgba(255, 255, 255, .1)}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;overflow-x:hidden;position:relative}.background-effects{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden}.glow{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3;animation:float 20s infinite alternate cubic-bezier(.4,0,.2,1)}.glow-1{background:var(--accent-purple);width:400px;height:400px;top:-10%;left:-10%}.glow-2{background:var(--accent-blue);width:500px;height:500px;bottom:-20%;right:-10%;animation-delay:-5s}.glow-3{background:var(--accent-green);width:300px;height:300px;top:40%;left:50%;animation-delay:-10s;opacity:.15}@keyframes float{0%{transform:translate(0) scale(1)}to{transform:translate(50px,50px) scale(1.1)}}.app-container{max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:2rem}header{text-align:center;margin-bottom:1rem}h1{font-size:3rem;font-weight:700;background:linear-gradient(to right,#fff,#94a3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;letter-spacing:-1px}.version-tag{font-size:.9rem;font-weight:500;vertical-align:super;color:var(--text-secondary);margin-left:.5rem;letter-spacing:normal;-webkit-text-fill-color:initial}.status-container{display:flex;align-items:center;justify-content:center;gap:.75rem}.heartbeat{width:10px;height:10px;border-radius:50%;background-color:var(--accent-green);opacity:.3;transition:opacity .3s}.heartbeat.active{opacity:1;box-shadow:0 0 8px 2px #10b98166}.heartbeat.error{background-color:var(--accent-red);opacity:1;box-shadow:0 0 8px 2px #ef444466}.subtitle{color:var(--text-secondary);font-size:1.1rem}.nodes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.node-card{cursor:pointer;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.node-header{display:flex;justify-content:space-between;align-items:center}.node-hostname{font-size:1.25rem;font-weight:700;color:#fff}.node-metrics{display:flex;flex-direction:column;gap:.75rem}.back-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:500;display:flex;align-items:center;gap:8px;transition:all .3s ease;margin-bottom:1rem;width:fit-content}.back-btn:hover{background:var(--glass-border);transform:translate(-4px)}.metrics-big-box{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.big-metric{display:flex;flex-direction:column;gap:.5rem;min-height:240px}.metric-header{display:flex;justify-content:space-between;align-items:baseline;height:44px}.metric-header .label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em}.metric-header .value{font-size:2rem;font-weight:700;color:#fff}.metric-header .unit{font-size:1rem;color:var(--text-secondary)}.big-metric .chart-container{height:150px;width:100%}.big-metric .detail{font-size:.8rem;color:var(--text-secondary);text-align:right;margin-top:.25rem;height:1.2rem;display:block}.net-metric{grid-column:1 / -1}.storage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.mini-metric{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.mini-metric .label{font-size:.75rem;color:var(--text-secondary)}.mini-metric .val{font-weight:600}.dashboard{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem}.glass{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px;padding:2rem;transition:transform .3s ease,box-shadow .3s ease}.glass:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000073}h2{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.icon{font-size:1.8rem}.system-card{grid-column:1 / -1}.storage-card{grid-column:1 / 2}.processes-card{grid-column:2 / -1}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem}.metric{display:flex;flex-direction:column;gap:.5rem}.label{color:var(--text-secondary);font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:1px}.value-container{display:flex;align-items:baseline;gap:2px}.value{font-size:2.5rem;font-weight:700;line-height:1}.unit{font-size:1.2rem;color:var(--text-secondary);font-weight:500}.detail{font-size:.85rem;color:var(--text-secondary);text-align:right;margin-top:.25rem}.chart-container{position:relative;height:120px;width:100%;margin-top:.5rem}.progress-bar{width:100%;height:8px;background:var(--bar-bg);border-radius:4px;overflow:hidden}.progress-fill{height:100%;border-radius:4px;transition:width 1s cubic-bezier(.16,1,.3,1),background-color .3s ease;width:0%;background-color:var(--accent-blue)}.progress-fill.warning{background-color:var(--accent-orange)}.progress-fill.danger{background-color:var(--accent-red)}.storage-list{display:flex;flex-direction:column;gap:1.5rem}.storage-item{display:flex;flex-direction:column;gap:.5rem;width:100%}.storage-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.storage-header span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;padding-right:.5rem}.storage-name{font-weight:600;font-size:1.1rem}.storage-percent{font-weight:700;color:var(--accent-purple)}.processes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.process-list h3{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.technical-table{width:100%;border-collapse:separate;border-spacing:0 .5rem;text-align:left;font-size:.85rem;table-layout:fixed}.technical-table th,.technical-table td{padding:.6rem .5rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.05)}.technical-table th{color:var(--text-secondary);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.technical-table th:nth-child(1),.technical-table td:nth-child(1){width:50px}.technical-table th:nth-child(2),.technical-table td:nth-child(2){width:30%}.technical-table th:nth-child(3),.technical-table td:nth-child(3){width:auto}.technical-table th:nth-child(4),.technical-table td:nth-child(4){width:70px;text-align:right}.technical-table .val-col{text-align:right}.process-item td{background:#ffffff08;padding:.6rem .5rem;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}.process-item td:first-child{border-left:1px solid rgba(255,255,255,.05);border-top-left-radius:8px;border-bottom-left-radius:8px;color:var(--text-secondary);font-family:monospace}.process-item td:last-child{border-right:1px solid rgba(255,255,255,.05);border-top-right-radius:8px;border-bottom-right-radius:8px;text-align:right;font-weight:700;color:var(--accent-blue)}.col-pid{font-family:monospace;font-size:.8rem}.col-user{color:var(--accent-purple);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.services-card{grid-column:1 / -1}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.service-card{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.service-header{display:flex;justify-content:space-between;align-items:center}.service-header h3{font-size:1.2rem;font-weight:600}.status-badge{padding:.25rem .75rem;border-radius:9999px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;background:var(--bar-bg);color:var(--text-secondary)}.status-badge.running{background:#10b98133;color:var(--accent-green);box-shadow:0 0 10px #10b98133}.status-badge.stopped{background:#ef444433;color:var(--accent-red)}.status-badge.checking{color:var(--text-secondary);border-color:#ffffff1a}.service-actions{display:flex;gap:.5rem}.btn{flex:1;padding:.6rem;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;outline:none}.btn:active{transform:scale(.95)}.btn-action.start{background:#10b98126;color:var(--accent-green);border:1px solid rgba(16,185,129,.3)}.btn-action.start:hover{background:#10b98140}.btn-action.restart{background:#3b82f626;color:var(--accent-blue);border:1px solid rgba(59,130,246,.3)}.btn-action.restart:hover{background:#3b82f640}.btn-action.stop{background:#ef444426;color:var(--accent-red);border:1px solid rgba(239,68,68,.3)}.btn-action.stop:hover{background:#ef444440}.btn-action.logs{background:#8b5cf626;color:var(--accent-purple);border:1px solid rgba(139,92,246,.3)}.btn-action.logs:hover{background:#8b5cf640}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0a0a0fcc;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);align-items:center;justify-content:center}.modal-content{width:80%;max-width:900px;min-height:500px;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;margin:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:1rem;margin-bottom:1rem}.modal-header h2{margin:0;font-size:1.5rem}.close-btn{color:var(--text-secondary);font-size:2rem;font-weight:700;cursor:pointer;transition:color .2s;line-height:1}.close-btn:hover{color:var(--text-primary)}.modal-body{flex-grow:1;background-color:#0000004d;border-radius:8px;padding:1rem;overflow:hidden}.modal-body pre{margin:0;height:400px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;font-family:monospace;font-size:.85rem;color:#cdcdcd}footer{text-align:center;margin-top:4rem;padding-bottom:2rem;opacity:.6}footer .version-tag{vertical-align:middle;font-size:.8rem}@media (max-width: 900px){.dashboard{grid-template-columns:1fr}.system-card,.storage-card,.processes-card{grid-column:1 / -1}.metrics-grid{grid-template-columns:repeat(2,1fr)}.nodes-grid{grid-template-columns:1fr}}@media (max-width: 500px){.metrics-grid{grid-template-columns:1fr}}