*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#0a1628,#1a2d4a);min-height:100vh;color:#fff}.container{max-width:1400px;margin:0 auto;padding:24px}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;color:#64b5f6}.loading-spinner{width:40px;height:40px;border:3px solid rgba(100,180,255,.2);border-top-color:#4a9eff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid rgba(100,180,255,.2)}.header h1{font-size:28px;font-weight:600;display:flex;align-items:center;gap:12px}.header h1 .logo{width:36px;height:36px;background:linear-gradient(135deg,#4a9eff,#64b5f6);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}.header-right{display:flex;align-items:center;gap:16px}.status-badge{display:flex;align-items:center;gap:8px;background:#64b4ff1a;padding:8px 16px;border-radius:20px;font-size:14px}.status-badge.operational .status-dot{background:#4ade80}.status-badge.degraded .status-dot{background:#fbbf24}.status-badge.critical .status-dot{background:#f87171}.status-dot{width:8px;height:8px;background:#4ade80;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.refresh-btn,.logout-btn{background:linear-gradient(135deg,#4a9eff,#2d7dd2);border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:transform .2s,box-shadow .2s}.refresh-btn:hover,.logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px #4a9eff66}.logout-btn{background:linear-gradient(135deg,#f87171,#dc2626)}.logout-btn:hover{box-shadow:0 4px 20px #f8717166}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}.stat-card{background:#1a2d4a99;border:1px solid rgba(100,180,255,.15);border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-card .label{font-size:13px;color:#94a3b8;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.stat-card .value{font-size:32px;font-weight:700;color:#64b5f6}.stat-card .subtext{font-size:12px;color:#64748b;margin-top:4px}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}.section-title.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none;padding:12px 16px;margin:0;background:#1a2d4a66;border:1px solid rgba(100,180,255,.1);border-radius:8px;transition:background .2s,border-color .2s}.section-title.collapsible:hover{background:#1a2d4a99;border-color:#64b4ff40}.section-arrow{font-size:14px;color:#64b5f6;transition:transform .2s;display:inline-block}.section-arrow.open{transform:rotate(90deg)}.section-count{margin-left:auto;font-size:14px;color:#64748b;font-weight:400}.section-icon,.section-icon.healthy{color:#4ade80}.section-icon.unhealthy{color:#f87171}.section-icon.neutral{color:#64748b}.container-section{margin-bottom:20px}.container-section .containers-grid{margin-top:16px;margin-bottom:0}.no-containers{grid-column:1 / -1;text-align:center;padding:24px;color:#64748b;font-style:italic}.containers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.container-card{background:#1a2d4a99;border:1px solid rgba(100,180,255,.15);border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,transform .2s}.container-card:hover{border-color:#64b4ff66;transform:translateY(-2px)}.container-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.container-name{font-size:16px;font-weight:600}.container-status{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:12px}.container-status.running{background:#4ade8026;color:#4ade80}.container-status.stopped,.container-status.exited{background:#f8717126;color:#f87171}.container-status .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.container-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.metric{background:#0a162880;padding:12px;border-radius:8px}.metric .metric-label{font-size:11px;color:#64748b;margin-bottom:4px}.metric .metric-value{font-size:18px;font-weight:600;color:#e2e8f0}.progress-bar{height:4px;background:#64b4ff33;border-radius:2px;margin-top:8px;overflow:hidden}.progress-bar .fill{height:100%;background:linear-gradient(90deg,#4a9eff,#64b5f6);border-radius:2px;transition:width .3s ease}.container-actions{display:flex;gap:8px}.action-btn{flex:1;padding:8px;border:1px solid rgba(100,180,255,.3);background:transparent;color:#64b5f6;border-radius:6px;font-size:12px;cursor:pointer;transition:background .2s}.action-btn:hover{background:#64b4ff1a}.action-btn:disabled{opacity:.5;cursor:not-allowed}.log-section{display:grid;grid-template-columns:2fr 1fr;gap:20px}.log-panel{background:#1a2d4a99;border:1px solid rgba(100,180,255,.15);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}.log-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(100,180,255,.15)}.log-header h3{font-size:14px;font-weight:600}.log-filter{display:flex;gap:8px}.filter-btn{padding:4px 12px;border:none;background:#64b4ff1a;color:#94a3b8;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.filter-btn.active{background:#4a9eff;color:#fff}.filter-btn:hover:not(.active){background:#64b4ff33}.log-content{max-height:350px;overflow-y:auto}.log-entry{display:grid;grid-template-columns:90px 60px 1fr 50px 70px 60px;gap:12px;padding:12px 20px;font-size:13px;border-bottom:1px solid rgba(100,180,255,.08);align-items:center}.log-entry:hover{background:#64b4ff0d}.log-time{color:#64748b;font-family:SF Mono,Monaco,monospace;font-size:12px}.log-method{font-weight:600;font-size:11px;padding:2px 8px;border-radius:4px;text-align:center}.log-method.GET{background:#4ade8026;color:#4ade80}.log-method.POST{background:#4a9eff26;color:#4a9eff}.log-method.PUT{background:#fbbf2426;color:#fbbf24}.log-method.DELETE{background:#f8717126;color:#f87171}.log-path{font-family:SF Mono,Monaco,monospace;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-status{font-weight:600}.log-status.success{color:#4ade80}.log-status.error{color:#f87171}.log-status.redirect{color:#fbbf24}.log-duration{color:#94a3b8;text-align:right}.log-backend{color:#64b5f6;font-size:11px;text-align:center}.error-panel .log-content{max-height:350px}.error-count{color:#f87171;font-size:12px}.error-entry{padding:16px 20px;border-bottom:1px solid rgba(100,180,255,.08)}.error-entry:hover{background:#f871710d}.error-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.error-type{color:#f87171;font-weight:600;font-size:13px}.error-time{color:#64748b;font-size:12px}.error-message{font-family:SF Mono,Monaco,monospace;font-size:12px;color:#94a3b8;background:#0a162880;padding:10px;border-radius:6px;overflow-x:auto}.live-logs{margin-top:20px}.live-log-panel{background:#1a2d4a99;border:1px solid rgba(100,180,255,.15);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}.live-log-content{background:#0a1628cc;padding:16px 20px;font-family:SF Mono,Monaco,monospace;font-size:12px;line-height:1.6;max-height:200px;overflow-y:auto}.live-log-line{margin-bottom:4px}.live-log-line .timestamp{color:#64748b}.live-log-line.info .level{color:#4a9eff}.live-log-line.warn .level{color:#fbbf24}.live-log-line.error .level{color:#f87171}.live-log-line .message{color:#e2e8f0}.backend-select{background:#0a162880;border:1px solid rgba(100,180,255,.3);color:#e2e8f0;padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer}.backend-select option{background:#1a2d4a;color:#e2e8f0}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.login-box{background:#1a2d4a99;border:1px solid rgba(100,180,255,.15);border-radius:16px;padding:40px;width:100%;max-width:400px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-header{text-align:center;margin-bottom:32px}.login-header .logo{width:60px;height:60px;background:linear-gradient(135deg,#4a9eff,#64b5f6);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;margin:0 auto 16px}.login-header h1{font-size:24px;font-weight:600;margin-bottom:8px}.login-header p{color:#94a3b8;font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;color:#94a3b8}.form-group input{background:#0a162880;border:1px solid rgba(100,180,255,.3);border-radius:8px;padding:12px 16px;color:#e2e8f0;font-size:14px;transition:border-color .2s}.form-group input:focus{outline:none;border-color:#4a9eff}.form-group input::placeholder{color:#64748b}.login-btn{background:linear-gradient(135deg,#4a9eff,#2d7dd2);border:none;color:#fff;padding:14px 20px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:transform .2s,box-shadow .2s;margin-top:8px}.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #4a9eff66}.login-btn:disabled{opacity:.7;cursor:not-allowed}.login-error{background:#f8717126;border:1px solid rgba(248,113,113,.3);color:#f87171;padding:12px 16px;border-radius:8px;font-size:14px;text-align:center}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#64b4ff1a;border-radius:3px}::-webkit-scrollbar-thumb{background:#64b4ff4d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#64b4ff80}@media (max-width: 1200px){.containers-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px){.log-section{grid-template-columns:1fr}}@media (max-width: 600px){.containers-grid,.stats-grid{grid-template-columns:1fr}.header{flex-direction:column;gap:16px;align-items:flex-start}.log-entry{grid-template-columns:1fr;gap:4px}}