#app{

display:flex;

height:100vh;

width:100%;

}

.sidebar{

width:270px;

background:var(--surface2);

border-right:1px solid var(--border);

display:flex;

flex-direction:column;

}

.main{

flex:1;

display:flex;

flex-direction:column;

overflow:hidden;

}

.topbar{

height:70px;

border-bottom:1px solid var(--border);

background:var(--surface2);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

}

.page{

flex:1;

overflow:auto;

padding:30px;

}

.logo{

height:70px;

display:flex;

align-items:center;

padding:0 25px;

gap:12px;

font-size:22px;

font-weight:700;

border-bottom:1px solid var(--border);

}

.logo i{

color:var(--primary);

}

.loader{

position:fixed;

inset:0;

background:#0b1220;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.3s;

}

.loader.hide{

opacity:0;

pointer-events:none;

}

.spinner{

width:60px;

height:60px;

border:5px solid #233246;

border-top:5px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

.sidebar nav{

display:flex;

flex-direction:column;

padding:20px;

gap:8px;

}

.nav-item{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

border-radius:12px;

color:#b8c4d4;

transition:.2s;

}

.nav-item:hover{

background:#1e293b;

color:#fff;

}

.nav-item.active{

background:var(--primary);

color:#fff;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:20px;

}

.card{

background:var(--surface2);

border:1px solid var(--border);

border-radius:16px;

padding:25px;

display:flex;

gap:20px;

align-items:center;

transition:.25s;

}

.card:hover{

transform:translateY(-5px);

}

.card-icon{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:14px;

background:#1d4ed8;

font-size:22px;

}

.card span{

color:var(--muted);

font-size:14px;

}

.card h2{

margin-top:6px;

font-size:26px;

}

.page-header{

margin-bottom:25px;

}

.page-header h1{

font-size:28px;

margin-bottom:8px;

}

.page-header p{

color:var(--muted);

}

.panel{

background:var(--surface2);

border:1px solid var(--border);

border-radius:16px;

padding:25px;

}

.settings-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}

.dropzone{

border:2px dashed var(--border);

border-radius:16px;

padding:60px;

text-align:center;

cursor:pointer;

transition:.2s;

}

.dropzone:hover{

border-color:var(--primary);

}

.dropzone i{

font-size:60px;

margin-bottom:20px;

color:var(--primary);

}

.deploy-actions{

display:flex;

gap:15px;

margin-top:25px;

}

.btn{

padding:12px 22px;

border:none;

border-radius:12px;

background:#243447;

color:white;

}

.btn.primary{

background:var(--primary);

}

.table{

width:100%;

border-collapse:collapse;

}

.table th,
.table td{

padding:15px;

border-bottom:1px solid var(--border);

text-align:left;

}

.logs{

font-family:monospace;

color:#7dd3fc;

min-height:300px;

}

.empty{

padding:50px;

text-align:center;

color:var(--muted);

}

#toast-container{

position:fixed;

top:20px;

right:20px;

display:flex;

flex-direction:column;

gap:12px;

z-index:99999;

}

.toast{

width:320px;

display:flex;

align-items:center;

gap:15px;

padding:15px 18px;

border-radius:14px;

background:#172033;

border:1px solid #2b3950;

transform:translateX(120%);

opacity:0;

transition:.25s;

box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.toast.show{

transform:translateX(0);

opacity:1;

}

.toast-icon{

font-size:22px;

}

.toast.success{

border-left:4px solid #22c55e;

}

.toast.success .toast-icon{

color:#22c55e;

}

.toast.error{

border-left:4px solid #ef4444;

}

.toast.error .toast-icon{

color:#ef4444;

}

.toast.warning{

border-left:4px solid #f59e0b;

}

.toast.warning .toast-icon{

color:#f59e0b;

}

.toast.info{

border-left:4px solid #3b82f6;

}

.toast.info .toast-icon{

color:#3b82f6;

}

.toast-message{

font-size:14px;

line-height:1.5;

}

.top-actions{

display:flex;

align-items:center;

gap:18px;

}

.icon-btn{

width:42px;

height:42px;

border:none;

border-radius:12px;

background:#2563eb;

color:#fff;

font-size:18px;

cursor:pointer;

transition:.2s;

}

.icon-btn:hover{

transform:scale(1.05);

}

.version{

font-size:14px;

color:var(--muted);

}

.topbar-left{

display:flex;

align-items:center;

gap:18px;

}

.avatar{

width:42px;

height:42px;

background:#2563eb;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

}

.icon-btn{

width:42px;

height:42px;

border:none;

border-radius:12px;

background:#1d4ed8;

color:white;

cursor:pointer;

transition:.2s;

}

.icon-btn:hover{

transform:scale(1.05);

background:#2563eb;

}

.deploy-grid{

display:grid;

grid-template-columns:1fr 350px;

gap:25px;

}

.dropzone{

border:2px dashed var(--border);

border-radius:18px;

padding:70px 20px;

text-align:center;

transition:.25s;

cursor:pointer;

}

.dropzone.drag{

border-color:var(--primary);

background:#1d4ed820;

}

.dropzone i{

font-size:60px;

margin-bottom:20px;

color:var(--primary);

}

.file-info{

margin-top:25px;

display:grid;

gap:12px;

}

.progress{

height:10px;

background:#263548;

border-radius:20px;

overflow:hidden;

margin:30px 0;

}

.progress-bar{

height:100%;

width:0;

background:#2563eb;

transition:.3s;

}

.deploy-buttons{

display:flex;

gap:15px;

}

.btn{

border:none;

padding:13px 24px;

border-radius:12px;

background:#263548;

color:white;

cursor:pointer;

}

.btn.primary{

background:#2563eb;

}