* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: #203027; background: #f2f7f4; }
.activity-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 4vw; background: #1f9d57; color: #fff; }
.logo { font-weight: 800; font-size: 1.25rem; }
.nav-menu { display: flex; flex: 1; gap: .5rem; flex-wrap: wrap; }
.nav-menu a { color: #fff; text-decoration: none; padding: .5rem .65rem; border-radius: 8px; }
.nav-menu a.active, .nav-menu a:hover { background: rgba(255,255,255,.2); }
.user-section { display: flex; align-items: center; gap: .5rem; }
.logout-btn { border: 1px solid rgba(255,255,255,.45); border-radius: 8px; padding: .5rem .7rem; background: transparent; color: #fff; cursor: pointer; }
.activity-main { width: min(1100px, 92vw); margin: 2rem auto; display: grid; gap: 1.25rem; }
.activity-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.activity-hero h1 { margin: 0 0 .35rem; }
.activity-hero p { margin: 0; color: #627168; }
.gps-status { padding: .5rem .75rem; border-radius: 999px; background: #e5ece8; color: #526159; }
.gps-status.active { background: #d9f8e5; color: #14763e; }
.tracker-card, .history-card { padding: 1.25rem; border: 1px solid #dce8e0; border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(38,76,55,.08); }
.activity-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.activity-controls select, .activity-controls button { min-height: 42px; padding: .6rem .9rem; border-radius: 9px; border: 1px solid #c7d6cd; }
.activity-controls button { color: #fff; border: 0; font-weight: 700; cursor: pointer; }
.activity-controls button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: #1faa5e; }.danger { background: #d94a4a; }
.live-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.25rem 0; }
.live-stats div { padding: 1rem; border-radius: 12px; background: #f1f7f3; text-align: center; }
.live-stats span { display: block; color: #647269; font-size: .82rem; }.live-stats strong { font-size: 1.25rem; }
#routeCanvas { width: 100%; height: 320px; border-radius: 12px; background: linear-gradient(135deg,#f7fbf8,#e9f4ed); }
.privacy-note { margin-bottom: 0; color: #65736b; font-size: .85rem; }
.activity-row { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid #edf1ef; }
.activity-row:last-child { border: 0; }.activity-row small { display: block; color: #738078; }
@media (max-width: 720px) { .activity-header { align-items: flex-start; flex-direction: column; }.nav-menu { order: 3; }.live-stats { grid-template-columns: repeat(2, 1fr); }.activity-row { grid-template-columns: 1fr 1fr; }.activity-hero { align-items: flex-start; flex-direction: column; } }