/* ===== General ===== */
:root { --primary: #6366F1; --primary-dark: #4F46E5; }
body { background: #f0f2f5; font-family: 'Segoe UI', Tahoma, sans-serif; }

/* ===== Login Page ===== */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.login-container { width:100%; max-width:420px; padding:20px; }
.login-card { background:white; border-radius:16px; padding:40px 30px; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
.login-header { text-align:center; margin-bottom:30px; }
.login-icon { width:70px;height:70px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;color:white;font-size:28px; }
.login-header h2 { color:#1f2937; margin-bottom:5px; }

/* ===== Navbar ===== */
.bg-primary-custom { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }

/* ===== Color Presets ===== */
.color-btn { width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all 0.2s; }
.color-btn:hover,.color-btn.active { border-color:#333; transform:scale(1.15); }

/* ===== Phone Frame ===== */
.phone-frame { width:280px; height:580px; border:3px solid #1a1a1a; border-radius:32px; overflow:hidden; background:#F8FAFC; position:relative; box-shadow:0 10px 40px rgba(0,0,0,0.2); display:flex; flex-direction:column; }
.phone-statusbar { height:28px; background:#1a1a1a; color:white; font-size:10px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; flex-shrink:0; }
.phone-screen { flex:1; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; background:#F8FAFC; }

/* ===== Preview Shared ===== */
.p-header { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; padding:16px 14px 28px; }
.p-input { background:#F1F5F9; border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:11px; color:#94A3B8; }
.p-btn { text-align:center; color:white; font-size:12px; font-weight:600; padding:12px; border-radius:10px; margin-top:6px; }
.p-stat { flex:1; background:#F8FAFC; border-radius:8px; padding:8px 4px; text-align:center; }
.p-stat-val { font-size:13px; font-weight:700; color:#0F172A; }
.p-stat-lbl { font-size:8px; color:#94A3B8; margin-top:2px; }
.p-action { display:flex; flex-direction:column; align-items:center; gap:4px; background:white; border-radius:10px; padding:10px 4px; box-shadow:0 1px 4px rgba(0,0,0,0.04); cursor:default; }
.p-action i { font-size:14px; }
.p-action span { font-size:9px; color:#475569; }
.p-info-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #F1F5F9; font-size:11px; color:#475569; }
.p-info-row span:last-child { color:#0F172A; font-weight:500; }
.p-bottomnav { display:flex; background:white; border-top:1px solid #E2E8F0; padding:6px 0; flex-shrink:0; margin-top:auto; }
.p-nav-item { flex:1; text-align:center; font-size:8px; color:#94A3B8; cursor:default; }
.p-nav-item i { font-size:14px; display:block; margin-bottom:2px; }
.p-nav-item.active { font-weight:600; }

/* ===== Cards ===== */
.card { border:none; border-radius:12px; }
.card-header { border-bottom:1px solid #f0f0f0; border-radius:12px 12px 0 0 !important; }
.progress { border-radius:10px; background:#e5e7eb; }
.progress-bar { background:linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.btn-primary { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); border:none; }
.btn-primary:hover { background:linear-gradient(135deg, var(--primary-dark), var(--primary)); transform:translateY(-1px); box-shadow:0 4px 12px rgba(99,102,241,0.4); }

@media (max-width:768px) { .phone-frame { width:240px; height:500px; } .login-card { padding:30px 20px; } }