:root {
    --shopee-orange: #EE4D2D;
    --shopee-light: #ff7337;
}
.bg-shopee { background-color: var(--shopee-orange); }
.text-shopee { color: var(--shopee-orange); }
.border-shopee { border-color: var(--shopee-orange); }

input[type="number"]:focus {
    border-color: var(--shopee-orange);
    outline: none;
    box-shadow: 0 0 0 2px rgba(238, 77, 45, 0.2);
}

button.bg-shopee {
    background: linear-gradient(180deg, var(--shopee-light) 0%, var(--shopee-orange) 100%);
}

#routeCanvas {
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 8px;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge-white {
    background-color: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.5);
}