/* Grid på startsidan */
.app-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 12px 92px; /* plats för bottennav */
}
@media (min-width:768px){ .app-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:981px){ .app-grid{grid-template-columns:repeat(4,1fr);} }

.app-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px; border-radius:16px; text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08); background:#fff;
}
.app-card:active{ transform: scale(.98); }
.app-icon{ font-size:32px; margin-bottom:8px; }
.app-card h3{ margin:0; font-size:16px; line-height:1.25; }

/* Bottennavigering (Global/sticky) */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background:#fff; border-top:1px solid #e9e9e9;
  padding:10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  display:flex; justify-content:space-around; align-items:center; gap:6px;
  z-index: 999;
}
.tabbar .tab {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:44px; min-height:44px; font-size:12px; line-height:1.2; text-decoration:none;
  background:transparent; border:none; color:#222; padding:6px;
}
.tabbar .tab span { display:block; font-size:12px; }
.tabbar .tab.active { color:#0a5; font-weight:600; }

/* Flytande primärknapp i mitten */
.tabbar .fab {
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.18); background:#0a5; color:#fff;
  font-size:22px; position:relative; top:-18px;
}