*{box-sizing:border-box}*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none}:root{--primary-color: #86efac;--primary-hover: #6ee7b7;--secondary-color: #a7f3d0;--warning-color: #fde047;--danger-color: #f87171;--success-color: #86efac;--bg-color: #ffffff;--surface-color: #ffffff;--surface-hover: #ffffff;--text-main: #0f172a;--text-secondary: #64748b;--text-light: #94a3b8;--border-color: #e2e8f0;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: 1rem;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--text-main);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-color)}h1,h2,h3,h4,h5,h6{color:var(--text-main);font-weight:600;line-height:1.2}button{font-family:inherit}.server-card{background:var(--surface-color);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);transition:all .3s ease;border:1px solid var(--border-color);display:flex;flex-direction:column;height:100%}.server-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--primary-color)}.server-card.online{border-top:4px solid var(--success-color)}.server-card.offline{border-top:4px solid var(--text-light);opacity:.9}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem;cursor:grab;-webkit-user-select:none;user-select:none}.card-header:active{cursor:grabbing}.server-info{display:flex;align-items:center;gap:.75rem}.status-indicator{width:10px;height:10px;border-radius:50%;position:relative}.status-online{background:var(--success-color);box-shadow:0 0 0 4px #86efac33}.status-online:after{content:"";position:absolute;inset:-4px;border-radius:50%;animation:pulse 2s infinite;border:1px solid var(--success-color)}@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:0}}.status-offline{background:var(--text-light)}.server-name-group{display:flex;flex-direction:column;gap:.25rem}.server-name{margin:0;font-size:1.125rem;font-weight:600;color:var(--text-main)}.server-hostname{font-size:.75rem;color:var(--text-light);font-weight:400}.btn-remove{background:transparent;border:none;font-size:1.5rem;color:var(--text-light);cursor:pointer;padding:0;width:24px;height:24px;line-height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-remove:hover{background:var(--danger-color);color:#fff}.card-main-metrics{flex:1;display:flex;flex-direction:column;gap:1rem}.metrics-grid-main{display:flex;justify-content:space-around;align-items:center;padding:.5rem 0}.circular-progress-small{display:flex;align-items:center;justify-content:center}.circular-progress-small .progress-ring-bg{fill:none;stroke:#e2e8f0;stroke-width:6}.circular-progress-small .progress-ring-circle{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .5s ease;transform:rotate(-90deg);transform-origin:center}.circular-progress-small .progress-value-small{font-size:14px;font-weight:600;fill:var(--text-main)}.circular-progress-small .progress-label-small{font-size:10px;fill:var(--text-secondary)}.card-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem;background:var(--bg-color);border-radius:var(--radius-md)}.info-section{display:flex;flex-direction:column;gap:.5rem}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;writing-mode:horizontal-tb;text-orientation:mixed}.info-label{color:var(--text-light);font-weight:500;writing-mode:horizontal-tb;text-orientation:mixed;white-space:nowrap}.info-value{color:var(--text-main);font-weight:600;font-family:monospace;font-size:.7rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.card-performance-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem;background:var(--bg-color);border-radius:var(--radius-md)}.performance-section{display:flex;flex-direction:column;gap:.5rem}.performance-header{margin-bottom:.25rem}.performance-label{font-size:.75rem;font-weight:600;color:var(--text-secondary)}.performance-row{display:flex;flex-direction:column;gap:.4rem}.performance-item{display:flex;justify-content:space-between;align-items:center;font-size:.7rem}.performance-item-label{color:var(--text-light);font-weight:500}.performance-item-value{color:var(--primary-color);font-weight:600;font-family:monospace;text-align:right}.card-footer-info{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--bg-color);border-radius:var(--radius-md);margin-top:.5rem}.footer-row{display:flex;align-items:center;gap:.5rem;font-size:.75rem}.footer-label{color:var(--text-light);font-weight:500}.footer-value{color:var(--text-main);font-weight:600;font-family:monospace}.metrics-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.metric-item{width:100%}.metric-header{display:flex;justify-content:space-between;margin-bottom:.25rem;font-size:.875rem}.metric-label{color:var(--text-secondary);font-weight:500}.metric-value{font-weight:600;color:var(--text-main)}.progress-bar-bg{width:100%;height:8px;background:var(--bg-color);border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}.uptime-info{display:flex;justify-content:space-between;font-size:.875rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.uptime-label{color:var(--text-light)}.uptime-value{color:var(--text-secondary);font-family:monospace}.offline-state{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-color);border-radius:var(--radius-md);margin-bottom:1.5rem;color:var(--text-light)}.card-footer{margin-top:auto}.btn-detail{width:100%;background:var(--surface-hover);border:1px solid var(--border-color);padding:.75rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .2s}.btn-detail:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.circular-progress{position:relative;display:inline-block}.circular-progress svg{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#e2e8f0;transition:stroke .3s ease}.progress-ring-circle{fill:none;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.progress-value{font-weight:700;fill:var(--text-main);transform:rotate(90deg);transform-origin:center}.progress-label{fill:var(--text-secondary);font-weight:500;transform:rotate(90deg);transform-origin:center}.progress-sublabel{fill:var(--text-light);font-weight:400;transform:rotate(90deg);transform-origin:center}.modal-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .3s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--surface-color);border-radius:24px;width:100%;max-width:1200px;max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);animation:slideUp .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid var(--border-color);position:sticky;top:0;background:var(--surface-color);z-index:10}.modal-header h2{margin:0;font-size:20px;font-weight:700;color:var(--text-main);letter-spacing:-.2px}.btn-close{background:var(--surface-hover);border:1px solid var(--border-color);font-size:20px;color:var(--text-secondary);cursor:pointer;padding:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.btn-close:hover{background:var(--bg-color);border-color:var(--border-color);color:var(--text-main)}.modal-body{padding:24px;overflow-y:auto;flex:1}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:#ffffff08}.modal-body::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.modal-body::-webkit-scrollbar-thumb:hover{background:#ffffff40}.detail-section{margin-bottom:14px;background:var(--surface-color);border-radius:12px;padding:14px;border:1px solid var(--border-color);transition:all .3s ease}.detail-section:hover{background:var(--surface-hover);border-color:var(--border-color)}.detail-section:last-child{margin-bottom:0}.detail-section h3{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--text-main);display:flex;align-items:center;gap:8px}.detail-section h3:before{content:"";width:4px;height:20px;background:linear-gradient(135deg,#86efac,#a7f3d0);border-radius:2px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.cpu-section-content .detail-grid,.memory-section-content .detail-grid{grid-template-columns:repeat(2,1fr);width:100%}.detail-item{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--surface-hover);border-radius:10px;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1)}.detail-item:hover{background:var(--bg-color);border-color:var(--border-color)}.item-label{font-size:12px;color:var(--text-secondary);font-weight:600;letter-spacing:.5px}.item-value{font-size:15px;color:var(--text-main);font-weight:700;font-family:SF Mono,Consolas,Monaco,monospace;letter-spacing:-.2px}.item-value.highlight{background:linear-gradient(135deg,#86efac,#a7f3d0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:20px}.system-info-container{display:flex;flex-direction:column;gap:14px}.system-info-group{display:flex;flex-direction:column;gap:8px}.info-group-title{margin:0;font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;padding-bottom:6px;border-bottom:1px solid var(--border-color)}.system-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.system-info-item{display:flex;align-items:flex-start;padding:10px 12px;background:#fff;border-radius:8px;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.system-info-item:before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,#86efac,#a7f3d0);opacity:0;transition:opacity .3s ease}.system-info-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000014;border-color:#86efac4d;background:#fff}.system-info-item:hover:before{opacity:1}.system-info-item-full{grid-column:1 / -1}.system-info-item-highlight{background:#fff;border-color:#86efac33}.system-info-item-highlight:hover{background:#fff;border-color:#86efac66}.system-info-item-temperature{background:linear-gradient(135deg,#f871710d,#fde0470d);border-color:#f8717133}.system-info-item-temperature:hover{background:linear-gradient(135deg,#f871711a,#fde0471a);border-color:#f8717166}.system-info-content{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;width:100%}.system-info-label{font-size:10px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.system-info-value{font-size:13px;color:var(--text-main);font-weight:700;word-break:break-word;line-height:1.3}.system-info-value.highlight{background:linear-gradient(135deg,#86efac,#a7f3d0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:16px}.system-info-value-long{font-size:12px;font-family:SF Mono,Consolas,Monaco,monospace;font-weight:500;line-height:1.5;color:var(--text-secondary)}.system-info-sub{font-size:11px;color:var(--text-secondary);font-weight:500}.temperature-value{color:#f87171;font-size:16px;font-weight:700}@media(max-width:768px){.system-info-grid{grid-template-columns:1fr}.system-info-item-full{grid-column:1}}.gpu-item{margin-bottom:1.5rem;padding:1.5rem;background:var(--surface-hover);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.gpu-item:last-child{margin-bottom:0}.gpu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.gpu-header strong{color:var(--text-main);font-size:1rem}.gpu-status{padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.gpu-status.ok{background:#86efac1a;color:var(--success-color)}.gpu-status.error{background:#f871711a;color:var(--danger-color)}.gpu-bar-container{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.gpu-bar-label{font-size:.875rem;color:var(--text-secondary);font-weight:500;min-width:60px}.gpu-bar-bg{flex:1;height:8px;background:var(--bg-color);border-radius:4px;overflow:hidden}.gpu-bar{height:100%;background:linear-gradient(90deg,#a7f3d0,#d1fae5);border-radius:4px;transition:width .5s ease}.gpu-bar-value{font-size:.875rem;font-weight:600;color:var(--text-main);min-width:50px;text-align:right}.per-core-section{margin-top:1.5rem;padding:1.5rem;background:var(--surface-hover);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.per-core-section h4{margin:0 0 1rem;font-size:1rem;color:var(--text-main);font-weight:600}.core-grid-circular{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(160px,17%),1fr));gap:1.5rem;justify-items:center}.core-item-circular{display:flex;flex-direction:column;align-items:center;gap:.5rem}.cpu-section-content,.memory-section-content{display:flex;gap:1rem;align-items:center;background:var(--surface-hover);padding:1rem;border-radius:var(--radius-lg);border:1px solid var(--border-color)}.cpu-circular-group{display:flex;gap:1.5rem;flex-shrink:0}.cpu-circular,.cpu-load-circular,.memory-circular{flex-shrink:0}.storage-grid-circular{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}.storage-item-circular{display:flex;flex-direction:column;align-items:center;background:var(--surface-hover);padding:1rem;border-radius:var(--radius-md);border:1px solid var(--border-color)}.storage-details-mini{margin-top:.5rem;text-align:center;font-size:.75rem;color:var(--text-secondary)}@media(max-width:768px){.modal-content{max-width:100%;max-height:100vh;border-radius:0}.detail-grid{grid-template-columns:1fr}.cpu-section-content,.memory-section-content{flex-direction:column;text-align:center}.cpu-circular-group{flex-direction:column;align-items:center}.gpu-bar-container{flex-wrap:wrap;gap:.5rem}.gpu-bar-bg{min-width:100%;order:3}}.containers-section{margin-top:1rem;padding:1rem;background:#f8f9fa;border-radius:8px}.containers-section h4{margin:0 0 1rem;font-size:15px;color:#2c3e50;font-weight:600}.containers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:12px}.docker-images-section{margin-top:1rem;padding:1rem;background:#f8f9fa;border-radius:8px}.docker-images-section h4{margin:0 0 1rem;font-size:15px;color:#2c3e50;font-weight:600}.docker-containers-section{margin-top:16px;padding:16px;background:var(--surface-hover);border-radius:12px;border:1px solid var(--border-color)}.docker-containers-section h4{margin:0 0 12px;font-size:14px;color:var(--text-main);font-weight:600}.docker-names-list{display:flex;flex-wrap:wrap;gap:8px}.docker-name-tag{display:inline-block;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;font-family:SF Mono,Consolas,Monaco,monospace;transition:all .3s ease}.docker-name-tag.running{background:linear-gradient(135deg,#86efac1a,#a7f3d01a);color:#059669;border:1px solid rgba(134,239,172,.3)}.docker-name-tag.stopped{background:linear-gradient(135deg,#94a3b81a,#cbd5e11a);color:#64748b;border:1px solid rgba(148,163,184,.3)}.docker-name-tag.image{background:linear-gradient(135deg,#86efac14,#a7f3d014);color:var(--text-main);border:1px solid rgba(134,239,172,.2)}.docker-name-tag:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.logs-container{background:#0a0c10;color:#fffc;border-radius:12px;padding:20px;font-family:SF Mono,Consolas,Monaco,monospace;font-size:13px;max-height:400px;overflow-y:auto;border:1px solid rgba(255,255,255,.1);line-height:1.7}.logs-container::-webkit-scrollbar{width:6px}.logs-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.log-line{padding:4px 0;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid rgba(255,255,255,.03);transition:all .2s ease}.log-line:hover{background:#ffffff0d;color:#fff}.log-line:last-child{border-bottom:none}.process-list{display:flex;flex-direction:column;gap:8px}.process-item{display:flex;gap:12px;padding:12px 14px;background:#fff;border-radius:12px;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.process-item:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#86efac,#a7f3d0,#d1fae5);opacity:0;transition:opacity .3s ease}.process-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000014;border-color:#86efac4d;background:#fff}.process-item:hover:before{opacity:1}.process-rank{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;background:linear-gradient(135deg,#86efac,#a7f3d0);color:#fff;font-weight:700;font-size:14px;border-radius:8px;box-shadow:0 2px 8px #86efac4d;flex-shrink:0}.process-item:nth-child(1) .process-rank{background:linear-gradient(135deg,#fde047,#facc15);box-shadow:0 4px 12px #fde0474d}.process-item:nth-child(2) .process-rank{background:linear-gradient(135deg,#a7f3d0,#86efac);box-shadow:0 4px 12px #a7f3d04d}.process-item:nth-child(3) .process-rank{background:linear-gradient(135deg,#d1fae5,#a7f3d0);box-shadow:0 4px 12px #d1fae54d}.process-content{flex:1;display:flex;flex-direction:column;gap:10px}.process-header{display:flex;align-items:center;justify-content:space-between}.process-name-group{display:flex;flex-direction:column;gap:3px}.process-name{font-size:14px;font-weight:700;color:var(--text-main);letter-spacing:-.3px}.process-pid{font-size:11px;color:var(--text-secondary);font-weight:500;font-family:SF Mono,Consolas,Monaco,monospace;background:var(--surface-hover);padding:3px 8px;border-radius:5px;display:inline-block;width:fit-content}.process-metrics{display:flex;flex-direction:column;gap:8px}.process-metric-item{display:flex;flex-direction:column;gap:4px}.metric-header{display:flex;justify-content:space-between;align-items:center}.metric-label{font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:12px;font-weight:700;color:var(--text-main);font-family:SF Mono,Consolas,Monaco,monospace}.metric-bar-container{width:100%;height:6px;background:var(--surface-hover);border-radius:4px;overflow:hidden;position:relative}.metric-bar{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.metric-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.cpu-bar{background:linear-gradient(90deg,#86efac,#a7f3d0,#d1fae5);box-shadow:0 0 8px #86efac66}.memory-bar{background:linear-gradient(90deg,#6ee7b7,#86efac,#a7f3d0);box-shadow:0 0 8px #6ee7b766}.process-command{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--surface-hover);border-radius:6px;border:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);font-family:SF Mono,Consolas,Monaco,monospace;overflow:hidden;position:relative}.command-icon{font-size:12px;flex-shrink:0;opacity:.7}.command-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-main)}.network-list{display:flex;flex-direction:column;gap:10px}.network-item{padding:12px 14px;background:#fff;border-radius:10px;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.network-item:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#86efac,#a7f3d0,#d1fae5);opacity:0;transition:opacity .3s ease}.network-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000014;border-color:#86efac4d;background:#fff}.network-item:hover:before{opacity:1}.network-header{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.network-name-group{display:flex;align-items:center;gap:12px}.network-icon{font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#86efac,#a7f3d0);border-radius:8px;flex-shrink:0}.network-name-info{display:flex;flex-direction:column;gap:4px;flex:1}.network-name{font-size:15px;font-weight:700;color:var(--text-main);letter-spacing:-.3px}.network-ip{font-size:12px;font-weight:500;font-family:SF Mono,Consolas,Monaco,monospace;padding:4px 10px;border-radius:6px;display:inline-block;width:fit-content;transition:all .3s ease}.network-ip.has-ip{background:linear-gradient(135deg,#86efac1a,#a7f3d01a);color:#86efac;border:1px solid rgba(134,239,172,.2)}.network-ip.no-ip{background:var(--surface-hover);color:var(--text-secondary);border:1px solid var(--border-color)}.network-details{display:flex;flex-direction:column;gap:10px}.network-detail-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.network-detail-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--surface-hover);border-radius:8px;border:1px solid var(--border-color)}.network-detail-label{font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.network-detail-value{font-size:13px;font-weight:700;color:var(--text-main);font-family:SF Mono,Consolas,Monaco,monospace}.network-traffic{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.traffic-item{padding:10px 12px;background:var(--surface-hover);border-radius:8px;border:1px solid var(--border-color);transition:all .3s ease}.traffic-item:hover{background:var(--bg-color);border-color:var(--border-color)}.traffic-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.traffic-label{font-size:11px;color:var(--text-secondary);font-weight:600}.traffic-value{font-size:13px;font-weight:700;color:var(--text-main);font-family:SF Mono,Consolas,Monaco,monospace}@media(max-width:768px){.containers-grid{grid-template-columns:1fr}.process-item{flex-direction:column;gap:10px}.process-rank{align-self:flex-start}.process-metrics{gap:8px}.network-detail-row,.network-traffic{grid-template-columns:1fr}}.app{width:100%;max-width:100%;margin:0 auto;padding:1rem;min-height:100vh}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.5rem 1rem;background:var(--surface-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.header-actions{display:flex;align-items:center;gap:.5rem}.app-header h1{margin:0;font-size:1.5rem;color:var(--text-main);display:flex;align-items:center;gap:.75rem;font-weight:600;transform:translateY(-3px)}.app-logo{width:36px;height:36px;border-radius:6px;display:inline-block}.btn-icon{background:var(--surface-color);color:var(--text-main);border:1px solid var(--border-color);padding:.5rem;width:32px;height:32px;border-radius:var(--radius-md);font-size:1rem;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;line-height:1}.btn-icon:hover{background:var(--bg-color);border-color:var(--primary-color);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-add{background:var(--primary-color);color:#fff;border:none;padding:.5rem;width:32px;height:32px;border-radius:var(--radius-md);font-size:1.25rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;line-height:1}.btn-add:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.add-form{background:var(--surface-color);padding:1.5rem;border-radius:var(--radius-md);margin-bottom:1rem;box-shadow:var(--shadow-sm);display:flex;gap:1rem;flex-wrap:wrap;border:1px solid var(--border-color);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.add-form input{flex:1;min-width:250px;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.875rem;transition:all .2s;background:var(--bg-color);color:var(--text-main)}.add-form input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #86efac1a;background:var(--surface-color)}.btn-submit{background:var(--primary-color);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-submit:hover{background:var(--primary-hover)}.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.empty-state{grid-column:1 / -1;text-align:center;padding:4rem 2rem;background:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px dashed var(--border-color)}.empty-state p{margin:.5rem 0;font-size:1.125rem;color:var(--text-secondary)}.empty-state .hint{color:var(--text-light);font-size:.875rem}@media(max-width:768px){.app{padding:1rem}.app-header{flex-direction:column;gap:1rem;align-items:stretch;text-align:center;padding:1rem}.app-header h1,.header-actions{justify-content:center}.server-grid{grid-template-columns:1fr}.add-form{flex-direction:column;padding:1.5rem}.add-form input{min-width:100%}}