.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2rem}.filter-btn{padding:10px 20px;background:var(--surface);border:1px solid var(--border);font-family:var(--font-code);font-size:.85rem;font-weight:500;color:var(--text-muted);cursor:none;transition:all .2s}.filter-btn:hover{border-color:var(--border-active);color:var(--text-main)}.filter-btn.active{background:var(--text-main);color:var(--bg);border-color:var(--text-main)}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}.service-card{background:var(--surface);border:1px solid var(--border);padding:1.5rem;transition:border-color .2s,transform .2s}.service-card:hover{border-color:var(--border-active);transform:translateY(-2px)}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem}.service-info h3{font-size:1.1rem;font-weight:600;color:var(--text-main);margin-bottom:.5rem}.service-type{display:inline-block;padding:4px 12px;background:var(--text-main);color:var(--bg);font-family:var(--font-code);font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase}.service-status{padding:6px 14px;font-family:var(--font-code);font-size:.75rem;font-weight:500;display:flex;align-items:center;gap:8px}.status-dot{width:6px;height:6px;border-radius:50%}.status-active .status-dot,.status-running .status-dot{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-active,.status-running{color:var(--accent-green)}.status-stopped .status-dot{background:var(--accent-red)}.status-stopped{color:var(--accent-red)}.status-pending .status-dot{background:var(--accent-yellow)}.status-pending{color:var(--accent-yellow)}.service-specs{display:flex;flex-direction:column;gap:10px;margin:1rem 0;padding:1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.spec-item{display:flex;align-items:center;gap:10px;font-family:var(--font-code);font-size:.85rem;color:var(--text-muted)}.spec-icon{color:var(--text-muted);font-size:1rem}.service-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}.service-price{font-size:1.5rem;font-family:var(--font-code);font-weight:700;color:var(--text-main)}.service-price span{font-size:.85rem;color:var(--text-muted);font-weight:400}.btn-manage{padding:10px 20px;background:var(--text-main);color:var(--bg);border:1px solid var(--text-main);font-family:var(--font-code);font-size:.8rem;font-weight:700;text-decoration:none;display:inline-block;transition:all .2s}.btn-manage:hover{background:#ccc;border-color:#ccc}.empty-state{text-align:center;padding:80px 20px}.empty-icon{font-family:var(--font-code);font-size:4rem;color:var(--text-muted);opacity:.3;margin-bottom:1.5rem}.empty-state h3{font-size:1.5rem;font-weight:600;color:var(--text-main);margin-bottom:.75rem}.empty-state p{font-size:1rem;color:var(--text-muted);margin-bottom:1.5rem}.btn-action{display:inline-block;padding:12px 24px;background:var(--text-main);color:var(--bg);font-family:var(--font-code);font-size:.85rem;font-weight:700;text-decoration:none;transition:all .2s}.btn-action:hover{background:#ccc}.add-service-card{background:var(--bg);border:2px dashed var(--border);padding:1.5rem;transition:border-color .2s;display:flex;align-items:center;justify-content:center;min-height:200px}.add-service-card:hover{border-color:var(--border-active)}.add-service-content{text-align:center;color:var(--text-muted)}.add-service-icon{font-size:2.5rem;font-weight:300;color:var(--text-muted);margin-bottom:1rem;font-family:var(--font-ui)}.add-service-content h3{font-size:1.1rem;font-weight:600;color:var(--text-main);margin-bottom:.5rem;font-family:var(--font-ui)}.add-service-content p{font-size:.9rem;color:var(--text-muted);margin-bottom:1.5rem}.btn-add-service{display:inline-block;padding:10px 20px;background:transparent;color:var(--text-main);border:1px solid var(--border);font-family:var(--font-code);font-size:.8rem;font-weight:700;text-decoration:none;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}.btn-add-service:hover{background:var(--text-main);color:var(--bg);border-color:var(--text-main)}@media(max-width:768px){.services-grid{grid-template-columns:1fr}}