*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0f0f23;color:#e0e0e0}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{background:#1a1a2e;padding:40px;border-radius:16px;width:90%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-box h1{text-align:center;margin-bottom:25px;color:#fff}

/* Layout */
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:250px;background:#1a1a2e;padding:20px 0;display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto}
.sidebar-header{padding:20px;border-bottom:1px solid #2a2a4a;text-align:center}
.sidebar-header h2{color:#fff;font-size:18px}
.sidebar-header small{color:#888}
.sidebar-nav{list-style:none;padding:15px 0;flex:1}
.sidebar-nav li a{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#aaa;text-decoration:none;transition:all .2s}
.sidebar-nav li a:hover,.sidebar-nav li a.active{color:#fff;background:#2a2a4a;border-left:3px solid #e94560}
.sidebar-nav li a i{width:20px;text-align:center}
.sidebar-footer{padding:15px 20px;border-top:1px solid #2a2a4a;display:flex;flex-direction:column;gap:8px}
.sidebar-footer a{color:#888;text-decoration:none;font-size:14px;display:flex;align-items:center;gap:8px}
.sidebar-footer a:hover{color:#fff}

.admin-main{flex:1;margin-left:250px;min-height:100vh}
.admin-header{background:#1a1a2e;padding:20px 30px;border-bottom:1px solid #2a2a4a}
.admin-header h1{font-size:24px;color:#fff}
.admin-content{padding:30px}

/* Forms */
.admin-form{max-width:800px}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:14px;color:#ccc}
.form-group input[type="text"],.form-group input[type="password"],.form-group input[type="email"],
.form-group input[type="tel"],.form-group input[type="url"],.form-group input[type="number"],
.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:1px solid #2a2a4a;border-radius:8px;background:#16213e;color:#fff;font-size:14px}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#e94560}
.form-group textarea{resize:vertical}
.form-group input[type="color"]{width:60px;height:40px;padding:2px;border-radius:8px;background:#16213e;border:1px solid #2a2a4a;cursor:pointer}
.form-group input[type="file"]{color:#ccc}
.form-row{display:flex;gap:15px}
.form-row .form-group{flex:1}
h3{color:#e94560;margin:25px 0 15px;padding-top:10px;border-top:1px solid #2a2a4a}
h3:first-child{border-top:none;margin-top:0;padding-top:0}

/* Buttons */
.btn{display:inline-block;padding:10px 24px;border:none;border-radius:8px;font-size:15px;cursor:pointer;font-weight:600;text-decoration:none;color:#fff}
.btn-primary{background:#e94560}
.btn-primary:hover{background:#d63550}
.btn-sm{padding:6px 14px;font-size:13px;background:#2a2a4a;border-radius:6px;border:none;color:#ccc;cursor:pointer}
.btn-add{background:#1a3a5c;color:#6bb8ff;border:1px dashed #2a4a6a;padding:10px;border-radius:8px;width:100%;cursor:pointer;font-size:14px;margin-top:5px}

/* Alerts */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px}
.alert-success{background:#1a3a1a;color:#6bff8b;border:1px solid #2a5a2a}
.alert-error{background:#3a1a1a;color:#ff6b6b;border:1px solid #5a2a2a}

/* Dashboard cards */
.dash-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.dash-card{background:#1a1a2e;padding:25px;border-radius:12px;text-decoration:none;color:#e0e0e0;transition:transform .2s,box-shadow .2s;border:1px solid #2a2a4a}
.dash-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.3);border-color:#e94560}
.dash-card i{font-size:28px;color:#e94560;margin-bottom:12px}
.dash-card h3{color:#fff;margin-bottom:5px;font-size:16px}
.dash-card p{color:#888;font-size:13px}

/* Dynamic rows */
.dynamic-row{background:#16213e;padding:15px;border-radius:8px;margin-bottom:10px;position:relative}
.remove-btn{position:absolute;top:10px;right:10px;background:#5c1a1a;color:#ff6b6b;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:16px;line-height:28px;text-align:center}

.info-box{background:#1a1a2e;padding:15px 20px;border-radius:8px;border:1px solid #2a2a4a}

/* Deployment table */
.deploy-table{width:100%;border-collapse:collapse}
.deploy-table th{text-align:left;padding:12px 15px;background:#1a1a2e;color:#ccc;font-size:13px;text-transform:uppercase;border-bottom:2px solid #2a2a4a}
.deploy-table td{padding:12px 15px;border-bottom:1px solid #1a1a2e}
.deploy-table tr:hover td{background:#16213e}
.deploy-table a{color:#6bb8ff;text-decoration:none}
.deploy-table a:hover{text-decoration:underline}

/* Status badges */
.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase}
.status-active{background:#1a3a1a;color:#6bff8b;border:1px solid #2a5a2a}
.status-failed{background:#3a1a1a;color:#ff6b6b;border:1px solid #5a2a2a}
.status-deploying{background:#3a3a1a;color:#ffd700;border:1px solid #5a5a2a}
.status-pending{background:#1a2a3a;color:#6bb8ff;border:1px solid #2a4a6a}
.status-removed{background:#2a2a2a;color:#888;border:1px solid #3a3a3a}

/* Responsive */
@media (max-width:768px){
    .admin-sidebar{position:relative;width:100%;height:auto}
    .admin-main{margin-left:0}
    .admin-layout{flex-direction:column}
    .form-row{flex-direction:column;gap:0}
}