:root {
        --primary: #7c3aed;
        --primary-dark: #6d28d9;
        --primary-light: #f3e8ff;
        --text-main: #0f172a;
        --text-muted: #64748b;
        --border-light: #e2e8f0;
        --bg-body: #f8fafc;
        --bg-card: #ffffff;
        --radius-xl: 16px;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
        --shadow-hover: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
        --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    }

    body {
        font-family: "Inter", sans-serif;
        background: var(--bg-body);
        color: var(--text-main);
    }

    /* Buttons */
    .btn-primary {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    /* Sidebar */
    .sidebar {
        position: sticky;
        top: 1.5rem;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
    }

    /* Location cards */
    .location-card {
        border-left: 4px solid var(--primary);
        background: var(--bg-card);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
    }
    .location-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    /* Alphabet Section Heading */
    .sticky-header {
        position: sticky;
        top: 0;
        background: var(--bg-body);
        z-index: 10;
        padding-top: 10px;
    }

    /* Scroll area */
    .alphabet-list-container {
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Mobile alphabet nav */
    .mobile-nav-scroller {
        overflow-x: auto;
        white-space: nowrap;
    }
    .mobile-nav-scroller::-webkit-scrollbar {
        display: none;
    }