* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%); min-height: 100vh; padding: 15px; }
.container { max-width: 700px; margin: 0 auto; }

/* Header */
.header { text-align: center; color: white; padding: 30px 0 20px; }
.header .logo { font-size: 42px; margin-bottom: 6px; }
.header h1 { font-size: 28px; font-weight: 800; letter-spacing: 1px; }
.header p { font-size: 13px; opacity: 0.75; margin-top: 4px; }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.kpi-card { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 12px 8px; text-align: center; color: white; }
.kpi-card .num { font-size: 22px; font-weight: 800; }
.kpi-card .lbl { font-size: 10px; opacity: 0.8; margin-top: 2px; }

/* Module grid */
.modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.mod-card { background: white; border-radius: 14px; padding: 20px 16px; text-decoration: none; color: #333; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: all 0.2s; cursor: pointer; border: none; width: 100%; }
.mod-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.25); }
.mod-card .icon { font-size: 32px; }
.mod-card .name { font-size: 15px; font-weight: 700; }
.mod-card .desc { font-size: 11px; color: #888; }
.mod-card.destaque { background: linear-gradient(135deg, #1565c0, #1976d2); color: white; }
.mod-card.destaque .desc { color: rgba(255,255,255,0.75); }

/* Back to GT Smart */
.back-bar { text-align: center; margin-top: 10px; }
.back-bar a { color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; }
.back-bar a:hover { color: white; }

/* Badge de contagem */
.badge { display: inline-block; background: #c62828; color: white; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 4px; vertical-align: middle; }
.badge-green { background: #2e7d32; }
.badge-orange { background: #e65100; }

/* Alerta de parcelas vencidas */
.alerta-vencidas { background: #c62828; color: white; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: none; cursor: pointer; text-decoration: none; }
.alerta-vencidas:hover { background: #b71c1c; }
.alerta-vencidas .av-topo { display: flex; align-items: center; gap: 10px; }
.alerta-vencidas .av-icon { font-size: 28px; }
.alerta-vencidas .av-titulo { font-size: 15px; font-weight: 800; }
.alerta-vencidas .av-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.alerta-vencidas .av-seta { margin-left: auto; font-size: 20px; opacity: 0.8; }
.kpi-card.kpi-alerta { background: rgba(198,40,40,0.55); }

.version { text-align: center; color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 15px; }

@media (max-width: 480px) {
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .modules-grid { grid-template-columns: 1fr; }
}