* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    --absher-green: #016b38;
    --absher-green-gradient: linear-gradient(180deg, #016b38 0%, #006032 100%);
    --absher-green-dark: #005229;
    --absher-mint: #8fd4ad;
    --absher-mint-hover: #82c89f;
    --absher-mint-text: #05331c;
    --absher-mint-light: #9cdcb7;
    --bg-dark: #151618;
    --card-bg: #24272c;
    --card-bg-active: #2e3238;
    --input-bg: #23262b;
    --input-border: rgba(255, 255, 255, 0.08);
    --text-white: #ffffff;
    --text-label: #f1f3f6;
    --text-gray: #8d949e;
    --text-muted: #8c939d;
    --text-placeholder: #a6acb5;
    --icon-mint: #90d3ae;
    --btn-sage: #5b796a;
    --btn-sage-active: #6c8d7c;
    --btn-text: #1a2a21;
    --info-blue: #4592f7;
}

body {
    background-color: #0c0d0f;
    color: var(--text-white);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Mobile Screen Container */
.mobile-container {
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

@media (max-width: 480px) {
    body {
        background-color: var(--bg-dark);
    }
    .mobile-container {
        max-width: 100%;
        box-shadow: none;
    }
}

/* Sticky Bottom Navigation Bar */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background-color: #17191c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) 0;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    transition: color 0.15s;
}

.nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

.nav-item.active {
    color: var(--absher-mint);
}