:root {
    --st-primary: #2d6a4f;
    --st-primary-dark: #1b4332;
    --st-accent: #95d5b2;
    --st-light: #d8f3dc;
    --st-dark: #1b4332;
}

.bg-st-primary { background-color: var(--st-primary) !important; }
.bg-st-light { background-color: var(--st-light) !important; }
.bg-st-dark { background-color: var(--st-dark) !important; }
.text-st-primary { color: var(--st-primary) !important; }

.btn-st-primary {
    background-color: var(--st-primary);
    border-color: var(--st-primary);
    color: #fff;
}
.btn-st-primary:hover {
    background-color: var(--st-primary-dark);
    border-color: var(--st-primary-dark);
    color: #fff;
}
.btn-st-accent {
    background-color: var(--st-accent);
    border-color: var(--st-accent);
    color: var(--st-dark);
    font-weight: 600;
}
.btn-st-accent:hover {
    background-color: #74c69d;
    color: var(--st-dark);
}

.hero {
    background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-primary-dark) 100%);
}

.main-content { min-height: calc(100vh - 200px); }

.stat-number { font-size: 2rem; font-weight: 700; }
.stat-label { font-size: 0.85rem; color: #666; }

.avatar-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--st-light);
    color: var(--st-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

.ride-card { transition: transform 0.2s; }
.ride-card:hover { transform: translateY(-2px); }

.feature-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--st-light);
    color: var(--st-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

.map-container { height: 400px; width: 100%; }

.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
}
.chat-mine {
    background: var(--st-primary);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 0.25rem;
}
.chat-theirs {
    background: #f0f0f0;
    margin-right: auto;
    border-bottom-left-radius: 0.25rem;
}
.chat-sender { font-size: 0.75rem; opacity: 0.8; }
.chat-time { font-size: 0.7rem; opacity: 0.6; text-align: right; }

.stat-card .stat-number { font-size: 1.75rem; }

@media (max-width: 768px) {
    .hero h1 { font-size: 1.75rem; }
    .stat-number { font-size: 1.5rem; }
}