*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #5cb3ff;--primary-dark: #3a9ff5;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--info: #5cb3ff;--purple: #8b5cf6;--bg: #0f172a;--bg-card: #1e293b;--bg-input: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--border: #334155}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}.app-wrapper{min-height:100vh;position:relative}.bg-animation{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:0;pointer-events:none}.floating-shapes{position:relative;width:100%;height:100%}.shape{position:absolute;border-radius:50%;opacity:.1;animation:float 20s infinite ease-in-out}.shape-1{width:400px;height:400px;background:var(--primary);top:-100px;left:-100px;animation-delay:0s}.shape-2{width:300px;height:300px;background:var(--purple);top:50%;right:-50px;animation-delay:-5s}.shape-3{width:200px;height:200px;background:var(--success);bottom:10%;left:20%;animation-delay:-10s}.shape-4{width:350px;height:350px;background:var(--info);top:30%;left:50%;animation-delay:-15s}.shape-5{width:250px;height:250px;background:var(--warning);bottom:-50px;right:30%;animation-delay:-7s}.shape-6{width:180px;height:180px;background:var(--danger);top:10%;right:20%;animation-delay:-12s}@keyframes float{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(30px,-30px) rotate(5deg)}50%{transform:translate(-20px,20px) rotate(-5deg)}75%{transform:translate(20px,30px) rotate(3deg)}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}.login-card{background:var(--bg-card);border-radius:24px;padding:48px;width:100%;max-width:420px;box-shadow:0 25px 50px -12px #00000080;border:1px solid var(--border);animation:cardAppear .6s ease-out}@keyframes cardAppear{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-header{text-align:center;margin-bottom:36px}.logo-icon{width:80px;height:80px;background:transparent;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.logo-icon img{width:100%;height:100%;object-fit:contain}@keyframes pulse{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 15px #6366f100}}.login-header h1{font-size:28px;font-weight:700;margin-bottom:8px}.login-header p{color:var(--text-muted);font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:16px;width:20px;height:20px;color:var(--text-muted);transition:color .3s}.input-group input{width:100%;padding:16px 16px 16px 52px;background:var(--bg-input);border:2px solid transparent;border-radius:12px;color:var(--text);font-size:15px;transition:all .3s}.input-group input:focus{outline:none;border-color:var(--primary);background:var(--bg)}.input-group input:focus+.input-icon,.input-group:focus-within .input-icon{color:var(--primary)}.login-btn{width:100%;padding:16px;background:var(--primary);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:8px}.login-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #5cb3ff4d;background:var(--primary-dark)}.login-btn:active{transform:translateY(0)}.login-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{color:var(--danger);font-size:14px;text-align:center;padding:8px;background:#ef44441a;border-radius:8px}.success-msg{color:var(--success);font-size:14px;text-align:center;padding:8px;background:#10b9811a;border-radius:8px}.login-footer{margin-top:24px;text-align:center}.login-footer p{color:var(--text-muted);font-size:13px}.main-container{position:relative;z-index:1;min-height:100vh}.header{background:#1e293bcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600}.logo img{width:36px;height:36px;object-fit:contain}.header-right{display:flex;gap:8px}.icon-btn{width:40px;height:40px;background:var(--bg-input);border:none;border-radius:10px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{background:var(--primary);color:#fff}.logout-btn:hover{background:var(--primary)}.content{max-width:900px;margin:0 auto;padding:24px}.card{background:var(--bg-card);border-radius:16px;border:1px solid var(--border);margin-bottom:20px;overflow:hidden}.card-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.card-header h2{font-size:16px;font-weight:600}.badge{background:var(--primary);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}.animate-in{animation:slideUp .5s ease-out backwards}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}}.form-card form{padding:24px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;color:var(--text-muted)}.form-group input,.form-group select{width:100%;padding:12px 16px;background:var(--bg-input);border:2px solid transparent;border-radius:10px;color:var(--text);font-size:14px;transition:all .3s}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary)}.form-actions{display:flex;gap:12px}.btn{padding:12px 24px;border:none;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s}.btn svg{width:16px;height:16px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #5cb3ff4d;background:var(--primary-dark)}.btn-secondary{background:var(--bg-input);color:var(--text)}.btn-secondary:hover{background:var(--border)}.toggle-btn{background:var(--bg-input);border:none;padding:6px 14px;border-radius:6px;color:var(--text-muted);font-size:12px;cursor:pointer;transition:all .3s}.toggle-btn:hover{background:var(--primary);color:#fff}.api-content{padding:16px 24px}.api-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.api-item:last-child{border-bottom:none}.method{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase}.method.get{background:#10b98133;color:var(--success)}.method.post{background:#3b82f633;color:var(--info)}.method.put{background:#f59e0b33;color:var(--warning)}.method.delete{background:#ef444433;color:var(--danger)}.api-item code{font-family:Fira Code,monospace;font-size:13px;color:var(--text);flex:1}.api-item .desc{color:var(--text-muted);font-size:12px}.empty-state{padding:60px 24px;text-align:center}.empty-state svg{width:64px;height:64px;color:var(--text-muted);margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px;margin-bottom:8px}.empty-state span{color:var(--text-muted);font-size:14px}.service-list{padding:16px;display:flex;flex-direction:column;gap:12px}.service-item{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg);border-radius:12px;border:1px solid var(--border);transition:all .3s;position:relative;overflow:hidden}.service-item:hover{transform:translate(4px);border-color:var(--primary)}.service-status-indicator{position:absolute;left:0;top:0;bottom:0;width:4px;transition:all .3s}.service-item.healthy .service-status-indicator{background:var(--success)}.service-item.good .service-status-indicator{background:var(--info)}.service-item.fixing .service-status-indicator{background:var(--warning)}.service-item.stopped .service-status-indicator{background:var(--danger)}.service-item.searching .service-status-indicator{background:var(--purple)}.service-info{flex:1;padding-left:8px}.service-info h3{font-size:16px;font-weight:600;margin-bottom:10px}.tags{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.tag{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}.status-dot{width:6px;height:6px;border-radius:50%;animation:blink 2s infinite}.tag-healthy{background:#10b98126;color:var(--success)}.tag-healthy .status-dot{background:var(--success)}.tag-good{background:#3b82f626;color:var(--info)}.tag-good .status-dot{background:var(--info)}.tag-fixing{background:#f59e0b26;color:var(--warning)}.tag-fixing .status-dot{background:var(--warning)}.tag-stopped{background:#ef444426;color:var(--danger)}.tag-stopped .status-dot{background:var(--danger)}.tag-searching{background:#8b5cf626;color:var(--purple)}.tag-searching .status-dot{background:var(--purple)}.tag.severity{background:#ef444426;color:var(--danger)}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.time-info{display:flex;gap:16px;font-size:12px;color:var(--text-muted)}.service-actions{display:flex;gap:8px}.action-btn{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.action-btn svg{width:16px;height:16px}.action-btn.edit{background:#5cb3ff26;color:var(--primary)}.action-btn.edit:hover{background:var(--primary);color:#fff}.action-btn.delete{background:#5cb3ff26;color:var(--primary)}.action-btn.delete:hover{background:var(--primary);color:#fff}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:var(--bg-card);border-radius:20px;width:100%;max-width:420px;border:1px solid var(--border);animation:modalAppear .3s ease-out}@keyframes modalAppear{0%{opacity:0;transform:scale(.9) translateY(20px)}}.modal-header{padding:24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:18px}.close-btn{width:32px;height:32px;background:var(--bg-input);border:none;border-radius:8px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.close-btn svg{width:18px;height:18px}.close-btn:hover{background:var(--danger);color:#fff}.modal-body{padding:24px}.modal-body .form-group{margin-bottom:16px}.modal-actions{display:flex;gap:12px;margin-top:24px}.modal-actions .btn{flex:1;justify-content:center}.fade-slide-enter-active,.fade-slide-leave-active{transition:all .4s ease}.fade-slide-enter-from{opacity:0;transform:translateY(20px)}.fade-slide-leave-to{opacity:0;transform:translateY(-20px)}.slide-down-enter-active,.slide-down-leave-active{transition:all .3s ease}.slide-down-enter-from,.slide-down-leave-to{opacity:0;max-height:0}.slide-down-enter-to,.slide-down-leave-from{max-height:500px}.modal-enter-active,.modal-leave-active{transition:all .3s ease}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal,.modal-leave-to .modal{transform:scale(.9) translateY(20px)}.list-enter-active,.list-leave-active{transition:all .4s ease}.list-enter-from{opacity:0;transform:translate(-30px)}.list-leave-to{opacity:0;transform:translate(30px)}.list-move{transition:transform .4s ease}.shake-enter-active{animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@media (max-width: 640px){.login-card{padding:32px 24px}.form-row{grid-template-columns:1fr}.header{padding:12px 16px}.content{padding:16px}.time-info{flex-direction:column;gap:4px}}